Hanifah Nur Ramadhan - 53415033 - Ruang 5

UNIVERSITAS GUNADARMA
FAKULTAS TEKNOLOGI INDUSTRI
PENULISAN ILMIAH
PERANCANGAN WEBSITE TOKO BUKU LIVEFORBOOKS

MENGGUNAKAN PHP DAN MYSQL
Nama : Hanifah Nur Ramadhan
Npm : 53415033
Jurusan : Informatika
Penanggung Jawab : Hurnaningsih, SKOM, MM
Diajukan Guna Melengkapi Sebagian Syarat Dalam Mencapai

Gelar Setara Sarjana Muda
UNIVERSITAS GUNADARMA
2022
PERNYATAAN ORIGINALITAS DAN PUBLIKASI
Saya yang bertanda tangan di bawah ini,

NPM : 53415033
Judul PI : PERANCANGAN WEBSITE TOKO BUKU
LIVEFORBOOKS MENGGUNAKAN PHP DAN
MYSQL
Tanggal Sidang :
Tanggl Lulus :
Menyatakan bahwa tulisan ini adalah merupakan hasil karya saya sendiri dan dapat
dipublikasikan sepenuhnya oleh Universitas Gunadarma. Segala kutipan dalam
bentuk apa pun telah mengikuti kaidah, etika yang berlaku. Mengenai isi dan tulisan
adalah merupakan tanggung jawab Penulis, bukan Universitas Gunadarma.
Demikian pernyataan ini dibuat dengan sebenarnya dan dengan penuh kesadaran.
Depok, Agustus 2022

TTD
( Hanifah Nur Ramadhan )
ii
LEMBAR PENGESAHAN
Judul PI : PERANCANGAN WEBSITE TOKO BUKU

LIVEFORBOOKS MENGGUNAKAN PHP DAN
MYSQL
NPM : 53415033
Tanggal Sidang :
Tanggal Lulus :
Menyetujui
Pembimbing Koordinator PI
(Hurnaningsih, SKOM, MM) ( Dr. Achmad Fahrurozi, S.Si, M.Si )
Ketua Jurusan
( Dr. Lintang Yuniar Banowosari, SKom., M.Sc )
iii
ABSTRAK
Hanifah Nur Ramadhan. 53415033

PERANCANGAN WEBSITE TOKO BUKU LIVEFORBOOKS
MENGGUNAKAN PHP DAN MYSQL
Penulisan Ilmiah. Informatika. Fakultas Teknologi Industri. Universitas
Gunadarma. 2022
Kata Kunci : Website, PHP, MYSQL, Buku.
(xiv + 79 + Lampiran)
Perkembangan dalam dunia bisnis atau perdagangan di Indonesia semakin

berkembang sejalan dengan berkembangnya Ilmu Pengetahuan dan Teknologi.
Toko buku LIVEFORBOOKS merupakan suatu usaha yang bergerak di bidang
penjualan buku, yang mana pembelian produk yang dilakukan oleh pelanggan harus
di lakukan dengan langsung datang ke toko. Untuk memberi solusi maka dibuatlah
aplikasi web ini yang mana pelanggan dapat dengan mudah melakukan pembelian
produk tanpa harus datang ke toko, serta dapat mempromosikan dagangan toko
buku LIVEFORBOOKS lebih luas. Dalam pengembangan pembuatan aplikasi web
ini penulis menggunakan perancangan pemodelan struktur navigasi dan use case,
sedangkan dalam membuat web ini penulis menggunakan bahasa pemprograman
PHP, dengan framework CodeIgniter dan PHPMyAdmin sebagai media
databasenya. Aplikasi ini dapat berjalan dengan baik dan membantu pelanggan
dapat membeli buku pada toko buku LIVEFORBOOKS tanpa harus datang ke toko
langsung.
Daftar Pustaka (2009 – 2021)
iv
KATA PENGANTAR
Dengan mengucapkan segala puji dan syukur kepada Allah SWT, karena
hanya dengan rahmat dan hidayah-Nya penulisan ilmiah yang berjudul
“Perancangan Website Toko Buku LIVEFORBOOKS Menggunakan PHP dan
MYSQL” dapat diselesaikan. Penulisan ilmiah ini disusun guna melengkapi
sebagian syarat dalam mencapai gelar setara Sarjana Muda pada jurusan
Informatika, Universitas Gunadarma.
Penulis menyadari bahwa penulisan ini tidak dapat berjalan dengan lancar
tanpa adanya bantuan dan dukungan dari berbagai pihak. Pada kesempatan ini,
penulis ingin mengucapkan terima kasih yang sebesar-besarnya kepada semua
pihak yang telah membantu penulis dalam menyelesaikan Penulisan Ilmiah ini,
terutama kepada :
1. Ibu Prof. Dr. Hj. E. S. Margianti, SE., MM. selaku Rektor Universitas
Gunadarma.
2. Bapak Prof. Dr.-Ing. Adang Suhendra S.Si., S.Kom., M.Sc. selaku Dekan
Fakultas Teknologi Industri, Universitas Gunadarma.
3. IBu Dr. Lintang Yuniar Banowosari, SKom., M.Sc., selaku Ketua Jurusan
Informatika.
4. Bapak Dr. Achmad Fahrurozi, S.Si, M.Si., selaku Koordinator PI.
5. Ibu Hurnaningsih, SKOM, MM., selaku dosen pembimbing yang telah banyak
memberikan bimbingan, arahan dan waktunya kepada penulis selama proses
pembuatan Penulisan Ilmiah ini berlangsung hingga selesai.
6. Ayah dan Ibu, yang telah memberikan dorongan, motivasi dan doa’nya hingga
penulis dapat menyelesaikan Penulisan Ilmiah ini.
v
Akhir kata penulis ucapkan terima kasih kepada semua pihak yang telah
membantu dalam penulisan ini. Semoga dapat memberi sumbangan bagi
perkembangan dan pemanfaatan teknologi informasi.
Depok, Agustus 2022
Penulis
vi
DAFTAR ISI
Halaman
LEMBAR JUDUL ……………………….…………………………..……… i
PERNYATAAN ORIGINALITAS DAN PUBLIKASI…………………….. ii
LEMBAR PENGESAHAN………………………………………………….. iii
ABSTRAKSI…………………………………………………………………. iv
KATA PENGANTAR………………………………………………………... v
DAFTAR ISI …………………………..……………………………………. vii
DAFTAR GAMBAR ………………….…………………………………….. xi
DAFTAR TABEL ………………………………………………………...…. xiii
DAFTAR LAMPIRAN …………………………………………………...…. xiv
BAB I PENDAHULUAN…………………………………………………… 1
1.1. Latar Belakang……………………………………………………… 1
1.2. Batasan Masalah ……………………………………………………. 3
1.3. Tujuan Penelitian……………………………………………………. 3
1.4. Metode Penelitian ………………………………………………….. 3
1.5. Sistematika Penulisan ………………………………………………. 4
BAB II LANDASAN TEORI ………………………………………………. 6

2.1. Website ……………………………………………………………... 6
2.2. PHP……….…………………………………………………………. 6
2.3. XAMPP …………………………………………………………….. 7
2.3.1. Fungsi XAMPP ………………………………………………. 8
2.4. CodeIgniter………………………………………………………….. 9
2.5. MySQL……………………………………………………………… 10
2.6. Bootstrap …………………………………………………………. 11
2.6.1. Kelebihan Bootstrap …………………………………………. 11
2.7. Visual Studio Code………………..………………………………… 12
2.8. Unified Modeling Languange……………………………………….. 12
vii
2.8.1. Use Case Diagram….…………………………………………. 13
2.8.2. Class Diagram……...…………………………………………. 14
2.9. Struktur Navigasi………………..…………………………………... 15
2.9.1. Bentuk-Bentuk Dasar Struktur Navigasi…………………….... 15
2.9.1.1. Linier……………………................................................... 15
2.9.1.2. Hirarki…………………….................................................. 15
2.9.1.3. Non Linier……………………............................................ 16
2.9.1.4. Campuran……………………............................................. 16
BAB III PEMBAHASAN…………………………………………………… 17

3.1. Gambaran Umum Website……..…………………………………… 17
3.2. Perancangan……… ……..……………………………...………….. 18
3.2.1. Struktur Navigasi ………………………...………………… 18
3.2.1.1. Struktur Navigasi User………………………………. . 18
3.2.1.2. Struktur Navigasi Admin…………………………….. 19
3.2.2. Use Case Diagram ………………..………………………… 19
3.2.2.1. Use Case Diagram User ………….…………………. 19
3.2.2.2. Use Case Diagram Admin …………..……………… 20
3.2.3. Class Diagram …….………………..………………………… 21
3.2.4. Rancangan Database………………. ……………………….. 21
3.2.4.1. Tabel Admin…………………………………………. 22
3.2.4.2. Tabel Rekening………………………………………. 22
3.2.4.3. Tabel Buku..…………………………………………. 23
3.2.4.4. Tabel Pelanggan…………..…………………………. 23
3.2.4.5. Tabel Kategori……………………………………….. 24
3.2.4.6. Tabel Gambar…………………………………….….. 24
3.2.4.7. Tabel Transaksi………………………………………. 24
3.2.4.8. Tabel Rinci Transaksi……………………………….... 26
3.2.4.9. Tabel Setting………………………………………….. 26
3.2.5. Perancangan Tampilan…………………..…………..………... 27
3.2.5.1. Rancangan Admin…………………………………….. 27
viii
3.2.5.1.1. Rancangan Halaman Login……………………….. 27
3.2.5.1.2. Rancangan Halaman Dashboard…………………... 27
3.2.5.1.3. Rancangan Halaman Buku…..…...………………... 28
3.2.5.1.4. Rancangan Halaman Pesanan Masuk……………… 28
3.2.5.1.5. Rancangan Halaman User..………………………... 29
3.2.5.1.6. Rancangan Halaman Kategori……………………... 30
3.2.5.1.7. Rancangan Halaman Setting……………………….. 30
3.2.5.2. Rancangan Pelanggan………………………..……….. 31
3.2.5.2.1. Rancangan Halaman Login………………………... 31
3.2.5.2.2. Rancangan Halaman Beranda User………………... 31
3.2.5.2.3. Rancangan Halaman Kategori……………………... 32
3.2.5.2.4. Rancangan Halaman Keranjang Belanja…………… 32
3.2.5.2.5. Rancangan Halaman Checkout..………………….... 33
3.2.5.2.6. Rancangan Halaman Pesanan Saya……………….... 33
3.2.5.2.7. Rancangan Halaman Konfirmasi Pembayaran……... 34
3.3. Pembuatan Website ……..……………….…………...……...……..… 34
3.3.1. Koneksi Database………………………………………………. 35
3.3.2. Pembuatan Halaman Admin……………………………………. 35
3.3.2.1. Pembuatan Halaman Login…………………………….. 35
3.3.2.2. Pembuatan Halaman Dashboard……………………….. 37
3.3.2.3. Pembuatan Halaman Buku……………………………... 40
3.3.2.4. Pembuatan Halaman Pesanan Masuk…………………... 46
3.3.2.5. Pembuatan Halaman Laporan………………………….. 47
3.3.2.6. Pembuatan Halaman Setting…………………………… 50
3.3.2.7. Pembuatan Halaman User……………………………… 51
3.3.3. Pembuatan Halaman Pelanggan………………...………………. 54
3.3.3.1. Pembuatan Halaman Beranda………………………….. 54
3.3.3.2. Pembuatan Halaman Login…………………………….. 55
3.3.3.3. Pembuatan Halaman Detail Buku……………………… 59
3.3.3.4. Pembuatan Halaman Keranjang Belanja………………. 60
3.3.3.5. Pembuatan Halaman Kontak…………..……………...... 62
ix
3.3.3.6. Pembuatan Halaman Checkout………..……………….. 63
3.3.3.7. Pembuatan Halaman Pesanan Saya……………..……… 65
3.4. Implementasi Website ………………………………………………. 68
3.4.1. Web Hosting………………………….…………………………. 68
3.4.1.1. Mendaftar Web Hosting Gratis……………..……..…… 68
3.4.1.2. Upload File……………………………………...……… 69
3.5. Uji Coba Aplikasi Menggunakan Black Box Testing………………….. 72
BAB IV PENUTUP ……………………………………………………….... 77

4.1. Kesimpulan …………………………………………………………. 77
4.2. Saran………………………………………………………………… 78
DAFTAR PUSTAKA…………………………………………………..…… 79
LAMPIRAN ………..…………………………………………………..…… L-1
x
DAFTAR GAMBAR
Gambar Halaman
Gambar 2.1 Contoh Diagram Use Case ……………………………………… 14
Gambar 2.2 Navigasi Linier ………………………………………………… 15
Gambar 2.3 Navigasi Hirarki ……………………..…………………………. 15
Gambar 2.4 Navigasi Non Linier ……………………………………………. 16
Gambar 2.5 Navigasi Campuran .……………………………………………. 16
Gambar 3.1 Struktur Navigasi User …………………………………………. 18
Gambar 3.2 Struktur Navigasi Admin ……………………………………… 19
Gambar 3.3 Use Case User…………………………………………………… 20
Gambar 3.4 Use Case Admin…………………...……………………………. 20
Gambar 3.5 Class Diagram……………………...…………………………… 21
Gambar 3.6 Rancangan Tampilan Halaman Login…………………………... 27
Gambar 3.7 Rancangan Tampilan Dashboard Admin …...…………………. 28
Gambar 3.8 Rancangan Halaman Buku….…...……..……………………….. 28
Gambar 3.9 Rancangan Tampilan Halaman Pesanan Masuk ……..………. 29
Gambar 3.10 Rancangan Tampilan Halaman User ………………………….. 29
Gambar 3.11 Rancangan Tampilan Halaman Kategori……………………..... 30
Gambar 3.12 Rancangan Tampilan Halaman Setting ………...……………… 30
Gambar 3.13 Rancangan Tampilan Halaman Login …………………...…….. 31
Gambar 3.14 Rancangan Tampilan Halaman Beranda ……………………..... 31
Gambar 3.15 Rancangan Tampilan Halaman Kategori ……………………… 32
Gambar 3.16 Rancangan Tampilan Halaman Keranjang Belanja ………….. 32
Gambar 3.17 Rancangan Tampilan Halaman Checkout……………..………. 33
Gambar 3.18 Rancangan Tampilan Halaman Pesanan Saya ………………… 33
Gambar 3.19 Rancangan Tampilan Halaman Konfirmasi Pembayaran ….… 34
Gambar 3.20 Halaman Login Admin………………………………………… 35
Gambar 3.21 Tampilan Halaman Dashboard Admin ………………………. 37
Gambar 3.22 Tampilan Halaman Buku…. ……………….………………….. 40
Gambar 3.23 Tampilan Halaman Pesanan Masuk …………………………... 46
xi
Gambar 3.24 Tampilan Halaman Laporan ………………………………….. 47
Gambar 3.25 Tampilan Halaman Setting…….………………………………. 50
Gambar 3.26 Tampilan Halaman User ………………………………………. 51
Gambar 3.27 Tampilan Beranda …………………………………………...... 54
Gambar 3.28 Tampilan Halaman Login …….……………………...………... 55
Gambar 3.29 Tampilan Halaman Detail Buku... …………………………….. 59
Gambar 3.30 Tampilan Halaman Keranjang Belanja ……………………… .. 60
Gambar 3.31 Tampilan Halaman Kontak ………………….……………….... 62
Gambar 3.32 Tampilan Halaman Checkout …….……………………………. 63
Gambar 3.33 Tampilan Halaman Pesanan Saya……………………..……….. 65
Gambar 3.34 Membuat nama website yang diinginkan ………………..…….. 69
Gambar 3.35 Mengupload file…………..………………………………….…. 69
Gambar 3.36 Impor Database …………………..…………………..……….... 70
Gambar 3.37 Input nama database …….……………………..…….................. 71
Gambar 3.38 Tampilan website ………….…...……………………………..... 72
xii
DAFTAR TABEL
Tabel Halaman
Tabel 3.1 Tabel tb_user(Admin) ……………………………………………. 22
Tabel 3.2 Tabel tb_rekening……. ………………………………………….. 22
Tabel 3.3 Tabel tb_buku……. ……………………………………………….. 23
Tabel 3.4 Tabel tb_pelanggan ……………………………………………….. 23
Tabel 3.5 Tabel tb_kategori………………………………………………….. 24
Tabel 3.6 Tabel tb_gambar……. …………………………………………… 24
Tabel 3.7 Tabel tb_transaksi………... ……………………………………… 25
Tabel 3.8 Tabel tb_rinci_transaksi……….……………………………...…… 26
Tabel 3.9 Tabel tb_setting……………………………………………...…….. 26
Tabel 3.10 Uji Coba Black Box Admin…. ……………………………...….. 73
Tabel 3.11 Uji Coba Black Box Pelanggan …………………………….......... 75
xiii
DAFTAR LAMPIRAN
Halaman
A. Listing Program.....…..…………………………………………………… L-1
B. Tampilan Output…………………………………………………….…..,,. L-44
xiv
BAB I
PENDAHULUAN
1.1. Latar Belakang Masalah
Penggunaan internet untuk aktivitas transaksi bisnis dikenal dengan istilah

