Full Draft Rizda

UNIVERSITAS GUNADARMA
FAKULTAS ILMU KOMPUTER & TEKNOLOGI INFORMASI
PENULISAN ILMIAH
Pembuatan Website Pemesanan Masakan Rumah Pada Toko

Dapur Nunuy Menggunakan PHP
Nama : Muhammad Rizdalah Agisa

Npm : 14117220
Jurusan : Sistem Informasi
Pembimbing : Dr. Dewi Agushinta R, Skom, MSc.,
Diajukan Guna Melengkapi Sebagian Syarat Dalam Mencapai Gelar

Setara Sarjana Muda
JAKARTA
2020
i
PERNYATAAN ORIGINALITAS DAN PUBLIKASI
Saya yang bertanda tangan di bawah ini,
NPM : 14117220
Judul PI : Pembuatan website pemesanan masakan rumah pada toko

Dapur Nunuy menggunakan php
Tanggal Sidang :
Tanggal Lulus :
Dengan ini menyatakan bahwa tulisan ini adalah merupakan hasil karya
sendiri dan dapat dipublikasikan sepenuhnya oleh Universitas Gunadarma. Segala
kutipan dalam bentuk apapun telah mengikuti kaidah, etika yang berlaku. Mengenai
isi dan tulisan merupakan tanggung jawab penulis, bukan Universitas Gunadarma.
Demikian pernyataan ini dibuat dengan sebenarnya dan dengan penuh

kesadaran.
Depok, 03 Maret 2021
(Muhammad Rizdalah Agisa)
ii
LEMBAR PENGESAHAN
Judul PI : pembuatan website pemesanan masakan rumah pada

toko “Dapur Nunuy” menggunakan php
NPM : 14117220
Tanggal Sidang :
Tanggal Lulus :
Menyetujui,
Pembimbing Kasubag. Sidang PI
(Dr. Dewi Agushinta R, SKom, MSc.,) (Dr. Sri Nawangsari, SE., MM)
Ketua Jurusan Sistem Informasi
(Dr. Setia Wirawan, S.Kom., MMSI)
iii
ABSATRAK
Muhammad Rizdalah Agisa. 14117220

PEMBUATAN WEBSITE PEMESANAN MASAKAN RUMAH PADA TOKO DAPUR
NUNUY MENGGUNAKAN PHP
PI. Jurusan Sistem Informasi, Fakultas Ilmu Komputer dan Teknologi Informasi,
Universitas Gunadarma, 2021
Kata kunci : Website, Toko, PHP, Toko Online
(xiv + 44 + Lampiran)
Dapur Nunuy merupakan salah satu dari beberapa toko makanan yang ada di
wilayah Kalibata. Toko Dapur Nunuy menjual berbagai macam masakan dan
mempunyai konsumen yang cukup banyak. Persaingan toko makanan sekarang ini
sangat menjamur di kehidupan masyarakat. Maka dari itu pembuatan website ini
merupakan hal yang penting untuk membantu dalam memberikan pengenalan
masakan secara tepat yang tidak memandang ruang dan waktu. Keberadaan website
e-commerce ini diharapkan agar para konsumen dapat memperoleh kemudahan
dalam memilih dan memesan masakan yang mereka inginkan, kapan saja di mana
saja mereka berada, tanpa harus datang ke toko.
Daftar Pustaka (2002-2014)
iv
KATA PENGANTAR
Segala puji dan syukur kehadirat Tuhan Yang Maha Kuasa yang telah memberikan
berkat, anugerah dan karunia yang melimpah, sehingga penulis dapat menyelesaikan
Penulisan Ilmiah ini.
Penulisan Ilmiah ini disusun guna melengkapi Sebagian syarat dalam mencapai gelar
Setara Sarjana Muda pada jurusan Sistem Informasi, Fakultas Ilmu Komputer dan Teknologi
Informasi, Universitas Gunadarma. Adapun judul Penulisan Ilmiah ini adalah Pembuatan
website pemesanan masakan rumah pada toko Dapur Nunuy menggunakan php.
Walaupun banyak kesulitan yang penulis harus hadapi ketika menyusun Penulisan
Ilmiah ini, namun berkat bantuan dan dorongan dari berbagai pihak akhirnya tugas ini dapat
diselesaikan dengan baik. Untuk itu penulis mengucapkan terima kasih, kepada :
1. Prof. Dr. E. S. Margianti, SE., MM,. selaku Rektor Universitas Gunadarma.

2. Prof. Dr. rer. nat. Achmad Benny Mutiara, SSi., SKom., selaku Dekan Fakultas Ilmu
Komputer dan Teknologi Informasi, UniversitasGunadarma.
3. Dr. Setia Wirawan, SKom., MMSI. selaku Ketua Jurusan Sistem Informasi, Universitas
Gunadarma.
4. Dr. Sri Nawangsari, SE, MM., selaku Kasubag Sidang Penulisan Ilmiah Fakultas Ilmu
Komputer dan Teknologi Informasi, Universitas Gunadarma.
5. Ibu Dr. Dewi Agushinta R, SKom, MSc.,. selaku Dosen Pembimbing yang telah
berkenan memberikan bimbingan, dukungan, saran serta waktunya kepada penulis
selama proses pembuatan penulisan ilmiah ini berlangsung hingga selesai.
6. Bapak Imral Aldrin dan Ibu Gina Sari selaku kedua orang tua yang telah berkorban
serta banyak sekali memberikan doa, dukungan moral, dan semangat kepada
penulis.
7. Shabilla dan Rasyad trialgi selaku kakak yang selalu memberikan motivasi kepada
penulis untuk terus belajar dan berprestasi.
v
8. Sahabat-sahabat penulis yang selalu berada di saat suka maupun duka.
9. Kak Nurul Selaku pemilik toko Dapur Nunuy dan teman-teman.
10. Semua pihak yang telah memberi dukungan baik secara langsung maupun tidak
langsung yang tidak bisa disebutkan namanya secara satu-persatu.
Penulis menyadari terdapat banyak kekurangan dari penulisan ilmiah ini. Hal ini
disebabkan karena keterbatasan kemampuan, pengetahuan dan pengalaman yang dimiliki
oleh penulis. Oleh karena itu, penulis memohon maaf atas ketidaksempurnaan penulisan
ilmiah ini. Penulis mengharapkan kritik serta saran yang dapat membangun penulis agar
penulisan di masa yang akan datang akan lebih baik dan berkembang dari yang sekarang.
Demikianlah Tulisan Ilmiah ini, penulis berharap agar penulisan ilmiah ini dapat
memberikan manfaat bagi kita semua.
Jakarta, 3 Maret 2021
(Muhammad Rizdalah Agisa)
vi
DAFTAR ISI
PERNYATAAN ORISINALITAS DAN

PUBLIKASI.................................................ii
LEMBAR PENGESAHAN .........................................................................................iii
ABSTRAK ..................................................................................................................iv
KATA PENGANTAR ..................................................................................................v
DAFTAR ISI ..............................................................................................................vii
DAFTAR GAMBAR ...................................................................................................ix
DAFTAR TABEL ........................................................................................................
x
DAFTAR LAMPIRAN ..............................................................................................
xi
1. PENDAHULUAN .................................................................................................. 1
1.1 Latar Belakang .......................................................................................... 1
1.2 Batasan Masalah ....................................................................................... 2
1.3 Tujuan Penulisan........................................................................................ 2
1.4 Metode Penulisan ...................................................................................... 2
1.5 Sistematika Penulisan ............................................................................... 3
2. TINJAUAN PUSTAKA......................................................................................... 4
2.1 Sistem Informasi ...................................................................................... 4
2.2 Pengertian Website .................................................................................. 5
2.2.1 Web Browser ............................................................................. 5
2.2.2 Web Server ................................................................................ 5
2.3 Pengertian Basis Data .............................................................................. 6
2.4 Bahasa Pemrograman ...............................................................................6
vii
2.4.1 HTML (HyperText Markup Language)......................................6
2.4.2 PHP (Hyper Text Processor)......................................................7
2.4.3 CSS(Cascading Stylw Sheets)....................................................7
2.4.4 Javascript................................................................................…8
2.5 Pengertian XAMPP .........................................…………..................…...8
2.6 Pengertian MYSQL ........................................………….....................…8
2.6.1. DDL (Data Definition Language) ............…….......................9
2.6.2 DML (Data Manipulasi Language) …...….......…....…...........9
2.6.3DCL (Data Control Language)..…………...…........................10
2.7 Unified Modeling Language (UML) .............…….………...................10
2.7.1. Use Case Diagram ........................………………………….13
2.7.3. Activity Diagram .................…............……………………..14
2.8 Struktur Navigasi .........................................….......................………..14
2.8.1. Struktur Navigasi Linier ..........................................……...14
2.8.2. Struktur Navigasi Non Linier ......................................…. 15
2.8.3. Struktur Navigasi Hirarki ...............................................…. 15
2.8.4. Struktur Navigasi Campuran (Composite) ...................…. 16
2.9. Pengujian Web (Black Box Testing) .....................................………. 16
2.10. Software Pendukung .........................................................................21
3. PERANCANGAN & IMPLEMENTASI...........................................................10

3.1 Gambaran Umum ................................................................................22
3.2 Tujuan Pembuatan Website................................................................ 22
viii
3.3 Kebutuhan Perangkat.......................................................................... 23
3.4 Struktur Navigasi................................................................................ 23
3.5 Use Case Diagram............................................................................... 24
3.6 Tahapan Perancangan Basis Data (database).................................... 24
3.7 Tahapan Perancangan Antarmuka..................................................... 26
3.7.1 Rancangan Halaman Home................................................ 27
3.7.2 Rancangan Halaman Detail Product................................... 28
3.7.3 Rancangan Halaman Keranjang (Cart)............................... 28
3.7.4 Rancangan Halaman Pemesanan........................................ 29
3.7.5 Rancangan Halaman Login Admin Toko........................... 30
3.7.6 Rancangan Halaman Profile Admin................................... 31
3.7.7 Rancangan Halaman Admin Add Product.......................... 31
3.7.8 Rancangan Halaman admin table product, order................ 32
3.8 Tahapan Impelementasi Basis Data (Database)................................. 32
3.8.1 Implementasi Basis Data Tabel Admin............................... 33
3.8.2 Implementasi Basis Data Tabel Keranjang......................... 33
3.8.3 Implementasi Basis Data Tabel Pelanggan......................... 34
3.8.4 Implementasi Basis Data Tabel product............................. 34
3.8.5 Implementasi Basis Data Tabel order................................. 34
3.9 Tahapan Implementasi Antarmuka.................................................... 35
3.9.1 Implementasi Halaman Utama........................................... 36
3.9.2 Implementasi Halaman Detail Masakan............................. 37
3.9.3 Implementasi Halaman Keranjang .................................... 38
3.9.4 Implementasi Halaman Pemesanan ................................... 39
3.9.5 Implementasi Halaman Login Admin ................................ 40
3.9.6 Implementasi Halaman Profile Admin................................ 41
ix
3.9.7 Implementasi Halaman Add Product Admin....................... 42
3.9.8 Implementasi Halaman Tabel Product................................. 43
3.10. Tahap Uji Coba .............................................................................. 44
3.10.1. Blackbox Testing ..................................................................... 44
3.10.2 Tahap Uji Coba User (UAT) .................................................... 44
4. PENUTUPAN.........................................................................................….. 45
4.1Kesimpulan ......................................................................................45
4.2 Saran ........................... ........... .......................................................45
Daftar Pustaka...................................................................................................46
Lampiran……..................................................................................................L-1
x
DAFTAR GAMBAR
Gambar 2.1 Struktur Navigasi Linier ....................................................................... 14

Gambar 2.2 Struktur Navigasi Non-Linier .............................................................. 15
Gambar 2.3 Struktur Navigasi Hirarki .................................................................... 16
Gambar 2.4 Struktur Navigasi Campuran (Composit) ............................................16
Gambar 3.1. Struktur Navigasi................................................................................ 24
Gambar 3.2. Use Case Diagram............................................................................... 25
Gambar 3.3. Rancangan Menu Utama/Home ......................................................... 28
Gambar 3.4 Rancangan Detail Product ................................................................... 29
Gambar 3.5 Rancangan Keranjang ......................................................................... 29
Gambar 3.6 Rancangan Pemesanan ........................................................................ 30
Gambar 3.7 Rancangan Login Page ........................................................................ 30
Gambar 3.8 Rancangan Profile Admin ................................................................... 31
Gambar 3.9 Rancangan Admin add product ........................................................... 31
Gambar 3.10 Rancangan Tabel Product, Order, pelangan ...................................... 32
Gambar 3.11 Implementasi Basis Data ................................................................... 32
Gambar 3.12 Struktur Tabel Database ..................................................................... 33
Gambar 3.13 Tabel Admin ....................................................................................... 33
Gambar 3.14 Tabel Keranjang ................................................................................. 33
Gambar 3.15 Tabel Pelanggan ................................................................................ 34
Gambar 3.16 Tabel Product ................................................................................... 34
Gambar 3.17 Tabel Transaksi Selesai .................................................................... 34
xi
Gambar 3.18 Halaman Home .................................................................................36
Gambar 3.19 Halaman Detail Product .................................................................... 37
Gambar 3.20 Halaman Keranjang .......................................................................... 38
Gambar 3.21 Halaman Pemesanan ........................................................................ 39
Gambar 3.22 Halaman admin login ....................................................................... 40
Gambar 3.23 Halaman Profil Admin ..................................................................... 41
Gambar 3.24 Add Product Admin ...........................................................................42
Gambar 3.25 Tabel product .................................................................................... 43
xii
DAFTAR TABEL
Tabel 3.1. Admin..................................................................................... 25

Tabel 3.2. Keranjang …......................................................................... 25
Tabel 3.3. Pelanggan ........................................................................... 26
Tabel 3.4. Product ……………............................................................. 26
Tabel 3.5. Transaksi …........................................................................... 44
Tabel 3.6. Uji Coba Blackbox Testing .................................................... 44
Tabel 3.7. Tabel Uji Coba User ............................................................... 45
xiii
DAFTAR LAMPIRAN
LAMPIRAN LISTING PROGRAM....................................................................L-1

