Sistem Informasi Bakso Super Comal

UNIVERSITAS GUNADARMA
FAKULTAS TEKNOLOGI INDUSTRI
TULISAN ILMIAH
SISTEM INFORMASI BAKSO SUPER COMAL BERBASIS

WEBSITE MENGGUNAKAN CODEIGNITER
Nama
: Dimas Prasetyo
NPM : 51419827
Jurusan : Informatika
: Nurul Adhayanti, SKOM., MMSI.
Pembimbing
Diajukan Guna Melengkapi Sebagian Syarat Dalam

Mencapai Gelar Setara Sarjana Muda
Jakarta
2023
i
PERNYATAAN ORIGINALITAS DAN PUBLIKASI
Saya yang bertanda tangan di bawah ini,

Nama : Dimas Prasetyo
NPM : 51419827
Judul : SISTEM INFORMASI BAKSO SUPER COMAL
BERBASIS WEBSITE MENGGUNAKAN
CODEIGNITER
Tanggal Sidang : 28 Februari 2023
Tanggal Lulus : 28 Februari 2023
Menyatakan bahwa tulisan ini merupakan hasil karya penulis sendiri dan
dapat dipublikasikan sepenuhnya oleh Universitas Gunadarma. Segala
kutipan dalam bentuk apapun telah mengikuti kaidah dan etika yang
berlaku. Mengenai isi dan tulisan merupakan tanggung jawab penulis,
bukan Universitas Gunadarma.
Demikian pernyataan ini dibuat dengan sebenarnya dan dengan penuh

kesadaran.
Jakarta, 17 Februari 2023
Dimas Prasetyo
ii
LEMBAR PENGESAHAN
Judul PI : SISTEM INFORMASI BAKSO SUPER COMAL

BERBASIS WEBSITE MENGGUNAKAN
CODEIGNITER
Nama : Dimas Prasetyo
NPM : 51419827
Tanggal Sidang : 28 Februari 2023
Tanggal Lulus : 28 Februari 2023
Menyetujui,
Pembimbing Kasubag Sidang PI
(Nurul Adhayanti, SKOM., MMSI..) ( Dr. Achmad Fahrurozi S.Si., M.Si)
Ketua Jurusan TI
(Dr. Lintang Yuniar Banowosari, S.Kom., M.Sc.)
iii
ABSTRAK
Dimas Prasetyo, 51419827
SISTEM INFORMASI BAKSO SUPER COMAL BERBASIS WEBSITE
MENGGUNAKAN CODEIGNITER
Penulisan Ilmiah, Fakultas Teknologi Industri, Jurusan Informatika,
Universitas Gunadarma, 2022.
Kata Kunci : Aplikasi , Website, Codeigniter, MYSQL, Bakso.
(xii + 82 Halaman + Lampiran)
Persaingan dunia usaha di berbagai bidang dengan menggunakan

kecanggihan teknologi informasi yaitu transaksi online karena dianggap
sangat menguntungkan bagi masyarakat. Karena disamping menghemat
waktu, transaksi juga dapat dilakukan dimanapun. calon pembeli dapat
melihat produk-produk pada layar komputer atau handphone, mengakses
informasinya, memesan dan membayar dengan pilihan yang tersedia. Oleh
karena itu perlu adanya media internet berupa website Dengan penggunaan
sistem penjualan secara online Karena dengan menawarkan produknya
menggunakan media internet ruang lingkup pemasarannya sangat
luassistem informasi persediaan dan penjualan makanan bakso Super Comal
masih menggunakan proses manual yaitu dengan menggunakan metode
konvensional yaitu pencatatan secara tertulis dengan nota dan menggunakan
Mesin Kasir sehingga di dalam pengerjaan rekap penjualan tersebut
dirasakan lama, tak hanya itu dengan metode yang masih konvensional juga
dikhawatirkan dapat terjadi kehilangan data . Dengan adanya website ini
memudahkan pengguna untuk melakukan pemesanan online melalui
website ini, jadi pengguna tidak harus datang langsung ke tempat makan.
jika ingin memesan makanan dan minuman pengguna wajib mengisi
infromasi untuk pemesanan. website ini juga sangat mudah digunakan
sehingga memudahkan User dalam menggunakannya
Daftar Pustaka (1995-2021)
iv
KATA PENGANTAR
Puji syukur penulis ucapkan kehadirat Allah SWT, karena atas

berkat kasih dan karunia-Nya, penulis dapat menyelesaikan Penulisan
Ilmiah yang berjudul “SISTEM INFORMASI BAKSO SUPER
COMAL BERBASIS WEBSITE MENGGUNAKAN
CODEIGNITER“ Penulisan Ilmiah ini disusun guna melengkapi sebagai
syarat dalam mencapai gelar setara Sarjana Muda pada jurusan
Informatika, Universitas Gunadarma.
Di dalam menyusun laporan penulisan ilmiah ini, banyak sekali

pihak pihak yang membantu baik secara materil ataupun spiritual serta
saran saran dari berbagai macam pihak, dan juga yang telah banyak
memberikan pengarahan serta koreksi yang sangat bermanfaat dalam
membimbing penulis sampai dengan terselesainya penulisan ilmiah ini.
Dalam kesempatan ini perkenankan penulis menyampaikan ucapan

terima kasih yang sebesar – besarnya atas dorongan dan bantuan yang
telah diterima sehingga memungkinkan untuk menyelesaikan penulisan ini
kepada :
1. Ibu Prof. Dr. Hj. E. S. Margianti, SE. MM., selaku Rektor

Universitas Gunadarma.
2. Bapak Prof. Dr. Ing. Adang Suhendra SSi., Skom., Msc., selaku
Dekan Fakultas Teknologi Industri, Universitas Gunadarma.
3. Ibu Dr. Lintang Yuniar Banowosari, S.Kom., M.Sc., selaku Ketua
Jurusan Informatika, Universitas Gunadarma.
4. Bapak Dr. Achmad Fahrurozi S.Si., M.Si selaku Koordinator PI
Fakultas Teknologi Industri.
5. Ibu Nurul Adhayanti, SKOM., MMSI. selaku Dosen Pembimbing
yang telah banyak memberikan masukan, arahan, dan bimbingan
kepada penulis dari permulaan hingga terbitnya Penulisan Ilmiah
ini.
v
6. Kedua Orang Tua tercinta, Ibu Harwati dan Ayah Casmito,yang
telah memberikan dorongan semangat serta do’a dari awal tulisan ini
hingga akhir penyusunan tulisan ilmiah ini.
7. Teman – teman seperjuangan di kelas 4IA20 yang meluangkan
waktunya untuk belajar bersama penulis.
8. Seluruh pihak yang telah memberikan dukungan baik secara
langsung maupun tidak langsung yang tidak dapat penulis sebutkan
satu – persatu.
Dengan hormat serta kerendahan hati, penulis menyadari bahwa

penulisan ini masih tidak sempurna baik dalam penulisan maupun proses
pembuatan aplikasinya. Oleh karena itu penulis membuka diri untuk
menerima kritik dan saran yang sifatnya mambangun baik untuk
penulisan, karya, dan untuk penulis sendiri.
Depok,17 Februari 2023
(Dimas Prasetyo)
vi
DAFTAR ISI
HALAMAN JUDUL ........................................................................................ i

PERNYATAAN ORIGINALITAS DAN PUBLIKASI .................................. ii
LEMBAR PENGESAHAN ............................................................................ iii
ABSTRAK ...................................................................................................... iv
KATA PENGANTAR ......................................................................................v
DAFTAR ISI .................................................................................................. vii
DAFTAR TABEL ........................................................................................... ix
DAFTAR GAMBAR ........................................................................................x
DAFTAR LAMPIRAN .................................................................................. xii
1. PENDAHULUAN .......................................................................................1
1.1 Latar Belakang ......................................................................................2
1.2 Batasan Masalah ...................................................................................2
1.3 Tujuan Penulisan ..................................................................................2
1.4 Metode Penelitian ..................................................................................2
1.5 Sistematika Penulisan ...........................................................................3
2. LANDASAN TEORI ..................................................................................4
2.1 Website ..................................................................................................4
2.2 E-Store/Ecoomerce ...............................................................................4
2.3 HTML ...................................................................................................5
2.4 PHP .......................................................................................................6
2.5 Boostrap ................................................................................................7
2.6 Codeigniter ...........................................................................................8
2.7 Visual Studio Code ................................................................................9
2.8 Konsep MVC ........................................................................................9
2.10 Basis Data .........................................................................................10
2.11 MySQL ............................................................................................11
2.12 Stuktur Navigasi ..............................................................................12
2.12.1 Stuktur Navigasi Linier ......................................................12
2.12.2 Stuktur Navigasi Non Linier ...................................12
2.12.3 Stuktur Navigasi Hirarki .....................................................13
2.12.4 Stuktur Navigasi Campuran ...................................................13
vii
2.13 Black Box Testing ...........................................................................14
2.14 UML ................................................................................................14
2.14.1 Use Case Diagram ..............................................................15
2.14.2 Activity Diagram ................................................................17
3. PERANCANGAN DAN IMPLEMENTASI.............................................18

3.1 Gambaran Umum ...............................................................................18
3.2 Analisa Perangkat Keras .....................................................................18
3.3 Analisa Perangkat Lunak .....................................................................18
3.4 Perancangan Struktur Navigasi ..........................................................19
3.5 Perancangan Sistem dengan UML .....................................................21
3.5.1 Use Case Diagram Aplikasi .................................................21
3.5.2 Activity Diagram .................................................................22
3.6 Perancangan Database .......................................................................24
3.7 Perancangan Tampilan Antarmuka Aplikasi Website .........................39
3.8 Mengunduh Codeigniter 3 ..................................................................33
3.8.1 Penempatan Project Codeigniter .....................................................33
3.9 Mengkonfigurasi Project Codeigniter 3 .............................................34
3.10 Implementasi dan Scripting Halaman Menggunakan Codeigniter ....35
3.10.1 Implementasi dan Scripting Halaman Login .....................35
3.10.2 Implementasi dan Scripting Halaman Home .....................36
3.10.3 Implementasi dan Scripting Halaman Katalog Menu ........37
3.10.4 Implementasi dan Scripting Halaman Booking .................38
3.10.5 Implementasi dan Scripting Halaman Sukses Booking .....40
3.11 Upload Hosting Website Menggunakan 000Webhost .................42
3.12 Uji Coba Aplikasi Website ...........................................................42
3.11.1 Uji Coba Website Menggunakan Black Box Testing .......42
3.11.2 Uji Coba Website Menggunakan Browser ........................44
3.11.2 Uji Coba Website Menggunakan Mobile Browser ............45
4. PENUTUP .................................................................................................46
4.1 Kesimpulan .........................................................................................46
4.2 Saran ...................................................................................................46
DAFTAR PUSTAKA ................................................................................47
viii
LAMPIRAN ............................................................................................ L-1
DAFTAR TABEL
Tabel 2.1 Simbol dalam Use Case Diagram ..............................................16

Tabel 2.2 Simbol dalam Activity Diagram ................................................17
Tabel 3.1 Struktur Tabel booking .............................................................40
Tabel 3.2 Struktur Tabel gambar_menu ...................................................41
Tabel 3.3 Struktur Tabel lupa_password ..................................................41
Tabel 3.4 Struktur Tabel meja ..................................................................41
Tabel 3.5 Struktur Tabel menu .................................................................42
Tabel 3.6 Struktur Tabel menu_dibooking ...............................................42
Tabel 3.7 Struktur Tabel metode_pembayaran ........................................42
Tabel 3.8 Struktur Tabel profil_usaha ......................................................43
Tabel 3.9 Struktur Tabel saran_kritik .......................................................43
Tabel 3.2 Uji Coba Website ......................................................................59
Tabel 3.2 Uji Coba Browser ......................................................................61
Tabel 3.3 Uji Coba Kuesioner ...................................................................62
ix
DAFTAR GAMBAR
Gambar 2.1 HTML ................................................................................................. 6