Electronic Commerce (E-Commerce). E-Commerce dapat terjadi antara
organisasi bisnis dengan konsumen, meliputi penggunaan Internet dan World
Wide Web untuk penjualan produk dan pelayanan untuk konsumen (Doolin, et
al., 2005). Penggunaan e-commerce telah mengalami peningkatan di Indonesia
(DailySocial dan Veritrans, 2012). Penggunaan internet untuk transaksi bisnis
sudah dianggap sebagai suatu hal yang penting, hal ini ditandai dengan
meningkatnya jumlah pengusaha yang menggunakan e-commerce dalam
perusahaannya.
Dalam dunia bisnis, website dalam bentuk ecommerce sudah merupakan

kebutuhan dari suatu bisnis yang telah maju saat ini untuk pengembangan
usahan karena terdapat berbagai manfaat yang dimiliki oleh e-commerce.
Diantaranya adalah para konsumen tidak perlu datang langsung ke toko untuk
memilih barang yang ingin dibeli dan bagi perusahaan dapat melaksanakan
kegiatan transaksi selama 24 jam. Kedua, dari segi keuangan konsumen dapat
menghemat biaya yang dikeluarkan dan bagi pengusaha dapat menghemat biaya
promosi, apabila lokasi toko jauh, konsumen dapat menghemat ongkos
perjalanan dengan diganti biaya pengiriman yang jauh lebih murah dan bagi
pengusaha dapat memasarkan tokonya ke wilayah yang lebih luas.
“Buku adalah pengusung peradaban. Tanpa buku sejarah diam. Sastra

bungkam, sains lumpuh. Pemikiran macet. Buku adalah mesin perubahan,
jendela dunia, mercusuar yang dipancangkan di samudera waktu.” (Barbara
Tuchman).
1
2
Dari dulu sampai sekarang, buku memegang peranan sangat vital bagi
manusia. Tanpa buku, mungkin manusia akan tetap hidup seperti manusia pra
sejarah yang banyak mengandalkan hidupnya dari alam. Tanpa buku, tidak
mungkin manusia mencapai kehidupan modern seperti sekarang ini. Di bukulah
orang-orang pintar dunia menuliskan pengalaman, pemikiran, dan teori-teori
mereka. Itulah yang dimanfaatkan oleh orang-orang sesudahnya. Makin lama
makin dikembangkan, dan jadilah pengetahuan dan teknologi seperti sekarang
yang manfaatnya telah dirasakan oleh hampir seluruh umat manusia.
Salah satunya toko buku “LIVEFORBOOKS” merupakan toko buku yang

cukup berkualitas, service yang baik dan harga terjangkau. Tetapi banyak
pelanggan yang kesulitan dalam membeli buku karena jarak yang terlalu jauh
untuk membeli buku yang diinginkan.
Mengikuti perkembangan teknologi informasi yang ada,

“LIVEFORBOOKS” ingin mengembangkan usaha melalui e-commerce
berbasis website. Hal ini dilakukan karena sebuah website dapat diakses semua
device tanpa terhalang jarak dan waktu. Diharapkan website e-commerce ini
dapat memudahkan penjual untuk mempromosikan atau menjual buku yang
ditawarkan. Bagi pembeli diharapkan website e-commerce ini memudahkan
transaksi pembelian buku yang diinginkan.
Perancangan website ini menggunakan perangkat lunak Windows 10,

Framework CodeIgniter 4, XAMPP, Boostrap 4, Visual Studio Code, StarUML,
Google Chrome.
Berdasarkan latar belakang di atas, penulis membuat website e-commerce

penjualan online yang diimplentasikan ke dalam Penulisan Ilmiah dengan judul
”PERANCANGAN WEBSITE TOKO BUKU LIVEFORBOOKS
MENGGUNAKAN PHP DAN MYSQL”.
3
1.2.Batasan Masalah
Dalam penulisan ini, penulis hanya membatasi masalah pada penjualan

buku di toko buku LIVEFORBOOKS, yang disajikan dalam bentuk gambar asli
buku, teks keterangan buku dan juga harga buku tersebut.
Pembelian barang dilakukan dengan cara melakukan transfer ke penjual dan

mengkonfirmasi pada penjual, setelah itu penjual mengirim barang yang dijual
kepada pembeli, setelah barang diterima pembeli, pembeli bisa mengkonfirmasi
penerimaan barang di web kemudian dana dimasukkan ke saldo penjual.
1.3.Tujuan Penelitian
Tujuan dari penulisan ilmiah ini adalah membuat website toko buku
LIVEFORBOOKS menggunakan PHP dan MySQL yang meliputi penjualan
buku dan pemesanan buku yang dapat digunakan dan dapat diakses dengan
mudah.
1.4.Metode Penelitian
Metode penulisan yang digunakan dalam penulisan ini adalah metode

System Development Life Cycle (SDLC) dengan jenis model waterfall.
Langkah-langkah penelitian yang dilakukan adalah:
1. Perencanaan
Penelitian ini dibuat dengan menggunakan perangkat keras dan
perangkat lunak. Perangkat keras yang diguanakan adalh satu unit
laptop MSI GF65 Thin dengan Sistem Operasi Windows 10 Home
Single Languange dengan Processor Intel Core i7 10750H dengan
kecepatan 2.60GHz , RAM 16 GB, GPU NVIDIA GTX 1660 Ti 6GB,
SSD 512 GB. Perangkat lunak yang dibutuhkan adalah Windows 10,
Framework CodeIgniter 4, XAMPP, Boostrap 4, Visual Studio Code,
StarUML, Google Chrome.
2. Analisis
Pada tahap ini penulis melakukan analisis terhadap seberapa penting
pengguanaan website toko buku untuk pengguna, kemudian
4
menganalisis fitur apa saja yang akan dibuat dalam web tersebut. Penulis
mencari dan mengambil informasi dari internet mengenai desain,
perancangan dan pembuatan web.
3. Perancangan
Pada tahap ini yang dilakukan penulis adalah membuat rancangan
tampilan (user interface), rancangan database serta struktur navigasi.
4. Implementasi
Membuat desain sistem yang sesuai dengan kebutuhan sistem,
perancangan sistem dan analisis sistem.
5. Uji Coba
Pada tahap ini adalah melakukan uji coba aplikasi yang telah dibuat agar
dapat berjalan sesuai dengan yang sudah direncanakan.
1.5.Sistematika Penulisan
Penulisan ini terdiri atas empat bab yang dijabarkan sebagai berikut :
BAB 1 PENDAHULUAN
Pada bab ini menjelaskan latar belakang masalah, batasan masalah, tujuan
penelitian, metode penelitian dan sistematika penulisan.
BAB 2 LANDASAN TEORI
Pada bab ini mengbahas teori-teori yang digunakan untuk menunjang

penulisan ini antara lain WEB, PHP, XAMPP, CodeIgniter, MySQL,
Bootstrap, Teks Editor Visual Studio Code, Struktur Navigasi.
BAB 3 PEMBAHASAN
Pada bab ini berisi pembahasan mengenai gambaran umum website,

rancangan website, rancangan database, strutur navigasi web, use case web,
hasil akhir berupa tampilan output dari web yang dikerjakan dalam
penulisan ilmiah ini dan pengujian website.
5
BAB 4 PENUTUP
Pada bab ini membahas kesimpulan berdasarkan hasil pembahasan serta