index ........................................................................................................L-1
cekout ......................................................................................................L-3
Detail .......................................................................................................L-9
function ...................................................................................................L-13
Hapus Keranjang.php .............................................................................L-18
Home.php ...............................................................................................L-18
Keranjang.php .........................................................................................L-19
Login.php ................................................................................................L-24
Product.php .............................................................................................L-26
Tambah_keranjang.php ...........................................................................L-27
Update_keranjang.php ............................................................................L-27
add_product.php ......................................................................................L-28
admin.php ................................................................................................L-32
order.php ..................................................................................................L-36
product.php ..............................................................................................L-38
order-detail.php ........................................................................................L-41
Login.php .................................................................................................L-48
ubah.php ...................................................................................................L-53
xiv
BAB I
PENDAHULUAN
1.1 Latar Belakang
Dalam menjalani kehidupan sehari-hari, makanan merupakan kebutuhan

untuk membuat tubuh menjadi sehat. Berbagai macam masakan memungkinkan
masyarakat memilih makanan apa yang diinginkan dan sesuai dengan selera mereka
masing-masing. Oleh karena itu, untuk memenuhi rasa lapar usaha penjualan
masakan menjadi salah satu usaha yang menjadi pilihan masyarakat.
Dapur Nunuy merupakan salah satu dari beberapa toko makanan yang ada di
wilayah Kalibata. Toko Dapur Nunuy menjual berbagai macam masakan dan
mempunyai konsumen yang cukup banyak. Persaingan toko makanan sekarang ini
sangat menjamur di kehidupan masyarakat.

Maka dari itu pembuatan website ini merupakan hal yang penting untuk
membantu dalam memberikan pengenalan masakan secara tepat yang tidak
memandang ruang dan waktu. Keberadaan website e-commerce ini diharapkan agar
para konsumen dapat memperoleh kemudahan dalam memilih dan memesan masakan
yang mereka inginkan, kapan saja di mana saja mereka berada, tanpa harus datang ke
toko.
Dengan begitu diharapkan pembuatan website ini dapat memudahkan
konsumen untuk melakukan pemesan makanan dan juga untuk memperluas nama
Dapur Nunuy ke masyarakat luas terutama yang berada di daerah Kalibata. Dengan
berbagai varian menu dan harga yang bersaing untuk semua kalangan.
1
1.2 Batasan Masalah
Adapun batasan masalah dalam penulisan ini antara lain :
1. Website bersifat offline.
2. Website yang dibuat tidak dapat melakukan transaksi secara online, transaksi
harus dilakukan secara langsung melalui transfer bank manual pada rekening
pribadi dan melakukan konfirmasi pada pemilik website.
3. Konfirmasi dilakukan dengan menghubungi pelanggan untuk dimintai
informasi terkait makanan yang dipesan melalui website.
1.3 Tujuan Penulisan

Membuat website penjualan masakan online pada toko dapur Nunuy dengan
harapan agar dapat memudahkan para pembeli dalam memilih dan memesan
makanan yang mereka inginkan kapan saja tanpa harus datang ke toko.
1.4 Metode Penelitian

Untuk memecahkan suatu masalah digunakan cara atau metode tertentu agar
penelitian dapat dipercaya kebenarannya . Metode yang di gunakan dalam penelitian
ini adalah:
1. Observasi : melakukan pengamatan dan pengumpulan data langsung dari
pemilik Dapur Nunuy.
2. Wawancara : memperoleh informasi tentang harga dan masakan-masakan
yang akan dipasarkan.
3. Analisis : menganalisis data informasi dan studi kasus yang telah didapat dari
hasil observasi dan wawancara.
4. Perancangan : merancang suatu tampilan interface untuk aplikasi website pada
sisi klien dan admin.
5. Implementasi : membuat website secara utuh berdasarkan perancangan.
2
1.5 Sistematika Penulisan
Berikut ini beberapa isi dari sistematika dari sistem yang dibuat, dibuat dalam
4 (empat bab).
1. Pendahuluan, membahas tentang latar belakang, rumusan masalah, tujuan
penulisan, metode penelitian, dan sistematika penulisan.
2. Landasan Teori, membahas semua teori pengertian website, sistem informasi,
xampp, basis data, PHP, MySQL dan segala tentang proses pembuatan
website ini.
3. Pembahasan, menyajikan hasil-hasil implementasi dari website yang sudah
dibuat yaitu berupa rancangan, struktur, dan hasil.
4. Penutup, menjelaskan kesimpulan yang sudah dibahas pada bab-bab
sebelumnya serta saran dan masukan.
3
BAB 2
TINJAUAN PUSTAKA
2.1 Sistem Informasi
Sistem Informasi adalah kombinasi dari teknologi informasi dan

aktivitas orang yang menggunakan teknologi itu untuk mendukung operasi
dan manajemen. Dalam arti yang sangat luas, istilah sistem informasi yang
sering digunakan merujuk kepada interaksi antara orang, proses algoritmik,
data, dan teknologi. Dalam pengertian ini, istilah ini digunakan untuk merujuk
tidak hanya pada penggunaan organisasi Teknologi Informasi dan
Komunikasi (TIK), tetapi juga untuk cara di mana orang berinteraksi dengan
teknologi ini dalam mendukung proses bisnis.
Ada yang membuat perbedaan yang jelas antara sistem informasi, dan
komputer sistem TIK, dan proses bisnis. Sistem informasi yang berbeda dari
teknologi informasi dalam sistem informasi biasanya terlihat seperti memiliki
komponen TIK. Hal ini terutama berkaitan dengan tujuan pemanfaatan
teknologi informasi. Sistem informasi juga berbeda dari proses bisnis. Sistem
informasi membantu untuk mengontrol kinerja proses bisnis.
Alter berpendapat untuk sistem informasi sebagai tipe khusus dari

sistem kerja. Sistem kerja adalah suatu sistem di mana manusia dan/ atau
mesin melakukan pekerjaan dengan menggunakan sumber daya untuk
memproduksi produk tertentu dan/ atau jasa bagi pelanggan. Sistem informasi
adalah suatu sistem kerja yang kegiatannya ditujukan untuk pengolahan
(menangkap, transmisi, menyimpan, mengambil, memanipulasi dan
menampilkan) informasi (Sutabri, 2005).
4
2.2 Pengertian Website
Website atau situs dapat diartikan sebagai kumpulan halaman–halaman

yang digunakan untuk menampilkan informasi teks, gambar diam atau gerak,
animasi, suara dan atau gabungan dari semuanya, baik yang bersifat statis
maupun dinamis yang membentuk satu rangkaian bangunan yang saling
terkait, yang masing-masing dihubungkan dengan jaringan-jaringan halaman
(Bekti, 2015).
2.2.1 Web Browser
Menurut Sibero (2014:12) “Web Browser adalah aplikasi perangkat

lunak yang digunakan untuk mengambil dan menyajikan sumber informasi
web”. Sedangkan menurut Rudyanto Arief (2011:19) “web browser adalah
program yang berfungsi untuk menampilkan dokumen-dokumen web dalam
format HTML”. 2.1.4.
2.2.2 Web Server
Menurut Sibero (2014:12) “Web Server adalah sebuah komputer yang

terdiri dari perangkat keras dan perangkat lunak”. Web server adalah program
aplikasi yang memiliki fungsi sebagai tempat menyimpan dokumen-dokumen
web. Jadi semua dokumen web baik yang ditulis menggunakan Client
scripting maupun server slide scripting tersimpan dalam direktori web server
(document root) (Rudyanto Arief ,2011:19). Secara bentuk fisik dan cara
kerjanya, perangkat keras web server tidak berbeda dengan komputer rumah
atau PC, yang membedakan adalah kapasitas dan kapabilitasnya. Perbedaan
tersebut dikarenakan web server bekerja sebagai penyedia layanan yang dapat
diakses oleh banyak pengguna, sehingga dibutuhkan kapasitas dan kapabilitas
yang besar dibandingkan PC.
5
2.3 Pengertian Basis Data
Database atau basis data adalah suatu susunan atau kumpulan data
operasional lengkap dari suatu organisasi/ perusahaan yang dikelola dan
disimpan secara terintegrasi melalui metode tertentu dengan menggunakan
komputer, sehingga mampu menyediakan informasi secara optimal yang
diperlukan pemakainya (Indrajani, 2015).
2.4 Bahasa Pemrograman
Bahasa pemograman suatu perangkat lunak yang menggunakan

bahasa- bahasa pemograman yang digunakan untuk merancang tau membuat
program sesuai keinginan dan kegunaan HTML (Hypertext Markup
Language).
2.4.1 HTML ( Hypertext Markup Language)
Pada umumnya HTML suatu bahasa yang digunakan untuk membuat

halaman web. HTML juga dikenal sebagai aplikasi yang memiliki
kemampuan browser .
Menurut Sutarman (2007:27)”HTML Hypertext Markup Language)

adalah suatu bahasa yang digunakan untuk menulis halaman web”. Sedangkan
menurut Larry (2012:3)”Hypertext Markup Language merupakan suatu
metode untuk mengimplementasikan konsep hypertext dalam suatu naskah
atau dokumen.
Jadi, dapat disimpulkan bahwa HTML adalah bahasa pemograman

yang digunakan untuk menulis halaman web dengan metode untuk
mengimplementasikan konsep hypertekt dalam suatu naskah atau dokumen.
6
2.4.2 PHP (Hypertext Preprocessor )
Pada awalnya PHP digunakan sebagai bahasa pemrograman untuk

sebuah server-side HTML-embedded dengan nama Personal Home Page
Tools. Pertama sekali dibuat oleh Rasmus Lerdorf pada tahun 1994.
Selanjutnya berganti nama menjadi FI ("Form Interpreter"), yang wujudnya
berupa sekumpulan skrip yang digunakan untuk mengolah data form dari
web. Selanjutnya Rasmus merilis kode sumber tersebut untuk umum pada
1995 dan menamakannya PHP/ FI, kependekan dari Hypertext Preprocessing/
Form Interpreter. Dengan perilisan kode sumber ini menjadi open source,
maka banyak programmer yang tertarik untuk ikut mengembangkan PHP
(Oktavian, 2010).
2.4.3 CSS (Cascading Style Sheets)
CSS adalah salah satu bahasa desain web yang bisa dilakukan untuk
mengatur sebuah halaman web menggunakan perancangan desain text berupa
size, color, font, marginz, dan lain-lain. Menurut Sibero (2013:112) “CSS
memiliki arti gaya menata halaman bertingkat, pada dasarnya setiap satu
elemen yang sudah diformat dan memiliki anak dan sudah diformat, maka
anak dari elemen tersebut secara otomatis akan mengikuti format elemen
induknya”. Menurut Abdul Kadir dan Triwahyuni (2013:323) “ CSS adalah
kode yang dimaksudkan untuk mengatur halaman web”. Sedangkan menurut
Saputra dan Agustin (2013:6) “CSS atau yang memiliki kepanjangan
Cascading Style Sheets merupakan suatu bahasa pemrograman web yang
digunakan untuk megendalikan dan membangun berbagai web agar tampilan
web terstruktur dan beragam”.
7
2.4.4 Javascript
Pada tahun 1996, JavaScript secara resmi disebut sebagai

ECMAScript, di mana ECMAScript 2 diluncurkan pada tahun 1998 dan
ECMAScript 3 diperkenalkan pada tahun 1999. ECMAScript tersebut
dikembangkan hingga akhirnya menjadi JavaScript sebagaimana yang kita
kenal saat ini. JavaScript adalah bahasa pemrograman yang bersifat client
side, JavaScript merupakan penyempurna tampilan dan sistem halaman web,
sehingga menjadi sebuah halaman yang menarik.
2.5 Pengertian XAMPP
XAMPP adalah perangkat lunak bebas yang mendukung banyak

sistem operasi. XAMPP merupakan kompilasi dari beberapa program.
Fungsinya adalah sebagai server yang berdiri sendiri (localhost) yang terdiri
atas program Apache HTTP Server, MySQL database dan penerjemah bahasa
yang ditulis dengan bahasa pemrograman PHP dan Perl. Nama XAMPP
merupakan singkatan dari X (empat sistem operasi apapun, Apache, MySQL,
PHP dan Perl). Program ini tersedia dalam GNU General Public License dan
bebas. XAMPP merupakan web server yang mudah digunakan yang dapat
melayani tampilan halaman web yang dinamis (Nugroho, 2013).
2.6 Pengertian MYSQL
MYSQL adalah salah satu jenis database server yang sangat terkenal
dan banyak digunakan untuk membangun aplikasi web yang menggunakan
database sebagai sumber dan pengolahan datanya. MySQL dikembangkan
oleh perusahaan swedia bernama MySQL AB yang pada saat ini bernama Tcx
Data Konsult AB sekitar tahun 1994-1995, namun cikal bakal kodenya sudah
8
ada sejak tahun 1979. Awalnya Tcx merupakan perusahaan pengembang
software dan konsultan database, dan saat ini MySQL sudah diambil alih oleh
Oracle Corp. MySQL merupakan database yang pertama kali didukung oleh
bahasa pemrograman skrip untuk internet (PHP dan Perl). MySQL dan PHP
dianggap sebagai pasangan software pembangun aplikasi web yang ideal.
MySQL lebih sering digunakan untuk membangun aplikasi berbasis web,
umumnya pengembangan aplikasinya menggunakan bahasa pemrograman
skrip PHP (Sudrajat, 2014).
Menurut Sidik (2014:333)”MySQL merupakan software database yang

termasuk paling popular dilingkungan linux, kepopuleran ini ditunjang karena
Performansi query dari databasenya yang saat itu biasa dikatakan paling
cepat dan jarang bermasalah”.
Menurut Setiawan dalam jurnal Khairil dkk (2012 : 60) MySQL adalah
database yang menghubungkan script PHP menggunakan perintah query dan
escape character yang sama dengan PHP.
Secara umum bahasa SQL dibagi menjadi tiga bagian ( Setiawan dalam
khairil, dkk 2012:60) yaitu:
2.6.1. DDL (Data Definition Language)
Digunakan untuk membangun objek-objek dalam sebuah database

seperti tabel. Dengan DDL kita dapat menentukan tata letak baris, definisi
kolom , kolom-kolom kunci, lokasi file dan strategi penyimpanan.
2.6.2 DML (Data Manipulasi Language)
Digunakan dalam manipulasi suatu tabel didalam database