Gambar 2.2 PHP ..................................................................................................... 7
Gambar 2.3 Boostrap .............................................................................................. 8
Gambar 2.4 CodeIgniter ......................................................................................... 9
Gambar 2.5 Visual Studio Code............................................................................ 10
Gambar 2.6 MySQL ............................................................................................. 11
Gambar 2.7 Struktur Navigasi Linier ................................................................... 12
Gambar 2.8 Struktur Navigasi non Linier ............................................................13
Gambar 2.9 Struktur Navigasi Hirarki ................................................................. 13
Gambar 2.10 Struktur Navigasi Campuran .......................................................... 14
Gambar 3.1 Struktur Navigasi User ..................................................................... 19
Gambar 3.2 Struktur Navigasi Admin .................................................................. 20
Gambar 3.3 Use Case Diagram Aplikasi .............................................................. 21
Gambar 3.6 Activity Diagram Login Admin ...................................................... 23
Gambar 3.7 Activity Diagram Pemesanan .......................................................... 24
Gambar 3.8 Database PhpMyAdmin ................................................................... 29
Gambar 3.9 Perancangan Tampilan Login Website ............................................ 31
Gambar 3.10 Perancangan Tampilan Home Website........................................... 32
Gambar 3.11 Perancangan Tampilan Katalog Menu ........................................... 33
Gambar 3.12 Perancangan Tampilan Booking..................................................... 33
Gambar 3.13 Perancangan Tampilan Sukses Booking ........................................ 34
Gambar 3.14 Tampilan Halaman Codeigniter...................................................... 36
Gambar 3.15 Isi Folder Dari Project CodeIgniter ............................................... 36
Gambar 3.16 Konfigurasi Codeigniter ................................................................ 37
Gambar 3.17 Konfigurasi Database ..................................................................... 37
Gambar 3.18 Implementasi Halaman Login......................................................... 38
Gambar 3.19 Scripting Login Admin ................................................................... 39
Gambar 3.20 Implementasi Home ........................................................................ 40
Gambar 3.21 Scripting Home ............................................................................... 41
Gambar 3.22 Implementasi Katalog Menu .......................................................... 41
x
Gambar 3.23 Scripting Katalog Menu ................................................................. 42
Gambar 3.24 Implementasi Booking .................................................................... 43
Gambar 3.25 Scripting Booking ........................................................................... 43
Gambar 3.26 Implementasi Sukses Booking ....................................................... 44
Gambar 3.27 Scripting Sukses Booking............................................................... 45
xi
DAFTAR LAMPIRAN
LISTING PROGRAM.............................................................................. L-1

OUTPUT PROGRAM ............................................................................. L-2
xii
1. PENDAHULUAN
1.1 Latar Belakang Masalah
Perkembangan teknologi khususnya pada bidang komunikasi dan

informasi menuntut untuk bersaing dalam era globalisasi. Teknologi komputer
sangat berpengaruh terhadap perkembangan dan kemajuan perusahaan. Fungsi
dari komputer itu adalah untuk memperlancar informasi yang dibutuhkan oleh
setiap bagian perusahaan. Pengolahan data yang melibatkan pemakaian komputer
tidak akan terlepas dari sistem komputer itu sendiri, yaitu unsur perangkat keras
(Hardware), perangkat lunak (Software) dan perangkat manusia (Brainware).
Oleh karena itu bila suatu perusahaan menggunakan sistem informasi yang
berbasis komputer, maka diharapkan proses kerja dapat dilakukan secara cepat
dan tepat.
Salah satu sistem informasi yang sangat dibutuhkan oleh suatu perusahaan
atau instansi yaitu sebuah sistem informasi mengenai persediaan dan penjualan
barang. Sistem informasi ini sangat penting karena informasi mengenai persediaan
barang dapat mendukung kegiatan operasional usaha suatu perusahaan atau
instansi, dapat mengefisienkan waktu yang dibutuhkan untuk proses penerimaan
dan pengeluaran barang dan juga dapat meningkatkan produktifitas penjualan.
Begitu pula dengan sistem informasi persediaan dan penjualan makanan

bakso Super Comal masih menggunakan proses manual yaitu dengan
menggunakan metode konvensional yaitu pencatatan secara tertulis dengan nota
dan menggunakan Mesin Kasir sehingga di dalam pengerjaan rekap penjualan
tersebut dirasakan lama, tak hanya itu dengan metode yang masih konvensional
juga dikhawatirkan dapat terjadi kehilangan data. Sehingga masih belum efisien
dalam hal pelayanan ke pelanggan dan kecepatan bertransaksi.
Berdasarkan kelemahan tersebut di atas, maka diperlukan suatu

pengembangan sistem informasi persediaan dan penjualan makanan bakso,
1
sehingga proses pengolahan data stok bakso dan penjualan bisa langsung
dilakukan
secara online . Perlu adanya media internet berupa website. Karena pada
saat ini promosi Bakso Super Comal masih menggunakan media yang sederhana
seperti memasang iklan di surat kabar maupun dari mulut ke mulut para
pelanggan. Sedangkan untuk transaksi masih berupa pencatatan manual, hal ini
menjadikan kegiatan tersebut belum maksimal.Dengan penggunaan sistem
penjualan secara online, diharapkan Bakso Super Comal dapat bersaing dengan
toko-toko yang sudah menerapkan sistem penjualan online terdahulu.
1.2 Batasan Masalah
Batasan masalah penulisan ini adalah:

1. Website ini diopersikan dalam lingkungan berbasis web.
2. Website ini dibuat menggunakan bahasa pemrograman PHP dan
MYSQL sebagai databasenya.
3. Website ini terdapat admin untuk mengelola transaksi dan user
untuk melakukan pembelian dalam websitenya.
4. Menggunakan framework codeigniter untuk mempermudah
Framework Codeigniter Mempermudah kinerja pembuatan website
karena sudah banyak library yang tersedia
5. Pada Website ini terdapat beberapa menu yaitu, Home,Katalog
Menu,Booking Sekarang,Cek Pembayaran,Kritik dan Saran, dan
Login
1.3 Tujuan Penlisan
Tujuan penulisan ini adalah bertujuan untuk membuat sistem informasi

berbasis website Bakso Super Comal yang diharapkan dapat mempermudah
pembeli dalam transaksi pembelian melalui online dan diharapkan dapat bersaing
dengan toko-toko yang sudah menerapkan sistem penjualan online terdahulu.
1
1.4 Metode Penelitian
Metode yang dilakukan adalah dengan menggunakan System Development Life

Cycle yang terdiri dari beberapa tahapan :
1. Perencanaan
Perencanaan bisa dilakukan dengan mendiskusikan hal terkait dengan pemilik
usaha selaku pengguna dari aplikasi web tersebut, menanyakan hal-hal apa saja
yang dapat dibuatkan sesuai dengan keinginan si pengguna yang berkaitan
dengan pengimplementasian aplikasi dalam usaha/bisnis yang dijalankan.
2. Analisis
Mendefinisikan kebutuhan-kebutuhan pengguna baik itu dari spesifikasi
perangkat dan perangkat lunak agar mudah dalam pengimplementasian atau
aplikasi web
3. Perancangan
Membuat rancangan aplikasi mulai dari menyiapkan algoritma dan membuat
rancangan tampilan serta rancangan navigasi.
4. Implementasi
Memulai pembuatan aplikasi web dan pembuatan database.
5. Uji Coba
Setelah aplikasi selesai dibuat kemudian diuji cobakan, jika ditemukan error
atau bug yang terjadi saat proses menjalankan aplikasi web maka dilakukan
perbaikan segera.
3
1.5 SISTEMATIKA PENULISAN
Dalam Penuisan Mengelompokan pembahasan dalam kelompok Bab-bab.
Satu kelompok pembahasan dimasukan dalam satu judul Bab, yang mana Bab-bab
ini terdiri dari subbab-subbab.
BAB I PENDAHULUAN
Berisi tentang latar belakang, batasan masalah, tujuan penulisan, metode
penelitian dan sistematika penulisan.
BAB II LANDASAN TEORI

Menjelaskan teori - teori yang berhubungan dengan penulisan ini, yang sangat
membantu dalam penyelesaian masalah dan perancangan website.
BAB III PERANCANGAN DAN IMPLEMENTASI

Menjelaskan mengenai perancangan website beserta konfigurasi perangkat lunak
yang akan digunakan dan menjelaskan implementasi program yang akan dibuat.
BAB IV PENUTUP
Berisi kesimpulan serta pengalaman yang dapat dijadikan bahan untuk perbaikan
aplikasi dan penyempurnaan aplikasi ini kedepannya.
4
2.LANDASAN TEORI
2.1 Website
Website adalah kumpulan halaman yang menampilkan informasi data,
teks, gambar, data animasi, suara, dan gabungan dari semuanya, baik yang
bersifat statis maupun yang bersifat dinamis yang membentuk suatu
rangkaian bangunan yang saling terkait dengan jaring (hyperlink). Atau
mudahnya sebuah cara untuk menampilkan diri Anda di Internet. Dapat
diibaratkan Website Anda adalah sebuah tempat di Internet, siapa saja di
dunia ini dapat mengunjunginya, kapan saja mereka dapat mengetahui
tentang anda masukan atau bahkan mengetahui dan membeli produk Anda.
(Riyanto, 2014).
2.2 E-Store/E-Commerce
E commerce berasal dari bahasa Inggris, yaitu electronic commerce atau
perdagangan elektronik. Dan sebagaimana perdagangan yang dilakukan
secara langsung atau face to face. Dalam e commerce juga meliputi proses
promosi, pembelian, dan pemasaran produk. Yang berbeda adalah pada
sistem berdagang yang digunakan, yaitu melalui media elektronik atau
internet. Dalam e comerce, seluruh proses perdagangan mulai dari proses
pemesanan produk, pertukaran data, hingga transfer dana dilakukan secara
elektronik. Di tengah perkembangan arus teknologi dan informasi digital
yang semakin canggih. Aktivitas e commerce adalah suatu penerapan dari e
business atau bisnis elektronik. Yang mana berhubungan dengan kegiatan
transaksi komersial. (Andy N., 2021).
2.3 HTML
HTML adalah singkatan dari HyperText Markup Language yaitu Bahasa
pemrograman standar yang digunakan untuk membuat sebuah halaman web,
yang kemudian dapat diakses untuk menampilkan berbagai informasi di
dalam sebuah penjelajah web Internet (Browser).
5
Gambar 2.1 HTML
HTML dapat juga digunakan sebagai link link antara file-file dalam situs
atau dalam komputer dengan menggunakan localhos, atau link yang
menghubungkan antar situs dalam dunia internet .
Supaya dapat menghasilkan tampilan wujud yang terintegerasi
Pemformatan hypertext sederhana ditulis dalam berkas format ASCII
sehingga menjadi halaman web dengan perintah-perintah HTML. HTML
merupakan sebuah bahasa yang bermula bahasa yang sebelumnya banyak
dipakai di dunia percetakan dan penerbirtan yang disebut Standard
Generalized Markup Language (SGML). Sekarang ini HTML merupakan
standar Internet yang dikendalikan dan didefinisikan pemakaiannya oleh
World Wide Wibe Consortium (W3C). (Sovia, R, dan Febio, J, 2017).
HTTP atau Hypertext Transfer Protokol merupakan protokol yang
digunakan untuk mentransfer data atau document yang berformat HTML
dari web server ke web browser. Dengan HTTP inilah yang memungkinkan
Anda menjelajah internet dan melihat halaman web. (Poniman, S, 2016)
2.4 PHP
PHP: Hypertext Preprocessor adalah bahasa skrip yang dapat ditanamkan
atau disisipkan kedalam HTML. PHP banyak dipakai untuk memrogram situs
web dinamis. PHP dapat digunakan untuk membangun sebuah CMS.
6
Gambar 2.2 PHP
PHP bahasa pemrograman script yang paling banyak dipakai saat ini.
PHP banyak dipakai untuk memrogram situs web dinamis, walaupun tidak
tertutup kemungkinan digunakan untuk pemakaian lain. Pada awalnya PHP
merupakan kependekan dari Personal Home Page (Situs Personal).
PHP pertama kali dibuat oleh Rasmus Lerdorf pada tahun 1995. Pada
waktu itu PHP masih bernama Fl (Form Interpreted), yang wujudnya berupa
sekumpulan script yang digunakan untuk mengolah data form dari web.
Selanjutnya Rasmus merilis kode sumber tersebut untuk umum dan
menamakannya PHP/FI. Dengan perilisan kode sumber ini menjadi open
source, maka banyak programmer yang tertarik untuk ikut mengembangkan.
Pada November 1997, dirilis PHP/FI 2.0. Pada rilis ini interpreter PHP
sudah diimplementasikan dalam program C. Dalam rilis ini disertakan juga
modul - modul ekstensi yang meningkatkan kemampuan PHP/FI secara
signifikan.
Pada tahun 1997, sebuah perusahaan bernama Zend menulis ulang
interpreter PHP menjadi lebih bersih, lebih baik, dan lebih cepat. Kemudian
pada Juni 1998, perusahaan tersebut merilis interpreter baru untuk PHP dan
meresmikan rilis tersebut sebagai PHP 3.0 dan singkatan PHP dirubah
menjadi akronim berulang PHP: Hypertext Preprocessing. Pada
pertengahan tahun 1999, Zend merilis interpreter PHP baru dan rilis
tersebut dikenal dengan PHP 4.0. PHP 4.0 adalah versi PHP yang paling
banyak dipakai pada awal abad ke-21. Versi ini banyak dipakai disebabkan
7
kemampuannya untuk membangun aplikasi web kompleks tetapi tetap
memiliki kecepatan dan stabilitas yang tinggi.
Pada Juni 2004, Zend merilis PHP 5.0. Dalam versi ini, inti dari
interpreter PHP mengalami perubahan besar. Versi ini juga memasukkan
model pemrograman berorientasi objek ke dalam PHP untuk menjawab
perkembangan bahasa pemrograman ke arah paradigma berorientasi objek.(
Masykur, F. dan Atmaja., 2015).
2.5 Boostrap
Bootstrap adalah paket aplikasi siap pakai untuk membuat front-end
sebuah Website. Bisa dikatakan, bootstrap adalah template desain web
dengan fitur plus.
Gambar 2.3 Boostrap
Bootstrap diciptakan untuk mempermudah proses desain web bagi