saran dari website yang telah dibuat.
BAB II
LANDASAN TEORI
2.1. Website
Website adalah halaman informasi yang disediakan melalui jalur internet
sehingga bisa diakses di seluruh dunia selama terkoneksi dengan jaringan internet.
Website merupakan komponen atau kumpulan komponen yang terdiri dari teks,
gambar, suara dan animasi sehingga lebih merupakan media informasi yang
menarik untuk dikunjungi.
Sebuah situs web (sering pula disingkat menjadi situs saja: web site, site)
adalah sebutan bagi sekelompok halaman web (web page), yang umumnya
merupakan bagian dari suatu domain ( domain name) atau submain di World Wide
Web (WWW) di internet. WWW terdiri dari seluruh situs web yang tersedia kepada
publik. Halaman-halaman sebuah situs web diakses dari sebuah URL yang menjadi
”akar” (root), yang disebut homepage (halaman induk sering diterjemahkan
menjadi “beranda”, “halaman muka”), dan biasanya disimpan dalam server yang
sama. Tidak semua situs web dapat diakses dengan gratis. Beberapa situs web
memerlukan pembayaran agar dapat menjadi pelanggan, misalnya sutus-situs
berita, layanan surat elektronik(e-mail) dan lain-lain.
2.2. PHP
PHP (PHP: Hypertext Preprocessor) adalah sebuah bahasa pemrograman
yang perintahnya dilaksanakan server dan kemudian hasilnya ditampilkan pada
komputer client. PHP juga merupakan HTML embedded, yaitu sintaks PHP yang
dituliskan bersamaan dengan sintaks HTML. Jadi PHP dan HTML adalah sinergi
dua bahasa pemrograman yang saling menguatkan. Walaupun sebagian orang
berpendapat HTML bukan sebuah bahasa pemrograman.
PHP diperkenalkan oleh Rasmus Lerdof pada tahun 1995. Pada awalnya
PHP memiliki kepanjangan Personal Homepage. Hal ini karena PHP merupakan
sebuah aplikasi kecil yang digunakan untuk melengkapi situs personal Rasmus di
Internet (http://www.php.net).
Beberapa kelebihan bahasa pemrograman PHP sebagai berikut:
6
7
1. Keamanan
Keamanan sebuah program selain sistem operasi menjadi sangat penting.
PHP menyediakan 3 jenis authentikasi user, yaitu http authentikasi,
penggunaan cookies dan penggunaan session. Selain itu ada beberapa fungsi
disediakan seperti crc32, crypt, md5, base64-decode, base64- encode dan
lain-lain.
2. Integritas dengan Database
PHP mendukung integritas, kecepatan dan efisiensi akses ke database yang
kebanyakan menggunakan database berjenis relational seperti MySQL,
PostgreSQL, Oracle, SQLite dan lain-lain.
3. Cross-platform
PHP mendukung berbagai jenis sistem operasi seperti semua varian Linux,
Microsoft Windows, Mac OS dan lain-lain.
4. Reliabilitas
PHP merupakan salah satu bahasa pemrograman yang bebasis web. Alasan
utama adalah dukungan dokumentasi yang lengkap, aman dan banyak
komunitas helpdesk untuk membantu para pengembang web sistem yang
menggunakan PHP.
5. Kemudahan Bermigrasi
Tujuannya adalah memperbaiki kinerja dan menambah fitur-fitur baru.
Kelebihan ini karena banyaknya dukungan terhadap PHP sehingga
berdampak PHP terus menerus dikembangkan.
2.3. XAMPP
XAMPP adalah sebuah paket perangkat lunak (software) komputer yang
sistem penamaannya diambil dari akronim kata Apache, MySQL (dulu) / MariaDB
(sekarang), PHP, dan Perl. Sementara imbuhan huruf “X” yang terdapat pada awal
kata berasal dari istilah cross platform sebagai simbol bahwa aplikasi ini bisa
dijalankan di empat sistem operasi berbeda, seperti OS Linux, OS Windows, Mac
OS, dan juga Solaris.
Jika dijabarkan secara gamblang, masing-masing huruf yang ada di dalam
nama XAMPP menuru para ahli memilik arti sebagai berikut ini:
8
X = Cross Platform
Merupakan kode penanda untuk software cross platform atau yang bisa berjalan
di banyak sistem operasi. Jadi, ada XAMPP untuk Windows, xampp for mac,
dan untuk Linux. Semua itu bersifat free download xampp.
A = Apache
Apache adalah aplikasi web server yang bersifat gratis dan bisa dikembangkan
oleh banyak orang (open source).
M = MySQL / MariaDB
MySQL atau MariaDB merupakan aplikasi database server yang dikembangkan
oleh orang yang sama. MySQL berperan dalam mengolah, mengedit, dan
menghapus daftar melalui database.
P = PHP
Huruf “P” yang pertama dari akronim kata XAMPP adalah inisial untuk
menunjukkan eksistensi bahasa pemrograman PHP. Bahasa pemrograman ini
biasanya digunakan untuk membuat website dinamis, contohnya dalam website
berbasis CMS WordPress.
P = Perl
Sementara itu, untuk huruf P selanjutnya merupakan singkatan dari bahasa
pemrograman Perl yang kerap digunakan untuk memenuhi berbagai macam
kebutuhan. Perl ini bisa berjalan di dalam banyak sistem operasi sehingga
sangat fleksibel dan banyak digunakan.
2.3.1. Fungsi XAMPP
Program aplikasi XAMPP berfungsi sebagai server lokal untuk mengampu
berbagai jenis data website yang sedang dalam proses pengembangan.
Dalam prakteknya, XAMPP bisa digunakan untuk menguji kinerja fitur
ataupun menampilkan konten yang ada didalam website kepada orang lain tanpa
harus terkoneksi dengan internet, cukup akses melalui XAMPP control panel, atau
website offline.
XAMPP bekerja secara offline layaknya web hosting biasa namun tidak bisa
diakses oleh banyak orang
9
Maka dari itu, XAMPP biasanya banyak digunakan oleh para mahasiswa
maupun pelajar untuk melihat hasil desain website sebelum akhirnya dibuat online
menggunakan web hosting yang biasa dijual dipasaran.
2.4. CodeIgniter
Menurut Betha Sidik (2012) CodeIgniter adalah :“ Sebuah framework php
yang bersifat open source dan menggunakan metode MVC (Model, View,
Controller) untuk memudahkan developer atau programmer dalam membangun
sebuah aplikasi berbasis web tanpa harus membuatnya dari awal”.
Dalam situs resmi codeigniter, (Official Website CodeIgniter,2002)
menyebutkan bahwa codeigniter merupakan framework PHP yang kuat dan sedikit
bug. Codeigniter ini dibangun untuk para pengembang dengan bahasa pemrogram
PHP yang membutuhkan alat untuk membuat web dengan fitur lengkap.
Framework Codeigniter dikembangkan oleh Rick Ellis, CEO Ellislab, Inc.
kelebihan dari framework codeigniter jika dibandingkan dengan framework lain
adalah sebagai berikut :
1. Gratis (Open-Source)
Kerangka kerja Codeigniter memiliki lisensi dibawah Apache/BSD open-
source sehingga bersifat bebas atau gratis.
2. Berukuran kecil
Ukuran yang kecil merupakan keunggulan tersendiri jika dibandingkan
framework lain yang berukuran besar dan membutuhkan resource yang
besar dan juga dalam eksekusi maupun penyimpanannya.
3. Menggunakan konsep M-V-C
Codeigniter merupakan konsep M-V-C (ModelView-Controller) yang
memungkinkan pemisahan antara layer application-logic dan presentation.
Dengan konsep ini kode PHP, query Mysql, Javascript dan CSS dapat saling
dipisah-pisahkan sehingga ukuran file menjadi lebih kecil dan lebih mudah
dalam perbaikan kedepannya atau maintenance.
10
2.5. MySQL
MySQL adalah sebuah perangkat lunak system manajemen basis data SQL
(database management system) atau DBMS yang multithread, multi-user, dengan
sekitar 6 juta instalasi di seluruh dunia. MySQL AB membuat MySQL tersedia
sebaagai perangkat lunak gratis di bawah lisensi komersial untuk kasus-kasus
diamana pengguanaannya tidak cocok dengan penggunaannya tidak cocok dengan
penggunaan GPL.
Tidak seperti PHP atau Apache yang merupakan software yang
dikembangkan oleh komunitas umum, dan hak cipta untuk kode sumber dimiliki
oleh penlisnya masing-masing, MySQL dimiliki dan disponsori oleh sebuah
perusahasan komersial Swedia yaitu MySQL AB. MySQL AB memegang penuh
hak cipta hamper atas semua kode sumbernya.
Fitur-fitur MySQL antara lain :
• Relational Database System. Seperti halnya software database lain yang ada
di pasaran, MySQL termasuk RDBMS.
• Arsitektur Client-Server. MySQL memiliki arsitektur client-server dimana
server database MySQL terinstal di server. Client MySQL dapat berada di
• komputer yang sama dengan server, dan dapat juga di komputer lain yang
berkomunikasi dengan server melalui jaringan bahkan internet.
• Mengenal perintah SQL standar. SQL (Structured Query Language)
merupakan suatu bahasa standar yang berlaku di hampir semua software
database. MySQL mendukung SQL versi SQL:2003.
• Mendukung Sub Select. Mulai versi 4.1 MySQL telah mendukung select
dalam select (sub select).
• Mendukung Views. MySQL mendukung views sejak versi 5.0
• Mendukung Stored Prosedured (SP). MySQL mendukung SP sejak versi 5.0
• Mendukung Triggers. MySQL mendukung trigger pada versi 5.0 namun
masih terbatas. Pengembang MySQL berjanji akan meningkatkan
kemampuan trigger pada versi 5.1.
• Mendukung replication.
• Mendukung transaksi.
11
• Mendukung foreign key.

• Tersedia fungsi GIS.
• Free (bebas didownload)
• Stabil dan tangguh
• Fleksibel dengan berbagai pemrograman
• Security yang baik
• Dukungan dari banyak komunitas
• Perkembangan software yang cukup cepat.
2.6. Bootstrap
Bootstrap adalah framework fornt-end yang intuitif dan powerful untuk
pengembangan aplikasi web yang lebih cepat dan mudah. Bootstrap menggunakan
HTML, CSS, dan Javascript.
Bootstrap dikembangkan oleh Mark Otto dan Jacob Thornton dari Twitter.
Framework ini diluncurkan sebagai produk open source pada Agustus 2011 di
GitHub.
Bootsrap memliki fitur-fitur komponen interface yang bagus seperti
Typography, Forms, Buttons, Tables, Navigations, Dropdowns, Alerts, Modals,
Tabs, Accordion, Carousel, dan lain sebagainya.
2.6.1. Kelebihan Bootstrap
Berikut ini adalah kelebihan-kelebihan Bootstrap:
1. Menghemat waktu
Anda dapat menghemat waktu dan tenaga dengan menggunakan
berbagai desain template dan kelas yang sudah ada dalam Bootstrap.
2. Fitur yang Responsif
Dengan Bootstrap, anda dapat dengan mudah membuat desain yang
responsif. Dengan fitur-fitur ini, halaman web akan tampil responsif
pada perangkat yang berbada tanpa perlu adanya perubahan kode
markup.
3. Desain yang Konsisten
Semua komponen Bootstrap punya desain templare dan style yang sama
sehingga membuat tampilan website menjadi konsisten.
12
4. Mudah Digunakan
Bootstrap sangat mudah digunakan. Siapa pun dengan pengetahuan
dasar HTML dan CSS dapat menggunakan Bootstrap.
5. Digunakan Oleh Semua Browser Populer
Bootstrap dapata digunakan semua website modern seperti Mozilla
Firefox, Google Chrome, Safari, Microsoft Edge, dan Opera.
6. Gratis
Bootstrap merupakan framework open source yang dapat digunakan
secara gratis.
2.7. Visual Studio Code
Visual Studio Code adalah sebuah perangkat lunak lengkap yang dapat
digunakan untuk melakukan pengembangan aplikasi, baik itu aplikasi bisnis,
aplikasi personal, ataupun komponen aplikasinya, dalam bentuk aplikasi console,
aplikasi Windows, ataupun aplikasi Web.
Kode sumber Visual Studio Code berasal dari proyek VSCode perangkat
lunak bebas dan sumber terbuka milik Microsoft yang dirilis di bawah Lisensi MIT
yang permisif, namun binari yang dikompilasi adalah freeware untuk penggunaan
apa pun. Dalam survei Pengembang Stack Overflow 2019, Visual Studio Code
mendapat peringkat alat lingkungan pengembang paling populer, dengan 50,7%
dari 87.317 responden mengklaim menggunakannya.
2.8. Unified Modeling Language
UML (Unified Modelling Language) adalah suatu metode dalam pemodelan
secara visual yang digunakan sebagai sarana perancangan sistem berorientasi objek.
Awal mulanya, UML diciptakan oleh Object Management Group dengan versi awal
1.0 pada bulan Januari 1997.
Fungsi perlu adanya UML yaitu sebagai berikut:
1. Dapat memberikan bahasa pemodelan visual atau gambar kepada para
pengguna dari berbagai macam pemrograman maupun proses umum
rekayasa.
2. Menyatukan informasi-informasi terbaik yang ada dalam pemodelan.
13
3. Memberikan suatu gambaran model atau sebagai bahasa pemodelan visual

yang ekspresif dalam pengembangan sistem.
4. Tidak hanya menggambarkan model sistem software saja, namun dapat
memodelkan sistem berorientasi objek.
5. Mempermudah pengguna untuk membaca suatu sistem.
6. Berguna sebagai blueprint, jelas ini nantinya menjelaskan informasi yang
lebih detail dalam perancangan berupa coding suatu program.
2.8.1. Use Case Diagram
UML menyediakan serangkaian gambar dan diagram yang sangat baik.
Beberapa diagram memfokuskan diri pada detail rancangan dan konstruksi.
Semuanya dimaksudkan sebagai saran komunikasi antar tim programmer maupun
pengguna. Sistem yang kita buat tidak selalu menggambarkan aktivitas internal,
hubungan satu contributor terhadap diagram use case dalam UML adalah Ivar
Jacobsen. Use Case menggambarkan eksternal view dari sebuah sistem yang akan
kita buat modelnya. Pooley(2003:15) mengatakan bahwa mode use case dapat
dijabarkan dalam diagram use case, tetapi yang perlu diingat diagram tidak tdentik
dengan model karena model lebih lusa dari diagram.(Muhammad Muslihudin,
2016).
Komponen pembentuk diagram use case adalah :
1. Aktor(Actor), menggambarkan pihak-pihak yang berperan dalam sistem.
2. Use Case, aktivitas/sarana yang disiapkan oleh bisnis/sistem.
3. Hubungan(link), aktor mana saja yang terlibat dalam use case ini
Gambar di bawah ini merupakan salah satu contoh bentuk diagram use case.
14
Gambar 2.1 Contoh Diagram Use Case

2.8.2. Class Diagram
Class diagram adalah sebuah class yang menggambarkan struktur dan
penjelasan class, paket dan objek serta hubungan satu sama lain seperti
containment, pewarisan, asosiasi, dan lain-lain. Class diagram juga menjelaskan
hubungan antar class dalam sebuah sistem yang sedang dibuat dan bagaimana
caranya agar mereka saling berkolaborasi untuk mencapai sebuah tujuan.
Class juga memilik 3 area pokok (utana) yaitu :nama, atribut, dan operasi.
Nama berfungsi utnuk member identitas pada sebuah kelas, atribut fungsinya
adalah untuk member karakteristik pada data yang dimiliki suatu objek di dalam
kelas, sedangkan operasi fungsinya adalah memberikan sebuah fungsi ke sebuah
objek. Dalam mendefinisikan metode yang ada di dalam kelas harus diperhatikan
yang Namanya Cohesion dan Coupling. Cohesion adalah ukuran keterkaitan antar
metode. Di dalam class diagram terdapat hubungan antar kelas secara konseptual,
yang diesebut Relasi antar Class, di UML disediakan macam-macam relasi antar
Class, diantaranya: Asosiasi (Hubungan statis antar kelas), Agregasi (hubungan
dari keseluruhan objek), Generalissai (relasi beberapa subkelas ke super kelas),
Dependency (keterhubungan tiap kelas). Atribut dan metoda dapat memiliki salah
satu sifat berikut :
1. Private, tidak dapat dipanggil dari luar class yang bersangkutan.
2. Protected, hanya dapat dipanggil oleh class yang bersangkutan dan anak-
anak yang mewarisinya.
15
3. Public, dapat dipanggil oleh siapa saja (Nurliana’s, 2014).

2.9. Struktur Navigasi
Sturktur navigasi adalah struktur atau alur dari suatu program. Menentukan
struktur navigasi merupakan hal yang sebaiknya dilakukan sebelum membuat suatu
aplikasi. Ada 4 (empat) macam bentuk dasar dari struktur navigasi yang biasa
digunakan dalam proses pembuatan aplikasi.
2.9.1. Jenis-Jenis Struktur Navigasi
2.9.1.1. Linier
Struktur yang hanya mempunyai satu rangkaian cerita berurutan.
Menampilkan satu demi satu tampilan layar tampilan layar secara berurutan
menurut urutannya dan tidak diperbolehkan adanya percabangan.
Gambar 2.2 Navigasi Linier
2.9.1.2. Hirarki
Struktur ini mengandalkan percabangan untuk menampilkan data
berdasarkan kriteria tertentu. Pemakai menelusuri program melalui titik-titik
percabangan dari suatu struktur pohon.
Gambar 2.3 Navigasi Hirarki

16
2.9.1.3. Non Linier

Struktur navigasi yang memiliki percabangan namun pada percabangan ini
memiliki kedudukan yang sama. Pada struktur ini tidak ada pada master page dan
slave page. pemakai bebas menelusuri program tanpa dibatasi oleh suatu
rute.
Gambar 2.4 Non Linier

2.9.1.4. Campuran
Struktur navigasi ini adalah gabungan dari 3 struktur sebelumnya yaitu linier
dan hirarki. Sering disebut juga penjejakkan bebas. pemakai dapat dengan bebas
menelusuri program, tetapi pada bagian tertentu gerakan dibatasi secara hirarki
ataupun linier.
Gambar 2.5 Navigasi Campuran

BAB III
PEMBAHASAN
3.1. Gambaran Umum Website
Secara umum website ini digunakan sebagai sarana informasi dan pembelian
buku, dengan harapan dapat mempermudah memperoleh informasi.
Website toko buku LIVEFORBOOKS merupakan website online, dibuat

menggunakan HTML, Framework Codeigniter, dan desain tampilannya
menggunakan Framework Bootstrap, lalu MYSQL sebagai database. Website ini
memberikan konsumen pilihan buku dengan berbagai genre.
Website ini memiliki dua level yaitu level admin dan level user. Pada level user
hanya bisa mengakses halaman beranda, buku, keranjang, transaksi. Pada level
admin hanya bisa mengakses halaman beranda, data buku, keranjang, transaksi,
data rekening, dan juga konfigurasi. Perbedaan halaman antara level user dan admin
adalah pada level user dapat melihat dan juga memesan buku dan pada level admin
bisa menambah, mengubah, menghapus dan mencetak data transaksi.
Pada halaman Beranda user berisi buku terbaru, login dan juga melihat
keranjang belanja. Pada menu Katalog terdapat data buku, detail buku dan kategori
buku. Pada halaman akun terdapat data akun, keranjang belanja dan riwayat
belanja. Pada halaman pembayaran terdapat form untuk tanggal bayar, jumlah
bayar dan bukti pembayaran.
Pada halaman Beranda(dashboard) admin berisi, transaksi, buku, detail buku,

data rekening, user, dan konfigurasi. Pada menu Transaksi terdapat semua data
pelanggan / user dan dapat mencetak data transaksi. Pada menu Buku admin dapat
melihat dan mengedit data buku, menambahkan buku, dan mengubah kategori
buku. Pada menu data rekening admin dapat mengedit, menghapus atau
menambahkan nomor rekening baru untuk transaksi para pelanggan. Pada menu
pengguna admin dapat melihat data si pengguna dan menambahkan pengguna. Pada
17
18
menu konfigurasi admin dapat melakukan konfigurasi umum, konfigurasi logo

website, konfigurasi ikon web.
3.2. Perancangan
3.2.1. Struktur Navigasi
Dalam merancang sebuah aplikasi perlu adanya penggambaran akan sistem

tersebut. Penggambaran tersebut dapat dituliskan ke dalam bentuk struktur
navigasi. Di bawah ini merupakan sturktur navigasi yang digunakan untuk
merancang website tipe sturktur navigasi yang digunakan dalam perancangan ini
adalah campuran. Tampilan struktur navigasi user ada pada gambar 3.1 dan
tampilan struktur navigasi admin ada pada gambar 3.2.
3.2.1.1.Struktur Navigasi User
Pada struktur navigasi user dijelaskan pada saat user memasuki web yang
pertama kali di lihat user adalah halaman home/dashboard. Dihalaman utama
terdapat empat sub menu yaitu beranda, kategori, kontak, login dan keranjang. Pada
halaman beranda terdapat buku terbaru. Pada halaman kategori terdapat kategori
buku. Pada halaman masuk terdapat login dan juga daftar. Pada halaman login
dashboard pelanggan, riwayat belanja, dan juga keranjang belanja.
Gambar 3.1 Struktur Navigasi User

19
3.2.1.2.Struktur Navigasi Admin
Pada struktur navigasi admin dapat mengakses halaman website yang ada. Pada
saat login yang di lihat admin adalah beranda(dashboard), transaksi, Data Buku,
Data Rekening ,Laporan dan Pengguna/User. Pada halaman buku terdapat data
buku, tambah buku dan kategori buku. Pada halaman laporan admin dapat melihat
laporan pembelian harian, bulanan dan tahunan
Gambar 3.2 Struktur Navigasi Admin
3.2.2. Use Case Diagram
Use case diagram merupakan diagram yang digunakan untuk mengetahui

fungsi apa saja yang ada didalam sebuah sistem, siapa saja yang berhak
menggunakan fungsi-fungsi tersebut(Aktor), dan menjelaskan proses apa saja yang
dimiliki oleh sistem jika dipandang dari luar sistem.
3.2.2.1.Use Case Diagram User
Diagram use case user pada gambar 3.3 digunakan untuk melihat system
apa saja yang terlihat oleh user. Pada diagram ini hanya terdapat oleh satu aktor
yaitu user. User hanya bias melihat beranda, melihat buku, memesan nuku dan
dapat mengkonfirmasi pembayaran.
20
Gambar 3.3 Bagan Use Case User
3.2.2.2.Use Case Diagram Admin
Diagram use case admin pada gambar 3.4 digunakan untuk melihat apa saja
yang dapat diakses didalam system oleh admin. Pada diagram ini hanya terdapat
satu actor yaitu admin dan perintah include pada diagram menjelaskan bahwa
admin dapat mengakses menu yang ada didalam system dan mengelola system
seperti menambahkan, mengedit dan menghapus buku. Pada halaman pengguna
terdapat pengguna yaitu admin. Pada halaman pengguna terdapat data pengguna
yaitu admin. Pada halaman Data Rekening terdapat data rekening admin dan juga
dapat menambahkan, menghapus dan juga dapat mengedit rekening.
Gambar 3.4 Bagan Use Case Admin

21
3.2.3. Class Diagram
Class diagram atau diagram kelas merupakan suatu diagram yang digunakan
untuk menampilkan kelas-kelas berupa paket-paket untuk memenuhi salah satu
kebutuhan paket yang akan digunakan nantinya.
Gambar 3.5 Bagan Class diagram
3.2.4. Rancangan Database
Sebelum membuat rancangan database pada perangkat lunak

(MYSQL),penulis menentukan struktur data yang akan digunakan yang meliputi
nama atribut, tipe data, panjang data dan kunci utama setiap tabel.
22
3.2.4.1. Tabel Admin
Tabel admin ini dirancang untuk menyimpan informasi mengenai data

admin, pada tabel ini terdapat terdapat 5 field. Berikut struktur tabel admin dapat
dilihat pada tabel 3.1.
Tabel 3.1 Tabel tb_user(Admin)
No Name Field Tipe Data Keterangan

1 Id_user Int(11) Primary key dan auto-increment,
penanda dari sebuah user
2 Nama_user Varchar(25) Untuk menyimpan nama user
4 Username Varchar(25) Untuk menyimpan username user
5 Password Varchar(20) Untuk menyimpan password user
6 Akses_Level Int(1) Untuk menyimpan akses level user
3.2.4.2.Tabel Rekening
Tabel rekening digunakan untuk menyimpan informasi rekening penjual. Pada

tabel ini terdapat 2 field. Berikut sturuk tabel buku dapat dilihat pada tabel 3.2.
Tabel 3.2 Tabel tb_rekening
No Nama_field Tipe Data Keterangan

1 Id_rekening Int(11) Primary key dan auto-increment,
penanda dari sebuah kategori
2 Nama_bank Varchar(25) Untuk menyimpan nama bank
3 No_rek Varchar(25) Untuk menyimpan nomor rekening
penjual
4 Atas_nama Varchar(25) Untuk menyimpan atas nama rekening
23
3.2.4.3. Tabel Buku
Tabel buku digunakan untuk menyimpan informasi mengenai transaksi

penjualan dan struk belanjaan. Pada tabel ini terdapat 7 field. Berikut sturuk tabel
buku dapat dilihat pada tabel 3.3.
Tabel 3.3 Tabel tb_buku

1 Id_buku Int(11) Primary key dan auto-increment, penanda
dari sebuah buku
2 Nama_buku Varchar(50) Untuk menyimpan nama buku
3 Id_kategori Int(11) Untuk menyimpan kategori
4 Harga Int(6) Untuk menyimpan harga buku
5 Deskripsi Mediumtext Untuk menyimpan deskripsi buku
6 Gambar Text Untuk menyimpan gambar buku
7 Berat Float Untuk menyimpan berat buku
3.2.4.4. Tabel Pelanggan
Tabel pelanggan digunakan untuk menyimpan informasi mengenai data

pelanggan. Pada tabel ini terdapat 10 field. Berikut sturktur tabel pelanggan dapat
Tabel 3.4 Tabel tb_pelanggan
No Name_field Tipe Data Keterangan

1 Id_pelanggan Int(11) Primary key dan auto-increment,
penanda dari sebuah pelanggan
4 Nama_pelanggan Varchar(25) Untuk menyimpan nama pelanggan
5 Email Varchar(25) Untuk menyimpan email pelanggan
6 Password Text Untuk menyimpan password
pelanggan
24
3.2.4.5.Tabel Kategori
Tabel kategori digunakan untuk menyimpan informasi mengenai kategori buku

yang dijual. Pada tabel ini terdapat 2 field. Berikut sturuk tabel buku dapat dilihat
pada tabel 3.5.
Tabel 3.5 Tabel tb_kategori

1 Id_kategori Int(11) Primary key dan auto-increment,
penanda dari sebuah kategori
2 Nama_kategori Varchar(25) Untuk menyimpan nama kategori
3.2.4.6.Tabel Gambar
Tabel gambar digunakan untuk menyimpan informasi mengenai gambar buku

saat ditambahkan admin. Pada tabel ini terdapat 4 field. Berikut sturuk tabel buku
dapat dilihat pada tabel 3.6.
Tabel 3.6 Tabel tb_gambar

1 Id_gambar Int(11) Primary key dan auto-increment,
penanda dari sebuah gambar
2 Id_buku Int(11) Untuk menyimpan id buku
3 Ket Varchar(25) Untuk menyimpan keterangan gambar
4 Gambar Text Untuk menyimpan gambar buku
3.2.4.7.Tabel Transaksi
Tabel transaksi digunakan untuk menyimpan data transaksi yang telah

dilakukan oleh pelanggan. Pada tabel ini terdapat 24 field. Berikut sturuk tabel buku
dapat dilihat pada tabel 3.7.
25
Tabel 3.7 Tabel tb_transaksi

1 Id_transaksi Int(11) Primary key dan auto-increment,
penanda dari sebuah transaksi
2 Id_pelanggan Int(11) Untuk menyimpan pelanggan
3 No_order Varchar(25) Untuk menyimpan nomor order
4 Tgl_order date Untuk menyimpan tanggal order
5 Nama_penerima Varchar(25) Untuk menyimpan nama penerima
6 Hp_penerima Varchar(15) Untuk menyimpan nomor hp penerima
7 Provinsi Varchar(25) Untuk menyimpan provinsi
8 Kota Varchar(25) Untuk menyimpan kota
9 Alamat text Untuk menyimpan alamat
10 Kode_pos Varchar(8) Untuk menyimpan kode pos
11 Ekspedisi Varchar(10) Untuk menyimpan ekspedisi
12 Paket Varchar(20) Untuk menyimpan paket
13 Estimasi Varchar(10) Untuk menyimpan estimasi
14 Ongkir Int(11) Untuk menyimpan ongkir
15 Berat Int(11) Untuk menyimpan berat
16 Grand_total Int(11) Untuk menyimpan total harga
17 Total_bayar Int(11) Untuk menyimpan total bayar
18 Status_bayar Int(1) Untuk menyimpan status bayar
19 Bukti_bayar Text Untuk menyimpan bukti bayar
20 Atas_nama Varchar(25) Untuk menyimpan atas nama
21 Nama_bank Varchar(25) Untuk menyimpan nama bank
22 No_rek Varchar(25) Untuk menyimpan nomor rekening
23 Status order Int(1) Untuk menyimpan status order
24 No_resi Varchar(25) Untuk menyimpan nomor resi
26
3.2.4.8.Tabel Rinci Transaksi
Tabel rinci transaksi digunakan untuk menghubungkan tabel transaksi, tabel

rinci transaksi ini berisi detail pembelian buku dari transaksi yang telah dilakukan
oleh pelanggan. Pada tabel ini terdapat 4 field. Berikut sturuk tabel buku dapat
Tabel 3.8 Tabel tb_rinci_transaksi

1 Id_rinci Int(11) Primary key dan auto-increment, penanda
dari sebuah rinci transaksi
2 No_order Varchar(25) Untuk menyimpan nomor order
3 Id_buku Int(11) Untuk menyimpan buku
4 qty Int(11) Untuk menyimpan jumlah buku yang
dipesan
3.2.4.9.Tabel Setting
Tabel setting digunakan untuk menyimpan lokasi detail toko. Pada tabel ini
terdapat 5 field. Berikut sturuk tabel buku dapat dilihat pada tabel 3.9.
Tabel 3.9 Tabel tb_setting

1 Id Int(2) Primary key dan auto-increment, penanda
dari sebuah setting
2 Nama_toko Varchar(20) Untuk menyimpan nama toko
3 lokasi Int(11) Untuk menyimpan lokasi
4 Alamat_toko text Untuk menyimpan alamat toko
5 No_telepon Varchar(15) Untuk menyimpan nomor telepon toko
27
3.2.5. Perancangan Tampilan
Pada tahap ini dilakukan pembuatan rancangan awal aplikasi, pada bagian
rancangan awal dibagi menjadi 2 tampilan yaitu tampilan admin dan tampilan
user.
3.2.5.1.Rancangan Admin
3.2.5.1.1. Rancangan Halaman Login
Pada halaman login terdapat input untuk username dan password lalu
terdapat tombol masuk untuk mengecek username dan password yang ada pada
database tabel akun. Berikut rancangan tampilan dari halaman beranda admin
dapat dilihat pada gambar 3.6.
Gambar 3.6 Rancangan Tampilan Halaman Login
3.2.5.1.2. Rancangan Halaman Dashboard
Halaman beranda ini adalah halaman awal ketika admin berhasil login. Di
halaman dashboard admin terdapat Dashboard, Kategori, Buku, Pesanan Masuk,
Laporan, Setting, User dan Logout. Berikut rancangan tampilan dari halaman
dashboard admin dapat dilihat pada gambar 3.7.
28
Gambar 3.7 Rancangan Tampilan Dashboard Admin
3.2.5.1.3. Rancangan Halaman Buku
Pada gambar 3.8 merupakan tampilan dari Halaman Buku Admin pada
tampilan ini admin dapat menampilkan buku yang akan dijual, menambahkan buku,
mengubah buku dan menghapus buku.
Gambar 3.8 Rancangan Tampilan Halaman Buku
3.2.5.1.4. Rancangan Halaman Pesaanan Masuk
Pada gambar 3.9 merupakan tampilan dari Halaman Pesanan Masuk Admin.
Pada tampilan ini admin dapat menampilkan data transaksi user/pelanggan, melihat
data transaksi dan mencetak data transaksi.
29
Gambar 3.9 Rancangan Tampilan Halaman Pesanan Masuk
3.2.5.1.5. Rancangan Halaman User
Pada gambar 3.10 merupakan tampilan dari Halaman User Admin. Pada
tampilan ini admin dapat menampilkan data admin, mengubah data admin dan
menghapus data admin.
Gambar 3.10 Rancangan Tampilan Halaman User

30
3.2.5.1.6. Rancangan Halaman Kategori
Pada gambar 3.11 merupakan tampilan dari Halaman Kategori Admin. Pada
tampilan ini admin dapat menampilkan data admin, mengubah data admin dan
menghapus data admin.
Gambar 3.11 Rancangan Tampilan Halaman Kategori
3.2.5.1.7. Rancangan Halaman Setting
Pada gambar 3.12 merupakan tampilan dari Halman Setting. Pada tampilan
ini admin dapat merubah tempat toko.
Gambar 3.12 Rancangan Tampilan Halaman Setting

31
3.2.5.2. Rancangan Pelanggan

3.2.5.2.1. Rancangan Halaman Login
Pada halaman login terdapat input untuk username dan password lalu terdapat
tombol masuk untuk mengecek username dan password yang ada pada database
tabel akun. Berikut rancangan tampilan dari halaman beranda user dapat dilihat di
gambar 3.13.
Gambar 3.13 Rancangan Tampilan Halaman Login

3.2.5.2.2. Rancangan Halaman Beranda User
Halaman beranda ini adalah halaman awal ketika user memasuki web. Di
halaman user beranda user terdapat keranjang belanja, Katalog Belanja, Email dan
juga Telepon. Berikut rancangan halaman beranda user dapat dilihat di gambar
3.14.
Gambar 3.14 Rancangan Tampilan Halaman Beranda

32
3.2.5.2.3. Rancangan Halaman Kategori
Pada gambar 3.15 merupakan tampilan dari Halaman Kategori. Pada

halaman ini menampilkan kategori buku.
Gambar 3.15 Rancangan Tampilan Halaman Kategori
3.2.5.2.4. Rancangan Halaman Keranjang Belanja
Pada gambar 3.16 merupakan tampilan dari Halaman Keranjang Belanja.

Pada halaman ini menampilkan buku yang dibeli oleh pelanggan, menghapus
semua buku yang akan dibeli dan juga melakukan proses checkout.
33
Gmabar 3.16 Rancangan Tampilan Halaman Keranjang Belanja
3.2.5.2.5. Rancangan Halaman Checkout
Pada gambar 3.17 merupakan tampilan dari Halaman Checkout pelanggan

/ user. Pada tampilan ini pelanggan / user dapat mengecek ulang buku yang akan
dibeli dan juga mengecek data pelanggan.
Gambar 3.17 Rancangan Tampilan Halaman Checkout
3.2.5.2.6. Rancangan Halaman Pesanan Saya
Pada gambar 3.18 merupakan tampilan dari Pesanan Saya. Pada tampilan
ini pelanggan melihat buku yang dibeli.
34
Gambar 3.18 Rancangan Tampilan Halaman Pesanan Saya
3.2.5.2.7. Rancangan Halaman Konfirmasi Pembayaran
Pada gambar 3.19 merupakan tampilan dari Halaman Konfirmasi

Pembayaran. Pada Halaman ini pelanggan / user mengecek riwayat belanja dan juga
mencantumkan bukti pembayaran.
Gambar 3.19 Rancangan Tampilan Halaman Konfirmasi Pembayaran
3.3. Pembuatan Website
Pembuatan website adalah tahap penerapan rancangan tampilan ke dalam

bahasa pemrograman HTML dan PHP. Yang pertama harus dilakukan adalah
menginstall beberapa software yang dibutuhkan untuk mendukung pembuatan
website seperti Visual Studio Code yang digunakan untuk mengedit script-script
PHP dan HTML, dan XAMPP yang digunakan untuk menerjemahkan bahasa PHP
menjadi output di web browser. Selain itu XAMPP juga mencakup
PHPMYADMIN yang berfungsi sebagai control panel MYSQL berbasis GUI.
Setelah menginstal Visual Studio Code dan XAMPP, langkah selanjutnya adalah
membuat folder di dalam folder htdocs yang berada di folder XAMPP dan diberi
nama bookstore.
35
3.3.1. Koneksi Database
Pada listing program di bawah ini diguanakan untuk menghubungkan

Framework CodeIgniter dengan database yang terletak di
application/config/database.php. Lalu jika sudah melakukan pengaturan database
langkah selanjutnya memanggil library database codeigniter yang terletak pada
application/config/autoload.php
$db['default'] = array(
'dsn' => '',
'hostname' => 'localhost',
'username' => 'id19425909_root',
'password' => '>O9>SkImy)Nbrne0',
'database' => 'id19425909_db_olshop',
$autoload['libraries'] = array('session', 'form_validation', 'upload', 'database',
'user_login', 'cart', 'pelanggan_login');
3.3.2. Pembuatan Halaman Admin
3.3.2.1. Pembuatan Halaman Login
Gambar 3.20 Halaman Login Admin

36
Pada gambar 3.20 merupakan halaman login. Halaman login ini dibuat
dengan source code menggunakan PHP seperti dibawah ini
class Auth extends CI_Controller

{
public function login_user()

{
$this->form_validation->set_rules('username', 'Username', 'required', array(
'required' => '%s Harus Diisi !!!'
));
$this->form_validation->set_rules('password', 'Password', 'required', array(
));
if ($this->form_validation->run() == TRUE) {
$username = $this->input->post('username');
$password = $this->input->post('password');
$this->user_login->login($username, $password);
}
$data = array(
'title' => 'Login User',
);
$this->load->view('v_login_user', $data, FALSE);
}
public function logout_user()
{
$this->user_login->logout();
}
}
37
Pada source code diatas terdapat level akses yaitu admin yang terletak pada
tb_user, jika username dan password salah maka akan keluar pesan “Username atau
Password salah”.
3.3.2.2. Pembuatan Halaman Dashboard
Gambar 3.21 Tampilan Halaman Dashboard Admin
Pada gambar 3.21 merupakan halaman Dashboard Admin. Halaman

Dashboard Admin dibuat dengan source code PHP seperti di bawah ini :
class Admin extends CI_Controller

{
public function __construct()
{
parent::__construct();
$this->load->model('m_admin');
$this->load->model('m_pesanan_masuk');
}
public function index()
{
$data = array(
'title' => 'Dashboard',
'total_buku' => $this->m_admin->total_buku(),
'total_kategori' => $this->m_admin->total_kategori(),
38
'isi' => 'v_admin',

);
$this->load->view('layout/v_wrapper_backend', $data, FALSE);
}
public function setting()
{
$this->form_validation->set_rules('nama_toko', 'Nama Toko', 'required', array(
));
$this->form_validation->set_rules('kota', 'Kota', 'required', array(
));
$this->form_validation->set_rules('alamat_toko', 'Alamat Toko', 'required',
array(
));
$this->form_validation->set_rules('no_telepon', 'No Telepon', 'required', array(
));
if ($this->form_validation->run() == FALSE) {
$data = array(
'title' => 'Setting ',
'setting' => $this->m_admin->data_setting(),
'isi' => 'v_setting',
);
} else {
$data = array(
'id' => 1,
'lokasi' => $this->input->post('kota'),
'nama_toko' => $this->input->post('nama_toko'),
39
'alamat_toko' => $this->input->post('alamat_toko'),

'no_telepon' => $this->input->post('no_telepon'),
);
$this->m_admin->edit($data);
$this->session->set_flashdata('pesan', 'Settingan Berhasil di Ganti !!!');
redirect('admin/setting');
}
}
public function pesanan_masuk()
{
$data = array(
'title' => 'Pesanan Masuk',
'pesanan' => $this->m_pesanan_masuk->pesanan(),
'pesanan_diproses' => $this->m_pesanan_masuk->pesanan_diproses(),
'pesanan_dikirim' => $this->m_pesanan_masuk->pesanan_dikirim(),
'pesanan_selesai' => $this->m_pesanan_masuk->pesanan_selesai(),
'isi' => 'v_pesanan_masuk',
);
}
public function proses($id_transaksi)
{
$data = array(
'id_transaksi' => $id_transaksi,
'status_order' => '1'
);
$this->m_pesanan_masuk->update_order($data);
$this->session->set_flashdata('pesan', 'Pesanan Berhasil Di Proses/Dikemas
!!!');
redirect('admin/pesanan_masuk');
}
40
public function kirim($id_transaksi)

{
$data = array(
'no_resi' => $this->input->post('no_resi'),
);
$this->session->set_flashdata('pesan', 'Pesanan Berhasil Di Kirim !!!');
}
}
Pada source code diatas terdapat menu User, Data buku, Setting dan juga
Transaksi yang terdapat pada database.
3.3.2.3. Pembuatan Halaman Buku
Gambar 3.22 Tampilan Halaman Buku
Pada gambar 3.22 merupakan halaman Buku. Halaman Buku dibuat source
code menggunakan PHP seperti dibawah ini :
41
class Buku extends CI_Controller

{
{
$this->load->model('m_buku');
$this->load->model('m_kategori');
}
// List all your items
{
$data = array(
'title' => 'Buku',
'buku' => $this->m_buku->get_all_data(),
'isi' => 'Buku/v_buku',
);
}
// Add a new item
public function add()
{
$this->form_validation->set_rules('nama_buku', 'Nama buku', 'required',
array(
));
$this->form_validation->set_rules('id_kategori', 'Kategori', 'required', array(
));
$this->form_validation->set_rules('harga', 'Harga', 'required', array(
));
42
$this->form_validation->set_rules('berat', 'Berat', 'required', array(

));
$this->form_validation->set_rules('deskripsi', 'Deskripsi', 'required', array(
));
$config['upload_path'] = './assets/gambar/';
$config['allowed_types'] = 'gif|jpg|png|jpeg|ico|jfif';
$config['max_size'] = '2000';
$this->upload->initialize($config);
$field_name = "gambar";
if (!$this->upload->do_upload($field_name)) {
$data = array(
'title' => 'Add Buku',
'kategori' => $this->m_kategori->get_all_data(),
'error_upload' => $this->upload->display_errors(),
'isi' => 'buku/v_add',
);
} else {
$upload_data = array('uploads' => $this->upload->data());
$config['image_library'] = 'gd2';
$config['source_image'] = './assets/gambar/' .
$upload_data['uploads']['file_name'];
$this->load->library('image_lib', $config);
$data = array(
'nama_buku' => $this->input->post('nama_buku'),
'id_kategori' => $this->input->post('id_kategori'),
43
'harga' => $this->input->post('harga'),

'berat' => $this->input->post('berat'),
'deskripsi' => $this->input->post('deskripsi'),
'gambar' => $upload_data['uploads']['file_name'],
);
$this->m_buku->add($data);
$this->session->set_flashdata('pesan', 'Data Berhasil Ditambahkan !!!');
redirect('buku');
}
}
$data = array(
);
}
//Update one item
public function edit($id_buku = NULL)
{
array(
));
));
));
44

));
));
$data = array(
'title' => 'Edit buku',
'buku' => $this->m_buku->get_data($id_buku),
'isi' => 'buku/v_edit',
);
} else {
//hapus gambar
$buku = $this->m_buku->get_data($id_buku);
if ($buku->gambar != "") {
unlink('./assets/gambar/' . $buku->gambar);
}
//end hapus gambar
45
$data = array(
'id_buku' => $id_buku,
);
$this->m_buku->edit($data);
$this->session->set_flashdata('pesan', 'Data Berhasil Diganti !!!');
redirect('buku');
}
//jika tanpa ganti gambar
$data = array(
);
redirect('buku');
}
$data = array(
'title' => 'Edit Buku',
46

);
}
//Delete one item
public function delete($id_buku = NULL)
{
//hapus gambar
}
//end hapus gambar
$data = array('id_buku' => $id_buku);
$this->m_buku->delete($data);
$this->session->set_flashdata('pesan', 'Data Berhasil Dihapus !!!');
redirect('buku');
}
}
Pada source code di halaman katalog admin digunakan untuk menampilkan
buku yang ingin dijual dari mulai Nama Buku, Kategori, Harga Buku, Gamabar
Buku dan pada halaman Buku admin dapat menambahkan buku, mengubah buku
dan menghapus buku.
3.3.2.4. Pembuatan Halaman Pesanan Masuk