(menambah, mengedit,mencari dan menghapus). Perintah-perintah DML
adalah SELECT, INSERT, UPDATE dan DELETE.
9
2.6.3 DCL (Data Control Language)
Digunakan untuk menangani masalah kemanan dalam database server,

dan hak-hak pada objek-objek database. Perintah-perintah yang dipakai
Berdasarkan teori tersebut dapat disimpulkan bahwa MySQL adalah
perangkat lunak jenis database yang digunakan untuk membangun aplikasi
web dengan menggunakan perintah query dan escape character yang sama
dengan PHP dan paling terkenal dilingkungan linux karena performansi query
dari database jarang bermasalah
2.7 Unified Modeling Language (UML)
Unified Modeling Language (UML) adalah sebuah bahasa yang telah

menjadi standart dalam industri visualisasi, merancang dan
mendokumentasikan sistem piranti lunak. UML dapat digunakan dalam
pembuatan model untuk semua jenis aplikasi piranti lunak, dimana aplikasi
tersebut dapat berjalan pada piranti keras, sistem oprasi dan jaringan apapun,
serta ditulis dalam bahasa pemprograman apapun. Model yang dimaksud
adalah proses merancang piranti lunak sebelum melakukan pengkodean
(coding). UML mempunyai konsep dasar class dan operation untuk
pemprograman software dengan menggunakan bahsa-bahsa pemprograman
yang berorientasi obyek.
Diagram UML sendiri terdiri atas pengelompokan diagram-diagram

sistem menurut aspek atau sudut pandang tertentu. Diagram adalah yang
menggambarkan permasalahan maupun solusi dari permasalahan suatu model.
Meskipun UML mempunyai banyak diagram, tetapi tidak semua diagram
harus digunakan dalam pembuatan suatu sistem. Berikut ini penjelasan
beberapa bagian dalam pembuatan pemodelan UML yang digunakan.
10
2.7.1. Use Case Diagram
Merupakan gambaran graphical dari beberapa atau semua actor,

karena diagram ini memberikan penjelasan umum antara sistem dengan dunia
luar serta fitur-fitur apa yang harus dimiliki oleh sistem dipandang dari dunia
luar tersebut. Suatu Use Case Diagram memiliki komponen berupa :
a. Stereotype
Menyediakan informasi tentang peranan dari elemen tanpa

menyebutkan implementasinya. Diagram untuk menggambarkan use
case dependency, calss, packagedan classifier. Stereotype merupakan
notasi, dimana dalam diagram dituliskan dengan guillemet “<<...>>”.
b. Actor
Mewakili pihak yang terlibat dalam suatu use case yang terjadi.
Actor dapat berupa manusia, sistem dan device yang memiliki peranan
dalam keberhasilan operasi dari sistem.
c. Use Case
Mengidentifikasi fitur utama dari sistem. Tanpa use case sistem

tidak dapat memenuhi permintaan actor. Use case mendefinisikan dan
menggambarkan tujuan yang harus dicapai oleh sistem.
d. Relationship
Relationship berguna untuk menggambarkan hubungan antar

actor dan use case dalam sistem. Jenis-jenis bentuk relationship
seperti ditunjukkan pada Tabel 2.1.
11
Tabel 2.1. Jenis Relationship
Relationship Fungsi Notasi

Actor Actor adalah segala hal
diluar sistem yang akan
menggunakan sistem
tersebut untuk melakukan
sesuatu.
Usecase Mengidentifikasi fitur
kunci dari sistem.
Association Jalur komunikasi antar
aktor dengan use case
yang saling berpartisipasi.
Extend Penambahan perilaku ke
dalam use case
Usecase Hubungan antara use case
Generalization
umum dengan use case
yang lebih spesifik, yang
mewarisi dan menambah
fitur terhadapnya.
Include Penambahan perilaku ke
dalam use case dasar <<include>>
yang secara eksplisit
12
2.7.2. Sequence Diagram
Sequence Diagram mempresentasikan interaksi yang terjadi antara

objek di sistem. Aspek penting dari diagram sequence adalah urutan waktu
kejadian. Hal ini berarti bahwa urutan dari interaksi antara objek direpre-
sentasikan secara langkah demi langkah. Objek-objek pada diagram sequ-
ence saling berinteraksi satu sama lain dengan mengirim “pesan”. Suatu
Sequence Diagram memiliki komponen berupa :
a. Object
Object adalah komponen berbentuk kotak yang mewakili

sebuah class atau object. Mereka mendemonstrasikan bagaimana
sebuah object berperilaku pada sebuah system.
b. Activation Boxes
Activation Boxes adalah komponen yang berbentuk persegi

panjang yang menggambarkan waktu yang diperlukan sebuah
object untuk menyelesaikan tugas. Lebih lama waktu yang
dilakukan, maka activation boxes akan lebih panjang.
c. Actors
Actors adalah komponen yang berbentuk stick figure.

Komponen yang mewakili seorang pengguna yang berinteraksi
dengan system.
d. Lifeline
Lifeline adalah komponen yang berbentuk garis putus-

putus. Lifeline biasanya memuat kotak yang berisi nama dari
sebuah object. Berfungsi menggambarkan aktifitas dari object.
13
2.7.3. Activity Diagram
Activitiy Diagram adalah diagram yang menggambarkan tentang

aktifitas yang terjadi pada sistem. Dari pertama sampai akhir, diagram ini
menunjukan langkah-langkah dalam proses kerja sistem yang di buat.
2.8 Struktur Navigasi
Struktur navigasi adalah struktur alur cerita dan sebuah program.

Sebelum, menyatukan elemen-elemen yang digunakan dalam aplikasi
multimedia, sebaiknya mendefinisikan objek-objek dan merancang
tampilan. Agar objek yang termasuk di dalam aplikasi tersebut tidak
mengalami kerancuan informasi, dengan kata lain semua tampilan harus
dapat memberikan informasi yang bulat dan utuh, sehinggan dapat tercapai
suatu pembentukan aplikasi multimedia. Dalam pembuatan aplikasi
multimedia ada empat macam struktur navigasi yang biasa digunakan.
2.8.1. Struktur Navigasi Linier
Struktur navigasi linier hanya mempunyai satu rangkaian cerita

yang berurut, yang menampilkan satu demi satu tampilan layar secara
berurut menurut urutannya. Tampilan yang dapat ditampilkan pada
struktur jenis ini adalah satu halaman sebelumnya atau satu halaman
sesudahnya, tidak dapat dua halaman sebelumnya atau dua halaman
sesudahnya.
Gambar 2.2 Struktur Navigasi Linier
14
2.8.2. Struktur Navigasi Non-Linier
Struktur navigasi non-linier atau struktur tidak berurut merupakan

pengembangan dari struktur navigasi linier. Pada struktur ini
diperkenankan membuat navigasi bercabang. Percabangan yang dibuat
pada struktur nonlinier ini berbeda dengan percabangan pada struktur
hirarki, karena pada percabangan nonlinier ini walaupun terdapat
percabangan, tetapi tiap-tiap tampilan mempunyai kedudukan yang sama
yaitu tidak ada Master Page dan Slave Page.
Gambar 2.3 Struktur Navigasi Non-Linier
2.8.3. Struktur Navigasi Hirarki
Struktur navigasi hirarki biasa disebut struktur bercabang,

merupakan suatu struktur yang mengandalkan percabangan untuk
menampilkan data berdasarkan kriteria tertentu. Tampilan pada menu
pertama 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 struktur navigasi ini tidak
diperkenankan adanya tampilan secara linier.
15
Gambar 2.4 Struktur Navigasi Hirarki
2.8.4. Struktur Navigasi Campuran (Composit)
Struktur navigasi campuran merupakan gabungan dari ketiga

struktur sebelumnya yaitu linier, non-linier dan hirarki. Struktur navigasi
ini juga biasa disebut dengan struktur navigasi bebas. Struktur navigasi ini
banyak digunakan dalam pembuatan website karena struktur ini dapat
digunakan dalam pembuatan website sehingga dapat memberikan ke-
interaksian yang lebih tinggi.
Gambar 2.5 Struktur Navigasi Campuran (Composit)
2.9. Pengujian Web (Black Box Testing)

Menurut Simarmata (2010d:316) klasifikasi black box testing
mencakup beberapa pengujian, yaitu:
1. Pengujian Fungsional (Functional Testing)
Pengujian dilakukan dalam bentuk tertulis untuk

memeriksa apakah aplikasi berjalan seperti yang diharapkan.
16
Pengujian fungsional meliputi 22 seberapa baik sistem
melaksanakan fungsinya, termasuk perintah-perintah pengguna,
manipulasi data, pencarian dan proses bisnis, pengguna layar, dan
integrasi. Pengujian fumgsional juga meliputi permukaan yang
jelas dari jenis fungsi-fungsi, serta operasi back-end (seperti,
keamanan dan bagaimana meningkatkan sistem).
2. Pengujian Tegangan (Stress Testing)
Pengujian tegangan berkaitan dengan kualitas aplikasi di

dalam lingkungan. Idenya adalah untuk menciptakan sebuah
lingkungan yang lebih menuntut aplikasi, tidak seperti saat aplikasi
dijalankan pada beban kerja normal. Pengujian ini adalah hal yang
paling sulit, cukup komples dilakukan, dan memerlukan upaya
bersama dari semua tim.
3. Pengujian Beban (Load Testing)
Pada pengujian beban, aplikasi yang terjadi pada pengujian

situs web, untk mengetahui apakah aplikasi/situs gagal atau
kinerjanya menurun. Pengujian beban beroperasi pada tingkat beban
standar, biasanya beban tertinggi akan diberikan ketika sistem dapat
menerima dan tetap berfungsi dengan baik. Perlu diketahui bahwa
pengujian beban tidak bertujuan untuk merusak sistem dengan banyak
hal, namun mencoba untuk menjaga agar sistem selalu kuat dan
berjalan dengan lancar.
4. Pengujian Khusus (Ad-Hoc Testing)
Jenis pengujian ini dilakukan tanpa penciptaan rencana

pengujian (test plan) atau kasus pengujian (test case). Pengujian
khusus dapat menemukan lubang-lubang dalam pengujian strategi dan
dapat mengekspos hubungan di antara subsistem lain yang tidak jelas.
Dengan cara ini, pengujian 23 khusus berfungsi sebagai alat untuk
memeriksa kelengkapan yang sedang diuji.
17
5. Pengujian Penyelidikan (Exploratory Testing)
Pengujian penyelidikan mirip dengan penguji khusus dan dilakukan

untuk mempelajari/mencari aplikasi. Pengujian penyelidikan
perangkat lunak ini merupakan pendekatan yang menyenangkan
untuk pengujian.
6. Pengujian Usabilitas (Usability Testing)
Pengujian ini disebut juga sebagai pengujian untuk keakraban

pengguna (testing for user-friendlines). Pengujian ini dilakukan jika
antarmuka pengguna dari aplikasinya penting dan harus spesifik
untuk jenis pengguna tertentu. Pengujian usability adalah proses yang
bekerja dengan pengguna akhir secara langsung maupun tidak
langsung untuk menilai bagaimana mereka berinteraksi dengannya.
Tujuan dari pengujian usability harus membatasi dan menghilangkan
kesulitan bagi pengguna dan untuk memengaruhi area yang kuat
untuk usabilitas maksimum.
7. Pengujian Asap (Smoke Testing)
Jenis pengujian ini disebut juga pengujian kenormalan

(sanity testing). Pengujian ini dilakukan untuk memeriksa apakah
aplikasi tersebut sudah siap untuk pengujian yang lebih besar dan
bekerja dengan baik tanpa cela sampai tingkat yang paling
diharapkan.
8. Pengujian Pemuliahan (Recovery Testing)
Pengujian pemuliahan (recovery testing) pada dasarnya

dilakukan untuk memeriksa seberapa cepat dan baiknya aplikasi bis a
pulih terhadap semua 24 jenis crash atau kegagalan hardware,
masalah bencana, dan lain-lain. Jenis atau taraf pemulihan ditetapkan
dalam persyaratan spesifikasi.
18
9. Pengujian Volume (Volume Testing)
Pengujian volume dilakukan terhadap efesiensi dari

aplikasi. Jumlah data yang besar diproses melalui aplikasi (yang
sedang diuji) untuk memeriksa keterbatasan ekstrem dari sistem.
Pengujian volume, seperti namanya, adalah pengujian sebuah sistem
(baik perangkat keras dan perangkat lunak) untuk serangkaian
pengujian dengan volume data yang dapat diproses adalah subjek dari
pengujian, seperti sistem yang dapat menangkap sistem pengolahan
transaksi penjualan real-time atau dapat membarui basis data atau
pengembalian data (data retrival).
10. Pengujian Domain (Domain Testing)
Pengujian domain merupakan penjelasan yang paling sering

menjelaskan teknik pengujian. Dugaan dasarnya adalah bahwa anda
mengambil ruang pengujian kemungkinan dari variabel individu dan
membaginya lagi ke dalam subset (dalam beberapa cara) yang sama.
Kemudia, anda menguji perwakilan dari ruang masing-masing subset.
11. Pengujian Skenario (Scenario Testing)
Pengujian skenario adalah pengujian yang realistis, kredibel

dan memotivasi stakeholder, tantangan untuk program dan
mempermudah penguji untuk melakukan evaluasi. Pengujian ini
menyediakan kombinasi variabel-variabel dan fungsi yang sangat
berarti dari pada kombinasi buatan yang anda dapatkan dengan
pengujian domain atau desain pengujian kombinasi.
12. Pengujian Regresi (Regression Testing)
Pengujian regresi adalah gaya pengujian yang berfokus

pada pengujian ulang (retesting) setelah ada perubahan. Pada
pengujian regresi berorientasi risiko (risk-oriented regreession
19
testing), daerah yang sama yang sudah diuji, akan kita uji lagi dengan
pengujian yang berbeda (semakin kompleks). Usaha regresi bertujuan
untuk mengurangi risiko berikut ini: a. Perubahan yang dimaksudkan
untuk memperbaiki bug yang gagal. b. Beberapa perubahan memiliki
efek samping, tidak memperbaiki bug lama atau memperkenalkan bug
baru.
13. Pengujian Pengguna (User Acceptance)
Pada jenis ini, perangkat lunak akan diserahkan kepada