berbagai tingkat pengguna, mulai dari level pemula hingga yang sudah
berpengalaman. (Rozi, Zaenal, 2015).
Cukup bermodalkan pengetahuan dasar mengenai HTML dan CSS, anda
pun siap menggunakan bootstrap. Daya tarik bootstrap terletak pada
kemudahan dan kepraktisan penggunaannya. Tata layout dan pewarnaannya
juga bersih, simple, indah, dan berkesan modern.
Selain itu, mengingat akses web via piranti mobile semakin meningkat
tajam, maka pendekatan desain web responsive dan mobile-friendly yang
8
ditawarkan bootstrap pun juga menjadi solusi praktis dan murah bagi para
pengembang web. Cukup dengan bootstrap, Website anda bisa diakses
secara nyaman via ponsel tanpa menggunakan aplikasi khusus untuk piranti
mobile.
2.6 Codeigniter
CodeIgniter merupakan sebuah framework yang dibuat dengan
menggunakan bahasa PHP, yang dapat digunakan untuk pengembangan web
secara cepat.
Gambar 2.4 CodeIgniter
Adapun framework sendiri dapat diartikan sebagai suatu struktur pustaka-

pustaka, kelas-kelas dan infrastruktur run-time yang dapat digunakan oleh
programmer untuk mengembangkan aplikasi web secara cepat. Tujuan
penggunaan framework adalah untuk mempermudah pengembang web
mengembangkan aplikasi web yang robust secara cepat tanpa kehilangan
fleksibilitas. (Destiningrum, M. dan Adrian, Q.J., 2017).
9
2.7 Visual Studio Code
Visual Studio Code (VS Code) ini adalah sebuah teks editor ringan dan handal
yang dibuat oleh Microsoft untuk sistem operasi multiplatform, artinya tersedia
juga untuk versi Linux, Mac, dan Windows.
Gambar 2.5 Visual Studio Code

Teks editor ini secara langsung mendukung bahasa pemrograman JavaScript,
Typescript, dan Node.js, serta bahasa pemrograman lainnya dengan bantuan
plugin yang dapat dipasang via marketplace Visual Studio Code (seperti C++, C#,
Python, Go, Java, dst).
Banyak sekali fitur-fitur yang disediakan oleh Visual Studio Code, diantaranya
Intellisense, Git Integration, Debugging, dan fitur ekstensi yang menambah
kemampuan teks editor. Fitur-fitur tersebut akan terus bertambah seiring dengan
bertambahnya versi Visual Studio Code. Pembaruan versi Visual Studio Code ini
juga dilakukan berkala setiap bulan, dan inilah yang membedakan VS Code
dengan teks editor-teks editor yang lain. (Rian Yulianto, 2019).
2.8 Konsep MVC

Model-View-Controller (MVC) adalah sebuah metode untuk membuat sebuah
aplikasi dengan memisahkan data (Model) dari tampilan (View) dan cara
bagaimana memprosesnya (Controller). Dalam implementasinya kebanyakan
kerangka kerja (framework) dalam aplikasi web adalah berbasis arsitektur MVC.
MVC memisahkan pengembangan aplikasi berdasarkan komponen utama yang
membangun sebuah aplikasi seperti manipulasi data/basis data, antarmuka
pengguna/user Interface, dan bagian yang menjadi kontrol dalam sebuah aplikasi
10
web/framework itu sendiri. (Jurnal, R.T., 2018).
2.9 Basis Data

Basis data merupakan sekumpulan data yang terintegrasi, yang
diorganisasikan untuk memenuhi kebutuhan para pemakai di dalam suatu
organisasi. Di dalam implementasinya untuk memudahkan dalam
mengakses data disusun dalam suatu struktur logis yang menjelaskan bahwa
:
 Kumpulan table menyusun basis data
 Table tersusun atas sejumlah record
 Sebuah record mengandung sejumlah field
 Sebuah field disimpan dalam bentuk kumpulan bit
Berikut merupakan pengertian dari istilah di atas :
 Field merupakan data terkecil yang memiliki makna yaitu elemen data,
kolom item, dan atribut. Contohnya yaitu nama, alamat, jenis kelamin
dan telephone
 Record merupakan kumpulan dari sejumlah elemen data yang saling
terkait. Contohnya nama, alamat, jenis kelamin dari seseorang
menyusun sebuah record dengan nama lain tupel atau baris.
 Table merupakan penghimpuna sejumlah record. Contohnya yaitu, data
pribadi dari semua pegawai di simpan dalam sebuah table.
 Basis data (database) merupakan sekumpulan data terintegrasi, yang di
organisasi untuk memenuhi kebutuhan para pemakai di dalam suatu
organisasi. Contohnya yait
2.10 MySQL
Pada perkembangannya, MYSQL disebut juga SQL yang merupakan
singkatan dari Structured Query Languange. SQL merupakan bahasa
terstruktur yang khusus digunakan untuk mengolah database.
11
Gambar 2.6 MySQL
SQL pertama kali didefinisikan oleh American National Standards
Institute (ANSI) pada tahun 1986. MYSQL adalah sebiah sistem manajemen
database yang setbersifat open source.
SQL juga merupakan bahasa pemrograman yang dirancang khusus untuk
mengirimankan suatu perintah query (pengaksesan data berdasarkan
pengalamatan tertentu) terhadap sebuah database. Kebanyakan software
database mengimplementasikan SQL secara sedikit berbeda, tapi seluruh
database SQL mendukung subset standar yang ada.
Jadi, SQL adalah permintaan yang melekat pada suatu database atau
SMBD tertentu. Dengan kata lain, SQL adalah perintah atau bahasa yang
melekat di dalam SMBD. Sebagai suatu bahasa permintaan, SQL didukung
oleh SMBD, seperti MySQL Server, MySQL, PostgreSQL, Interbase, dan
Oracle. Selain itu SQL juga didukung oleh database bukan server, seperti MS
Acess maupun Paradox.( Novendri, M.S., et al. 2019.).
2.11 Black Box Testing

Black Box Testing adalah pengujian yang didasarkan pada detail aplikasi
seperti tampilan aplikasi, fungsi-fungsi yang ada pada aplikasi, dan
kesesuaian alur fungsi yang diinginkan. Pengujian ini tidak melihat dan
menguji source code program.
Pengujian yang dilakukan hanya mengamati hasil eksekusi melalui data
uji dan memeriksa fungsional dari perangkat lunak. Jadi dianalogikan seperti
melihat suatu kotak hitam yang hanya bias melihat penampilan luarnya saja
12
tanpa tahu ada apa dibalik bungkus hitamnya. Sama seperti pengujian black
box, mengevaluasi hanya dari tampilan luarnya dan fungsionalitasnya tapa
mengetahui apa sesunggunya yang terjadi dalam proses detainya. (Jaya, T.
S., 2018)
2.12 Struktur Navigasi

Struktur Navigasi merupakan struktur atau alur dari suatu program yang
merupakan rancangan hubungan (rantai kerja) dari beberapa area yang
berbeda dan dapat membantu mengorganisasikan seluruh elemen pembuatan
Website .
2.12.1 Struktur Navigasi Linier

Struktur navigasi linier pada gambar 2.7 hanya mempunya satu rangkaian
cerita yang berurut, yang menampilkan satu demi satu tampilan layar secara
berurut menurut urutannya .
Tampilan yang dapat ditampilkan pada sruktur jenis ini adalah satu
halaman sebelumnya atau satu halaman sesudahnya, tidak dapat dua
halaman sebelumnya atau dua halaman sesudahnya .
Gambar 2.7 Struktur Navigasi Linier
13
2.12.2 Struktur Navigasi Non-Linier
Struktur navigasi non-linier pada gambar 2.8 atau struktur tidak berurut
merupakan pengembangan dari struktur navigasi linier. Pada struktur ini
diperkenankan membuat navigasi bercabang, percabangan yang dibuat pada
struktur non-linier ini berbeda dengan percabangan pada struktur hirarki,
karena pada percabangan non-linier ini walaupun terdapat percabangan,
tetapi tiap-tiap tampilan mempunyai kedudukan yang sama yaitu tidak ada
Master Page dan Slave Page .
Gambar 2.8 Struktur Navigasi Non-Linier
2.12.3 Struktur Navigasi Hirarki

Struktur navigasi hirarki biasa disebut struktur bercabang, merupakan
suatu struktur yang mengandalkan percabangan untuk menampilkan data
berdasarkan kriteria tertentu. Pada gambar 2.9 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.
14
Gambar 2.9 Struktur Navigasi Hirarki
2.12.4 Struktur Navigasi Campuran

Struktur navigasi campuran merupakan gabungan dari ketiga struktur
sebelumnya yaitu linier, non-linier dan hirarki. Struktur pada gambar 2.10
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.10 Struktur Navigasi Campuran.
2.13 UML
UML adalah bahasa spesifikasi standar yang dipergunakan untuk

mendokumentasikan, menspesifikasikan dan membangun perangkat lunak.
UML merupakan metodologi dalam mengembangkan sistem berorientasi
objek dan juga merupakan alat untuk mendukung pengembangan sistem.
UML saat ini sangat banyak dipergunakan dalam dunia industri yang
15
merupakan standar bahasa pemodelan umum dalam industri perangkat
lunak dan pengembangan sistem (Urva et al., 2015)
2.13.1 Use Case Diagram
Use Case Diagram menggambarkan fungsionalitas yang diharapkan