47
Gambar 3.23 Tampilan Halaman Pesanan Masuk
Pada gambar 3.23 merupakan halaman Transaksi. Halaman Transaksi

dibuat source code menggunakan PHP seperti dibawah ini :

{
$data = array(
);
}
Pada source code dihalaman transaksi digunakan untuk menampilkan
semua data transaksi user / pelanggan dan juga dapat mencetak data transaksi.
3.3.2.5. Pembuatan Halaman Laporan
Gambar 3.24 Tampilan Halaman Laporan
Pada gambar 3.24 merupakan halaman Laporan. Halaman Data Rekening

dibuat source code menggunakan PHP seperti dibawah ini :
class Laporan extends CI_Controller

{
48

{
$this->load->model('m_laporan');
}

{
$data = array(
'title' => 'Laporan Penjualan',
'isi' => 'v_laporan',
);
}
public function lap_harian()

{
$tanggal = $this->input->post('tanggal');
$bulan = $this->input->post('bulan');
$tahun = $this->input->post('tahun');
$data = array(
'title' => 'Laporan Penjualan Harian',
'tanggal' => $tanggal,
'bulan' => $bulan,
'tahun' => $tahun,
'laporan' => $this->m_laporan->lap_harian($tanggal, $bulan, $tahun),
'isi' => 'v_lap_harian',
);
49

}
public function lap_bulanan()
{
$bulan = $this->input->post('bulan');
$data = array(
'title' => 'Laporan Penjualan Bulanan',
'bulan' => $bulan,
'tahun' => $tahun,
'laporan' => $this->m_laporan->lap_bulanan($bulan, $tahun),
'isi' => 'v_lap_bulanan',
);
}
public function lap_tahunan()
{
$data = array(
'title' => 'Laporan Penjualan Tahunan',
'tahun' => $tahun,
'laporan' => $this->m_laporan->lap_tahunan($tahun),
'isi' => 'v_lap_tahunan',
);
}
}
Pada source code dihalaman laporan digunakan untuk menampilkan data
laporan harian, bulanan dan tahunan admin.
50
3.3.2.6. Pembuatan Halaman Setting
Gambar 3.25 Tampilan Halaman Setting
Pada gambar 3.25 merupakan halaman Setting. Halaman Setting dibuat