pengguna untuk mengetahui apakah perangkat lunak memenuhi
harapan pengguna dan bekerja seperti yang diharapkan. Pada
pengembangan perangkat lunak, user acceptance testing (UAT), juga
disebut pengujian beta (beta testing), pengujian aplikasi (application
testing), dan pengujian pengguna akhir (end user testing) adalah
tahapan pengembangan perangkat lunak ketika perangkat lunak diuji
pada “dunia nyata” yang dimaksud oleh pengguna. UAT dapat
dilakukan dengan in-house testing dengan membayar relawan atau
subjek pengujian menggunakan perangkat lunak atau biasanya
mendistribusikan perangkat lunak secara gratis untuk diunduh melalui
web.
14. Pengujian Alfa (alpha testing)
Pada jenis pengujian ini, pengguna akan diundang ke pusat

pengembangan. Pengguna akan menggunakan aplikasi dan
pengembangan mencatat setiap masukkan atau tindakan yang
dilakukan oleh pengguna. Semua perilaku yang tidak normal dari
sistem dan dikoreksi oleh para pengembang.
15. Pengujian Beta (beta testing)
Pada jenis pengujian ini, perangkat lunak mendistribusikan

sebagai sebuah versi beta dengan pengguna yang menguji aplikasi di
situs mereka. Pengecualian/catat yang terjadi akan dilaporkan kepada
20
pengembang. Penguji beta dilakukan setelah penguji alfa. Versi
perangkat lunak yang dikenal dengan sebutan versi beta dirilis untuk
pengguna yang terbatas diluar perusahaan. Perangkat lunak
dilepaskan ke kelompok masyarakat agar dapat memastikan bahwa
perangkat lunak tersebut memiliki beberapa kesalahan atau bug.
2.10. Software Pendukung
Software dapat berupa program atau instruksi serta dapat dikatan

sebagai penggerak dan pengontrol hardware.
1. Sublime Text 3
Menurut Pratama (2013) “Sublime Text adalah Text

Editor yang dapat digunakan untuk membuat kode program mulai
dari PHP, HTML, CSS dan yang lainnya”. Sedangkan menurut
Yusti (2015) “Sublime Text adalah teks editor berbasis Python,
sebuah teks editor yang elegan, kaya akan fitur, cross-platform,
mudah dan simpel yang cukup terkenal di kalangan pengembang,
penulis, dan desainer.
2. Bootstrap
Menurut Alatas (2013:2) “Bootstrap merupakan framework

ataupun tools untuk membuat aplikasi web ataupun situs web
responsive secara tepat, mudah dan gratis”
21
BAB 3
RANCANGAN & IMPLEMENTASI
3.1 Gambaran Umum

Toko online atau belanja online via Internet, adalah suatu
proses pembelian barang atau jasa dari mereka yang menjual melalui
Internet. Para pelanggan dapat mengunjungi toko online (online store)
dengan mudah dan nyaman, mereka dapat melakukan transaksi di
rumah, sambil duduk di kursi mereka yang nyaman di depan komputer.
Bisnis online adalah juga sama seperti kegiatan bisnis yang kita kenal
sehari-hari. Bedanya dalam bisnis online ini adalah segala kegiatan bisnis
dilakukan secara online dengan menggunakan media Internet. Pada
dasarnya konsumen mereka dapat membeli barang apa saja dari toko online.
Berbagai produk tersedia, mulai dari buku, pakaian, alat rumah tangga,
mainan, perkakas, software dan bahkan asuransi. Itu pun hanya
merupakan sebagian kecil dari ribuan produk yang dapat dibeli oleh
konsumen melalui Internet.
3.2 Tujuan Pembuatan Website

Tujuan dari toko online Dapur Nunuy adalah sebagai berikut :
1. Mendapatkan penghasilan : dengan dibuatnya website ini
diharapkan mendapat penjualan yang tinggi dan luas, yang
akhirnya mendapat penghasilan yang lebih tinggi.
2. Mendapatkan pengunjung : besar pengunjung suatu situs web
berbanding lurus dengan uang yang didapatkan.
3. Berkomunikasi : harus mampu memastikan tampilan dan isi web kita
dapat dimengerti dengan baik oleh customer. Begitu juga cara
bekomunikasinya.
22
3.3 Kebutuhan Perangkat
Dalam pembuatan aplikasi website ini, menggunakan
perangkat lunak (software) dan perangkat keras (hardware) dengan
rincian hardware yang digunakan yaitu :
1. Intel Core i5
2. Random Access Memory (RAM) 4GB
3. Video Graphic Audio (VGA) NVIDIA GEFORCE 840M
4. Harddisk 500gb
Rincian untuk software yang digunakan yaitu :
1. Windows 10 Pro 64Bit Operating System
2. XAMPP Control Panel v3.2.2
3. Sublime Text 3/ Visual Studio Code
4. Google Chrome Version 58.0.3029.110 (64-bit)
3.4 Struktur Navigasi

Gambar 3.1 berikut adalah struktur navigasi yang terdapat
pada website dapur Nunuy. Struktur navigasi termasuk struktur yang
paling penting dalam pembuatan suatu aplikasi dan gambaran harus
sudah ada pada tahap perencanaan. Peta navigasi merupakan
rancangan hubungan dan rantai kerja dari beberapa area yang berbeda
dan dapat membantu mengorganisasikan seluruh elemen aplikasi.
Gambar 3.1 Struktur Navigasi
23
3.5 Use Case Diagram
Gambar 3.2 Use Case Diagram
Use case di gambar 3.2 menunjukkan bahwa pemilik atau admin dapat
mengelola data toko, pelanggan, delete data, view data, insert produk
masakan, view produk, delete produk, dan update produk. Sedangkan
pelanggan dapat melihat produk, menambah produk ke keranjang, dan
melakukan order produk yang telah dimasukkan ke dalam keranjang.
3.6 Tahapan Perancangan Basis Data (database)

Pada tahap ini akan dilakukan pembuatan struktur
rancangan database yang selanjutnya akan dipakai untuk implementasi
pembuatan database yang sesungguhnya, dengan nama database
“dapur_nunuy” yang terdiri dari beberapa tabel yaitu :
1. Tabel Admin
Tabel admin di tabel 3.1 berisi 9 kolom/ field yaitu id_admin, nama_toko,
gambar_toko, username, password, email, alamat nomor HP, description.
Tabel 3.1 admin
NAMA KOLOM TIPE DATA KETERANGAN
Id_Admin (PK)** Int(11) Id Admin
Nama_Toko Varchar(35) Nama Toko
Gambar_Toko Varchar(150) Gambar Profil Toko
24
USERNAME Varchar(15) Username Admin
Password Varchar(15) Password Admin
Email Varchar(25) Email
No HP Varchar(20) Nomor handphone
Alamat Varchar(50) Alamat
Description Varchar (200) Deskripsi
2. Tabel Keranjang
Tabel 3.2 adalah tentang keranjang pelanggan, berisi 6 kolom/ field yaitu
id_keranjang, id_pelanggan, id_product, nama product, banyak product,
harga product.
Tabel 1.2 Keranjang
Id_Keranjang (PK)** Int(11) id_keranjang
Id_Pelanggan Int(11) id_pelanggan
Id_Product Int(11) id_produk
Nama_Product Varchar(100) Nama Produk
Banyak Product Int(12) jumlah produk
Harga Product Int(12) harga produk
3. Tabel Pelanggan
Tabel 3.3 adalah tentang pelanggan, berisi 11 kolom/ field yaitu
id_pelanggan, nama_pelanggan, alamat, nomor, email, kelurahan,
kecamatan, kota, kodepos, ongkir, waktu.
Tabel 3.3 Pelanggan
Id_Pelanggan (PK)** Int(11) id_pelanggan
Nama_Pelanggan Varchar(25) nama pelanggan
Alamat Varchar(25) alamat pelanggan
Nomor Varchar(13) nomor pelanggan
Email Varchar(30) email pelanggan
Kelurahan Varchar(15) kelurahan
Kecamatan Varchar(15) kecamatan
Kota Varchar(15) kota
Kodepos Varchar(7) kodepos pada kota
Ongkir Varchar(12) Ongkos kirim
Waktu Varchar(100) waktu belanja
25
4. Tabel Product
Tabel product di tabel 3.4 berisi 6 kolom/ field yaitu id_product,
nama_product, gambar, harga, stock, description.
Tabel 3.4 Product
NAMA KOLOM TYPE DATA KETERANGAN
Id_Product (PK)** Int(11) Id Produk
Nama_Product Varchar(100) Nama Produk
Gambar Varchar(200) Gambar_Produk
Harga Int(100) Harga Produk
Stock Int(255) Stok Produk
Description Text Deskripsi Produk
5. Tabel Transaksi Selesai

Tabel 3.5 berisi transaksi pelanggan berisi 12 kolom/ field yaitu id
transaksi, id_pelanggan, nama_pelanggan, alamat, nomor, email,
kelurahan, kecamatan, kota, kodepos, ongkir, waktu.
Tabel 3.5 Transaksi
Id_Transaksi (PK)** Int(11) Id Transaksi
Id_Pelanggan Int(11) Id_Pelanggan
Nama_Pelanggan Varchar(25) Nama Pelanggan
Alamat Varchar(25) Alamat Pelanggan
Nomor Varchar(13) Nomor Pelanggan
Email Varchar(30) Email Pelanggan
Kelurahan Varchar(15) Kelurahan
Kecamatan Varchar(15) Kecamatan
Kota Varchar(15) Kota
Kodepos Varchar(7) Kodepos Pada Kota
Ongkir Varchar(12) Ongkir
Waktu Varchar(100) Waktu Belanja
3.7 Tahapan Perancangan Antarmuka

Pada tahap ini yang dilakukan yaitu membuat desain/
rancangan tampilan website yang akan dibuat dan untuk selanjutnya
rancangan tersebut akan diimplementasikan dalam bentuk website.
26
3.7.1 Rancangan Halaman Home
Antarmuka sistem diperlukan untuk memudahkan user
dalam mengakses website atau sistem. Antarmuka menyediakan
tampilan halaman yang digunakan untuk proses input hingga
menghasilkan ouput yang sesuai dengan kebutuhan. Rancangan
halaman home dapat dilihat di gambar 3.3.
Nama toko Cart Login
Logo toko
Product 1 Product 2 Product 3 Product 3
FOOTER
Gambar 3.3 Rancangan Tampilan Home
27
3.7.2 Rancangan Halaman Detail Product
Tampilan halaman detil produk di gambar 3.4 berfungsi
bagi member untuk melihat lebih rinci barang yang akan dibeli.
Nama logi
Navbar Cart
toko n
GAMBAR
Detail Product
PRODUCT
FOOTER
Gambar 3.4 Rancangan Detail Product
3.7.3 Rancangan Halaman Keranjang (Cart)

Tampilan keranjang pada gambar 3.5 berguna bagi
pelanggan untuk melihat dan menghitung total belanja yang dibeli.
Nama logi
Navbar
toko n
GAMBAR Detail Product Jumlah

PRODUCT Pembelian
GAMBAR Detail Product

PRODUCT
FOOTER
Gambar 3.5 Rancangan Keranjang
28
3.7.4 Rancangan Halaman Pemesanan
Halaman pelanggan di gambar 3.6 untuk melakukan
pembelian dengan mengisi data pembelian dan melakukan cek
ongkos kirim terlebih dahulu.
Nama logi
Navbar
toko n
IsI Data Pembelian Cek Ongkir
FOOTER
Gambar 3.6 Rancangan Pemesanan
3.7.5 Rancangan Halaman Login Admin Toko

Halaman untuk memulai penggunaan/ akses program.
Admin diminta untuk memasukkan Username dan Password
dengan benar sebelum dapat mengakses dashboard admin, seperti
gambar 3.7.
Gambar 3.7 Rancangan Login Page
29
3.7.6 Rancangan Halaman Profile Admin
Tampilan menu Dashboard Admin di gambar 3.8 dapat
diakses melalui menu utama setalah member login, berfungsi bagi
admin untuk melihat profil.
Navbar logout
Profile
toko
MENU
FORM UBAH DETAIL TOKO
ADMIN
Detail Toko
Gambar 3.8 Rancangan Profile Admin
3.7.7 Rancangan Halaman Admin Add Product

Tampilan menu Dashboard Admin dapat diakses melalui
menu utama setalah member login, berfungsi bagi admin untuk
menambahkan produk, terlihat di gambar 3.9.
Navbar logout
ISI DATA
MENU ISI DATA PRODUCT
PRODUCT
ADMIN
Gambar 3.9 Rancangan Admin add product
30
3.7.8 Rancangan Halaman admin table product, order, transaksi selesai
Tampilan menu Dashboard Admin bagian tabel dapat
diakses melalui menu utama setelah member login, berfungsi bagi
admin untuk melihat produk yang telah diinput, melihat pelanggan
yang sudah melakukan order, melihat transaksi yang sudah selesai,
seperti di gambar 3.10.
Gambar 3.10 Rancangan Tabel Product, Order, Transaksi
3.8 Tahapan Impelementasi Basis Data (Database)
Gambar 3.11 Implementasi Basis Data

Pada implementasi basis data ini menggunakan phpMyAdmin, fitur
ini sudah disediakan ketika memasang aplikasi XAMPP. Yang perlu
31
dilakukan saat membuat database adalah menyalakan MySQL dengan
cara menekan tombol start.
Gambar 3.12 Struktur Tabel Database
Selanjutnya membuat database yang bernama dapur_nunuy yang

terdiri dari 5 Tabel seperti di gambar 3.12. Implementasi tabel dapat
dilihat pada gambar 3.13, gambar 3.14, gambar 3.15, gambar 3.16 dan
gambar 3.17 dibawah ini.
3.8.1 Implementasi Basis Data Tabel Admin
Gambar 3.13 Tabel Admin
3.8.2 Implementasi Basis Data Tabel Keranjang
Gambar 3.14 Tabel Keranjang
32
Gambar 3.15 Tabel Pelanggan
Gambar 3.16 Tabel Product
Gambar 3.17 Tabel Transaksi Selesai
33
3.9 Tahapan Implementasi Antarmuka
Pada tahapan ini akan dilakukan implementasi pembuatan website
berdasarkan rancangan yang telah dibuat sebelumnya, terdiri dari 8
halaman yaitu:
1. Pembuatan halaman home
2. Pembuatan halaman detail masakan
3. Pembuatan halaman keranjang
4. Pembuatan halaman pemesanan
5. Pembuatan halaman login
6. Pembuatan halaman profile admin
7. Pembuatan halaman input product
8. Pembuatan halaman tabel (Product, Order, Transaksi Admin).
Pada implementasi pembuatan website ini