dari sebuah sistem. Yang ditekankan adalah “apa” yang diperbuat sistem,
dan bukan “bagaimana”. Sebuah Use Case merepresentasikan sebuah
interaksi antara aktor dengan sistem.
Use Case merupakan sebuah pekerjaan tertentu, misalnya masuk ke
sistem, membuat sebuah daftar belanja, dan sebagainya. Seorang aktor
adalah sebuah entitas manusia atau mesin yang berinteraksi dengan sistem
untuk melakukan pekerjaan-pekerjaan tertentu.
Use Case Diagram dapat sangat membantu bila kita sedang
menyusun requirement sebuah sistem, mengkomunikasikan rancangan
dengan klien, dan merancang test case untuk semua fitur yang ada pada
sistem. Sebuah Use Case dapat meng-include fungsionalitas Use Case lain
sebagai bagian dari proses dalam dirinya. Secara umum diasumsikan
bahwa Use Case yang di-include akan di panggil setiap Use Case yang
meng-include di eksekusi secara normal. Sebuah Use Case dapat di-include
oleh lebih dari satu use case lain, sehingga duplikasi fungsionalitas dapat
dihindari dengan cara menarik keluar fungsionalitas yang umum. Simbol
yang digunakan dalam Use Case Diagram dapat dilihat pada Tabel 2.1
Tabel 2. 1 Simbol dalam Use Case Diagram (Sumber: Verdi Yasin, 2012)
Notasi Keterangan
Use Case: menggambarkan perilaku

aplikasi termasuk aksi antar aktor
dengannya.
16
Pembatas Sistem: tanda yang
mengelompokkan beberapa use-case
menjadi suatu sistem dan pembatas
antara internal dan eksternal.
Actor: menggambarkan pengguna

aplikasi yang juga menjelaskan objek
yang harus dikerjakan aplikasi.
Asosiasi: memodelkan koneksi

antar objek ke kelompok
yang berbeda.
Hubungan: menggmbarkan hubungan

yng ada atau use case.
Label<<include>>: tipe hubungan
<<include>> yang menerangkan bahwa suatu use-

case mengadopsi analisis use case
lain.
2.13.2 Activity Diagram
Activity Diagram Activity diagram adalah gambaran berbagai

alir aktivitas dalam sistem yang sedang dirancang, bagaimana
masing-masing alir berawal, decision yang mungkin terjadi, dan
bagaimana mereka berakhir.(Verdi Yasin,2012). Simbol Acitvity
diagram dapat dilihat pada tabel 2.2
17
Tabel 2. 2 Simbol dalam Activity Diagram (Sumber: Verdi Yasin, 2012)
Nama Keterangan
Aktifitas: penggambaran sebuah aksi

yang akan dijalankan hingga selesai.
Titik awal: titik yang menandakan akan
dimulainya suatu aktifitas.
Titik akhir: titik yang menandakan
proses keseluruhan telah selesai.
Transisi: arah aliran proses menuju
aktiftas tersebut sesudah selesai
Percabangan: titik dimana suatu aliran
dipisah berdasarkan kondisi tertentu.
3. PERANCANGAN DAN IMPEMENTASI
19
3.1 Gambaran Umum
Aplikasi website ini merupakan aplikasi pemesanan menu di Rumah
Makan Bakso Super Comal dengan online. Dengan adanya website ini
memudahkan customer untuk melakukan pemesanan online melalui website,
jadi customer tidak harus datang langsung ke restoran. Lalu customer juga
dapat memesan nomor meja pada aplikasi website. Pada website ini akan
ada admin dan user, admin dapat melihat orderan dan detail transaksi pada
aplikasi, lalu user sebagai konsumen yang memesan makanan dan minuman.
website ini juga sangat mudah digunakan sehingga memudahkan user dalam
menggunakan website ini.
3.2 Analisa Perangkat Keras
Aplikasi website pemesanan makanan dan minuman membutuhkan

kemampuan relative rendah. Disini perangkat keras yang digunakan untuk
membuat website ini seperti berikut:
A. Intel I7 gen 8th

B. RAM 16 GB
C. Hardisk 1 TB
D. VGA GTX 1050TI
3.3 Analisa Perangkat Lunak
20
Perangkat lunak digunakan dalam sebuah sistem merupakan kumpulan
perintah-perintah yang diberikan kepada perangkat keras agar saling
berinteraksi untuk melakukan suatu tugas. Berdasarkan studi literatur
penulisan ilmiah ini, maka diperolah Perangkat lunak yang dibutuhkan oleh
pembuat untuk membangun aplikasi adalah sebagai berikut :
 Sistem operasi windows 10

 App diagram untuk membuat struktur navigasi
 PHP sebagai bahasa pemrograman
 MYSQL sebagai database
 Codeigniter sebagai framework untuk memudahkan
pembuatan website
 Visual Studio Code sebagai text editor untuk melakukan
coding.
3.4 Perancangan Struktur Navigasi
Pada gambar 3.1 dijelaskan struktur navigasi admin dari aplikasi website
yang telah selesai dibuat, pada gambar 3.2 dijelaskan struktur navigasi user
dari website. Struktur navigasi adalah rancangan alur aplikasi website yang
berhubungan dari satu halaman ke halaman lain. Struktur navigasi yang
digunakan dalam situs aplikasi website ini merupakan struktur navigasi
hirarki agar memberikan fleksibilitas dalam mengunjungi dan mengelola
aplikasi website.
21
Gambar 3.1. Struktur Navigasi Admin
Keterangan Gambar 3.1 :

 Login, merupakan sebuah menu untuk masuk kedalam website
sebagai Admin
 Dashboard, merupakan halaman utama sebuah halaman admin .
 Makanan dan Minuman, merupakan sebuah menu yang dapat
menambah dan menghapus menu pada website.
 Manajemen Meja, merupakan sebuah menu untuk mengatur dan
menambah meja.
 Riwayat Pembayaran, merupakan sebuah menu riwayat pembayaran
yang ada pada website
 Data Penjualan, merupakan sebuah menu yang berisi tentang data
penjualan pada website.
 Kritik dan Saran, merupakan sebuah menu yang berisi tentang kritik
dan saran dari user.
 Profil Usaha, merupakan sebuah menu yang berisi tentang Profil
Usaha pada website.
 Metode Pembayaran, merupakan sebuah menu metode pembayaran
yang tersedia pada website.
22
Gambar 3.2. Struktur Navigasi User
Keterangan Gambar 3.2 :

 Home, merupakan halaman utama sebuah website.
 Katalog Menu, merupakan menu untuk mengatur website, produk,
melihat list order, dan melihat user yang terdaftar.
 Booking Sekarang, merupakan sebuah menu untuk pesan makanan
dan meja
 Cek Pembayaran, merupakan sebuah menu untuk melihat
pembayaran pengguna,jam pemesanan, dan pengguna dapat
mengupload invoice pembayaran maskimal 1 jam dari pembayaran
 Kritik dan Saran, merupakan sebuah menu yang dapat di isi user
untuk kritik dan saran
 Login, merupakan sebuah menu untuk masuk ke dalam website
sebagai admin
23
3.5 Perancangan Sistem dengan UML
Perancangan program aplikasi ini terdiri dari perancangan diagram UML
Activity Diagram dan use case diagram serta dilanjutkan dengan membuat
tampilan program website.
3.5.1 Use case Diagram

Use case diagram digunakan untuk mendeskripsikan apa yang
seharusnya dilakukan oleh sistem. Use case Diagram menyediakan cara
mendiskripsikan pandangan eksternal terhadap sistem dan interaksi-interaksinya
terhadap dunia luar. Berikut ini merupakan use case diagram dari website
pemesanan hotel online yang diusulkan
 Use case Diagram Home
Gambar 3.3 Use case Diagram Home.
Pada gambar 3.3 merupakan use case diagram home yang menjelaskan
menu yang bisa di akses Pengunjung dan menu yang bisa di akses admin.
24
 Use case Diagram Login Admin
Gambar 3.4 Use case Diagram Login Admin
Pada Gambar 3.4 merupakan use case diagram login admin yang
menjelaskan cara admin login ke halaman admin pada website.
 Use case Diagram Pemesanan
Gambar 3.5 Use case Diagram Pemesanan
25
Pada Gambar 3.5 merupakan use case diagram pemesanan yang
menjelaskan cara pengunjung melakukan pemesanan menu yang di mulai
dari user memilih daftar menu
3.5.2 Activity Diagram

Berikut merupakan gambaran activity diagram dari website pemesanan
menu restoran yang diusulkan:
1. Login Admin
Admin mengakses website pemesanan menu restoran, lalu admin
menginput username dan password untuk login sebagai admin setelah itu admin
akan mengakses halaman admin
Gambar 3.6 Activity Diagram Login Admin
26
2. Prosedur Pemesanan
Setelah user berada di halaman home, maka user dapat melihat menu
yang tersedia di website, Untuk memesan menu yang diinginkan user, dapat
langsung menekan menu yang diinginkan maka akan muncul informasi menu,
lalu tekan order dan user dapat
langsung memesan menu lalu user mengisi form yang tersedia untuk pemesanan
menu. Setelah user melakukan pemesanan maka data user akan langsung masuk
pada admin
Gambar 3.7 Activity Diagram Pemesanan
27
3.6 Perancangan Database
Aplikasi ini menggunakan DBMS MySQL dalam perancangan database.
Terdiri 9 tabel, database ini bernama “db_gstore” terdiri dari 11 tabel yaitu
booking, gambar_menu, lupa_password, meja, menu, menu_dibooking,
metode_pembayaran, profil_usaha, saran_kritik. Masing-masing tabel
memiliki peran masing-masing dalam merancang Website Pemesanan
“Bakso Super Comal” Menggunakan CodeIgniter Dengan Database
MYSQL”, peran dari masing-masing tabel tersebut antara lain sebagai
berikut.
 Tabel Booking digunakan untuk melihat data user yang
booking.terdiri dariid_Booking,id_Detail Menu, id_Meja,
nama_pemesan,nomor_hp,tanggal_pesan,
tanggal_reservasi,total_pembayaran_total_sudah_dibayar_batas_pe
mbayaran_dp,status_pembayaran,bukti_pembayaran
 Tabel gambar_menu digunakan untuk menyimpan data gambar
menu yang tersedia pada website. dari id_gambar, id_menu, gambar
 Tabel lupa_password digunakan jika lupa password. terdiri dari
id_lupa_password, id_pegawai, pertanyaankeamanan1,
pertanyaankeamanan 2, jawabankeamanan1, jawabankemanan2, .
 Tabel meja digunakan admin untuk mengatur meja, terdiri dari
id_meja, nomor_meja, kapasitas_meja.
 Tabel menu digunakan untuk admin menambah dan mengapus menu
tersedia pada website. terdiri dari id_menu, nama_menu,
detail_menu, kategori_menu, stok, harga
 Tabel menu_dibooking digunakan untuk melihat menu yang di
booking oleh user. terdiri dari id_menu_booking, id_detail_menu,
nama_makanan, jumlah, sub_total, status_order.
28
 Tabel metode_pembayaran digunakan untuk menu metode
pembayaran. terdiri dari id_metode, nama_merchant, atas_nama,
kode_pembayaran.
 Tabel profil_usaha digunakan untuk menu profil usaha pada admin.
terdiri dari id, nama_usaha, deskripsi, alamat, nomor_telepon, email,
foto_usaha_1, foto_usaha_2, foto_usaha_3.
 Tabel saran_kritik digunakan untuk menampung saran dan kritik
dari user. terdiri dari id_saran, nama_pelanggan, email, tanggal,
saran.
Masing-masing tabel memiliki struktur yang berbeda. Berikut merupakan struktur

dari tabel.
Tabel 3.1 Struktur Tabel booking
Nama field Tipe Data Null Panjang Index