source code menggunakan PHP seperti dibawah ini :

{
$this->form_validation->set_rules('nama_toko', 'Nama Toko', 'required', array(

));
));
array(
));
$this->form_validation->set_rules('no_telepon', 'No Telepon', 'required', array(
));
$data = array(
51

);
} else {
$data = array(
'id' => 1,
);
}
}
Pada source code dihalaman pengguna digunakan untuk menyimpan detail
alamat toko.
3.3.2.7. Pembuatan Halaman User
Gambar 3.26 Tampilan Halaman User
Pada gambar 3.26 merupakan halaman User. Halaman User dibuat source
code menggunakan PHP seperti dibawah ini :
52
class USer extends CI_Controller

{
{
$this->load->model('m_user');
}
public function index($offset = 0)
{
$data = array(
'title' => 'User',
'user' => $this->m_user->get_all_data(),
'isi' => 'v_user',
);
}
// Add a new item
{
$data = array(
'nama_user' => $this->input->post('nama_user'),
'username' => $this->input->post('username'),
'password' => $this->input->post('password'),
'level_user' => $this->input->post('level_user'),
);
$this->m_user->add($data);
$this->session->set_flashdata('pesan', 'Data Berhasil Ditambahkan !!');
redirect('user');
}
//Update one item
53
public function edit($id_user = NULL)

{
$data = array(
'id_user' => $id_user,
);
$this->m_user->edit($data);
$this->session->set_flashdata('pesan', 'Data Berhasil Diubah !!');
redirect('user');
}
//Delete one item
public function delete($id_user = NULL)
{
$data = array('id_user' => $id_user);
$this->m_user->delete($data);
$this->session->set_flashdata('pesan', 'Data Berhasil Dihapus !!');
redirect('user');
}
}
Pada source code dihalaman user digunakan untuk menampilkan data
pengguna yaitu admin dan pada halaman pengguna dapat mengubah akses level dan
juga menghapus data pengguna.
54
3.3.3. Pembuatan Halaman Pelanggan/User

3.3.3.1. Pembuatan Halaman Beranda
Gambar 3.27 Tampilan Beranda
Pada gambar 3.27 merupakan halaman beranda user/pelanggan. Halaman

beranda user/pelanggan dibuat source code menggunakan PHP seperti dibawah ini:
class Home extends CI_Controller

{
{
$this->load->model('m_home');
}
{
$data = array(
'title' => 'Home',
'buku' => $this->m_home->get_all_data(),
'isi' => 'v_home',
);
55
$this->load->view('layout/v_wrapper_frontend', $data, FALSE);

}
public function kategori($id_kategori)
{
$kategori = $this->m_home->kategori($id_kategori);
$data = array(
'title' => 'Kategori buku : ' . $kategori->nama_kategori,
'buku' => $this->m_home->get_all_data_buku($id_kategori),
'isi' => 'v_kategori_buku',
);
}
public function kontak()
{
$data = array(
'title' => 'Kontak',
'isi' => 'v_kontak',
);
}
Pada source code diatas digunakan untuk menampilkan buku terbaru ke

dalam website yang ada pada database. Lebih tepatnya yang terletak pada tabel
tb_buku.
3.3.3.2. Pembuatan Halaman Login

56
Gambar 3.28 Tampilan Halaman Login
Pada gambar 3.28 merupakan halaman login user/pelanggan. Halaman login

user/pelanggan dibuat source code menggunakan PHP seperti dibawah ini :
class Pelanggan extends CI_Controller

{
{
$this->load->model('m_pelanggan');
$this->load->model('m_auth');
}
public function register()
{
$this->form_validation->set_rules('nama_pelanggan', 'nama_pelanggan',
'required', array(
));
$this->form_validation->set_rules('email', 'E-mail',
'required|is_unique[tb_pelanggan.email]', array(
'required' => '%s Harus Diisi !!!',
'is_unique' => '%s Email Sudah Ini Terdaftar ...!'
));
$this->form_validation->set_rules('password', 'password', 'required', array(
));
$this->form_validation->set_rules('ulangi_password', 'Ulangi Password',
'required|matches[password]', array(
'matches' => '%s Password Tidak Sama ...!'
));
57
$data = array(
'title' => 'Register Pelanggan',
'isi' => 'v_register',
);
} else {
$data = array(
'nama_pelanggan' => $this->input->post('nama_pelanggan'),
'email' => $this->input->post('email'),
);
$this->m_pelanggan->register($data);
$this->session->set_flashdata('pesan', 'Selamat, Register Berhasil Silahkan
Login Kembali !!');
redirect('pelanggan/register');
}
}
public function login()
{
$this->form_validation->set_rules('email', 'E-Mail', 'required', array(
));
));
$email = $this->input->post('email');
$this->pelanggan_login->login($email, $password);
}
58
$data = array(
'title' => 'Login Pelanggan',
'isi' => 'v_login_pelanggan',
);
}
public function logout()
{
$this->pelanggan_login->logout();
}
public function akun()
{
//proteksi halaman
$this->pelanggan_login->proteksi_halaman();
$data = array(
'title' => 'Akun Saya',
'isi' => 'v_akun_saya',
);
}
}
Pada source code diatas digunakan user/pelanggan untuk login dan daftar di
website yang tersedia didalam database lalu dicocokan ke dalam tabel pelanggan.
Lebih tepatnya ke tabel tb_pelanggan data yang dicocokan berupa username dan
password.
59
3.3.3.3. Pembuatan Halaman Detail Buku
Gambar 3.29 Tampilan Halaman Detail Buku
Pada gambar 3.29 merupakan halaman buku user/pelanggan. Halaman buku

user/pelanggan dibuat source code menggunakan PHP serperti dibawah ini:
public function detail_buku($id_buku)
{
$data = array(
'title' => 'Detail buku',
'gambar' => $this->m_home->gambar_buku($id_buku),
'buku' => $this->m_home->detail_buku($id_buku),
'isi' => 'v_detail_buku',
);
}
Pada source code diatas digunakan user/pelanggan untuk menampilkan

semua data buku yang ada pada database yang terletak pada tabel tb_buku.
60
3.3.3.4. Pembuatan Halaman Keranjang Belanja
Gambar 3.30 Tampilan Halaman Keranjang Belanja
Pada gambar 3.30 merupakan halaman keranjang user/pelanggan. Halaman

buku user/pelanggan dibuat source code menggunakan PHP seperti dibawah ini :
class Belanja extends CI_Controller

{
{
$this->load->model('m_transaksi');
}
{
if (empty($this->cart->contents())) {
redirect('home');
}
$data = array(
'title' => 'Keranjang Belanja',
'isi' => 'v_belanja',
);
}
61
{
$redirect_page = $this->input->post('redirect_page');
$data = array(
'id' => $this->input->post('id'),
'qty' => $this->input->post('qty'),
'price' => $this->input->post('price'),
'name' => $this->input->post('name'),
);
$this->cart->insert($data);
redirect($redirect_page, 'refresh');
}
public function delete($rowid)
{
$this->cart->remove($rowid);
redirect('belanja');
}
public function update()

{
$i = 1;
foreach ($this->cart->contents() as $items) {
$data = array(
'rowid' => $items['rowid'],
'qty' => $this->input->post($i . '[qty]'),
);
$this->cart->update($data);
$i++;
}
$this->session->set_flashdata('pesan', 'Keranjang Berhasil Di Update !!!');
}
62
public function clear()

{
$this->cart->destroy();
}
}
Pada source code diatas digunakan untuk pelanggan yang ingin melihat
buku yang dibeli oleh user/pelanggan ke dalam database.
3.3.3.5. Pembuatan Halaman Kontak
Gambar 3.31 Tampilan Halaman Kontak
Pada gambar 3.31 merupakan halaman kontak. Halaman kontak dibuat

class Kontak extends CI_Controller

{

{
$data = array(
);
$this->load->view('layout/v_wrapper_frontend', $data);
63
}
}
Pada source code diatas digunakan untuk pelanggan melihat kontak yang
bias dihubungi.
3.3.3.6. Pembuatan Halaman Checkout
Gambar 3.32 Tampilan Halaman Checkout
Pada gambar 3.32 merupakan halaman checkout. Halaman checkout dibuat

public function checkout()

{
$this->form_validation->set_rules('provinsi', 'Provinsi', 'required', array(
));
));
$this->form_validation->set_rules('ekspedisi', 'ekspedisi', 'required', array(
64

));
$this->form_validation->set_rules('paket', 'Paket', 'required', array(
));
$data = array(
'title' => 'Check Out Belanja',
'isi' => 'v_checkout',
);
} else {
//simpan ke tabel transaksi
$data = array(
'id_pelanggan' => $this->session->userdata('id_pelanggan'),
'no_order' => $this->input->post('no_order'),
'tgl_order' => date('Y-m-d'),
'nama_penerima' => $this->input->post('nama_penerima'),
'hp_penerima' => $this->input->post('hp_penerima'),
'provinsi' => $this->input->post('provinsi'),
'kota' => $this->input->post('kota'),
'alamat' => $this->input->post('alamat'),
'kode_pos' => $this->input->post('kode_pos'),
'ekspedisi' => $this->input->post('ekspedisi'),
'paket' => $this->input->post('paket'),
'estimasi' => $this->input->post('estimasi'),
'ongkir' => $this->input->post('ongkir'),
'grand_total' => $this->input->post('grand_total'),
'total_bayar' => $this->input->post('total_bayar'),
'status_bayar' => '0',
65
'status_order' => '0',

);
$this->m_transaksi->simpan_transaksi($data);
//simpan ke tabel rinci transaksi
$i = 1;
foreach ($this->cart->contents() as $item) {
$data_rinci = array(
'no_order' => $this->input->post('no_order'),
'id_buku' => $item['id'],
'qty' => $this->input->post('qty' . $i++),
);
$this->m_transaksi->simpan_rinci_transaksi($data_rinci);
}
$this->session->set_flashdata('pesan', 'Pesanan Berhasil Di Proses !!!');
$this->cart->destroy();
redirect('pesanan_saya');
}
}
Pada source code diatas digunakan untuk mengecek ulang buku yang dibeli
oleh user/pelanggan dan juga mengecek data pelanggan.
3.3.3.7.Pembuatan Halaman Pesanan Saya
Gambar 3.33 Tampilan Halaman Pesanan Saya
Pada gambar 3.33 merupakan halaman riwayat belanja. Halaman riwayat

belanja dibuat source code menggunakan PHP seperti dibawah ini :
66
class Pesanan_saya extends CI_Controller

{
{
$this->load->model('m_transaksi');
}
{
$data = array(
'title' => 'Pesanan Saya',
'belum_bayar' => $this->m_transaksi->belum_bayar(),
'diproses' => $this->m_transaksi->diproses(),
'dikirim' => $this->m_transaksi->dikirim(),
'selesai' => $this->m_transaksi->selesai(),
'isi' => 'v_pesanan_saya',
);
}
public function bayar($id_transaksi)
{
$this->form_validation->set_rules('atas_nama', 'Atas Nama', 'required', array(
));
$config['upload_path'] = './assets/bukti_bayar/';
$field_name = 'bukti_bayar';
67
$data = array(
'title' => 'Pembayaran',
'pesanan' => $this->m_transaksi->detail_pesanan($id_transaksi),
'rekening' => $this->m_transaksi->rekening(),
'isi' => 'v_bayar',
);
} else {
$config['source_image'] = './assets/bukti_bayar/' .
$data = array(
'atas_nama' => $this->input->post('atas_nama'),
'nama_bank' => $this->input->post('nama_bank'),
'no_rek' => $this->input->post('no_rek'),
'status_bayar' => '1',
'bukti_bayar' => $upload_data['uploads']['file_name'],
);
$this->m_transaksi->upload_buktibayar($data);
$this->session->set_flashdata('pesan', 'Bukti Pembayaran Berhasil Di
Upload !!!');
}
}
$data = array(
'title' => 'Pembayaran',
68
'pesanan' => $this->m_transaksi->detail_pesanan($id_transaksi),

'rekening' => $this->m_transaksi->rekening(),
'isi' => 'v_bayar',
);
}
public function diterima($id_transaksi)