digunakan bahasa pemrograman PHP, HTML, CSS,
JavaScript. Dan juga disertai software pendukung XAMPP
untuk melakukan implementasi pada server local. Juga
digunakan software Sublime Text sebagai code editor
untuk menulis dan mengedit program. Sebelum memulai
implementasi beberapa hal yang harus disiapkan yaitu:
1. Membuat folder dengan nama “penjualan” di dalam folder

“C:/xampp/htdocs”
2. Mengunduh dan instalasi aplikasi XAMPP dan Sublime Text
3. Menginstalasi browser Google Chrome.
34
3.9.1 Implementasi Halaman Utama
Berikut ini adalah source code yang ada pada halaman home.
<?php
session_start();
include 'function.php';
$products = query("SELECT * from product");
$data = query("SELECT * FROM admin")[0];
?>
…………
Untuk melihat source code lengkap ada pada bagian Lampiran halaman L-1
Dengan nama Index.php
Gambar 3.18 Halaman Home
35
3.9.2 Implementasi Halaman Detail Masakan
Berikut ini adalah potongan source code yang ada pada halaman
Detail masakan.
<?php
session_start();
$id_product = $_GET['id_product'];
$products = query("SELECT * from product WHERE
id_product = $id_product")[0];
?>
……..
Untuk melihat program lengkap ada pada bagian Lampiran halaman L-9 d engan
nama detail.php
Gambar 3.19 Halaman Detail Product
36
3.9.3 Implementasi Halaman Keranjang
keranjang.
<?php
session_start();
?>
……….
Untuk melihat program lengkap ada pada bagian Lampiran halaman L-19
dengan nama keranjang.php
Gambar 3.20 Halaman Keranjang
37
3.9.4 Implementasi Halaman Pemesanan
pemesanan.
<?php
session_start();
$nama = "";
$alamat = "";
……….
dengan nama cekout.php
Gambar 3.21 Halaman Pemesanan
38
3.9.5 Implementasi Halaman Login Admin
Berikut ini adalah potongan source code yang ada pada halaman login.
<?php
session_start();
Include '../function.php';
if ( isset( $_SESSION['login']) ) {
header('Location: dashboard.php?page=admin');
}
……….
dengan nama login.php
Gambar 3.22 Halaman admin login
39
3.9.6 Implementasi Halaman Profile Admin
profile admin.
<?php
include '../function.php';
?>
<main>
……….
dengan nama admin.php
Gambar 3.23 Halaman Profil Admin
40
3.9.7 Implementasi Halaman Add Product Admin
add product admin.
<?php
if (isset($_POST['submit'])) {
if (tambah($_POST) > 0) {
echo (" <script>
……
dengan nama add_product.php
Gambar 3.24 Add Product Admin
41
3.9.8 Implementasi Halaman Tabel Product
tabel product.
<?php
require '../function.php';
$product = query("SELECT * FROM product");
if(isset($_SESSION['logout'])){
session_unset();
……
dengan nama product.php
Gambar 3.25 Tabel product
42
3.10. Tahap Uji Coba
Pada tahap ini website akan diuji dengan menggunakan blackbox testing
dan uji coba user.
3.10.1. Blackbox Testing

Blackbox testing adalah uji coba yang bertujuan agar dapat
mengetahui apakah fungsi-fungsi pada website dapat berjalan
dengan benar sesuai dengan yang diharapkan, seperti pada tabel 3.6
berikut ini.
Tabel 3.6 Uji Coba Blackbox Testing

No Skenario Hasil yang diharapkan Hasil yang terjadi
1 User membuka Halaman utama dapat Halaman utama

halaman indeks (menu terbuka dapat terbuka
utama)
2 User menambahkan Produk yang dipilih Produk yang dipilih
produk ke keranjang masuk ke keranjang masuk ke keranjang
3 User membuka detil Halaman data produk Halaman data
produk dapat terbuka produk dapat terbuka
4 User menginput data Data order dapat Data order dapat
order terbaca oleh admin terbaca oleh admin
5 Admin membuka dan Admin berhasil login Admin berhasil
melakukan login login
6 Admin menginput, Data yang diinput oleh Data yang diinput
mengupdate, admin masuk ke oleh admin masuk ke
menghapus data barang database database
7 Admin dapat melihat Admin dapat melihat Admin dapat melihat
data order user produk yang dipesan produk yang dipesan
oleh user oleh user
3.10.2 Tahap Uji Coba User (UAT)

Pada uji coba kali ini merupakan cara untuk mengevaluasi sebuah
aplikasi dengan cara mengujinya kepada calon pengguna. Umumnya,
selama pengujian, pengguna akan mencoba untuk menyelesaikan tugas
43
yang diberikan, sementara pemilik aplikasi akan mengamati, mendengar,
dan mencatat hasil dari uji coba yang dilakukan oleh user.
STEP 1. User Menambahkan makanan yang dipilih kedalam keranjang.
STEP 2. User mengurangi, menambah, menghapus makanan yang telah
dipilih di dalam keranjang.
STEP 3. User Melakukan Cekout makanan yang dipilih.
STEP 4. User mengisi data order berupa identitas & alamat.
Tabel 3.7 Tabel Uji Coba User

Step 1 Step 2 Step 3 Step 4
User 1 r
User 2
User 3
Lancar
Cukup Lama
Tidak Berjalan
44
BAB 4
PENUTUPAN
4.1 Kesimpulan
Kesimpulan dari penelitian ini adalah website Dapur Nunuy ini

dapat mendukung dan membantu para ibu rumah tangga yang tidak sempat
untuk memasak dan menjadi pilihan alternative untuk membeli masakan
secara online tanpa harus datang langsung ke tempat dan tentunya ini
sangat membantu pada situasi pandemi covid-19 yang disarankan untuk
tetap dirumah, serta penetapan harga pada toko dapur nunuy tersebut
tergantung pada bahan makanan yang di olah sehingga bisa menjadi
masakan yang siap untuk di hidangkan.
Dari hasil pengujian yang telah saya lakukan dapat ditarik

kesimpulan bahwa website Dapur Nunuy ini layak untuk di gunakan oleh
masyarakat umum secara masal karena sudah lolos uji kelayakan dengan
menggunakan proses Uji Coba User Testing.
4.2 Saran
Penulis menyarankan dalam pengembangan website Dapur Nunuy

ini lebih lanjut yaitu dengan menambah fitur pelayanan pada website
sehingga dapat menjadi lebih baik atau sesuai apa yang dibutuhkan oleh
pengguna untuk mengikuti perkembangan yang ada, serta ada umpan balik
atau ulasan supaya website yang telah dijalankan dan pelayanan yang akan
diadakan selanjutnya dapat menjadi lebih baik.
45
DAFTAR PUSTAKA
Abdul Kadir. 2002, Dasar Pemrograman Web Dinamis Menggunakan PHP, Andi
Offset, Yogyakarta
AL-Bahra Bin Ladjamudin, Analisis Dan Desain Sistem Informasi

Supriyanto, A. 2005, Sistem Informasi
Hidayatullah, P. 2014. Pemrograman Web. Bandung : Informatika
Kadir, Abdul. 2014. Pengenalan Sistem Informasi. Yogyakarta : Andi.
Ladjamudin, Al-Bahra Bin. 2013. Analisis dan Desain Sistem Informasi.

Yogyakarta: Graha Ilmu.
Nugroho, Bunafit. 2014. Pemrograman Web :Membuat Sistem Informasi

Akademik Sekolah dengan PHP-MySql dan Dreamweaver. Yogyakarta: Gava
Media.
46
LAMPIRAN
Index.php
<?php
session_start();
$products = query("SELECT * from product");
?>
<!DOCTYPE html>
<html>
<head>
<title>product</title>
<link rel="stylesheet" type="text/css" href="./assets/css/main.css">
<link rel="stylesheet" type="text/css"
href="./assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="./assets/bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="./assets/fontawesome/css/all.css">
<link rel="stylesheet" type="text/css" href="./assets/fontawesome/css/svg-with-
js.min.css">
js.css">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">

<link rel="stylesheet" href="assets/css/style.css">
<style type="text/css">
.categories{
font-size: 15px;
color: #9e9e9e;
} .circle-image {
width: 300px;
height: 250px !important;
overflow: hidden;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark bg-company-red">

<a class="navbar-brand" style="color: #00ffff;" ><strong>DAPUR
NUNUY</strong></a>
L-1
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-
expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">

<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="index.php">Home <span class="sr-
only">(current)</span></a>
</li>
</ul>
<a href="keranjang.php" class="btn btn-warning btn-md my-0
p" type="submit" style="margin-right: 8px;">
<span class="badge badge-pill red"><?php if (isset($_SESSION['keranjang']))
{
echo count($_SESSION['keranjang']); } else {
echo 0;
} ?></span>
<i class="fas fa-shopping-cart ml-1"></i>

</a><?php ?>
<a href="admin/login.php" class="btn btn-primary ">Login</a>
</div>
</nav>
<?php include 'home.php'; ?>
<div class="footer-dark">
<footer>
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-3 item text">
<h3><i class="fas fa-map-marker-alt"></i> Alamat</h3>
<p><?= $data['alamat'] ?></p>
</div>
<h3><i class="fas fa-mobile-alt"></i> Telepon</h3>
<p><?= $data['nomor_hp'] ?></p>
</div>
<div class="col-md-6 item text">
<h3><i class="fab fa-readme"></i> Tentang Kami</h3>
<p><?= $data['description'] ?></p>
</div>
</div>
L-2
</footer>
</div>
</body>
<script>
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script type="text/javascript" src="./assets/bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="./assets/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="./assets/bootstrap/js/bootstrap.bundle.js"></script>

</html>
Cekout.php
<?php
session_start();
$nama = "";
$alamat = "";
$nomor = "";
$email = "";
$kota = "";
$kecamatan = "";
$kelurahan = "";
$kode = "";
$ongkir = 0;
$harga_total = 0;
foreach ($_SESSION['keranjang'] as $id_product_keranjang => $jumlah) {

$products = query("SELECT * FROM product where id_product =
$id_product_keranjang")[0];
$total = $products['harga']*$jumlah;
$harga_total += $total;
}
if (isset($_POST['ongkir'])) {
if ($_POST['kota'] == "jakarta" || $_POST['kota'] == "Jakarta" || $_POST['kota'] ==
"depok") {
$ongkir = 10000;
$nama .= $_POST['nama'];
$alamat .= $_POST['alamat'];
$nomor .= $_POST['nomor'];
L-3
$email .= $_POST['email'];
$kota .= $_POST['kota'];
$kecamatan .= $_POST['kecamatan'];
$kelurahan .= $_POST['kelurahan'];
$kode .= $_POST['kodepos'];
} else {
$ongkir = 20000;
$nama .= $_POST['nama'];
$alamat .= $_POST['alamat'];
$nomor .= $_POST['nomor'];
$email .= $_POST['email'];
$kota .= $_POST['kota'];
$kecamatan .= $_POST['kecamatan'];
$kelurahan .= $_POST['kelurahan'];
$kode .= $_POST['kodepos'];
}
}
if (isset($_POST['submit'])) {
if (pelanggan($_POST) > 0) {
$id_pelanggan = query("SELECT * FROM pelanggan ORDER BY id_pelanggan DESC LIMIT

1;")[0];
$id_pelanggan = $id_pelanggan['id_pelanggan'];
//-----------------------------------------------------
// print_r($_SESSION['keranjang']); die;
foreach ($_SESSION['keranjang'] as $id_product_keranjang => $jumlah){
$products = query("SELECT * FROM product where id_product =
$total = $products['harga']*$jumlah;
$nama_product = $products["nama_product"];
$id_product = $products['id_product'];
$harga_product = $products["harga"];
$query = "INSERT INTO keranjang VALUES
('','$id_pelanggan','$id_product', '$nama_product', '$jumlah', '$harga_product')";
mysqli_query($conn, $query);
}
session_unset();
echo (" <script>
alert('data berhasil ditambahkan');
document.location.href = 'index.php';
</script>");
L-4
} else {
echo (" <script>
alert('data gagal ditambahkan silakan masukan data ulang');
</script>");
echo($conn -> error);
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-
fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design Bootstrap</title>

<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">

<link href="assets/MDB/css/bootstrap.min.css" rel="stylesheet">


<link href="assets/MDB/css/mdb.min.css" rel="stylesheet">

<link href="assets/MDB/css/style.min.css" rel="stylesheet">
</head>
<body >

<a class="navbar-brand" style="color:#00ffff;"><strong>DAPUR
NUNUY</strong></a>
</button>

<li class="">
L-5
</li>
</ul>
<ul class="navbar-nav mr-10">
<a class="btn btn-primary btn-sm" href="">login</a>
</ul>
</div>
</nav>
<main class="mt-2 pt-2" style="margin-bottom: 50px;">

<div class="container wow fadeIn">
<h2 class="my-5 h2 text-center">Checkout form</h2>
<form class="card-body" action="" method="post">

<div class="row">
<div class="col-md-8 mb-4">

<div class="card">
<div class="card-body" action="" method="post">
<div class="md-form mb-2">

<input required="" type="text" id="nama" name="nama" class="form-
control" placeholder="Nama lengkap" value="<?= $nama; ?>">
<input type="hidden" id="ongkir" value="<?= $ongkir ?>"
name="ongkir">
</div>
<div class="row">
<div class="md-form ">
<input required="" type="email" id="email" name="email" class="form-
control" placeholder="Email" value="<?= $email; ?>">
</div>
</div>

<div class="md-form">
<input required="" type="text" id="nomor" name="nomor" class="form-
control" placeholder="Nomor HP" value="<?= $nomor; ?>">
</div>
</div>
</div>
L-6
<div class="row">
<input required="" type="text" id="alamat" name="alamat" class="form-
control" placeholder="Alamat" value="<?= $alamat; ?>">
</div>
</div>

<input required="" type="text" id="kodepos" name="kodepos" class="form-
control" placeholder="kode pos" value="<?= $kode; ?>">
</div>
</div>
</div>
<div class="row">
<input required="" type="text" id="kecamatan" name="kecamatan"
class="form-control" placeholder="Kecamatan" value="<?= $kecamatan; ?>">
</div>
</div>

<input required="" type="text" id="kelurahan" name="kelurahan"
class="form-control" placeholder="kelurahan" value="<?= $kelurahan; ?>">
</div>
</div>

<input required="" type="text" id="kota" name="kota" class="form-control"
value="<?= $kota; ?>" placeholder="kota">
</div>
</div>
</div>
<?php if (!isset($_POST['ongkir'])) { ?>
<button class="btn btn-
primary btn-lg btn-block" type="submit" name="submit" disabled="" >Submit</button>
<br><h6 class="alert
alert-danger" style="color: red;">Anda harus cek ongkir terlebih dahulu !!</h6>
<?php } else {
echo '<button class="btn btn-primary btn-lg btn-block" type="submit" name="submit"
>Submit</button>';
L-7
} ?>
</div>
</div>
</div>

<div class="card mb-3">
<div class="card-body">
<h4 class="d-flex justify-content-between align-items-center mb-3">
<span class="text-muted">Your cart</span>
<span class="badge badge-warning badge-pill">3 <i class="fas fa-shopping-cart
ml-1"></i></span>
</h4>
<ul class="list-group list-group-flush">
<li class="list-group-item d-flex justify-content-between align-items-center

border-0 px-0 pb-0">
Total harga barang
<span><?= number_format($harga_total); ?></span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center px-0">
Ongkir
<span><?= number_format($ongkir) ?></span>
</li>
border-0 px-0 mb-3">
<div>
<strong>Jumlah yang </strong>
<strong>
<p class="mb-0">harus dibayar</p>
</strong>
</div>
<?php $harga_fix = $harga_total + $ongkir; ?>
<span><strong><?= number_format($harga_total + $ongkir); ?
></strong></span>
</li><?php if (!isset($_POST['ongkir'])) {
echo '<button
type="submit" class="btn btn-primary" name="ongkir" >Cek ongkir</button>';
}
?>
</ul>
</div>
</div>
L-8
</div>
</div>
</form>
</div>
</main>
<footer>
<div class="row">
</div>
</div>
</div>
</div>
</footer>
</div>
</body>
<script type="text/javascript" src="assets/MDB/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="assets/MDB/js/popper.min.js"></script>
<script type="text/javascript" src="assets/MDB/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/MDB/js/mdb.min.js"></script>

</html>
Detail.php
<?php
session_start();
L-9
$products = query("SELECT * from product WHERE id_product = $id_product")[0];
if (isset($_POST['cart'])) {
}
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
js.min.css">
js.css">
</head>
<body>
<a class="navbar-brand" style="color:cyan"><strong>DAPUR
NUNUY</strong></a>
</button>

</li>
</ul>
<a href="keranjang.php" class="btn btn-warning btn-md my-0 p"
type="submit" style="margin-right: 8px;">
<span class="badge badge-pill red"><?php if (isset($_SESSION['keranjang']))
{
echo count($_SESSION['keranjang']); } else {
echo 0;
} ?></span>
<i class="fas fa-shopping-cart ml-1"></i>
L-10
</a><?php ?>
<a href="login.php" class="btn btn-primary ">Login</a>
</div>
</nav>
<main class="mt-5 pt-4">

<div class="container dark-grey-text mt-5">

<div class="row wow fadeIn">

<img style="width: 400px; height: 350px;" src="img/<?= $products['gambar'] ?>"

class="img-fluid" alt="">
</div>



<div class="p-1">

<h2 style="color: blue"><?= $products['nama_product'] ?></h2>
<p class="lead">
<span class="mr-1">
<del> </del>
</span>
<b><span class="mr-1" style="color:red;">Rp.<?=
number_format($products['harga']) ?> </span></b>
L-11
</p>
<span class="lead font-weight-bold">Stock : </span><?= $products['stock'] ?>
Porsi

<p class="lead font-weight-bold">Description</p>
<?= $products['description'] ?>
<p>
</p>
<form class="d-flex justify-content-left" action="" method="post">

<a href="tambah_keranjang.php?id_product=<?= $products['id_product'] ?>"
class="btn btn-primary btn-md my-0 p" type="submit">Add to chart
</a>
</form>
<a href="index.php">Cancel</a>
</div>

</div>

</div>

<hr>


</div>
</main>
<footer>
<div class="row">
</div>
L-12
</div>
</div>
</div>
</footer>
</div>

</body>
<script type="text/javascript" src="./assets/bootstrap/js/popper.min.js"></script>
<script type="text/javascript"
src="./assets/bootstrap/js/bootstrap.bundle.js"></script>
src="./assets/bootstrap/js/core/jquery.3.2.1r.min.js"></script>
</html>
Function.php
<?php
$conn = mysqli_connect("localhost","root","","dapur_nunuy");
function query($query){
global $conn;
$result = mysqli_query($conn, $query);
$rows = [];
while ( $row = mysqli_fetch_assoc($result) ) {
$rows[]= $row;
}
if (!$result) {
die('Could not query:' . mysql_error());
}
return $rows;
function pelanggan($data){
global $conn;
$ongkir = $data['ongkir'];
$nama = $data['nama'];
$alamat = $data['alamat'];
$nomor = $data['nomor'];
L-13
$email = $data['email'];
$kota = $data['kota'];
$kecamatan = $data['kecamatan'];
$kelurahan = $data['kelurahan'];
$kode = $data['kodepos'];
$date = date("d-m-Y");
$query = "INSERT INTO pelanggan VALUES

('','$nama','$alamat', '$nomor', '$email', '$kelurahan', '$kecamatan', '$kota',
'$kode','$ongkir','$date')";
return mysqli_affected_rows($conn);
}
function tambah($data){
global $conn;
'$_POST['harga']', '$_POST['stock']', '$_POST['kategori']', '$_POST['berat']',
'$_POST['description']')";
// $id_product = $data['id_rental'];
$nama = $data['nama']; //htmlspecialchars($data['nama'])
$gambar = $data['gambar']; //htmlspecialchars($data['kelas'])
$harga = $data['harga'];
$stock = $data['stock'];
$description = $data['description'];
$gambar = upload($nama,$kategori);
if ( !$gambar) {
return false;
}
$query = "INSERT INTO product VALUES

('','$nama','$gambar', '$harga', '$stock', '$description')";
}
function upload($nama,$kategori){
$namaFile = $_FILES['gambar']['name'];
$ukuranFile = $_FILES['gambar']['size'];
$error = $_FILES['gambar']['error'];
$tmp = $_FILES['gambar']['tmp_name'];
//cek apakah tidak ada gambar yang diupload 4 adalah pesan error artinya tidak ada
gambar yg diupload
L-14
if( $error === 4 ) {
echo "<script>
alert('Pilih gambar terlebih dahulu')
</script>";
return false;
}
$ekstensiFile = ['jpg','png','jpeg'];
$ekstensiGambar = explode('.', $namaFile);
$ekstensiGambar = end($ekstensiGambar);
$ekstensiGambar = strtolower($ekstensiGambar); if ( !in_array($ekstensiGambar,
$ekstensiFile)) {
echo "<script>
alert('yang anda upload bukan gambar')
</script>";
return false;
}
// cek ukuran gambar terlalu besar dari data yang ditetapkan

if ($ukuranFile > 1000000) {
echo "<script>
alert('Ukuran gambar terlalu besar maks 1MB')
</script>";
return false;
}
// $namaFileBaru = uniqid(); //membuat string random agar nama gambar tidak sama
dan menimpa file gambar yg lain
$namaFileBaru = $nama;
$namaFileBaru .= '_'.uniqid();
$namaFileBaru .= '_'.$namaFile;
//jika lolos semua pengecekan data gambar siap di kembalikan dan di simpan kedalam
folder img
move_uploaded_file($tmp, '../img/'.$namaFileBaru);
return $namaFileBaru;
}
function hapus($id){
global $conn;
$query = "DELETE FROM product WHERE id_product = $id";
}
function hapus_pelanggan($id){
global $conn;
L-15
$query = "DELETE FROM pelanggan WHERE id_pelanggan = $id";
}
function transaksi($id){
global $conn;
$pelanggan = query("SELECT * FROM pelanggan WHERE id_pelanggan = $id")[0];
$id_pelanggan = $pelanggan['id_pelanggan'];
$nama = $pelanggan['nama'];
$alamat = $pelanggan['alamat'];
$nomor = $pelanggan['nomor'];
$email = $pelanggan['email'];
$kelurahan = $pelanggan['kelurahan'];
$kecamatan = $pelanggan['kecamatan'];
$kota = $pelanggan['kota'];
$kodepos = $pelanggan['kodepos'];
$ongkir = $pelanggan['ongkir'];
$waktu = $pelanggan['waktu'];
$query = "INSERT INTO transaksi_selesai

VALUES('','$id_pelanggan','$nama','$alamat','$nomor','$email','$kecamatan','$keluraha
n','$kota','$kodepos','$ongkir','$waktu')";
$query = "DELETE FROM pelanggan WHERE id_pelanggan = $id";
}
function ubah($data){
global $conn;
// $gambar = $data['gambarBaru'];
$gambarLama = $data['gambarLama'];
$id_product = $data['id_product'];
$nama_product = $data['nama'];
$harga = $data['harga'];
$stock = $data['stock'];
$description = $data['description'];
if( $_FILES['gambar']['error'] === 4){ // === 4 artinya tidak ada gambar yang di upload
$gambar = $gambarLama;
} else {
$gambar = upload($nama_product,$kategori);
}
//cek apakah user ganti gambar baru atau tidak

$query = "UPDATE product SET
L-16
nama_product = '$nama_product',
gambar = '$gambar',
harga = '$harga',
stock = '$stock',
description = '$description'
WHERE id_product = $id_product
";
}
function cari($keyword){
global $conn;
$query = "SELECT * FROM product WHERE

nama_mobil LIKE '%$keyword%' OR
harga LIKE '%$keyword%' OR
merek LIKE '%$keyword%' ";
return query($query);
}
function order($data,$id_rental,$id_mobil,$nama_mobil){
global $conn;
$nama = $data['nama']; //htmlspecialchars($data['nama'])
$alamat = $data['alamat']; //htmlspecialchars($data['kelas'])
$nomor = $data['nomor'];
$gender = $data['gender'];
$email = $data['email'];
$awal = $data['awal'];
$akhir = $data['akhir'];
$query = "INSERT INTO booking VALUES
('','$id_rental','$id_mobil', '$nama','$nama_mobil', '$alamat', '$nomor', '$gender',
'$email', '$awal', '$akhir')";
}
function update_product($id_pelanggan){
global $conn;
$datas = query("SELECT id_product,banyak_product from keranjang where
id_pelanggan = $id_pelanggan");
$i=0;
foreach ($datas as $data) {
$id_product = $data['id_product'];
$product = query("SELECT stock from product where id_product= $id_product")[0];
L-17
$update_stock = $product['stock'] - $data['banyak_product'];
$query = "UPDATE product SET
stock = '$update_stock'
WHERE id_product = $id_product
";
$i += mysqli_affected_rows($conn);
}
return $i;
}
?>
Hapus Keranjang.php
<?php
session_start();
unset($_SESSION['keranjang'][$id_product]);
echo (" <script>
alert('produk berhasil dihapus');
document.location.href = 'keranjang.php';
</script>");
?>
Home.php
<div class="jumbotron jumbotron-fluid text-center bg-dark text-light" >

<a href="logo.jpg"><img src="logo.jpg" alt="" class="circle-image rounded-
circle"></a>
<h4 class="display-4 lead"><strong>Dapur Nunuy</strong></h4>
<p class="lead"><?= $data['description'] ?></p>
</div>
</div>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark bg-company-red mdb-
color lighten-3 mt-3 mb-5">
<a class="navbar-brand" > </a>

<a class="nav-link" href="index.php">  <span class="sr-
</li>
L-18
<a class="nav-link" href="index.php"> <span class="sr-
</li>

<a class="nav-link" href="index.php"> <span class="sr-
</li>
</ul>
<input type="search" placeholder="Search" style="size: 10px; margin-left:
200px;">
<button class="btn btn-info my-2 my-sm-0" type="submit">Search</button>
</div>
</nav>
</div>
<main>
<section class="text-center mb-4">
<div class="row wow fadeIn">
<?php include 'product.php' ?>
</div>
</section>
</div>
</main>
Keranjang.php
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
js.min.css">
L-19
js.css">
<link rel="stylesheet" type="text/css" href="./assets/MDB/css/mdb.css">
<link rel="stylesheet" type="text/css" href="./assets/MDB/css/style.css">
<link rel="stylesheet" type="text/css" href="./assets/MDB/css/mdb.min.css">
<link rel="stylesheet" type="text/css" href="./assets/MDB/css/mdb.min.css.map">
href="https://mdbootstrap.com/previews/ecommerce-
demo/css/mdb.ecommerce.min.css">
</head>
<body>

<a class="navbar-brand" style="color:#00ffff;">DAPUR NUNUY</a>
</button>

<li class="">
</li>
</ul>
<a class="nav-link" href="index.php" style="background-color: blue; color:
white; border-radius: 10px; height: 37px">Login <span class="sr-only"></span></a>
</div>
</nav>
<div class="container skin-light" style="margin-top: 50px; margin-bottom: 50px;">
<section>
<div class="row">
<div class="col-lg-8">
<div class="card wish-list mb-3">
<h5 class="mb-4">Cart (<span><?= count($_SESSION['keranjang']) ?></span>

items)</h5>
<?php if (count($_SESSION['keranjang']) == 0) { ?>
L-20
<h6 class="alert alert-danger"> Keranjang anda kosong, silakan tambah
product kedalam keranjang</h6>
<?php } ?>
<?php $harga_total = 0; ?>
<?php foreach ($_SESSION['keranjang'] as $id_product_keranjang => $jumlah) :?

>
<?php $products = query("SELECT * FROM product where id_product =

$total = $products['harga']*$jumlah; ?>


<div class="row mb-4">
<div class="col-md-5 col-lg-3 col-xl-3">
<div class="view zoom overlay z-depth-1 rounded mb-3 mb-md-0">
<img class="img-fluid w-100"
src="img/<?= $products['gambar'] ?>" alt="Sample">
<a href="#!">
<div class="mask waves-effect waves-light">
src="img/<?= $products['gambar'] ?>">
<div class="mask rgba-black-slight waves-effect waves-light"></div>
</div>
</a>
</div>
</div>
<div>
<div class="d-flex justify-content-between">
<div>
<h5><?= $products['nama_product'] ?></h5>
<a href="hapus_keranjang.php?id_product=<?= $products['id_product'] ?
>" type="button" class="card-link-secondary small text-uppercase mr-3"><i
class="fas fa-trash-alt mr-1"></i> Remove item </a>
</div>
<form action="" method="post">
<div>
<a href="update_keranjang.php?action=kurang&id_product=<?=
$products['id_product'] ?>"><i class="fas fa-minus"></i></a>
<label style="margin-left: 10px; margin-right: 10px;"> <?= $jumlah; ?>
</label>
<a href="update_keranjang.php?action=tambah&id_product=<?=
$products['id_product'] ?>"
><i class="fas fa-plus"></i></a>
L-21
<small id="passwordHelpBlock" class="form-text text-muted text-
center">Stock
<?= $products['stock'] ?>
</small>
</div>
</form>
</div>
<div class="d-flex justify-content-end align-items-right" >
<p class="mb-0">
<div class="row">
<div class="col-xs-8">
</div>
</div>
<span></span>
<span><strongs style="color: black; margin-right: 20px;"><?= $jumlah ?> x
<?= number_format($products['harga']) ?></strong></span>
</p>
</div>
<hr>
<div class="d-flex justify-content-end align-items-right" >

<p class="mb-0">
<div class="row">
</div>
</div>
<span></span>
<span>Total : <strongs style="color: red; margin-right: 20px;"> Rp.<?=
number_format($total) ?></strong></span>
</p>
</div>
</div>
</div>
</div>
<hr class="mb-4">

<?php $harga_total += $total ?>

<?php endforeach; ?>
</div>
</div>
L-22
</div>

border-0 px-0 pb-0">
</li>

border-0 px-0 mb-3">
<div>
<strong>
<p class="mb-0">Total</p>
</strong>
</div>
<span><strong><?= number_format($harga_total); ?></strong></span>
</li>
</ul>
<a href="cekout.php" type="button" class="btn btn-primary btn-block waves-

effect waves-light">go to checkout</a><br><br>
<div class="d-flex justify-content-center align-items-center">
<a href="index.php" style="color: blue;"> lanjut belanja</a>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<div class="footer-dark" style="clear: both;
position: relative;
height: 200px;
margin-top: 150px;">
<footer>
<div class="row">
</div>
L-23
</div>
</div>
</div>
</footer>
</div>
</body>
<script type="text/javascript" src="./assets/bootstrap/js/popper.min.js"></script>
src="./assets/bootstrap/js/bootstrap.bundle.js"></script>
src="./assets/bootstrap/js/core/jquery.3.2.1r.min.js"></script>
<script type="text/javascript" src="./assets/js/keranjang.js"></script>
</html>
Login.php
<?php
session_start();
header('Location : dashboard.php');
require 'function.php';
if (isset($_POST['login'])) {
// var_dump($_POST);
$username = $_POST["username"];
$password = $_POST['password'];
$result = mysqli_query($conn, "SELECT * FROM users WHERE username = '$username'

");
if ( mysqli_num_rows($result) === 1) {
$row = mysqli_fetch_assoc($result);
if (password_verify($password, $row["password"])){
L-24
// var_dump($row);
$_SESSION['login'] = true; //set session
$_SESSION['id_rental'] = $row["id_rental"];
header('Location: dashboard.php?id_rental='.$_SESSION["id_rental"]);
exit;
}
$error = true;
}
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<link rel="stylesheet" type="text/css" href="css/login.css">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
rel="stylesheet">
<style type="text/css">
body {
background-color: #bd2130 !important;
margin: 0px;
}
img{
height: auto;
width: 50px;
}
</style>
</head>
<body>
<a href="index.php" style="margin-left: 10px; margin-top: 10px; font-style: bold; color:
white;"><< Kembali</a>
<div class="wrapper fadeInDown">

<div id="formContent">



<div class="fadeIn first">
L-25
<img src="logo.PNG" id="icon" alt="User Icon" />
</div>


<?php if(isset($error)) : ?>
<h5 style="color: red; font-style: italic; font-size: 15px;"> Username atau
password salah </h5>
<?php endif; ?>
<input type="text" id="login" class="fadeIn second" name="username"
placeholder="login">
<input type="password" id="password" class="fadeIn third" name="password"
placeholder="password">
<input type="submit" class="fadeIn fourth" value="Log In" name="login"> <br>
</form>


<div id="formFooter">
<a class="underlineHover" href="registrasi.php">Belum punya akun? daftar
disini</a>
</div>
</div>
</div>
</body>
<script
src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</html>
Product.php
<?php foreach ($products as $product) : ?>
<div class="col-lg-3 col-md-6 mb-4">

<div class="card">

<div class="view overlay">
<img src="img/<?= $product['gambar'] ?>" class="card-img-top" alt=""
style="width: 250px; height: 250px;">
<a>
<div class="mask rgba-white-slight"></div>
</a>
L-26
</div>


<div class="card-body text-center">

<h5>
<strong>
<a href="detail.php?id_product=<?= $product['id_product'] ?>" class="dark-
grey-text"><?= $product['nama_product'] ?>
</a>
</strong>
</h5>

<h4 class="font-weight-bold blue-text" style="font-style: italic;">

<h4 style="font-style: italic;">Rp.<?= number_format($product['harga']) ?
></h4>
</h4>
<h4>
<a href="tambah_keranjang.php?id_product=<?= $product['id_product'] ?>"
class="btn btn-warning">Add <i class="fas fa-shopping-cart ml-1"></i> </a>
</h4>
</div>

</div>
</div>
<?php endforeach; ?>
Tambah_keranjang.php
<?php
session_start();
$id_product= $_GET['id_product'];
if (isset($_SESSION['keranjang'][$id_product])) {
$_SESSION['keranjang'][$id_product]+=1;
} else {
$_SESSION['keranjang'][$id_product] = 1;
}
L-27
echo "<script> alert('product telah ditambahkan ke keranjang'); </script>";
echo "<script> location='index.php'; </script>";
?>
Update_keranjang.php
<?php
session_start();
$id_product= $_GET['id_product'];
$product = query("SELECT stock FROM product where id_product= $id_product")[0];
$stock = $product['stock'];
if ($_GET['action'] == 'tambah') {
if ($_SESSION['keranjang'][$id_product] < $stock) {
$_SESSION['keranjang'][$id_product]+=1;
}
$_SESSION['keranjang'][$id_product] == $stock;
}
if ($_GET['action'] == 'kurang') {
$_SESSION['keranjang'][$id_product] -= 1;
}
if ($_SESSION['keranjang'][$id_product] < 1) {
unset($_SESSION['keranjang'][$id_product]);
}
echo "<script> location='keranjang.php'; </script>";

?>
add_product.php
<?php
?>
<main>
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
L-28
<div class="card strpied-tabled-with-hover"
style="margin-top: 15px;">
<div class="card-header ">
<strong>Edit Profile</strong>
</div>
<div class="card-body table-full-width table-
responsive">
<form>

<div class="form-row">

<div class="form-group
col-md-6">
<label
for="nama">Nama</label>
<input
type="text" class="form-control" name="nama">
</div>
col-md-6">
<label
for="alamat">Alamat</label>
<input
type="text" class="form-control" name="alamat">
</div>
</div>
col-md-6">
L-29
<label
for="nomor">No HP</label>
<input
type="text" class="form-control" name="nomor">
</div>
col-md-6">
<label
for="email">Email</label>
<input
type="email" class="form-control" name="email">
</div>
</div>

<div class="form-group col-md-
20" style="margin-left: 5px;">
<label
for="description">Description</label>
<textarea
name="description" class="form-control" id="exampleFormControlTextarea1" rows="3"
style="height:200px "></textarea>
</div>
col-md-6">
<a href=""
class="btn btn-primary" type="submit" name="submit">Update</a>
</div>
</div>
</form>
L-30
</div>
</div>
</div>
<div class="card card-user strpied-tabled-with-hover"
<div class="card-image" style="background-
color: black;">
</div>
<div class="author">
<a href="../<?=
$data['gambar'] ?>">
<img class="avatar
border-gray" src="../<?= $data['gambar'] ?>" alt="...">
<h5 class="title"><?=
$data['nama_toko'] ?></h5>
</a>
<p class="description"
<i class="fas fa-map-
marker-alt"></i> <?= $data['alamat'] ?>
</p>
</div>
<p class="description">
"<?= $data['description'] ?>"
</p>
<hr>
<div class="rows">
L-31
<div class="col-xs-1"
style="font-size: 13px;">
<i class="fas fa-phone-
alt"></i> <?= $data['nomor_hp'] ?>
</div>
<i class="fas fa-
envelope"></i> <?= $data['email'] ?>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
admin.php
<?php
?>
<main>
<div class="row">
<div class="card strpied-tabled-with-hover"
<strong>Edit Profile</strong>
L-32
</div>
<div class="card-body table-full-width table-
responsive">
<form>

col-md-6">
<label
for="nama">Nama</label>
<input
type="text" class="form-control" name="nama">
</div>
col-md-6">
<label
for="alamat">Alamat</label>
<input
type="text" class="form-control" name="alamat">
</div>
</div>
col-md-6">
<label
for="nomor">No HP</label>
<input
type="text" class="form-control" name="nomor">
</div>
L-33
col-md-6">
<label
for="email">Email</label>
<input
type="email" class="form-control" name="email">
</div>
</div>

<div class="form-group col-md-
20" style="margin-left: 5px;">
<label
for="description">Description</label>
<textarea
name="description" class="form-control" id="exampleFormControlTextarea1" rows="3"
style="height:200px "></textarea>
</div>
col-md-6">
<a href=""
class="btn btn-primary" type="submit" name="submit">Update</a>
</div>
</div>
</form>
</div>
</div>
</div>
L-34
<div class="card card-user strpied-tabled-with-hover"
<div class="card-image" style="background-
color: black;">
</div>
<div class="author">
<a href="../<?=
$data['gambar'] ?>">
<img class="avatar
border-gray" src="../<?= $data['gambar'] ?>" alt="...">
<h5 class="title"><?=
$data['nama_toko'] ?></h5>
</a>
<p class="description"
<i class="fas fa-map-
marker-alt"></i> <?= $data['alamat'] ?>
</p>
</div>
<p class="description">
"<?= $data['description'] ?>"
</p>
<hr>
<div class="rows">
<i class="fas fa-phone-
alt"></i> <?= $data['nomor_hp'] ?>
</div>
L-35
<i class="fas fa-
envelope"></i> <?= $data['email'] ?>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
order.php
<?php
// $dist = "SELECT distinct Name FROM table";
$products = query("SELECT * FROM pelanggan");
// $pelanggan2 = $pelanggan['id_pelanggan'];
// $productss = query("SELECT * FROM keranjang inner join pelanggan on
keranjang.id_pelanggan = pelanggan.id_pelanggan where keranjang.id_pelanggan =
$pelanggan2 ");
// $products= query("SELECT distinct keranjang.nama from keranjang, pelanggan

where keranjang.id_pelanggan = pelanggan.id_pelanggan");
$_SESSION =[];
session_unset();
L-36
session_destroy();
header("Location : index.php");
exit;
}
if ( !isset( $_SESSION['login']) ) {
echo (" <script>
alert('Anda Harus login terlebih dahulu');
document.location.href = 'login.php';
</script>");
if ( isset ($_POST["cari"])) {
$product = cari($_POST["keyword"]);
}
?>
<main>
<div class="row">
<div class="card strpied-tabled-with-hover" style="margin-top: 15px;">
<h4>Table Order</h4>
</div>
<div class="card-body table-full-width table-responsive">
L-37
<table class="table table-hover table-striped">
<thead>
<th>No</th>
<th>Nama Pelanggan</th>
<th>Alamat</th>
<th>Nomor HP</th>
<th>Kota</th>
<th>tanggal</th>
<th></th>
</thead>
<tbody>
<?php $i= 1 ?>
<?php foreach ($products as $data) : ?>
<tr>
<td>1</td>
<td><?= $data['nama']; ?></td>
<td><?= $data['alamat']; ?></td>
<td><?= $data['nomor']; ?></td>
<td><?= $data['kota']; ?></td>
<td><?= $data['waktu']; ?></td>
<td style="text-align: center;">
<a href="dashboard.php?page=order-
detail&id_pelanggan=<?= $data['id_pelanggan']?>" class="btn btn-warning btn-
sm">Detail</a>
<a href="confirm.php?id_pelanggan=<?=
$data['id_pelanggan']?>" class="btn btn-success btn-sm">Confirm</a>
<a href="hapus_pelanggan.php?id_pelanggan=<?=
$data['id_pelanggan']?>" class="btn btn-danger btn-sm ">Hapus</a>
</td>
L-38
</tr>
<?php $i++; endforeach; ?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</main>
product.php
<?php
$product = query("SELECT * FROM product");
$_SESSION =[];
session_unset();
session_destroy();
header("Location : index.php");
exit;
}
if ( isset ($_POST["cari"])) {
$product = cari($_POST["keyword"]);
}
L-39
?>
<main>
<div class="row">
<div class="card strpied-tabled-with-hover" style="margin-top: 15px;">
<h4>Table Product</h4>
</div>
<thead>
<th>No</th>
<th>Gambar</th>
<th>Nama</th>
<th>stock</th>
<th>Harga</th>
<th>status</th>
<th></th>
<th></th>
</thead>
<tbody>
<?php $i = 1 ?>
<?php foreach ($product as $data) : ?>
<tr>
<td><?= $i ?></td>
L-40
<td><img src="../img/<?= $data['gambar'] ?>" height="50px"
width="50px"></td>
<td><?= $data['nama_product'] ?></td>
<td><?= $data['stock'] ?></td>
<td><?= $data['harga'] ?></td>
<td>
<h5 style="color: green;">active</h5>
</td>
<td></td>
<td style="text-align: center;">
<a href="dashboard.php?page=ubah&id_product=<?=
$data['id_product'] ?>" class="btn btn-primary " style="margin-right: 5px;">Ubah</a>
<a href="hapus.php?id_product=<?= $data['id_product'] ?

>" class="btn btn-danger ">Hapus</a>
</td>
</tr>
<?php $i++; endforeach; ?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</main>
order-detail.php
<?php
L-41
echo (" <script>
</script>");
$id_pelanggan = $_GET['id_pelanggan'];
$product = query("SELECT * FROM product inner join keranjang on
product.id_product = keranjang.id_product where id_pelanggan = $id_pelanggan");
// $product= query("SELECT * from keranjang WHERE id_pelanggan =

$id_pelanggan");
$data_pelanggan = query("SELECT * FROM pelanggan where id_pelanggan =
$id_pelanggan")[0];
?>
<main>
<div class="row">
<div class="card wish-list mb-3">
<h5 class="mb-4" ><strong>Daftar

belanjaan</strong></h5>
<?php $jumlah = 0; $total= 0; ?>


L-42
<?php foreach ($product as $products) {
$id_product = $products['id_product'];
$gambar_product = query("SELECT * FROM
product where id_product = $id_product")[0];
$jumlah += $products['banyak_product'];
?>
<div class="row mb-4">

<div class="view zoom overlay z-depth-1
rounded mb-3 mb-md-0">
src="../img/<?=
$gambar_product['gambar'] ?>" alt="Sample">
<a href="#!">
</a>
</div>
</div>
<div>
<div class="d-flex justify-content-between">
<div>
<h5><?= $products['nama_product'] ?
></h5>
</div>
<div>

</div>
</form>
</div>
<div class="d-flex justify-content-end align-
items-right" >
<span style="color: grey; margin-right:

20px;"><?= $products['banyak_product'] ?> x <?= number_format($products['harga']) ?
></span>
</div>
<hr>
<div class="d-flex justify-content-end align-

items-right" >
<p class="mb-0">
<div class="row">
</div>
</div>
<span></span>
<span>Jumlah : <strongs style="color: red;
margin-right: 20px;"> Rp.<?=
number_format($products['banyak_product']*$products['harga'] ) ?></strong></span>
</p>
</div>
L-44
</div>
</div>
</div>
<hr class="mb-4">

<?php $total+=
$products['banyak_product']*$products['harga'] ?>
<?php } ?>
</div>
</div>
</div>
<div class="row-lg-4">

<h5 class="mb-3" style="text-align:

center;"><strong>Detail Pembeli</strong></h5><hr>

<li class=" d-flex justify-content-between align-
items-center border-0 px-0 pb-0" style="color: red;">
Nama :
<span style="color: black;"><?=
$data_pelanggan['nama']; ?></span>
</li>
<li class="d-flex justify-content-between align-
items-center border-0 px-0" style="color: red;">
alamat :
L-45
$data_pelanggan['alamat']; ?></span>
</li>
</li>
items-center border-0 px-0" style="color: red;">
No HP :
$data_pelanggan['nomor']; ?></span>
</li>

items-center border-0" style="color: red;">
Email :
$data_pelanggan['email']; ?></span>
</li>

<thead>
<th>Kecamatan</th>
<th>Kelurahan</th>
<th>Kota</th>
</thead>
<tbody>
<td><?=
$data_pelanggan['kecamatan']; ?></td>
<td><?=
$data_pelanggan['kelurahan']; ?></td>
<td><?=
$data_pelanggan['kota']; ?></td>
L-46
</tbody>
</table>
<li class="list-group-item d-flex justify-content-

between align-items-center border-0 px-0 mb-3">
<div>
Tanggal Pembelian
</div>
<span><strong style="color: blue"><?=

$data_pelanggan['waktu']; ?></strong></span>
</li>
</ul>

</div>
</div>

<h5 class="mb-3"><strong>Total
Pembelian</strong></h5><hr>

between align-items-center border-0 px-0 pb-0">
Jumlah harga
<span><?= number_format($total) ?></span>
</li>
L-47
between align-items-center px-0">
Ongkir
<span><?=
number_format($data_pelanggan['ongkir']); ?></span>
</li>
between align-items-center border-0 px-0 mb-3">
<div>
<strong>Harga Total :</strong>
</div>
<span><strong>Rp.<?= number_format($total+
$data_pelanggan['ongkir']); ?></strong></span>
</li>
</ul>
<a href="dashboard.php?page=order"
type="button" class="btn btn-primary btn-block " style="background-color: blue; color:
white;">kembali</a>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
Login.php
<?php
L-48
session_start();
Include '../function.php';
}
if (isset($_POST['login'])) {
// var_dump($_POST);
$username = $_POST["username"];
$password = $_POST['password'];
$result = mysqli_query($conn, "SELECT * FROM admin WHERE

username = '$username' ");
if ( mysqli_num_rows($result) === 1) {
$row = mysqli_fetch_assoc($result);
if ($password == $row["password"]){
// var_dump($row);
$_SESSION['login'] = true; //set session
exit;
}
} else{
$error = true;
}
}
L-49
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The Easiest Way to Add Input Masks to Your Forms</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-
line-icons.min.css" rel="stylesheet">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="css/login.css">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
rel="stylesheet" id="bootstrap-css">
<script
src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script
src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script
src="https://cdn.jsdelivr.net/jquery.validation/1.15.1/jquery.validate.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Kaushan+Script"
rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css" rel="stylesheet" integrity="sha384-
wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
crossorigin="anonymous">
</head>
L-50
<body>
<a href="../index.php" style="margin-left: 30px"><< Kembali</a>
<div class="row">
<div class="col-md-5 mx-auto">
<div id="first">
<div class="myform form ">
<div class="logo mb-3">
<div class="col-md-12 text-center">
<h1>Login</h1>
</div>
</div>
<form action="" method="post" name="login">
<div class="form-group">
<label for="exampleInputEmail1">Username</label>
<input type="username" name="username" class="form-control"
id="username" aria-describedby="usernameHelp" placeholder="Enter username">
</div>
<label for="exampleInputEmail1">Password</label>
<input type="password" name="password" id="password"
class="form-control" aria-describedby="emailHelp" placeholder="Enter Password">
</div>
<br>
<div class="col-md-12 text-center ">
<button type="submit" name="login" class=" btn btn-block mybtn btn-
primary tx-tfm">Login</button><br>
<?php if(isset($error)) : ?>
L-51
<h5 style="color: red; font-style: italic; font-size: 15px;"> Username
atau password salah </h5>
<?php endif; ?>
</div>


</form>
</div>
</div>
<div id="second">
<div class="myform form ">
<div class="logo mb-3">
<div class="col-md-12 text-center">
<h1 >Daftar</h1>
</div>
</div>
<form action="#" name="registration">
<label for="exampleInputEmail1">Nama</label>
<input type="text" name="firstname" class="form-control"
id="firstname" aria-describedby="emailHelp" placeholder="Enter Firstname">
</div>
L-52
<label for="exampleInputEmail1">Username</label>
<input type="text" name="lastname" class="form-control"
id="lastname" aria-describedby="emailHelp" placeholder="Enter Lastname">
</div>
<label for="exampleInputEmail1">Email</label>
<input type="email" name="email" class="form-control" id="email"
aria-describedby="emailHelp" placeholder="Enter email">
</div>
<label for="exampleInputEmail1">Password</label>
<input type="password" name="password" id="password"
class="form-control" aria-describedby="emailHelp" placeholder="Enter Password">
</div>
<div class="col-md-12 text-center mb-3">
<button type="submit" class=" btn btn-block mybtn btn-primary tx-
tfm">Daftar!</button>
</div>
<div class="col-md-12 ">
<p class="text-center"><a href="" id="signin">Sudah punya akun?
login disini!</a></p>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
L-53
</body>
<script type="text/javascript" src="js/login.js"></script>
</html>
ubah.php
<?php
$id_product = $_GET["id_product"];
$product = query("SELECT * FROM product WHERE id_product = $id_product")[0];
echo (" <script>
</script>");
if (isset($_POST["submit"])) {
if (ubah($_POST) > 0) {
echo (" <script>
alert('data berhasil diubah');
document.location.href = 'dashboard.php?page=product';
</script>");
} else {
L-54
echo (" <script>
alert('data gagal diubah, silakan masukan data ulang');
</script>");
echo($conn -> error);
}
}
?>
<main>
<h4>Update Product</h4>
<form action="" method="post" enctype="multipart/form-data">

<div class="row">
<div class="card strpied-tabled-with-hover" style="margin-top:
15px;">
</div>

<div class="form-group col-md-6">
<label for="nama">Nama</label>
<input type="text" class="form-control" name="nama"
value="<?= $product['nama_product'] ?>">
</div>
L-55
<label for="stock">stock</label>
<input type="text" class="form-control" name="stock"
value="<?= $product['stock'] ?>">
</div>
</div>


<label for="description">Description</label>
<textarea name="description" class="form-control"
id="exampleFormControlTextarea1" rows="3" style="height:160px "></textarea>
</div>
</div>
</div>
</div>
<div class="card strpied-tabled-with-hover" style="margin-top:
15px;">
</div>
<label for="inputEmail4">Kategori</label>
<input type="text" class="form-control" name="kategori"
value="<?= $product['kategori'] ?>">
</div>
L-56
<label for="berat">Berat</label>
<input type="text" class="form-control" name="berat"
value="<?= $product['berat'] ?>">
</div>
</div>
<label for="harga">Harga</label>
<input type="text" class="form-control" name="harga"
value="<?= $product['harga'] ?>">
</div>
<div class="form-group ">
<label for="gambar">Upload Foto Produk</label><br>
<input type="hidden" name="id_product" class="form-
control" value="<?= $id_product ?>">
<input type="hidden" name="gambarLama" class="form-
control" value="<?= $product['gambar'] ?>">
<input type="file" name="gambar" class="form-control" >
</div>
</div>
<div class="form-row col-md-6">

<button type="submit" name="submit" class="btn btn-
primary btn-md form-control">Ubah</button>
</div>
</div>
</div>
</div>
L-57
</div>
</div>
</form>
</div>
</main>
L-58

Full Draft Rizda

Diunggah oleh

Informasi Dokumen

Deskripsi 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

Full Draft Rizda

Diunggah oleh

Hak Cipta:

Format Tersedia

UNIVERSITAS GUNADARMA

FAKULTAS ILMU KOMPUTER & TEKNOLOGI INFORMASI

Pembuatan Website Pemesanan Masakan Rumah Pada Toko

Nama : Muhammad Rizdalah Agisa

Diajukan Guna Melengkapi Sebagian Syarat Dalam Mencapai Gelar

Saya yang bertanda tangan di bawah ini,

Nama : Muhammad Rizdalah Agisa

Judul PI : Pembuatan website pemesanan masakan rumah pada toko

Demikian pernyataan ini dibuat dengan sebenarnya dan dengan penuh

Depok, 03 Maret 2021

(Muhammad Rizdalah Agisa)

Judul PI : pembuatan website pemesanan masakan rumah pada

Pembimbing Kasubag. Sidang PI

Ketua Jurusan Sistem Informasi

(Dr. Setia Wirawan, S.Kom., MMSI)

Muhammad Rizdalah Agisa. 14117220

Daftar Pustaka (2002-2014)

1. Prof. Dr. E. S. Margianti, SE., MM,. selaku Rektor Universitas Gunadarma.

Jakarta, 3 Maret 2021

(Muhammad Rizdalah Agisa)

PERNYATAAN ORISINALITAS DAN

2.5 Pengertian XAMPP .........................................…………..................…...8

2.6 Pengertian MYSQL ........................................………….....................…8

2.6.1. DDL (Data Definition Language) ............…….......................9

2.6.2 DML (Data Manipulasi Language) …...….......…....…...........9

2.6.3DCL (Data Control Language)..…………...…........................10

2.7 Unified Modeling Language (UML) .............…….………...................10

2.7.1. Use Case Diagram ........................………………………….13

2.7.3. Activity Diagram .................…............……………………..14

2.8 Struktur Navigasi .........................................….......................………..14

2.8.1. Struktur Navigasi Linier ..........................................……...14

2.8.2. Struktur Navigasi Non Linier ......................................…. 15

2.8.3. Struktur Navigasi Hirarki ...............................................…. 15

2.8.4. Struktur Navigasi Campuran (Composite) ...................…. 16

2.9. Pengujian Web (Black Box Testing) .....................................………. 16

2.10. Software Pendukung .........................................................................21

3. PERANCANGAN & IMPLEMENTASI...........................................................10

Gambar 2.1 Struktur Navigasi Linier ....................................................................... 14

Tabel 3.1. Admin..................................................................................... 25

LAMPIRAN LISTING PROGRAM....................................................................L-1

1.1 Latar Belakang

Dalam menjalani kehidupan sehari-hari, makanan merupakan kebutuhan

1.3 Tujuan Penulisan

1.4 Metode Penelitian

2.1 Sistem Informasi

Sistem Informasi adalah kombinasi dari teknologi informasi dan

Alter berpendapat untuk sistem informasi sebagai tipe khusus dari

Website atau situs dapat diartikan sebagai kumpulan halaman–halaman

2.2.1 Web Browser

Menurut Sibero (2014:12) “Web Browser adalah aplikasi perangkat

2.2.2 Web Server

Menurut Sibero (2014:12) “Web Server adalah sebuah komputer yang

2.4 Bahasa Pemrograman

Bahasa pemograman suatu perangkat lunak yang menggunakan

2.4.1 HTML ( Hypertext Markup Language)

Pada umumnya HTML suatu bahasa yang digunakan untuk membuat

Menurut Sutarman (2007:27)”HTML Hypertext Markup Language)

Jadi, dapat disimpulkan bahwa HTML adalah bahasa pemograman

Pada awalnya PHP digunakan sebagai bahasa pemrograman untuk

2.4.3 CSS (Cascading Style Sheets)

Pada tahun 1996, JavaScript secara resmi disebut sebagai

2.5 Pengertian XAMPP

XAMPP adalah perangkat lunak bebas yang mendukung banyak