id_booking int Not null 12 Primary
Key
id_detail_menu text Not null
id_meja int Not null 12
nama_pemesan varchar Not null 250
nomor_hp Varchar 250
tanggal_pesan datetime
tanggal_reservasi date
total_pembayaran int 12
total_sudah_dibayar int 12
batas_pembayaran_dp datetime
status_pembayaran Varchar 250
bukti_pembayaran text
29
Tabel 3.2 Struktur Tabel gambar_menu

id_gambar int Not null 11 Primary
Key
id_menu int Not null 11
gambar varchar 250
Tabel 3.3 Struktur Tabel lupa_password

id_lupa_password int Not null 11 Primary
Key
id_pegawai int Not null 11
pertanyaankeamanan1 varchar Not null 255
pertanyaankeamanan2 Varchar 255
jawabankeamanan1 Varchar 255
Jawabankeamanan2 Varchar 255
Tabel 3.4 Struktur Tabel meja

id_meja int Not null 11 Primary
Key
nomor_meja varchar Not null 50
kapasitas_meja int 11
30
Tabel 3.5 Struktur Tabel menu

id_menu int Not null 11 Primary
Key
nama_menu varchar Not null 100
detail_menu text
kategori Varchar 50
stok Varchar 50
harga Int 100
Tabel 3.6 Struktur Tabel menu_dibooking

id_menu_dibooking int Not null 12 Primary
Key
id_detail_menu text Not null
nama_makanan varchar Not null 250
jumlah Int Not null 5
sub_total Int Not null 12
status_order Varchar Not null 255
Tabel 3.7 Struktur Tabel metode_pembayaran

id_metode int Not null 12 Primary
Key
nama_merchant Varchar Not null 250
31
atas_nama Varchar Not null 250
kode_pembayaran Varchar Not null 250
Tabel 3.8 Struktur Tabel profil_usaha

id int Not null 12 Primary
Key
nama_usaha varchar Not null 250
deskripsi text Not null 25
alamat Varchar Not null 250
nomor_telepon Varchar Not null 17
email Varchar 100
foto_usaha_1 text
foto_usaha_2 text
foto_usaha_3 text
Tabel 3.9 Struktur Tabel saran_kritik

id_saran int Not null 11 Primary
Key
nama_pelanggan varchar Not null 100
email varchar Not null 50
tanggal date Not null
saran text Not null
32
Dalam mengelola database MySQL menggunakan perangkat lunak dengan
CLI dari XAMPP. PhpMyAdmin adalah perangkat lunak yang ditulis dalam
bahasa pemrograman PHP. Berikut ini merupakan langkah dalam
pembuatan database menggunakan PhpMyAdmin. Tabel-tabel yang dibuat
akan masuk ke PhpMyAdmin pada gambar 3.9, untuk membuka
PhpMyAdmin harus membuka browser terlebih dahulu, kemudian
PhpMyAdmin bisa diakses dengan alamat URL
http://localhost/PhpMyAdmin/.
Gambar 3.9 database phpmyadmin
3.7 Perancangan Tampilan Antarmuka Aplikasi Website

Tahapan selanjutnya adalah perancangan tampilan antarmuka (user
interface). Tahap ini merupakan tahap yang sangat penting karena ditahap
ini dapat mempermudah dalam merancang interface dari program aplikasi
Website yang akan dibuat. Tahap ini menampilkan gambaran tampilan
Aplikasi Website Pemesanan Menu Makanan dan Minuman Menggunakan
CodeIgneter Dengan Database MYSQL diimplementasikan secara langsung.
Terdapat 5 rancangan tampilan antarmuka yang akan dirancang, diantaranya
rancangan menu login, home, cart, Detail Pemesan Order Selesai .
 Perancagan Tampilan Menu login
33
Gambar 3.10 merupakan tampilan menu Log in, pada menu ini hanya yang
dapat admin melakukan login dan mengelola website.
Gambar 3.10 Perancangan Tampilan login Website
 Perancagan Tampilan Menu home

Gambar 3.11 merupakan tampilan home, pada menu ini pengguna bisa
melihat halaman utama website.
Gambar 3.11 Perancangan Tampilan home Website
34
 Perancagan Tampilan Menu Katalog Menu
Gambar 3.12 merupakan tampilan Katalog meu, pada menu ini user bisa
melihat produk yang sudah dipilih dan melanjutkan ke proses pembayaran.
Gambar 3.12 Perancangan Tampilan Katalog Menu Website
 Perancagan Tampilan Menu Booking

Gambar 3.13 merupakan tampilan Booking, pada menu ini user mengisi
data informasi pesanan untuk booking dan untuk konfirmasi order.
35
Gambar 3.13 Perancangan Tampilan Booking
 Perancagan Tampilan Menu Sukses Booking

Gambar 3.14 merupakan tampilan sukses booking, pada menu ini user
sukses melakukan pemesanan dan mengkonfirmasi pembayaran.
Gambar 3.14 Perancangan Tampilan order selesai
36
3.8 Mengunduh CodeIgniter 3
Karena website yang ingin saya buat nantinya harus
berarsitekturkan MVC, maka saya rasa menggunakan CodeIgniter
Versi 3 adalah pilihan yang tepat. CodeIgniter menggunakan
komponen yang berbeda-beda untuk mengelola task development yang
spesifik. Untuk mengunduhnya kita hanya cukup mengklik salah satu
versi CodeIgniter yang akan kita gunakan.
Gambar 3.15 Tampilan Halaman CodeIgniter
3.8.1 Penempatan Project CodeIgniter

Supaya Project CodeIgniter dapat dijalankan, maka kita harus
meng-ekstrak file yang telah di unduh sebelumnya (CodeIgniter).
Selanjutnya pindahkan folder CodeIgniter tersebut kedalam folder C >
xampp > htdocs. Hal ini dilakukan agar project CodeIgniter tersebut
dapat dijalankan di server lokal dengan menggunakan xampp.
37
Gambar 3.16 Isi Folder Dari Project CodeIgniter
3.9 Mengkonfigurasi Project CodeIgniter

Dalam tahap ini saya mengkonfigurasi base url dan menghubungkan project
CodeIgniter saya dengan database. Untuk mengkonfigurasi base url, kita akan
sedikit mengubah kode pada application > config > config.php. Scroll kebawah
hingga menemukan kode yang menyangkut tentang base url, lalu mengubah
kodenya menjadi :
Gambar 3.17 konfigurasi Codeigniter
Hal ini dilakukan agar saat kita menjalankan website pada local server
kita hanya perlu menuliskan http://localhost/resto/ untuk dapat mengakses isi
dari project yang kita buat. Selanjutnya kita akan menghubungkan project
CodeIgniter dengan database, caranya cukup menambahkan beberapa baris kode
pada application > config > database.php. ubah kode menjadi :
38
Gambar 3.18 konfigurasi database
Pada bagian database, isi nama database sesuai dengan database yang
dibuat sebelumnya. Dengan begitu maka project CodeIgniter kita telah
terhubung dengan database.
3.10 Implementasi dan Scripting Halaman Menggunakan Codeigniter

Setelah melakukan perancagan database langkah awal dari
pembuatannya adalah melakukan koneksi ke database.
3.10.1 Implementasi Dan Scripting Halaman Login

 Tampilan yang muncul pada halaman pertama yaitu halaman login pada
gambar 3.39, pada halaman ini hanya terdapat inputan email dan Password
untuk admin melakukan loginTerdapat juga tulisan Login yang akan
menuju kembali ke halaman login.
39
Gambar 3.19 Implementasi Halaman Login
 Scripting Halaman Login Menggunakan CodeIgniter

Untuk data login bisa di akses seusai yang ada di database maka dilakukan
potongan program pada gambar 3.20 untuk login sebagai admin.
Gambar 3.20 Scripting Login Admin
40
3.10.2 Implementasi Dan Scripting home
 Tampilan yang akan muncul ketika pertama kali mengunjungi
website dan terdapat halaman utama seperti pada di gambar 3.21 untuk
mendaftar user dapat melihat bagian home website.
41
Gambar 3.21 Implementasi Home
 Scripting Halaman home Menggunakan CodeIgniter

Halaman ini yang di akses pertama kali oleh pengunjung dan user. Didalam
halaman home terdapat tombol menu dan cart yang dapat digunakan oleh user
untuk bisa mengakses website. Berikut potongan program pada gambar 3.22.
Gambar 3.22 Scripting Home
42
3.10.3 Implementasi Dan Scripting Katalog Menu
 Tampilan yang akan muncul ketika menekan tombol Katalog
menu. Pada halaman ini terdapat menu yang tersedia, dan user bisa memilih
dan melihat detail menu. bagian product website seperti pada gambar 3.23.
Gambar 3.23 Implementasi Halaman Katalog Menu
 Scripting Halaman Katalog Menu Menggunakan

Codeigniter
Halaman ini diakses saat user ingin melihat pesanan dari menu
yang dipilih. Dan user dapat melakukan pembelian. Berikut
potongan program pada gambar 3.24.
43
Gambar 3.24 Scripting Katalog Menu
3.10.4 Implementasi Dan Scripting Booking

 Tampilan yang akan muncul ketika menekan tombol booking. Pada halaman ini
user mengisi data untuk pemesanan menu yang sudah dipilih. bagian detail
pemesan seperti pada gambar 3.25.
Gambar 3.25 Implementasi Booking
44
 Scripting Halaman Booking Menggunakan Codeigniter
Halaman ini diakses saat user mengisi detail pemesanan untuk
konfirmasi pemesanan. Berikut potongan program pada gambar
3.26.
Gambar 3.26 Scripting Booking
3.10.5 Implementasi Dan Scripting Sukses Booking

 Tampilan yang akan muncul ketika user menekan tombol booking sekarang.
Pada halaman ini pesanan yang di order user sudah masuk ke dalam database
admin dan user selanjutnya melakukan pembayaran . bagian sukses booking
seperti pada gambar 3.27.
45
Gambar 3.27 Implementasi Sukses Booking
 Scripting Halaman Sukses Booking Menggunakan

Codeigniter
Halaman ini diakses saat user selesai melakukan pemesanan.
Ketika user menekan tombol konfirmasi order akan masuk
kedalam database. Berikut potongan program pada gambar 3.28.
Gambar 3.28 Scripting Sukses Booking
46
3.11. Upload Hosting Menggunakan 000webhost
Layout website yang sudah jadi agar dapat diakses di internet maka perlu di
unggah ke hosting. Hosting server menggunakan 000webhost dengan layanan
gratis. Sebelum unggah ke hosting diperlukan menentukan alamat website, karena
fitur gratis maka alamat harus memakai subdomain 000webhost. Upload hosting
dilakukan pada file manager di kontrol panel 000webhost. File yang diunggah
yaitu file HTML dan CSS layout website serta file PHP Codeigniter koneksi
website dengan database.
Gambar 3.29 Hosting Website
3.12 Uji Coba Website “Aplikasi Pemesanan Menu Makanan dan

Minuman “Bakso Super Comal Menggunakan Codeigniter dan Database
MYSQL Berbasis Website”.
47
3.12.1 Uji Coba Website Menggunakan Black Box Testing
Hasil uji coba website menggunakan metode black box testing ditunjukkan
pada Tabel 3.7. Black box testing bertujuan untuk menunjukkan fungsi
perangkat lunak tentang cara peng-operasi-annya, apakah input yang
dilakukan telah sesuai dengan output yang diharapkan.
Tabel 3.10 Uji coba Website
No Fungsi Cara pengujian Hasil yang Hasil pengujian