{
$data = array(
);
$this->session->set_flashdata('pesan', 'Pesanan Telah diterima !!!');
}
}
Pada source code diatas digunakan untuk pelanggan melihat riwayat buku
yang sudah dibeli dan juga dapat mengkonfirmasi pembayaran.
3.4. Implementasi Website
Tahap implementasi sistem ini merupakan tahap meletakan sistem supaya siap
untuk dioperasikan. Dalam implementasi pembuatan website Anbiyapedia ini ada
beberapa tahapan implementasi sistem yang harus dijalankan diantaranya adalah:
3.4.1. Web Hosting
3.4.1.1.Mendaftar Web Hosting Gratis
Pada website toko buku ini menggunakan layanan hosting yang bernama
000webhost dan langkah awal dalam menghosting aplikasi ini adalah dengan
mengakses url: https://www.000webhost.com, lalu membuat account 000webhost
69
dan login menggunakan account yang telah dibuat. Untuk lebih jelasnya dapat
dilihat pada gambar 3.34.
Gambar 3.34 Membuat nama website yang diinginkan
3.4.1.2.Upload File
Upload file adalah proses mentransfer file-file yang berkaitan dengan website
ini ke suatu server di internet agar website ini dapat diakses oleh semua user yang
terhubung ke internet di seluruh dunia.
Setelah membuat domain hal yang dilakukan selanjutnya adalah mengunggah

file dengan cara Hosting > File Manager > Upload File. Jika telah mengupload file
maka tampilan seperti pada gambar 3.35.
Gambar 3.35 Mengupload file

70
Setelah menggungah sudah selesai, selanjutnya mengunggah database yang

ada di direktori local ke website server. Untuk mengambil data SQL local
menggunakan phpMyAdmin di fitur ekspor dan mengunggah file impor ke dalam
database seperti gambar 3.36 berikut langkah-langkah dalam proses impor SQL ke
hosting server.
1. Akses alamat https://database.000webhost.com/ dan lakukan login dengan

username dan password PhpMyAdmin hosting.
2. Klik database yang telah dibuat di hosting server,pilih menu impor.
3. Pilih telusuri untuk memilih berkas SQL yang akan diunggah.
4. Klik OK untuk mengunggah.
Gambar 3.36 Impor Database
Nama database dan username database yang dibuat dimasukkan ke config

database.php menggunakan phpMyAdmin yang disediakan oleh web hosting.
Terdapat nama database, user database dan password database. Database dapat
dilihat pada gambar 3.37.
71
Gambar 3.37 Input nama database
Tahap berikutnya mengkonfigurasi file database.php yang berada di

direktori/public_html. Ubah isi file database.php untuk menghubungkan website
dengan database hosting. Source code pada saat melakukan hosting sebagai berikut:
$db['default'] = array(
'dsn' => '',
'hostname' => 'localhost',
'username' => 'id19425909_root',
'password' => '>O9>SkImy)Nbrne0',
'database' => 'id19425909_db_olshop',
'dbdriver' => 'mysqli',
'dbprefix' => '',
'pconnect' => FALSE,
'db_debug' => (ENVIRONMENT !== 'production'),
'cache_on' => FALSE,
'cachedir' => '',
'char_set' => 'utf8',
'dbcollat' => 'utf8_general_ci',
'swap_pre' => '',
'encrypt' => FALSE,
'compress' => FALSE,
72
'stricton' => TRUE,

'failover' => array(),
'save_queries' => TRUE
);
URL dapat dibuka dengan mengetik URL
https://liveforbooks.000webhostapp.com/
Gambar 3.38 Tampilan website
3.5. Uji Coba Aplikasi Menggunakan Black Box Testing
Melakukan uji coba website menggunakan metode black box testing. Tujuan
dari black box testing ini adalah melakukan uji coba. Pengujian dengan black box
testing dilakukan dengan cara memberikan sejumlah input data pada program. Input
tersebut kemudian diproses sesuai dengan kebutuhan fungsionalnya untuk melihat
apakah website dapat menghasilkan output yang sesuai dengan fungsi datar dari
program tersebut. Hasil dapat dilihat pada tabel 3.10 dan tabel 3.11.
73
Tabel 3.10 Uji Coba Black Box Admin
No Kelas Uji Skenario Pengujian Hasil Yang Hasil

Diharapkan Uji
1 Fungsi Mengosongkan Menolak akses login Valid
Halaman Login username dan dan menampilkan
admin password pada pesau disetiap form
halaman login, lalu inputan
klik masuk
Menginput salah Menolak akses dan Valid
satu data benar dan menampilkan pesan
data salah, lalu klik ’warning , Username
masuk dan Password Salah’
Menginput Menerima akses Valid
Username dan login
Password dengan dan menampilkan
benar, lalu klik halaman beranda
2 Fungsi Klik halaman Menampilkan Valid
Halaman dashboard halaman
Dashboard dashboard
3 Fungsi Klik Halaman Buku Menampilkan Valid
Halaman Buku halaman buku
Klik tambah buku Menampilkan Valid
halaman tambah
buku
Pada tombol tambah Sukses menginput valid
barang, data diisi data, menampilkan
dengan benar dan klik pesan” Data Berhasil
simpan Ditambahkan”
Klik Ubah Menampilkan valid
halaman ubah data
dengan data
sebelumnya
Klik Hapus Data berhasil dihapus Valid
dengan menampilkan
pesan “Data Telah di
hapus”
74
4 Fungsi Klik Halaman User Menampilkan Valid

Halaman User halaman data
pengguna
Klik Tambah Menampilkan Valid
halaman tambah
pengguna
Pada tombol tambah Sukses menginput valid
barang, data diisi data, menampilkan
dengan benar dan klik pesan” Data Berhasil
simpan Ditambahkan”
Klik Ubah Menampilkan Valid
halaman ubah data
dengan data
sebelumnya
Klik Hapus Data berhasil dihapus Valid
dengan menampilkan
pesan “Data Telah di
hapus”
5 Fungsi Klik Halaman Pesanan Menampilkan Valid
Halaman Masuk halaman pesanan
Pesanan Masuk masuk
Klik Diproses Menampilkan order Valid
yang sudah diproses
Klik Dikirim Menmampilkan Valid
order yang sudah
dikirim
Klik Selesai Menampilkan order Valid
yang sudah sampai
ke pelanggan
75
Tabel 3.11 Uji Coba Black Box Pelanggan
No Kelas Uji Skenario Pengujian Hasil Yang Hasil

Diharapkan Uji
1 Fungsi Mengosongkan Menolak akses login Valid
Halaman Login Username dan dan menampilkan
User password pada pesau disetiap form
halaman login, lalu inputan
klik masuk
Menginput salah satu Menolak akses dan Valid
data benar dan data menampilkan pesan
salah, lalu klik masuk ’warning , Username
dan Password Salah’
Menginput Username Menerima akses Valid
dan Password dengan login
benar, lalu klik dan menampilkan
halaman beranda
2 Fungsi Klik beranda Menampilkan Valid
Beranda halaman
Buku dan belanja
Klik Kategori Buku Menampilkan Valid
halaman kategori
buku
Klik add to cart Memasukkan buku Valid
yang dibeli ke
keranjang belanja
Klik detail Menampilkan detail valid
buku
3 Fungsi Klik Keranjang Menampilkan buku valid
Keranjang yang dibeli
Belanja
Klik Update Menambahkan Valid
jumlah buku yang
dibeli
Klik Hapus Buku berhasil Valid
dihapus
76
4 Fungsi Pesanan Klik Pesanan Saya Menampilkan Valid

Saya riwayat belanja dan
konfirmasi
pembayaran
Klik submit Memasukkan Buku valid
yang dibeli ke admin
dan berstatus
dirposes
Klik Diproses Menampilkan order Valid
yang sudah diproses
Klik Dikirim Menmampilkan Valid
order yang sudah
dikirim
Klik Selesai Menampilkan order Valid
yang sudah sampai
ke pelanggan
BAB IV
PENUTUP
4.1 Kesimpulan
Website toko buku LIVEFORBOOKS yang dibuat, menggantikan

cara berjualan dari cara lama dengan yang lebih baru, yaitu mengonline-kan
aktivitas bisnis yang sebelumnya hanya bersifat offline. Berdasarkan hasil
dari analisis dan perancangan sistem yang dibangun, maka dapat diambil
kesimpulan yaitu Perancangan Website Toko Buku LIVEFORBOOKS
Menggunakan PHP dan MySQL. Website dirancang dengan menggunakan
metode System Development Life Cycle (SDLC) yang terdiri dari
perencanaan, analisis, perancangan dan implementasi. Implementasi
tersebut dirancang menggunakan bahasa pemrograman PHP dan database
MySQL. Uji coba menggunakan beberapa smartphone dan browser Mozilla
Firefox maupun chrome juga berjalan lancar. Website hanya dapat diakses
saat pengguna terhubung dengan internet. Website juga dapat digunakan
bagi penjual dalam mengolah data dan pelanggan, dan meminimalisir
kesalahan perhitungan. Toko buku LIVEFORBOOKS dapat digunakan
dengan mengakses url https://liveforbooks.000webhostapp.com/ yang
dihosting dari tanggal 16 Agustus 2022. Dengan adanya sistem penjualan
online (e-commerce) maka toko buku LIVEFORBOOKS dapat
memudahkan proses transaksi yang selama ini sifatnya konvensional
menjadi lebih modern dengan tersedianya transaksi online. Dimana
pelanggan tidak perlu mendatangi toko offline jika ingin bertransaksi.
77
4.2 Saran
Dalam aplikasi pembuatan website penjualan buku pada

LIVEFORBOOKS menggunakan PHP dan CodeIgniter ini masih perlu
adanya pengembangan dari tampilannya yang lebih menarik dan juga
adanya menu pencarian untuk mempermudah pelanggan dalam mencari
produk mengkonfirmasi pembayaran langsung dari sistem dan adanya stok
barang. Hal tersebut dapat dijadikan acuan pengembangan dan
penyempurnaan dari aplikasi ini agar lebih baik lagi.
78
DAFTAR PUSTAKA
Daftar Buku :
[1] Ali Zaki, 2009, Kiat Jitu Membuat Website Tanpa Modal, Jakarta : Penerbit
Elexmedia Komputindo
[2] Muslihin, Muhamad dan Oktafianto, 2016, Analisi dan Perancangan Sistem
Informasi Menggunaka Model Terstruktur dan UML, Jakarta : CV ANDI
OFFSET
[3] Raharjo, Budi. 2011. Belajar Otodidak Membuat Database Menggunakan
MYSQL, Bandung: Informatika.
[4] Supardi, Yaniar, Ading Hermawan, 2018, Semua Bisa Menjadi Programmer
CodeIgniter Basic, Jakarta: PT Elex Media Komputindo
Daftar Situs :
[1] Aditya Rahmatullah Pratama, 2019. Belajar UML – Use Case Diagram.
Tersedia di: https://www.codepolitan.com/mengenal-uml-diagram-use-
case (Diakses tanggal 12 Desember 2021)
[2] Andre. 2019. Tutorial Belajar PHP Part 1: Pengertian dan Fungsi PHP
dalam Pemprogaman Web. Tersedia di :
https://www.duniailkom.com/pengenalan-dan-fungsi-php-dalam-
pemprograman-web (Diakses tanggal 12 Desember 2021)
[3] Litalia. 2015. Pengertian XAMPP, Fungsi, Sejarah dan Bagian-
bagiannya(Lengkap). Tersedia di:
https://www.jurnalponsel.com/pengertian-xampp (Diakses tanggal 12
Desember 2021).
[4] Muhammad Hadriani Dimmay. 2015. Pengertian Database Mysql dan
PHPMyAdmin. Tersedia di : https://www.hadribonjay.it.student.pens.ac.id
(Diakses tanggal 12 Desember 2021
[5] Rendi Juliarto. 2021. Apa itu UML? Beserta Pengertian dan Contohnya
Tersedia di : https://www.dicoding.com/blog/apa-itu-uml (Diakses tanggal
12 Desember 2021
79
LAMPIRAN
A. Listing Program
Home.php
class Home extends CI_Controller

{

{
$this->load->model('m_home');
}

{
$data = array(
'title' => 'Home',
'buku' => $this->m_home->get_all_data(),
'isi' => 'v_home',
);
}
public function kategori($id_kategori)

{
$kategori = $this->m_home->kategori($id_kategori);
$data = array(
'title' => 'Kategori buku : ' . $kategori->nama_kategori,
'buku' => $this->m_home->get_all_data_buku($id_kategori),
'isi' => 'v_kategori_buku',
);
}
public function kontak()

{
$data = array(
);
L-1
}
public function detail_buku($id_buku)

{
$data = array(
'title' => 'Detail buku',
'gambar' => $this->m_home->gambar_buku($id_buku),
'buku' => $this->m_home->detail_buku($id_buku),
'isi' => 'v_detail_buku',
);
}
}
Kategori.php
class Kategori extends CI_Controller

{

{
}

{
$data = array(
'title' => 'Kategori',
'isi' => 'v_kategori',
);
}
// Add a new item

{
$data = array(
'nama_kategori' => $this->input->post('nama_kategori'),
);
$this->m_kategori->add($data);
L-2
redirect('kategori');
}
//Update one item

public function edit($id_kategori = NULL)
{
$data = array(
'id_kategori' => $id_kategori,
'nama_kategori' => $this->input->post('nama_kategori'),
);
$this->m_kategori->edit($data);
$this->session->set_flashdata('pesan', 'Data Berhasil DIubah !!');
}
//Delete one item

public function delete($id_kategori = NULL)
{
$data = array('id_kategori' => $id_kategori);
$this->m_kategori->delete($data);
}
}
Kontak.php
class Kontak extends CI_Controller
{

{
$data = array(
);
$this->load->view('layout/v_wrapper_frontend', $data);
}
}
L-3
Auth.php
class Auth extends CI_Controller

{
public function login_user()

{
$this->form_validation->set_rules('username', 'Username', 'required', array(
));
));
$username = $this->input->post('username');
$this->user_login->login($username, $password);
}
$data = array(
'title' => 'Login User',
);
$this->load->view('v_login_user', $data, FALSE);
}
public function logout_user()
{
$this->user_login->logout();
}
}
v_register.php
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4">
<div class=" register-box">
<div class="card">
<div class="card-body register-card-body">
<p class="login-box-msg">Register Pelanggan Baru</p>
<?php
echo validation_errors('<div class="alert alert-warning alert-
dismissible">
<button type="button" class="close" data-dismiss="alert" aria-
hidden="true">×</button>
L-4
<h5><i class="icon fas fa-exclamation-triangle"></i> Alert!</h5>',
'</div>');
if ($this->session->flashdata('pesan')) {
echo '<div class="alert alert-success alert-dismissible">
<h5><i class="icon fas fa-check"></i> Sukses!</h5>';
echo $this->session->flashdata('pesan');
echo '</div>';
}
echo form_open('pelanggan/register'); ?>

<div class="input-group mb-3">
<input type="text" name="nama_pelanggan" value="<?=
set_value('nama_pelanggan') ?>" class="form-control" placeholder="Nama
Pelanggan">
<div class="input-group-append">
<div class="input-group-text">
<span class="fas fa-user"></span>
</div>
</div>
</div>

<input type="email" name="email" value="<?= set_value('email')
?>" class="form-control" placeholder="Email">
<span class="fas fa-envelope"></span>
</div>
</div>
</div>
<input type="password" name="password" value="<?=
set_value('password') ?>" class="form-control" placeholder="Password">
<span class="fas fa-lock"></span>
</div>
</div>
</div>
<input type="password" name="ulangi_password" value="<?=
set_value('ulangi_password') ?>" class="form-control" placeholder="Retype
password">
L-5
<span class="fas fa-lock"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-8">
</div>

<div class="col-4">
<button type="submit" class="btn btn-primary btn-
block">Register</button>
</div>

</div>
<?php echo form_close() ?>
<a href="<?= base_url('pelanggan/login') ?>" class="text-

center">Saya Sudah Punya Akun...!</a>
</div>

</div>
</div>
</div>
<div class="col-sm-4"></div>
</div>
<br>
<br>
<br>
<br>
<br>
v_belanja.php
<div class="card card-solid">

<div class="card-body pb-0">
<div class="row">
<?php
L-6
<h5><i class="icon fas fa-check"></i>';
echo '</h5>
</div>';
}
?>
</div>
<?php echo form_open('belanja/update'); ?>
<table class="table" cellpadding="6" cellspacing="1"

style="width:100%">
<tr>
<th width="100px">QTY</th>
<th>Nama Buku</th>
<th style="text-align:right">Harga</th>
<th style="text-align:right">Sub-Total</th>
<th style="text-align:center">Berat</th>
<th class="text-center">Action</th>
</tr>
<?php $i = 1; ?>
<?php
$tot_berat = 0;
$buku = $this->m_home->detail_buku($items['id']);
$berat = $items['qty'] * $buku->berat;
$tot_berat = $tot_berat + $berat;