yang diuji diharapkan
Halaman Masuk kedalam Dapat Halaman ini
1 Login website untuk menampilkan dapat
melakukan login form login dan menampilkan
sebagai admin. berhasil masuk form login
kedalam halaman berupa email
admin. dan password.
Halaman Pada website ini Dapat Halaman ini
2 Home menampilkan menampilkan dapat
halaman home home Serta menampilkan
saat pertama kali pengunjung dapat semua gambar
dikunjungi dan meemesan menu item produk
menampilkan dari halaman pada website.
tombol menu dan home.
Cart
Halaman Menekan tombol Dapat Halaman ini
3 Katalog katalog menu pada menampilkan dapat
Menu halaman home. menu yang menampilkan
tersedia pada menu yang
halaman website tersedia pada
halaman
website
48
4 Halaman Pada halaman ini Pengguna dapat Halaman ini
Booking menampilkan mengisi form dapat
halaman booking untuk detail menampilkan
untuk user mengisi pesanan yang di detail pemesan
form untuk order, lalu dan pengguna
melakukan booking konfirmasi order dapat
meja dan menu melakukan
konfirmasi
order
5 Halaman Menekan tombol Pengguna dapat Halaman ini
Sukses booking sekarang melakukan dapat
Booking untuk melakukan pembayaran dan menampilan
pembayaran melihat detail konfirmasi
pesanan yang di untuk
order pembayaran
dan detail
pesanan
Berdasarkan Tabel 3.8 dapat disimpulkan bahwa uji coba dengan

menggunakan metode black box aplikasi website dapat bejalan dengan
baik sesuai dengan yang diharapkan. Dan website dapat diakses pada url
3.12.2 Uji Coba Website Menggunakan Browser

Hasil uji coba website menggunakan 4 browser seperti yang ditunjukkan
pada Tabel 3.8. apakah website berjalan dengan baik seperti yang
diharapkan
49
Tabel 3.11 Uji Coba Browser
No. Nama browser Versi browser Keterangan

97.0.4692.99 Pada brower google chrome
1 Google Chrome website berhasil terbuka dan
tampilan sesuai pada
posisinya, Serta tidak ada
kendala
72.0.2 Pada browser Mozilla
2 Mozilla Firefox Firefox website berhasil
terbuka dan tampilan sesuai
pada posisinya, Serta tidak
ada kendala
97.0.1072.76 Pada browser Microsoft
3 Microsoft Edge Edge website berhasil
ada kendala
83.0.4254.27 Pada browser Opera website
4 Opera berhasil terbuka dan tampilan
sesuai pada posisinya, Serta
tidak ada kendala

menggunakan 4 browser yang berbeda, Aplikasi website dapat berjalan
dengan baik pada ke-4 browser.
50
3.12.3 Uji Coba Website Menggunakan Mobile Browser
Hasil uji coba website Resto menggunakan 4 device Mobile browser seperti yang
ditunjukkan pada Tabel 3.9. apakah website berjalan dengan baik seperti yang
diharapkan.
Tabel 3.12 Uji Coba Mobile Browser
No. Nama Device Ukuran Layar Keterangan

390 x 844 Pada Mobile browser Iphone
1 Iphone 12 Pro 12 pro berhasil terbuka dan
kendala
360 x 740 Pada Mobile browser
2 Samsung Galaxy S8 Samsung Galaxy S8 berhasil
ada kendala
414 x 816 Pada Mobile browser Iphone
3 Iphone XR XR berhasil terbuka dan
kendala
412 x 915 Pada Mobile browser
4 Samsung Galaxy S20 Samsung Galaxy S20 Ultra
Ultra berhasil terbuka dan tampilan
sesuai pada posisinya, Serta
tidak ada kendala
51
menggunakan 4 Mobile browser yang berbeda Device, Aplikasi website
dapat berjalan dengan baik pada ke-4 Mobile browser
52
3.12.4 Uji Coba Kuesioner
Tahap ini merupakan uji coba tahap terakhir dengan menggunakan metode
kuisioner. Kuesioner merupakan metode pengumpulan data yang dilakukan
dengan cara memberi serangkaian pertanyaan-pertanyaan yang ditujukan kepada
responden untuk dijawab. Metode ini merupakan salah satu metode yang efisien
karena penulis telah mengetahui variabel-variabel apa yang akan diukur dan tahu
apa yang diharapkan dari responden.
Pada tahapan ini, penulis menggunakan metode skala likert. Skala likert
merupakan skala ini skala penelitian yang dapat dipakai untuk mengukur sikap
dan pendapat. Skala ini digunakan untuk melengkapi kuesioner yang
menharuskan responden menunjukkan tingkat persetujuan terhadap serangkaian
pertanyaan. Tingkat persetujuan yang dimaksud adalah skala likert 1-5 pilihan,
dengan gradasi dari sangat setuju (SS) hingga sangat tidak setuju (STS) berikut ini
tingkatannya.
Keterangan :
1. Sangat Tidak Setuju

2. Tidak Setuju
3. Cukup Setuju
4. Setuju
5. Sangat Setuju
Jawaban Bobot
Sangat Setuju 5
Setuju 4
Cukup Setuju 3
Tidak Setuju 2
53
Sangat tidak setuju 1
Tabel 3.2 Perhitungan kuisioner menggunakan skala likert
No Pertanyaan Skor
SS S CS TS STS
ASPEK SISTEM
1 Apakah website mudah dikenali? 9 6 0 0 0
2 Apakah website mudah dioperasikan? 9 5 1 0 0
3 Apakah warna tampilan website enak 8 5 2 0 0

dilihat & tidak membosankan?
ASPEK PENGGUNA
4 Apakah tampilan menu website 9 6 0 0 0

mudah dikenali?
5 Apakah website mudah 10 5 0 0 0

dibaca
6 Apakah simbol-simbol mudah 8 7 0 0 0

dipahami
ASPEK INTERAKSI
7 Apakah mudah mengakses informasi? 8 4 3 0 0
8 Apakah fitur yang 10 5 0 0

ditawarkan sesuai dengan 0
kebutuhan?
9 Apakah menu dan tampilan mudah 8 6 1 0 0

diingat?
54
10 Apakah website dapat mempersingkat 12 2 1 0 0
waktu dibanding cara manual?
JUMLAH 91 51 8 0 0
JUMLAH SKOR 455 204 24 0 0
𝚺SKOR 683
PRESENTASE (%) 91,06
∑Skor = (jumlah skor SS) + (jumlah skor S) +(jumlah skor

CS)
+ (jumlah skor TS) + (jumlah skor STS)
= 455 + 204 + 24
= 683
Presentase = 𝚺Skor/SkorDiharapkan x 100%
= 683/750 x 100%
= 91,06%
Dari Hasil analisa data yang dikumpulkkan dengan menggunakan metode

kuisioner dari 10 responden, maka dapat disimpulkan dengan persentase 91,06%
menyatakan aplikasi ini dapat berjalan dengan baik, fitur yang tersedia dapat
berjalan, struktur navigasi sesuai dengan rancangan, informasi yang diberikan
dapat dipahami dengan baik dan juga website dapat digunakan secara mudah
sesuai dengan rancangan awal.
55
4. PENUTUP
4.1. Kesimpulan
kesimpulan yang ditemukan pada penulisan ilmiah ini setelah

melakukan tahap implementasi dan menguji sistem adalah Aplikasi
Website dapat diakses online melalui URL
https://baksosupercomal.000webhostapp.com/ selama 1 tahun dari
tanggal 2 Februari 2023 sampai dengan 1 Februari 2024 dan juga
Pengguna Dapat melakukan pemesanan melalui website.Aplikasi
Website ini telah diuji coba pada 4 browser yang berbeda dan 4
Mobile browser yang berbeda. hasil yang di dapat dari uji coba
browser dan device website dapat berjalan dengan baik terhadap 4
browser yang berbeda dan website responsif di device yang berbeda
berjalan dengan baik.
4.2. Saran
Saran yang dapat penulis ingin berikan untuk pengembangan aplikasi

website ini adalah Aplikasi website dapat dikembangkan di platform
lain seperti android. User Interface pada aplikasi website masih
terlalu simple. Diharapkan untuk kedepannya lebih baik lagi.
Memperbanyak fitur fitur pada website agar website lebih baik
lagi.Tampilan aplikasi dapat berjalan baik pada website dan
smartphone yang memiliki resolusi yang berbeda
54
DAFTAR PUSTAKA
Andy N., 2021. Pengertian E Commerce, Contoh, Jenis &

Perkembangannya, URL: https://qwords.com/blog/pengertian-e-
commerce/ [Tanggal Akses 15 Desember 2022].
Destiningrum, M. dan Adrian, Q.J., 2017. Sistem Informasi Penjadwalan
Dokter Berbassis Web Dengan Menggunakan Framework Codeigniter
(Studi Kasus: Rumah Sakit Yukum Medical Centre). Jurnal
Teknoinfo, 11(2), pp.30-37 URL:
http://ejurnal.teknokrat.ac.id/index.php/teknoinfo/article/download/24/24
[Tanggal Akses 11 Desember 2022].
Jurnal, R.T., 2018. Pengembangan Rancang Bangun Sistem Kesiswaan
dengan Menggunakan Framework Mvc (Model View
Controller). Kilat, 7(1), pp.86-90 URL: https://stt-pln.e-
journal.id/kilat/article/view/99 [Tanggal Akses 17 Desember 2022].
Masykur, F. dan Atmaja, I.M.P., 2015. Sistem Administrasi Pengelolaan
Arsip Surat Masuk Dan Surat Keluar Berbasis Web. IJNS-Indonesian
Journal on Networking and Security, 4(3) URL:
http://www.ijns.org/journal/index.php/ijns/article/view/1336 [Tanggal
Akses 20 Desember 2022]
Jaya, T. S. 2018. Pengujian Aplikasi dengan Metode Blackbox Testing
Boundary Value Analysis (Studi Kasus: Kantor Digital Politeknik Negeri
Lampung). Jurnal Informatika: Jurnal Pengembangan IT, 3(1), 45-48.
Novendri, M.S., Saputra, A. and Firman, C.E., 2019. Aplikasi Inventaris
Barang Pada Mts Nurul Islam Dumai Menggunakan Php Dan
Mysql. lentera dumai, 10(2) URL:
http://ejournal.amikdumai.ac.id/index.php/Path/article/view/40 [Tanggal
Akses 25 Desember 2022].
Poniman, S., 2016. PERANCANGAN SISTEM INFORMASI BERBASIS
WEB DI SMK YAPIM MANADO DENGAN MENGGUNAKAN SMS
GATEWAY (Doctoral dissertation, Politeknik Negeri Manado) URL:
http://repository.polimdo.ac.id/716/ [Tanggal Akses 25 Desember 2022]
Riyanto, S., 2014. PANDUAN LENGKAP Website Super Keren Berbasis
Desktop, Notebook, dan Smartphone
Rozi, Z.A., 2015. Bootstrap Design Framework. Elex Media Komputindo.
Sumiari, N.K. and Jayanti, N.K.D.A., 2018. Implmentasi Metode
Framework for The Application of System Thinking Pada Dashboard
55
Information System STIKOM BALI. In Seminar Nasional Telekomunikasi
dan Informatika (SELISIK) URL: http://eresearch.stikom-
bali.ac.id/admin/files/publikasi_files/1293b8f07c61c0fa392d3c5d3a89b93
e.pdf [Tanggal Akses 3 Januari 2023].
Sovia, R. and Febio, J., 2017. Membangun Aplikasi E-Library
Menggunakan Html, Php Script, Dan Mysql Database. Jurnal
Processor, 6(2) URL: http://ejournal.stikom-
db.ac.id/index.php/processor/article/download/28/27 [Tanggal Akses 10
Januari 2023].
Urva, G. dan Siregar, H.F., 2015. Pemodelan UML E-Marketing Minyak
Goreng.
Jurteksi Royal Edisi2. URL:
http://is.its.ac.id/pubs/oajis/index.php/home/detail/1464/Pemodelan-
UML-E- Marketing-Minyak-Goreng [Tanggal Akses 15 Januari
2023]
Yasin, V., 2012. Rekayasa Perangkat Lunak Berorientasi Objek.
Jakarta: Mitra Wacana Media, 274.`Yulianto, R., 2019. Ekstensi dan
Tema Visual Studio Code
56
LAMPIRAN
LAMPIRAN 1 LISTING PROGRAM
Login.php

<section class="sign-in" style="background-color: #6DABE4;">
<div class="container">
<div class="signin-content">
<img src="<?= base_url() ?>assets/auth/images/signup-image.jpg">
<div class="signin-form">
<h2 class="form-title">Login Staff</h2>
<form action="<?= base_url() ?>auth/prosesLoginPegawai"
method="POST" class="register-form" id="login-form">
<?= $this->session->flashdata('message'); ?><br>
<div class="form-group">
<label for="email"><i class="zmdi zmdi-account material-
icons-name"></i></label>
<input type="text" name="email" id="email"
placeholder="Email" autofocus required />
</div>
<label for="Password"><i class="zmdi zmdi-
lock"></i></label>
<input type="password" name="password" id="password"
placeholder="Password" required />
</div>
<a href="<?= base_url() ?>lupapassword/reset">Lupa
Password?</a>
</div>
<div class="form-group form-button">
<input type="submit" name="signin" id="signin"
class="form-submit" value="Log in" />
</div>
</form>
</div>
</div>
</div>
</section>
L-1
Home.php


<section id="hero">
<div id="heroCarousel" data-bs-interval="3000" class="carousel slide carousel-
fade" data-bs-ride="carousel">
<ol class="carousel-indicators" id="hero-carousel-indicators"></ol>
<div class="carousel-inner" role="listbox">


<div class="carousel-item active" style="background-image: url(<?=
base_url() ?>assets/dataresto/foto_usaha/<?= $foto_usaha_1 ?>)">
</div>


<div class="carousel-item" style="background-image: url(<?= base_url()
?>assets/dataresto/foto_usaha/<?= $foto_usaha_2 ?>)">
</div>


<div class="carousel-item" style="background-image: url(<?= base_url()
?>assets/dataresto/foto_usaha/<?= $foto_usaha_3 ?>)">
</div>
</div>
<a class="carousel-control-prev" href="#heroCarousel" role="button" data-bs-

slide="prev">
<span class="carousel-control-prev-icon bi bi-chevron-left" aria-
hidden="true"></span>
</a>
<a class="carousel-control-next" href="#heroCarousel" role="button" data-bs-

slide="next">
<span class="carousel-control-next-icon bi bi-chevron-right" aria-
hidden="true"></span>
</a>
</div>
</section>
<main id="main">
L-1
<section id="about" class="about">
<div class="section-title">
<h2>TENTANG <?= $nama_usaha ?></h2>
</div>
<div class="row content">

<div class="col-lg-6 pt-4 pt-lg-0">
<p>
<?= $deskripsi ?>
</p><br>
</div>
<div class="col-lg-6">
<img style="width: 100%;" src="<?php echo
base_url('assets/dataresto/foto_usaha/' . $foto_usaha_1) ?>" />
</div>
</div>
</div>
</section>
<section id="about" class="about">

<h2> <?= $nama_usaha ?></h2>
<p>Selamat Datang di Restoran kami</p>
</div>
</section>


<section id="features" class="features">
<h2>PELAYANAN ONLINE</h2>
</div>
<div class="row">
<div class="col-lg-4 col-md-6 icon-box">
<div class="icon"><i class="bi bi-laptop"></i></div>
<h4 class="title"><a href="">Pemesanan</a></h4>
L-1
<p class="description">Layanan pemesanan meja dan menu secara online
bisa anda lakukan dari rumah.</p>
</div>
<div class="icon"><i class="bi bi-bar-chart"></i></div>
<h4 class="title"><a href="">Pembayaran</a></h4>
<p class="description">Pembayaran dapat dibayar melalui E-Money atau
tranfer antar bank.</p>
</div>
<div class="icon"><i class="bi bi-hand-thumbs-up"></i></div>
<h4 class="title"><a href="">Easy to Use</a></h4>
<p class="description">Anda dapat memesan dan melihat tentang profil
kami secara mudah dan cepat.</p>
</div>
</div>
</div>
</section>


<section id="recent-photos" class="recent-photos">
<h2>MENU SPESIAL</h2>
<p>Menyediakan menu makanan dan minuman yang berkualitas, siapapun
kini bisa berwisata kuliner hanya dengan mengunjungi <?= $nama_usaha ?>.
Semua yang anda cari ada disini!</p>
</div>
<div class="recent-photos-slider swiper-container">

<div class="swiper-wrapper align-items-center">
<?php
foreach ($gambar_menu as $m) {
// $id_menu = $m['id_menu'];
?>
<div class="swiper-slide" style="height: 100px;"><a href="<?php echo
base_url('assets/dataresto/menu/' . $m['gambar']) ?>" class="glightbox"><img
src="<?php echo base_url('assets/dataresto/menu/' . $m['gambar']) ?>"
style="object-fit: cover;" class="img-fluid" alt=""></a></div>
<?php
}
L-1
?>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</section>
</main>
KatalogMenu.php
<main id="main">


<section id="breadcrumbs" class="breadcrumbs">
<div class="d-flex justify-content-between align-items-center">

<h2>Katalog Menu</h2>
<ol>
<li><a href="<?= base_url() ?>">Home</a></li>
<li>Katalog Menu</li>
</ol>
</div>
</div>
</section>


<section id="event-list" class="event-list">
<div class="row">
<?php
foreach ($menu as $m) {
$id_menu = $m['id_menu'];
?>
<div class="col-md-3 d-flex align-items-stretch">
<a href="<?php base_url() ?>katalog/detail/<?= $m['id_menu'] ?>">
<div class="card">
<div class="card-img">
<?php
$getGambar = $this->db->query("SELECT * FROM gambar_menu
WHERE id_menu = $id_menu LIMIT 1");
L-1
foreach ($getGambar->result_array() as $gambarm) {
$gambar = $gambarm['gambar'];
}
?>
<img style="object-fit: cover;height:400px;width:100%" src="<?php
echo base_url('assets/dataresto/menu/' . $gambar) ?>" />
</div>
<div class="card-body">
<h5 class="card-title"><?= $m['nama_menu'] ?></h5>
<p class="fst-italic text-center"><?= $m['detail_menu'] ?></p>
<p class="card-text text-center">Rp.<?= $m['harga'] ?></p>
</div>
</div>
</a>
</div>
<?php
}
?>
</div>
</div>
</section>
Booking.php
<main id="main">



<h2>Reservasi Meja & Booking Menu</h2>
L-1
<ol>
<li><a href="<?= base_url() ?>">Home</a></li>
<li>Reservasi Meja & Booking Menu</li>
</ol>
</div>
</div>


<section id="contact-us" class="contact-us">
<div class="row">
<h3>Formulir Reservasi Meja & Booking Menu</h3>
<p>Isi data dengan lengkap dan benar</p>
<div class="form-group mb-2">
<label>Nama Panggilan/Lengkap</label>
<small class="form-text" style="color: red;">*Wajib Diisi</small>
<input type="text" class="form-control" id="nama" name="nama"
placeholder="Nama" required>
</div>
<label>Nomor HP</label>
<small class="form-text" style="color: red;">*Tidak Wajib Diisi</small>
<input type="number" class="form-control" id="no_hp" name="no_hp"
placeholder="Nomor HP">
</div>
<label>Tanggal Pemesanan</label>
<?php date_default_timezone_set('Asia/Jakarta'); ?>
<input onchange="pilih_tanggal(this.value)" type="date" class="form-
control" name="tanggal_pemesanan" id="tanggal_pemesanan" min="<?=
date("Y-m-d"); ?>" max="<?= date('Y-m-d', strtotime('+21 day')) ?>">
</div>
<label>Pilih Meja Yang Ingin Direservasi</label>
<small class="form-text" style="color: red;">*Wajib Dipilih</small>
<select class="form-control" id="id_meja" name="id_meja"
onchange="tambah_meja(this.value)">
</select>
</div>
<br>
<h4><i class="fa fa-utensils"></i> Buku Menu</h4>
L-1
<p>Pilih menu dan isi jumlah pemesanan</p>
<label>Pilih Menu Yang Ingin Dipesan</label>
<small class="form-text" style="color: red;">*Wajib Dipilih</small>
<select class="select2bs4 form-control" id="id_menu" name="id_menu">
</select>
</div>
<label>Jumlah Pesanan</label>
<input type="number" min="1" class="form-control"
id="jumlah_pesanan" name="jumlah_pesanan" placeholder="Jumlah Pesanan">
</select>
</div>
<br>
<div class="text-center"><button class="btn btn-success"
onclick="tambah_menu()" type="submit">Tambah Menu</button></div>
</div>
<h3 id="judul_detail">Detail Pesanan
<hr>
</h3>
<div class="row">
<form action="<?= base_url() ?>home/tambahPesanan" method="POST"
onsubmit="return confirm('Apakah data dan pesanan anda sudah benar?');">
<span id="daftar">
<div id="keterangan_nama_nomor_hp">
</div>
<div id="keterangan_tanggal_dipilih">
</div>
<div id="keterangan_meja_dipilih">
</div>
<div class="row">
<h4 id="judul_menu">
<hr>
Menu Yang Dipesan
</h4>
<div class="col-lg-6" id="daftar_menu_dipesan">
</div>
<div class="col-lg-6" id="daftar_harga_dipesan">
L-1
</div>
<div class="col-lg-12 mt-1" id="total_harga">
</div>
</div>
</span>
<button class="btn btn-primary mt-2" id="tombol_booking"
type="submit">Booking Sekarang!</button>
</form>
</div>
</div>
</div>
</div>
</section>
<script>
$(document).ready(function() {
document.getElementById("id_meja").setAttribute("disabled", "disabled");
document.getElementById("id_menu").setAttribute("disabled", "disabled");
document.getElementById("jumlah_pesanan").setAttribute("disabled",
"disabled");
document.getElementById("judul_menu").style.display = "none";
document.getElementById("judul_detail").style.display = "none";
document.getElementById("tombol_booking").style.display = "none";
document.getElementById("daftar_harga_dipesan").style.display = "none";
document.getElementById("daftar_menu_dipesan").style.display = "none";
});
function formatDate(input) {
var datePart = input.match(/\d+/g),
year = datePart[0].substring(0),
month = datePart[1],
day = datePart[2];
return day + '/' + month + '/' + year;

}
function formatDate2(input) {
var datePart = input.match(/\d+/g),
year = datePart[0].substring(0),
month = datePart[1],
day = datePart[2];
L-1
return year + '-' + month + '-' + day;
}
function getMenu() {
$.ajax({
type: 'GET',
url: `<?= base_url() ?>home/getMenu/`,
dataType: 'json',
success: (hasil) => {
let isi = `<option disabled selected value="">Pilih Menu</option>`;
hasil.forEach(function(item) {
isi +=
`<option
value="${item.nama_menu}|${item.harga}">${item.nama_menu} - Rp.
${item.harga}</option>`
});
$('#id_menu').html(isi);
}
});
}
function pilih_tanggal(tanggal) {
document.getElementById("id_meja").removeAttribute("disabled", "disabled");
$.ajax({
type: 'GET',
url: `<?= base_url() ?>home/getMejaKosong/${tanggal}`,
dataType: 'json',
success: (hasil) => {
let isi = `<option disabled selected value="">Pilih Meja Yang Ingin
Direservasi</option>`;
hasil.forEach(function(item) {
isi +=
`<option value="${item.id_meja}|${item.nomor_meja}">Meja
${item.nomor_meja} (Kapasitas: ${item.kapasitas_meja})</option>`
});
$('#id_meja').html(isi);
}
});
if (document.getElementById('no_hp').value === "") {

var nomorhp = "-";
} else {
var nomorhp = document.getElementById('no_hp').value;
}
L-1
let namakustomer = document.getElementById('nama').value;
let res = namakustomer.toUpperCase();
let res2 = res.replace(/[^\w\s]/gi, '');
let final_nama = res2.replace(/\s/g, '');
let isinyanamanope = `<b>Nama/Nomor HP</b> =