?>
<tr>
<td>
<?php
echo form_input(array(
'name' => $i . '[qty]',
'value' => $items['qty'],
'maxlength' => '3',
'min' => '0',
'size' => '5',
'type' => 'number',
'class' => 'form-control'
));
?>
</td>
L-7
<td><?php echo $items['name']; ?></td>
<td style="text-align:right">Rp. <?php echo
number_format($items['price'], 0); ?></td>
<td style="text-align:right">Rp. <?php
echo number_format($items['subtotal'], 0); ?></td>
<td class="text-center"><?= $berat ?> Gr</td>
<td class="text-center">
<a href="<?= base_url('belanja/delete/' . $items['rowid']) ?>"
class="btn btn-danger btn-sm"><i class="fa fa-trash"></i></a>
</td>
</tr>
<?php $i++; ?>
<?php } ?>
<tr>
<td class="right">
<h3>Total :</h3>
</td>
<td class="right">
<h3>Rp. <?php echo number_format($this->cart->total(), 0);
?></h3>
</td>
<th>Total Berat : <?= $tot_berat ?> Gr</th>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<button type="submit" class="btn btn-primary btn-flat"><i class="fa fa-

save"></i> Update Cart</button>
<a href="<?= base_url('belanja/clear') ?>" class="btn btn-danger btn-
flat"><i class="fa fa-recycle"></i> Clear Cart</a>
<a href="<?= base_url('belanja/checkout') ?>" class="btn btn-success
btn-flat"><i class="fa fa-check-square"></i> Check Out</a>
<?php echo form_close(); ?>
<br>
</div>
</div>
</div>
</div>
v_checkout.php
L-8

<div class="invoice p-3 mb-3">

<div class="row">
<div class="col-12">
<h4>
<i class="fas fa-shopping-cart"></i> Checkout.
<small class="float-right">Date: <?= date('d-m-Y') ?></small>
</h4>
</div>

</div>




<div class="row">
<div class="col-12 table-responsive">

<table class="table table-striped">
<thead>
<tr>
<th>Qty</th>
<th width="150px" class="text-center">Harga</th>
<th>Barang</th>
<th class="text-center">Total Harga</th>
<th class="text-center">Berat</th>
</tr>
</thead>
<tbody>
<?php
$i = 1;
$tot_berat = 0;
$buku = $this->m_home->detail_buku($items['id']);
$berat = $items['qty'] * $buku->berat;
$tot_berat = $tot_berat + $berat;

?>
<tr>
<td><?php echo $items['qty']; ?></td>
<td class="text-center">Rp. <?php echo
number_format($items['price'], 0); ?></td>
L-9
<td><?php echo $items['name']; ?></td>
<td class="text-center">Rp. <?php
echo number_format($items['subtotal'], 0); ?></td>
<td class="text-center"><?= $berat ?> Gr</td>
</tr>
<?php } ?>
</tbody>
</table>
</div>

</div>

<?php
echo validation_errors('<div class="alert alert-danger alert-dismissible">
hidden="true">×</button>', '</div>');
?>
<?php
echo form_open('belanja/checkout');
$no_order = date('Ymd') . strtoupper(random_string('alnum', 8));
?>
<div class="row">

<div class="col-sm-8 invoice-col">
Tujuan :
<div class="row">
<div class="form-group">
<label>Provinsi</label>
<select name="provinsi" class="form-control"></select>
</div>
</div>
<label>Kota/Kabupaten</label>
<select name="kota" class="form-control"></select>
</div>
</div>
<label>Ekspedisi</label>
<select name="ekspedisi" class="form-control"></select>
</div>
L-10
</div>
<label>Paket</label>
<select name="paket" class="form-control"></select>
</div>
</div>
<label>Alamat</label>
<input name="alamat" class="form-control" required>
</div>
</div>
<label>Kode POS</label>
<input name="kode_pos" class="form-control" required>
</div>
</div>
<label>Nama Penerima</label>
<input name="nama_penerima" class="form-control" required>
</div>
</div>
<label>Nomor Telepon Penerima</label>
<input name="hp_penerima" class="form-control" required>
</div>
</div>
</div>
</div>

<div class="col-4">
<div class="table-responsive">
<table class="table">
<tr>
<th style="width:50%">Grand Total:</th>
<th>Rp. <?php echo number_format($this->cart->total(), 0);
?></th>
</tr>
<tr>
<th>Berat:</th>
<th><?= $tot_berat ?> Gr</th>
L-11
</tr>
<tr>
<th>Ongkir:</th>
<th><label id="ongkir"></label></th>
</tr>
<tr>
<th>Total Bayar:</th>
<th><label id="total_bayar"></label></th>
</tr>
</table>
</div>
</div>

</div>



<input name="no_order" value="<?= $no_order ?>" hidden>
<input name="estimasi" hidden>
<input name="ongkir" hidden>
<input name="berat" value="<?= $tot_berat ?>" hidden><br>
<input name="grand_total" value="<?= $this->cart->total() ?>" hidden>
<input name="total_bayar" hidden>


<?php
$i = 1;
echo form_hidden('qty' . $i++, $items['qty']);
}
?>

<div class="row no-print">
<div class="col-12">
<a href="<?= base_url('belanja') ?>" class="btn btn-warning"><i
class="fas fa-backward"></i> Kembali</a>
<button type="submit" class="btn btn-primary float-right" style="margin-
right: 5px;">
<i class="fas fa-shopping-cart"></i> Proses Checkout
</button>
</div>
</div>
</div>
L-12
<script>
$(document).ready(function() {
//masukkan data ke select provinsi
$.ajax({
type: "POST",
url: "<?= base_url('rajaongkir/provinsi') ?>",
success: function(hasil_provinsi) {
//console.log(hasil_provinsi);
$("select[name=provinsi]").html(hasil_provinsi);
}
});
//masukkan data ke select kota

$("select[name=provinsi]").on("change", function() {
var id_provinsi_terpilih = $("option:selected", this).attr("id_provinsi");
$.ajax({
type: "POST",
url: "<?= base_url('rajaongkir/kota') ?>",
data: 'id_provinsi=' + id_provinsi_terpilih,
success: function(hasil_kota) {
$("select[name=kota]").html(hasil_kota);
}
});
});
$("select[name=kota]").on("change", function() {
$.ajax({
type: "POST",
url: "<?= base_url('rajaongkir/ekspedisi') ?>",
success: function(hasil_ekspedisi) {
$("select[name=ekspedisi]").html(hasil_ekspedisi);
}
});
});
//mendapatkan data paket

$("select[name=ekspedisi]").on("change", function() {
//mendapatkan ekspedisi terpilih
var ekspedisi_terpilih = $("select[name=ekspedisi]").val()
// mendapatkan id kota tujuan terpilih
var id_kota_tujuan_terpilih = $("option:selected",
"select[name=kota]").attr('id_kota');
L-13
//mengambil data ongkos kirim
var total_berat = <?= $tot_berat ?>;
$.ajax({
type: "POST",
url: "<?= base_url('rajaongkir/paket') ?>",
data: 'ekspedisi=' + ekspedisi_terpilih + '&id_kota=' +
id_kota_tujuan_terpilih + '&berat=' + total_berat,
success: function(hasil_paket) {
$("select[name=paket]").html(hasil_paket);
}
});
});
//
$("select[name=paket]").on("change", function() {
//menampilkan ongkir
var dataongkir = $("option:selected", this).attr('ongkir');
var reverse = dataongkir.toString().split('').reverse().join(''),
ribuan_ongkir = reverse.match(/\d{1,3}/g);
ribuan_ongkir = ribuan_ongkir.join(',').split('').reverse().join('');
$("#ongkir").html("Rp. " + ribuan_ongkir)

//menghitung totol Bayar
var data_total_bayar = parseInt(dataongkir) + parseInt(<?= $this->cart-
>total() ?>);
var reverse2 = data_total_bayar.toString().split('').reverse().join(''),
ribuan_total_bayar = reverse2.match(/\d{1,3}/g);
ribuan_total_bayar = ribuan_total_bayar.join(',').split('').reverse().join('');
$("#total_bayar").html("Rp. " + ribuan_total_bayar);
//estimasi dan ongkir

var estimasi = $("option:selected", this).attr('estimasi');
$("input[name=estimasi]").val(estimasi);
$("input[name=ongkir]").val(dataongkir);
$("input[name=total_bayar]").val(data_total_bayar);
});
});
</script>
v_pesanansaya.php
L-14
<div class="row">
<?php
echo '</h5>
</div>';
}
?>
<div class="card card-primary card-outline card-outline-tabs">
<div class="card-header p-0 border-bottom-0">
<ul class="nav nav-tabs" id="custom-tabs-four-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="custom-tabs-four-home-tab" data-
toggle="pill" href="#custom-tabs-four-home" role="tab" aria-controls="custom-
tabs-four-home" aria-selected="true">Order</a>
</li>
<a class="nav-link" id="custom-tabs-four-profile-tab" data-
toggle="pill" href="#custom-tabs-four-profile" role="tab" aria-controls="custom-
tabs-four-profile" aria-selected="false">Diproses</a>
</li>
<a class="nav-link" id="custom-tabs-four-messages-tab" data-
toggle="pill" href="#custom-tabs-four-messages" role="tab" aria-
controls="custom-tabs-four-messages" aria-selected="false">Dikirim</a>
</li>
<a class="nav-link" id="custom-tabs-four-settings-tab" data-
toggle="pill" href="#custom-tabs-four-settings" role="tab" aria-controls="custom-
tabs-four-settings" aria-selected="false">Selesai</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content" id="custom-tabs-four-tabContent">
<div class="tab-pane fade show active" id="custom-tabs-four-home"
role="tabpanel" aria-labelledby="custom-tabs-four-home-tab">

L-15
<tr>
<th>No Order</th>
<th>Tanggal</th>
<th>Ekspedisi</th>
<th>Total Bayar</th>
<th>Action</th>
</tr>
<?php foreach ($belum_bayar as $key => $value) { ?>
<tr>
<td><?= $value->no_order ?></td>
<td><?= $value->tgl_order ?></td>
<td>
<b><?= $value->ekspedisi ?></b><br>
Paket : <?= $value->paket ?><br>
Ongkir : <?= number_format($value->ongkir, 0) ?>
</td>
<td>
<b>Rp.<?= number_format($value->total_bayar, 0)
?></b><br>
<?php if ($value->status_bayar == 0) { ?>
<span class="badge badge-warning">Belum
Bayar</span>
<?php } else { ?>
<span class="badge badge-success">Sudah
Bayar</span><br>
<span class="badge badge-primary">Menunggu
Verifikasi</span>
<?php } ?>
</td>
<td>
<a href="<?= base_url('pesanan_saya/bayar/' . $value-
>id_transaksi) ?>" class="btn btn-sm btn-flat btn-primary">Bayar</a>
<?php } ?>
</td>
</tr>
<?php } ?>
</table>
</div>
<div class="tab-pane fade" id="custom-tabs-four-profile"
role="tabpanel" aria-labelledby="custom-tabs-four-profile-tab">

<tr>
L-16
<th>No Order</th>
<th>Tanggal</th>
<th>Ekspedisi</th>
</tr>
<?php foreach ($diproses as $key => $value) { ?>
<tr>
<td>
</td>
<td>
?></b><br>
<span class="badge badge-
success">Terverifikasi</span><br>
primary">Diproses/Dikemas</span>
</td>
</tr>
<?php } ?>
</table>
</div>
<div class="tab-pane fade" id="custom-tabs-four-messages"
role="tabpanel" aria-labelledby="custom-tabs-four-messages-tab">
<tr>
<th>No Order</th>
<th>Tanggal</th>
<th>Ekspedisi</th>
<th>No Resi</th>
</tr>
<?php foreach ($dikirim as $key => $value) { ?>
<tr>
L-17
<td>
</td>
<td>
?></b><br>
success">Dikirim</span><br>
</td>
<td>
<h5><?= $value->no_resi ?><br>
<button data-toggle="modal" data-
target="#diterima<?= $value->id_transaksi ?>" class="btn btn-primary btn-xs btn-
flat">Diterima</button>
</h5>
</td>
</tr>
<?php } ?>
</table>
</div>
<div class="tab-pane fade" id="custom-tabs-four-settings"
role="tabpanel" aria-labelledby="custom-tabs-four-settings-tab">
<tr>
<th>No Order</th>
<th>Tanggal</th>
<th>Ekspedisi</th>
<th>No Resi</th>
</tr>
<?php foreach ($selesai as $key => $value) { ?>
<tr>
<td>
</td>
<td>
?></b><br>
<span class="badge badge-success">Selesai</span><br>
L-18
</td>
<td>
<h5><?= $value->no_resi ?><br>
</h5>
</td>
</tr>
<?php } ?>
</table>
</div>
</div>
</div>

</div>
</div>
</div>
<?php foreach ($dikirim as $key => $value) { ?>

<div class="modal fade" id="diterima<?= $value->id_transaksi ?>">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Pesanan Diterima</h4>
<button type="button" class="close" data-dismiss="modal" aria-
label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Apakah Anda Yakin Pesanan Sudah Diterima...?
</div>
<div class="modal-footer justify-content-between">
<button type="button" class="btn btn-default" data-
dismiss="modal">Tidak</button>
<a href="<?= base_url('pesanan_saya/diterima/' . $value-
>id_transaksi) ?>" class="btn btn-primary">Ya</a>
</div>
</div>

</div>

</div>

<?php } ?>
Admin.php
L-19
{
$this->load->model('m_admin');
}

{
$data = array(
'title' => 'Dashboard',
'total_buku' => $this->m_admin->total_buku(),
'total_kategori' => $this->m_admin->total_kategori(),
'isi' => 'v_admin',
);
}

{
$this->form_validation->set_rules('nama_toko', 'Nama Toko', 'required',

array(
));
));
array(
));
$this->form_validation->set_rules('no_telepon', 'No Telepon', 'required',
array(
));
$data = array(
);
} else {
L-20
$data = array(
'id' => 1,
);
}
}
{
$data = array(
);
}
public function proses($id_transaksi)

{
$data = array(
);
$this->session->set_flashdata('pesan', 'Pesanan Berhasil Di Proses/Dikemas
!!!');
}
public function kirim($id_transaksi)

{
$data = array(
'no_resi' => $this->input->post('no_resi'),
);
$this->session->set_flashdata('pesan', 'Pesanan Berhasil Di Kirim !!!');
L-21
}
}
Buku.php
class Buku extends CI_Controller
{

{
$this->load->model('m_buku');
}

{
$data = array(
'title' => 'Buku',
'buku' => $this->m_buku->get_all_data(),
'isi' => 'Buku/v_buku',
);
}
// Add a new item

{
array(
));
));
));
));
));
L-22
$data = array(
);
} else {
$data = array(
);
$this->m_buku->add($data);
$this->session->set_flashdata('pesan', 'Data Berhasil Ditambahkan !!!');
redirect('buku');
}
}
$data = array(
);
}
//Update one item

public function edit($id_buku = NULL)
{
L-23
array(
));
));
));
));
));
$data = array(
'title' => 'Edit buku',
);
} else {
//hapus gambar
}
//end hapus gambar
$data = array(
L-24
);
redirect('buku');
}
//jika tanpa ganti gambar
$data = array(
);
redirect('buku');
}
$data = array(
'title' => 'Edit Buku',
);
}
//Delete one item

public function delete($id_buku = NULL)
{
//hapus gambar
}
//end hapus gambar
$data = array('id_buku' => $id_buku);
$this->m_buku->delete($data);
L-25
$this->session->set_flashdata('pesan', 'Data Berhasil Dihapus !!!');
redirect('buku');
}
}
V_kontak.php
<div class="card card-solid">
<div class="card-body pb-0">
<div class="row">
<div class="col-12 col-sm-6 col-md-4 d-flex align-items-stretch flex-
column">
<div class="card bg-light d-flex flex-fill">
<div class="card-header text-muted border-bottom-0">
</div>
<div class="card-body pt-0">
<div class="row">
<div class="col-7">
<h2 class="lead"><b>Hanifah Nur Ramadhan</b></h2>
<ul class="ml-4 mb-0 fa-ul text-muted">
<li class="small"><span class="fa-li"><i class="fas fa-lg
fa-building"></i></span>Alamat: Jalan Raya Centex No 105 C,Jakarta
Timur</li>
<li class="small"><span class="fa-li"><i class="fas fa-lg
fa-phone"></i></span> Phone : +62 877 8186 4774</li>
</ul>
</div>
</div>
</div>
<div class="card-footer">
<div class="text-right">
</div>
</div>
</div>
</div>
V_kategori.php
<div class="col-md-12">
<div class="card card-outline card-primary">
<div class="card-header">
<h3 class="card-title">Data Kategori</h3>
<div class="card-tools">
<button data-toggle="modal" data-target="#add" type="button"
class="btn btn-primary btn-sm">
<i class="fas fa-plus"> Add</i>
L-26
</button>
</div>

</div>

<?php
echo '</h5></div>';
}
?>
<table class="table table-bordered" id="example2">
<thead class="text-center">
<tr>
<th>No</th>
<th>Nama Kategori</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php $no = 1;
foreach ($kategori as $key => $value) { ?>
<tr>
<td class="text-center"><?= $no++; ?></td>
<td><?= $value->nama_kategori ?></td>
<td class="text-center">
<button class="btn btn-warning btn-sm" data-toggle="modal"
data-target="#edit<?= $value->id_kategori ?>">
<i class="fas fa-edit"></i></button>
<button class="btn btn-danger btn-sm" data-toggle="modal"
data-target="#delete<?= $value->id_kategori ?>">
<i class="fas fa-trash"></i></button>
</td>
</tr>
<?php } ?>
</tbody>
</table>
</div>

</div>
L-27

</div>



<div class="modal fade" id="add">
<div class="modal-dialog modal-sm">
<h4 class="modal-title">Add Kategori</h4>
label="Close">
</button>
</div>
<?php
echo form_open('kategori/add');
?>
<label>Nama Kategori</label>
<input type="text" name="nama_kategori" class="form-control"
placeholder="Nama Kategori" required>
</div>
</div>
dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save</button>
</div>
<?php
echo form_close();
?>
</div>
</div>
</div>


<?php foreach ($kategori as $key => $value) { ?>
<div class="modal fade" id="edit<?= $value->id_kategori ?>">
L-28
<h4 class="modal-title">Edit Kategori</h4>
label="Close">
</button>
</div>
<?php
echo form_open('kategori/edit/' . $value->id_kategori);
?>
<label>Nama Kategori</label>
<input type="text" name="nama_kategori" value="<?= $value-
>nama_kategori ?>" class="form-control" placeholder="Nama Kategori"
required>
</div>
</div>
<button type="submit" class="btn btn-primary">Save</button>
</div>
<?php
echo form_close();
?>
</div>
</div>
</div>
<?php } ?>


<?php foreach ($kategori as $key => $value) { ?>
<div class="modal fade" id="delete<?= $value->id_kategori ?>">
<h4 class="modal-title">Hapus<?= $value->nama_kategori ?></h4>
label="Close">
</button>
</div>
L-29
<h5>Apakah Anda Ingin Menghapus Data Ini...?</h5>
</div>
<a href="<?= base_url('kategori/delete/' . $value->id_kategori) ?>"
type="submit" class="btn btn-primary">Delete</a>
</div>
</div>
</div>
</div>
<?php } ?>
V_laporan.php
<div class="card card-primary">
<h3 class="card-title">Laporan Harian</h3>
</div>
<?php echo form_open('laporan/lap_harian') ?>
<div class="row">
<label>Tanggal</label>
<select name="tanggal" class="form-control">
<?php
$mulai = 1;
for ($i = $mulai; $i < $mulai + 31; $i++) {
echo '<option value="' . $i . '">' . $i . '</option>';
}
?>
</select>
</div>
</div>
<label>Bulan</label>
<select name="bulan" class="form-control">
<?php
$mulai = 1;
L-30
}
?>
</select>
</div>
</div>
<label>Tahun</label>
<select name="tahun" class="form-control">
<?php
$mulai = date('Y') - 1;
}
?>
</select>
</div>
</div>
<button type="submit" class="btn btn-primary btn-block"><i
class="fa fa-print"></i> Cetak Laporan</button>
</div>
</div>
</div>
</div>
</div>
</div>
<h3 class="card-title">Laporan Bulanan</h3>
</div>
<?php echo form_open('laporan/lap_bulanan') ?>
<div class="row">
L-31
<label>Bulan</label>
<select name="bulan" class="form-control">
<?php
$mulai = 1;
}
?>
</select>
</div>
</div>
<?php
}
?>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

</div>
<h3 class="card-title">Laporan Tahunan</h3>
</div>
L-32
<?php echo form_open('laporan/lap_tahunan') ?>
<div class="row">
<?php
}
?>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

</div>
Pelanggan.php
class Pelanggan extends CI_Controller
{

{
$this->load->model('m_pelanggan');
$this->load->model('m_auth');
}
public function register()

{
$this->form_validation->set_rules('nama_pelanggan', 'nama_pelanggan',
'required', array(
L-33
));
$this->form_validation->set_rules('email', 'E-mail',
'required|is_unique[tb_pelanggan.email]', array(
'is_unique' => '%s Email Sudah Ini Terdaftar ...!'
));
$this->form_validation->set_rules('password', 'password', 'required', array(
));
$this->form_validation->set_rules('ulangi_password', 'Ulangi Password',
'required|matches[password]', array(
'matches' => '%s Password Tidak Sama ...!'
));
$data = array(
'title' => 'Register Pelanggan',
'isi' => 'v_register',
);
} else {
$data = array(
'nama_pelanggan' => $this->input->post('nama_pelanggan'),
'email' => $this->input->post('email'),
);
$this->m_pelanggan->register($data);
$this->session->set_flashdata('pesan', 'Selamat, Register Berhasil Silahkan
Login Kembali !!');
redirect('pelanggan/register');
}
}
public function login()

{
$this->form_validation->set_rules('email', 'E-Mail', 'required', array(
));
));
L-34
$email = $this->input->post('email');
$this->pelanggan_login->login($email, $password);
}
$data = array(
'title' => 'Login Pelanggan',
'isi' => 'v_login_pelanggan',
);
}
public function logout()

{
$this->pelanggan_login->logout();
}
public function akun()

{
//proteksi halaman
$data = array(
'title' => 'Akun Saya',
'isi' => 'v_akun_saya',
);
}
}
V_pesanan_masuk.php
<?php
echo '</h5>
</div>';
}
?>
<div class="card card-primary card-outline card-outline-tabs">
<div class="card-header p-0 border-bottom-0">
<ul class="nav nav-tabs" id="custom-tabs-four-tab" role="tablist">
L-35
<a class="nav-link active" id="custom-tabs-four-home-tab" data-
toggle="pill" href="#custom-tabs-four-home" role="tab" aria-controls="custom-
tabs-four-home" aria-selected="true">Pesanan Masuk</a>
</li>
<a class="nav-link" id="custom-tabs-four-profile-tab" data-
toggle="pill" href="#custom-tabs-four-profile" role="tab" aria-controls="custom-
tabs-four-profile" aria-selected="false">Diproses</a>
</li>
<a class="nav-link" id="custom-tabs-four-messages-tab" data-
toggle="pill" href="#custom-tabs-four-messages" role="tab" aria-
controls="custom-tabs-four-messages" aria-selected="false">Dikirim</a>
</li>
<a class="nav-link" id="custom-tabs-four-settings-tab" data-
toggle="pill" href="#custom-tabs-four-settings" role="tab" aria-controls="custom-
tabs-four-settings" aria-selected="false">Selesai</a>
</li>
</ul>
</div>
<div class="tab-content" id="custom-tabs-four-tabContent">
<div class="tab-pane fade show active" id="custom-tabs-four-home"
role="tabpanel" aria-labelledby="custom-tabs-four-home-tab">
<tr>
<th>No Order</th>
<th>Tanggal</th>
<th>ekspedisi</th>
<th></th>
</tr>
<?php foreach ($pesanan as $key => $value) { ?>
<tr>
<td>
</td>
<td>
?></b><br>
L-36
<span class="badge badge-warning">Belum
Bayar</span>
<?php } else { ?>
<span class="badge badge-success">Sudah
Bayar</span><br>
<span class="badge badge-primary">Menunggu
Verifikasi</span>
<?php } ?>
</td>
<td>
<button class="btn btn-sm btn-success btn-flat" data-
toggle="modal" data-target="#cek<?= $value->id_transaksi ?>">Cek Bukti
Bayar</button>
<a href="<?= base_url('admin/proses/' . $value-
>id_transaksi) ?>" class="btn btn-sm btn-flat btn-primary">Proses</a>
<?php } ?>
</td>
</tr>
<?php } ?>
</table>
</div>
<div class="tab-pane fade" id="custom-tabs-four-profile"
role="tabpanel" aria-labelledby="custom-tabs-four-profile-tab">
<tr>
<th>No Order</th>
<th>Tanggal</th>
<th>Ekspedisi</th>
<th></th>
</tr>
<?php foreach ($pesanan_diproses as $key => $value) { ?>
<tr>
<td>
</td>
<td>
L-37
?></b><br>

primary">Diproses/Dikemas</span>
</td>
<td>
<button class="btn btn-sm btn-flat btn-primary" data-

toggle="modal" data-target="#kirim<?= $value->id_transaksi ?>"><i class="fa
fa-paper-plane"></i> Kirim</button>
<?php } ?>
</td>
</tr>
<?php } ?>
</table>
</div>
<div class="tab-pane fade" id="custom-tabs-four-messages"
role="tabpanel" aria-labelledby="custom-tabs-four-messages-tab">
<tr>
<th>No Order</th>
<th>Tanggal</th>
<th>Ekspedisi</th>
<th>No Resi</th>
</tr>
<?php foreach ($pesanan_dikirim as $key => $value) { ?>
<tr>
<td>
</td>
<td>
?></b><br>
<span class="badge badge-success">Dikirim</span>
L-38
</td>
<td>
<h4><?= $value->no_resi ?></h4>
</td>
</tr>
<?php } ?>
</table>
</div>
<div class="tab-pane fade" id="custom-tabs-four-settings"
role="tabpanel" aria-labelledby="custom-tabs-four-settings-tab">
<tr>
<th>No Order</th>
<th>Tanggal</th>
<th>Ekspedisi</th>
<th>No Resi</th>
</tr>
<?php foreach ($pesanan_selesai as $key => $value) { ?>
<tr>
<td>
</td>
<td>
?></b><br>

success">Diterima/Sampai</span>
</td>
<td>
<h4><?= $value->no_resi ?></h4>
</td>
</tr>
<?php } ?>
</table>
</div>
</div>
</div>
L-39

</div>
</div>
<?php foreach ($pesanan as $key => $value) { ?>


<div class="modal fade" id="cek<?= $value->id_transaksi ?>">
<h4 class="modal-title"><?= $value->no_order ?></h4>
label="Close">
</button>
</div>
<tr>
<th>Nama Bank</th>
<th>:</th>
<td><?= $value->nama_bank ?></td>
</tr>
<tr>
<th>No Rek</th>
<th>:</th>
<td><?= $value->no_rek ?></td>
</tr>
<tr>
<th>Atas Nama</th>
<th>:</th>
<td><?= $value->atas_nama ?></td>
</tr>
<tr>
<th>:</th>
<td>Rp. <?= number_format($value->total_bayar, 0) ?></td>
</tr>
</table>
<img class="img-fluid pad" src="<?= base_url('assets/bukti_bayar/' .

$value->bukti_bayar) ?>" alt="">
</div>
L-40
</div>
</div>
</div>

<?php } ?>
<?php foreach ($pesanan_diproses as $key => $value) { ?>

<div class="modal fade" id="kirim<?= $value->id_transaksi ?>">
<h4 class="modal-title"><?= $value->no_order ?></h4>
label="Close">
</button>
</div>
<?php echo form_open('admin/kirim/' . $value->id_transaksi) ?>

<tr>
<th>Ekspedisi</th>
<th>:</th>
<th><?= $value->ekspedisi ?></th>
</tr>
<tr>
<th>Paket</th>
<th>:</th>
<th><?= $value->paket ?></th>
</tr>
<tr>
<th>Paket</th>
<th>:</th>
<th>Rp.<?= number_format($value->ongkir, 0) ?></th>
</tr>
<tr>
<th>No Resi</th>
<th>:</th>
<th><input name="no_resi" class="form-control"
placeholder="No Resi" required></th>
</tr>
L-41
</table>
</div>
<button type="submit" class="btn btn-primary">Kirim</button>
</div>
</div>
</div>
</div>

<?php } ?>
User.php
class User extends CI_Controller
{

{
$this->load->model('m_user');
}

public function index($offset = 0)
{
$data = array(
'title' => 'User',
'user' => $this->m_user->get_all_data(),
'isi' => 'v_user',
);
}
// Add a new item

{
$data = array(
L-42
);
$this->m_user->add($data);
redirect('user');
}
//Update one item

public function edit($id_user = NULL)
{
$data = array(
'id_user' => $id_user,
);
$this->m_user->edit($data);
$this->session->set_flashdata('pesan', 'Data Berhasil Diubah !!');
redirect('user');
}
//Delete one item

public function delete($id_user = NULL)
{
$data = array('id_user' => $id_user);
$this->m_user->delete($data);
redirect('user');
}
}
L-43
B. Lampiran Output Program
Tampilan menu Utama
Tampilan Kategori
L-44
Tampilan Kontak
Tampilan Login
Tampilan Keranjang Belanja
L-45
Tampilan View Cart
Tampilan Update Cart
Tampilan Checkout
Tampilan Pesanan Saya
L-46
Tampilan Bayar
Tampilan Login Admin
Tampilan Dashboard Admin
L-47
Tampilan Buku
Tampilan Tambah Produk
L-48
Tampilan Kategori
Tampilan Pesanan Masuk
Tampilan Laporan
Tampilan User
L-49

Hanifah Nur Ramadhan - 53415033 - Ruang 5

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

Hanifah Nur Ramadhan - 53415033 - Ruang 5

Diunggah oleh

Hak Cipta:

Format Tersedia

UNIVERSITAS GUNADARMA

FAKULTAS TEKNOLOGI INDUSTRI

PERANCANGAN WEBSITE TOKO BUKU LIVEFORBOOKS

Diajukan Guna Melengkapi Sebagian Syarat Dalam Mencapai

Saya yang bertanda tangan di bawah ini,

Nama : Hanifah Nur Ramadhan

Depok, Agustus 2022

( Hanifah Nur Ramadhan )

Judul PI : PERANCANGAN WEBSITE TOKO BUKU

(Hurnaningsih, SKOM, MM) ( Dr. Achmad Fahrurozi, S.Si, M.Si )

( Dr. Lintang Yuniar Banowosari, SKom., M.Sc )

Hanifah Nur Ramadhan. 53415033

Perkembangan dalam dunia bisnis atau perdagangan di Indonesia semakin

Daftar Pustaka (2009 – 2021)

Depok, Agustus 2022

BAB II LANDASAN TEORI ………………………………………………. 6

BAB III PEMBAHASAN…………………………………………………… 17

BAB IV PENUTUP ……………………………………………………….... 77

LAMPIRAN ………..…………………………………………………..…… L-1

1.1. Latar Belakang Masalah

Penggunaan internet untuk aktivitas transaksi bisnis dikenal dengan istilah

Dalam dunia bisnis, website dalam bentuk ecommerce sudah merupakan

“Buku adalah pengusung peradaban. Tanpa buku sejarah diam. Sastra

Salah satunya toko buku “LIVEFORBOOKS” merupakan toko buku yang

Mengikuti perkembangan teknologi informasi yang ada,

Perancangan website ini menggunakan perangkat lunak Windows 10,

Berdasarkan latar belakang di atas, penulis membuat website e-commerce

Dalam penulisan ini, penulis hanya membatasi masalah pada penjualan

Pembelian barang dilakukan dengan cara melakukan transfer ke penjual dan

Metode penulisan yang digunakan dalam penulisan ini adalah metode

BAB 2 LANDASAN TEORI

Pada bab ini mengbahas teori-teori yang digunakan untuk menunjang

Pada bab ini berisi pembahasan mengenai gambaran umum website,

Pada bab ini membahas kesimpulan berdasarkan hasil pembahasan serta

• Mendukung foreign key.

3. Memberikan suatu gambaran model atau sebagai bahasa pemodelan visual

Gambar 2.1 Contoh Diagram Use Case

3. Public, dapat dipanggil oleh siapa saja (Nurliana’s, 2014).

Gambar 2.2 Navigasi Linier

Gambar 2.3 Navigasi Hirarki

2.9.1.3. Non Linier

Gambar 2.4 Non Linier

Gambar 2.5 Navigasi Campuran

3.1. Gambaran Umum Website

Website toko buku LIVEFORBOOKS merupakan website online, dibuat

Pada halaman Beranda(dashboard) admin berisi, transaksi, buku, detail buku,

menu konfigurasi admin dapat melakukan konfigurasi umum, konfigurasi logo

Dalam merancang sebuah aplikasi perlu adanya penggambaran akan sistem

3.2.1.1.Struktur Navigasi User

Gambar 3.1 Struktur Navigasi User

3.2.1.2.Struktur Navigasi Admin

Gambar 3.2 Struktur Navigasi Admin

3.2.2. Use Case Diagram

Use case diagram merupakan diagram yang digunakan untuk mengetahui

3.2.2.1.Use Case Diagram User

Gambar 3.3 Bagan Use Case User

3.2.2.2.Use Case Diagram Admin

Gambar 3.4 Bagan Use Case Admin

3.2.3. Class Diagram

Gambar 3.5 Bagan Class diagram

3.2.4. Rancangan Database

Sebelum membuat rancangan database pada perangkat lunak

3.2.4.1. Tabel Admin