${document.getElementById('nama').value} | ${nomorhp}
<input type="hidden" name="hidden_nama_clean" value="${final_nama}">
<input type="hidden" name="hidden_nama_pemesan"
value="${document.getElementById('nama').value}">
<input type="hidden" name="hidden_nomor_hp"
value="${document.getElementById('no_hp').value}">
`;
let isinyatanggal = `
<b>Tanggal Reservasi</b> = ${formatDate(tanggal)}
<input type="hidden" name="hidden_tanggal_reservasi"
value="${formatDate2(tanggal)}">
`;
$('#keterangan_nama_nomor_hp').html(isinyanamanope);
$('#keterangan_tanggal_dipilih').html(isinyatanggal);
document.getElementById("judul_detail").style.display = "";
document.getElementById("id_menu").removeAttribute("disabled",
"disabled");
document.getElementById("jumlah_pesanan").removeAttribute("disabled",
"disabled");
getMenu();
}
function tambah_meja(datameja) {
const myArr = datameja.split("|");
let isinya = `
<b>Meja Yang Dipilih</b> = Meja ${myArr[1]}
<input type="hidden" name="hidden_id_meja" value="${myArr[0]}">
`;
$('#keterangan_meja_dipilih').html(isinya);
}
let num = 0;
let menu_total = 0;
let total_harga = 0;
var daftarPesanan = `<b>Daftar Menu</b><hr>`;
var daftarHargaPesanan = `<b>Harga Menu | Subtotal</b><hr>`;
function setTotalHarga(total_harga_new) {
L-1
total_harga = total_harga_new;
}
function getTotalHarga() {
return total_harga;
}
function tambah_menu() {
subtotal = 0;
menu_total += 1;
num = num + 1;
let menu = $('#id_menu').val();
let nama = $('#nama').val();
let jumlah_pesanan = $('#jumlah_pesanan').val();
if (nama == "") {
alert("Nama Tidak Boleh Kosong!");
} else if (menu !== "" && jumlah_pesanan !== "" && jumlah_pesanan > 0) {
if (document.getElementById('no_hp').value === "") {
var nomorhp = "-";
} else {
var nomorhp = document.getElementById('no_hp').value;
}
let namakustomer = document.getElementById('nama').value;

let res = namakustomer.toUpperCase();
let res2 = res.replace(/[^\w\s]/gi, '');
let final_nama = res2.replace(/\s/g, '');
let isinyanamanope = `<b>Nama/Nomor HP</b> =

${document.getElementById('nama').value} | ${nomorhp}
<input type="hidden" name="hidden_nama_clean" value="${final_nama}">
<input type="hidden" name="hidden_nama_pemesan"
value="${document.getElementById('nama').value}">
<input type="hidden" name="hidden_nomor_hp"
value="${document.getElementById('no_hp').value}">
`;
$('#keterangan_nama_nomor_hp').html(isinyanamanope);
// Unshow display menu dan tombol booking

document.getElementById("judul_menu").style.display = "";
if (menu_total < 1) {
} else {
document.getElementById("tombol_booking").style.display = "";
}
L-1
document.getElementById("daftar_harga_dipesan").style.display = "";
document.getElementById("daftar_menu_dipesan").style.display = "";
const splitMenu = menu.split("|");

total_harga += jumlah_pesanan * splitMenu[1];
setTotalHarga(total_harga);
let subtotal = jumlah_pesanan * splitMenu[1];
let total_harga_teks = `
<b>Total Harga : Rp. ${getTotalHarga()}<br>DP Yang Harus Dibayar : Rp.
${getTotalHarga() / 2}</b>
<input type="hidden" name="hidden_total_harga"
value="${getTotalHarga()}">
`;
$('#daftar_menu_dipesan').append(`
<span class="idpesanan${num}">
${splitMenu[0]} - (Jumlah : ${jumlah_pesanan})<br>
<input type="hidden" name="hidden_nama_makanan[]"
value="${splitMenu[0]}">
<input type="hidden" name="hidden_jumlah_makanan[]"
value="${jumlah_pesanan}">
<input type="hidden" name="hidden_subtotal_makanan[]"
value="${subtotal}">
</span>
`);
$('#daftar_harga_dipesan').append(`
<span class="idpesanan${num}">
Rp. ${splitMenu[1]}/satuan | Rp. ${subtotal}<span
onclick="hapusMenu(${num},${subtotal})" style="cursor: pointer"> <i class="fa
fa-times"></i> Hapus</span><br>
</span>
`);
$('#total_harga').html(total_harga_teks);
// Get menu dan kosongkan jumlah pesanan lagi.

getMenu();
document.getElementById('jumlah_pesanan').value = "";
} else {
alert("Maaf menu harus dipilih dan jumlah tidak boleh kurang dari 1 atau
kosong.");
}
}
L-1
function hapusMenu(num, sub_total) {
menu_total -= 1;
$(`.idpesanan${num}`).remove();
if (menu_total < 1) {
totalnya = getTotalHarga() - sub_total;
setTotalHarga(totalnya);
$('#total_harga').html("");
$('#daftar_menu_dipesan').html("");
$('#daftar_harga_dipesan').html("");
} else {
totalnya = getTotalHarga() - sub_total;
setTotalHarga(totalnya);
let total_harga_teks = `
<b>Total Harga : Rp. ${getTotalHarga()}<br>DP Yang Harus Dibayar : Rp.
${getTotalHarga() / 2}</b>
<input type="hidden" name="hidden_total_harga"
value="${getTotalHarga()}">`;
$('#total_harga').html(total_harga_teks);
}
}
</script>
AfterBuy.php
<main id="main">



<h2>Sukses Booking</h2>
<ol>
<li><a href="index.html">Home</a></li>
<li>Sukses Booking</li>
</ol>
</div>
</div>
L-1


<section id="event-list" class="event-list">
<div class="row">
<?php foreach ($home as $item) { ?>
<div class="card">
<div class="card-header">
</div>
<div class="card-body">
<h5 class="card-title">Terima Kasih, <?=
$item['nama_pemesan'] ?> telah melakukan pemesanan di <?= $nama_usaha
?></h5>

<p class="card-text">1. Silahkan Untuk Melakukan Screenshot
Kode dibawah ini dan Copy dan simpan. Kode ini digunakan untuk pencarian
pada halaman bukti pembayaran guna mengupload bukti transfer DP anda :
<div class="row">
<input type="text" disabled class="form-control"
value="<?= $item['id_detail_menu'] ?>" id="myInput">
</div>

<button class="btn btn-primary"
onclick="myFunction()">Copy Invoice</button>
</div>
</div>
</p>
<p class="card-text">2. Silahkan Untuk Melakukan Pembayaran
Dengan Transfer Via : <br>
<ol>
<?php foreach ($bayar as $b) {
?>
<li><?= $b['nama_merchant'] ?> - <?=
$b['kode_pembayaran'] ?> (<?= $b['atas_nama'] ?>)</li>
<?php
} ?>
</ol>
<strong> Dengan Total Pembayaran : <span style="color: red;">
Rp.<?= $item['total_pembayaran'] ?></span> Atau DP : <span style="color:
red;"> Rp.<?= $item['total_pembayaran'] / 2 ?></span></strong>
</p>
L-1
<p class="card-text">3. Silahkan Screenshoot bukti pembayaran
anda</p>
<p class="card-text">4. Lalu, kirimkan ke link berikut atau
lewat menu diatas berikut dengan bukti pembayaran</p>
<p class="card-text">5. Pembatalan Transaski Akan dilakukan
jika dalam 1x24 jam tidak dilakukan konfirmasi pembayaran</p>
<a href="<?= base_url() ?>/home" class="btn btn-
primary">Kembali Ke Halaman Awal</a>
</div>
</div>
<?php } ?>
</div>
</div>
</section>
<script>
function myFunction() {
/* Get the text field */
var copyText = document.getElementById("myInput");
/* Select the text field */

copyText.select();
copyText.setSelectionRange(0, 99999); /* For mobile devices */
/* Copy the text inside the text field */

navigator.clipboard.writeText(copyText.value);
/* Alert the copied text */

alert("Copied the text: " + copyText.value);
}
</script>
L-1
LAMPIRAN 2 Output Program
Login
Home
Katalog Menu
Booking
Sukses Booking

Sistem Informasi Bakso Super Comal

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Sistem Informasi Bakso Super Comal

Diunggah oleh

Hak Cipta:

Format Tersedia

UNIVERSITAS GUNADARMA

FAKULTAS TEKNOLOGI INDUSTRI

SISTEM INFORMASI BAKSO SUPER COMAL BERBASIS

Diajukan Guna Melengkapi Sebagian Syarat Dalam

Saya yang bertanda tangan di bawah ini,

Tanggal Lulus : 28 Februari 2023

Demikian pernyataan ini dibuat dengan sebenarnya dan dengan penuh

Jakarta, 17 Februari 2023

Judul PI : SISTEM INFORMASI BAKSO SUPER COMAL

Tanggal Lulus : 28 Februari 2023

Pembimbing Kasubag Sidang PI

(Nurul Adhayanti, SKOM., MMSI..) ( Dr. Achmad Fahrurozi S.Si., M.Si)

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

(xii + 82 Halaman + Lampiran)

Persaingan dunia usaha di berbagai bidang dengan menggunakan

Daftar Pustaka (1995-2021)

Puji syukur penulis ucapkan kehadirat Allah SWT, karena atas

Di dalam menyusun laporan penulisan ilmiah ini, banyak sekali

Dalam kesempatan ini perkenankan penulis menyampaikan ucapan

1. Ibu Prof. Dr. Hj. E. S. Margianti, SE. MM., selaku Rektor

Dengan hormat serta kerendahan hati, penulis menyadari bahwa

Depok,17 Februari 2023

HALAMAN JUDUL ........................................................................................ i

3. PERANCANGAN DAN IMPLEMENTASI.............................................18

Tabel 2.1 Simbol dalam Use Case Diagram ..............................................16

Gambar 2.1 HTML ................................................................................................. 6

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

1.1 Latar Belakang Masalah

Perkembangan teknologi khususnya pada bidang komunikasi dan

Begitu pula dengan sistem informasi persediaan dan penjualan makanan

Berdasarkan kelemahan tersebut di atas, maka diperlukan suatu

1.2 Batasan Masalah

Batasan masalah penulisan ini adalah:

1.3 Tujuan Penlisan

Tujuan penulisan ini adalah bertujuan untuk membuat sistem informasi

Metode yang dilakukan adalah dengan menggunakan System Development Life

BAB II LANDASAN TEORI

BAB III PERANCANGAN DAN IMPLEMENTASI

Gambar 2.3 Boostrap

Bootstrap diciptakan untuk mempermudah proses desain web bagi

Gambar 2.4 CodeIgniter

Adapun framework sendiri dapat diartikan sebagai suatu struktur pustaka-

Gambar 2.5 Visual Studio Code

2.8 Konsep MVC

2.9 Basis Data

2.11 Black Box Testing

2.12 Struktur Navigasi

2.12.1 Struktur Navigasi Linier

Gambar 2.7 Struktur Navigasi Linier

Gambar 2.8 Struktur Navigasi Non-Linier

2.12.3 Struktur Navigasi Hirarki

2.12.4 Struktur Navigasi Campuran

Gambar 2.10 Struktur Navigasi Campuran.

UML adalah bahasa spesifikasi standar yang dipergunakan untuk

2.13.1 Use Case Diagram

Use Case Diagram menggambarkan fungsionalitas yang diharapkan

Use Case: menggambarkan perilaku

Actor: menggambarkan pengguna

Asosiasi: memodelkan koneksi

Hubungan: menggmbarkan hubungan

Label<<include>>: tipe hubungan

<<include>> yang menerangkan bahwa suatu use-

2.13.2 Activity Diagram