FIX TIPRO21

PRAKTIKUM PEMROGRAMAN INTERNET
Oleh:
KELOMPOK XXI
Afani Agung Nugroho
(1605551005)
Kadek Satria Umbaraditha
(1605551025)
Desak Ayu Putu Savita Arsarini
(1605551053)
Ni Luh Putu Giri Gita Saraswati
(1605551102)
I Wayan Eka Krisna Putra
(1605552007)
PROGRAM STUDI TEKNOLOGI INFORMASI
FAKULTAS TEKNIK
UNIVERSITAS UDAYANA
2018
KATA PENGANTAR
Puji syukur terhadap Tuhan Yang Maha Esa, karena atas berkatnya
penyusunan laporan yang berjudul “Praktikum Pemrograman Internet” dapat
terselesaikan. Tujuan disusunnya laporan ini untuk memenuhi tugas akhir
semester 4 dari mata kuliah Praktikum Pemrograman Internet. Tidak lupa ucapan
terima kasih untuk pihak-pihak yang telah membantu kepada:
1.
Bapak I Nyoman Piarsa, S.T., M.T. selaku dosen pengampu mata kuliah
Praktikum Pemrograman Internet.
2.
Asisten dosen yang telah membimbing dalam melakukan proses
penyusunan laporan Praktikum Pemrograman Internet ini.
3.
Teman-teman yang telah bekerjasama dan memberikan ide, sehingga
laporan Praktikum Pemrograman Internet ini dapat selesai tepat pada
waktunya.
Semoga laporan Praktikum Pemrograman Internet ini dapat menambah
dan memberikan informasi yang bermanfaat bagi masyarakat, agar wawasan dan
pengetahuan dapat berkembang lebih luas lagi. Laporan Praktikum Pemrograman
Internet ini masih jauh dari kata sempurna, oleh karena itu kritik dan saran yang
bersifat membangun sangat diharapkan demi sempurnanya laporan ini.
Jimbaran, Mei 2018
Tim Penyusun
ii
ABSTRAK
.
Perkembangan teknologi sekarang berbanding lurus dengan peningkatan
kebutuhan masyarakat mengenai informasi. Penggunaan teknologi juga sudah
merambah ke berbagai bidang khususnya bidang bisnis. Perkembangan teknologi
informasi sekarang, telah menciptakan peluang-peluang bisnis yang baru,
transaksi bisnis semakin banyak dilakukan secara digital. Perkembangan internet
yang terus meningkat memberi pengaruh signifikan dalam segala aspek kehidupan
khususnya dalam bidang bisnis. Transaksi bisnis melalui internet disebut ecommerce. E-commerce adalah proses pembelian, penjualan atau pertukaran
produk, jasa dan informasi melalui jaringan komputer. Salah satu contoh kegiatan
perdagangan yang dapat menggunakan e-commerce adalah toko Online.
Sistem informasi toko Online dibuat berbasis web dengan teknik
pemograman terstruktur, menggunakan bahasa pemograman PHP dan basis data
MySQL. Sistem informasi disediakan untuk memberikan kemudahan
penyampaian informasi kepada konsumen terkait produk yang dipasarkan dan
mempermudah dalam kegiatan pembayaran. Selain itu, dapat memberikan solusi
kecepatan, ketepatan dan keakuratan dalam melaksanakan pengolahan data
mencakup barang- barang yang di pasarkan agar mendapat hasil yang optimal.
Kata kunci : Internet, E-commerce PHP, MySQL.
iii
DAFTAR ISI
HALAMAN JUDUL .............................................................................................. i
KATA PENGANTAR ........................................................................................... ii
ABSTRAK ............................................................................................................ iii
DAFTAR ISI ......................................................................................................... iv
DAFTAR GAMBAR ............................................................................................ vi
DAFTAR KODE PROGRAM ........................................................................... vii
BAB I PENDAHULUAN .......................................................................................1
1.1
Latar Belakang Masalah ........................................................................... 1
1.2
Rumusan Masalah .................................................................................... 2
1.3
Tujuan Penelitian ...................................................................................... 2
1.4
Manfaat Penelitian .................................................................................... 3
1.5
Batasan Masalah ....................................................................................... 3
1.6
Sistematika Penulisan ............................................................................... 3
1.6.1
BAB I PENDAHULUAN ................................................................. 3
1.6.2
BAB II TINJAUAN PUSTAKA....................................................... 3
1.6.3
BAB III METODE DAN PERANCANGAN SISTEM .................... 4
1.6.4
BAB IV PEMBAHASAN ................................................................. 4
1.6.5
BAB V PENUTUP ............................................................................ 4
BAB II TINJAUAN PUSTAKA............................................................................5
2.1
Sistem Informasi ....................................................................................... 5
2.1.1
Blok Masukan ................................................................................... 5
2.1.2
Blok Model ....................................................................................... 5
2.1.3
Blok Keluaran ................................................................................... 6
2.1.4
Blok Teknologi ................................................................................. 6
2.1.5
Blok Basis Data ................................................................................. 6
2.1.6
Blok Kendali ..................................................................................... 6
2.2
E-Commerce ............................................................................................. 6
2.3
Database ................................................................................................... 7
2.4
Pemrograman Web ................................................................................... 8
2.5
HTML ....................................................................................................... 9
2.6
CSS ........................................................................................................... 9
2.7
PHP ......................................................................................................... 10
2.8
Bootstrap ................................................................................................ 11
2.9
J-Query ................................................................................................... 11
2.10 Laravel .................................................................................................... 12
2.11 GitHub .................................................................................................... 13
BAB III METODE DAN PERANCANGAN SISTEM .....................................19
3.1
Tempat dan Waktu Penelitian ................................................................ 19
3.2
Gambaran Umum Sistem ....................................................................... 19
1.3.1
Mekanisme Penjualan Laptop ......................................................... 19
1.3.2
Cara Kerja Admin ........................................................................... 21
1.3.3
Cara Kerja Pembeli ......................................................................... 21
1.3.4
Perancangan Use Case Diagram..................................................... 22
1.3.5
Perancangan Mockup ...................................................................... 23
iv
3.3
Perancangan Database ........................................................................... 41
BAB IV PEMBAHASAN.....................................................................................44
4.1
Source Code ........................................................................................... 44
4.2.1
Controller ........................................................................................ 44
4.2.2
Model............................................................................................... 62
4.2.3
View ................................................................................................. 74
4.2
Uji Coba ............................................................................................... 118
4.2.1
User ............................................................................................... 118
4.2.2
Admin ............................................................................................ 122
BAB V PENUTUP ..............................................................................................127
5.1
Simpulan ............................................................................................... 127
5.2
Saran ..................................................................................................... 127
DAFTAR PUSTAKA .........................................................................................128
v
DAFTAR GAMBAR
Gambar 4. 1 Halaman Home Website Toko Online Tipro .................................. 119
Gambar 4. 2 Halaman Register Website Toko Online Tipro .............................. 119
Gambar 4. 3 Halaman Login Website Toko Online Tipro .................................. 120
Gambar 4. 4 Halaman Cart Website Toko Online Tipro .................................... 121
Gambar 4. 5 Halaman Pembayaran Website Toko Online Tipro ....................... 121
Gambar 4. 6 Halaman Address User Website Toko Online Tipro ...................... 122
Gambar 4. 7 Halaman Dashboard Website Toko Online Tipro.......................... 123
Gambar 4. 8 Halaman Categories Website Toko Online Tipro .......................... 123
Gambar 4. 9 Halaman Product Website Toko Online Tipro............................... 124
Gambar 4. 10 Halaman Order Website Toko Online Tipro ................................ 125
Gambar 4. 11 Halaman Statistic Website Toko Online Tipro............................. 125
vi
DAFTAR KODE PROGRAM
Kode Program 4. 1 Controller AddressController ........................................... 45
Kode Program 4. 2 Controller CartController ................................................. 47
Kode Program 4. 3 Controller CatalogsController ......................................... 48
Kode Program 4. 4 Controller CategoriesController ..................................... 50
Kode Program 4. 5 Controller CheckoutController ......................................... 55
Kode Program 4. 6 Controller HomeController .................................................. 56
Kode Program 4. 7 Controller OrderController ............................................... 57
Kode Program 4. 8 Controller ProductsController ......................................... 60
Kode Program 4. 9 Controller UsersController ............................................... 61
Kode Program 4. 10 Address Model .................................................................... 62
Kode Program 4. 11 Cart Model .......................................................................... 63
Kode Program 4. 12 Categories Model ............................................................. 65
Kode Program 4. 13 Chart Model ........................................................................ 65
Kode Program 4. 14 Fees Model .......................................................................... 67
Kode Program 4. 15 Orders Model ..................................................................... 68
Kode Program 4. 16 Orders Details Model ...................................................... 69
Kode Program 4. 17 Products Model .................................................................. 71
Kode Program 4. 18 Province Model ................................................................. 72
Kode Program 4. 19 Regenciess Model ............................................................. 73
Kode Program 4. 20 Orders Model ...................................................................... 74
Kode Program 4. 21 View Login.blade.php ...................................................... 75
Kode Program 4. 22 View Register.blade.php ................................................ 78
Kode Program 4. 23 View index.blade.php ....................................................... 80
Kode Program 4. 24 View _add-product-form.blade.php .............................. 81
Kode Program 4. 25 View _breadcrumb.blade.php .......................................... 81
Kode Program 4. 26 View _category-panel.blade.php .................................. 82
Kode Program 4. 27 View _product-added.blade.php .................................... 83
Kode Program 4. 28 View _product-thumbnail.blade.php ............................ 83
Kode Program 4. 29 View _search-panel.blade.php ...................................... 84
Kode Program 4. 30 View _sub-category-panel.blade.php .......................... 85
Kode Program 4. 31 View index.blade.php ...................................................... 87
Kode Program 4. 32 View _form.blade.php ...................................................... 88
Kode Program 4. 33 View create.blade.php .................................................... 88
Kode Program 4. 34 View edit.blade.php ....................................................... 89
Kode Program 4. 35 View index.blade.php ...................................................... 90
Kode Program 4. 36 View _address-choose-form.blade.php ........................ 91
Kode Program 4. 37 View _address-field.blade.php .................................... 93
Kode Program 4. 38 View _address-new-form.blade.php .............................. 94
Kode Program 4. 39 View _cart-panel.blade.php .......................................... 95
Kode Program 4. 40 View _login-form.blade.php .......................................... 96
Kode Program 4. 41 View _payment-form.blade.php ...................................... 97
Kode Program 4. 42 View_step.blade.php ....................................................... 98
Kode Program 4. 43 View address.blade.php ................................................. 98
vii
Kode Program 4. 44 View login.blade.php ...................................................... 99
Kode Program 4. 45 View payment.blade.php ................................................ 100
Kode Program 4. 46 View success.blade.php ................................................ 101
Kode Program 4. 47 View edit.blade.php ..................................................... 103
Kode Program 4. 48 404.blade.php ................................................................ 104
Kode Program 4. 49 View app.blade.php ....................................................... 107
Kode Program 4. 50 View edit.blade.php ..................................................... 108
Kode Program 4. 51 View _form.blade.php .................................................... 109
Kode Program 4. 52 View edit.blade.php ...................................................... 110
Kode Program 4. 53 View index.blade.php .................................................... 111
Kode Program 4. 54 View _form.blade.php .................................................... 113
Kode Program 4. 55 View create.blade.php .................................................. 114
Kode Program 4. 56 View edit.blade.php ...................................................... 114
Kode Program 4. 57 View index.blade.php .................................................... 116
Kode Program 4. 58 View edit.blade.php ...................................................... 118
viii
BAB I
PENDAHULUAN
Bab I merupakan pendahuluan dari laporan Praktikum Pemrograman
Internet. Laporan Bab I ini membahas tentang latar belakang masalah, rumusan
masalah, tujuan penelitian, manfaat penelitian, serta sistematika penulisan yang
menjadikan awal dalam proses penulisan laporan pemrograman internet ini.
1.1
Latar Belakang Masalah
Perkembangan teknologi yang semakin pesat menyebabkan sekumpulan
manusia mengahasilkan karya yang memiliki tujuan tertentu. Saat ini, web
dijadikan sebagai kumpulan halaman yang dapat menampilkan informasi data
teks, gambar diam atau gerak, animasi, suara, video atau gabungan dari semuanya,
baik yang bersifat statis maupun dinamis untuk membentuk satu rangkaian
bangunan yang saling terkait serta terhubung dengan jaringan-jaringan halaman
(hyperlink). Web dikatakan statis, apabila isi informasi website tetap, jarang
berubah, dan searah hanya dari pemilik website, sedangkan web dikatakan
dinamis, apabila isi informasi website selalu berubah-ubah serta interaktif dua
arah berasal dari pemilik serta pengguna website. Website dinamis menurut
pengembangannya dapat di-update oleh pengguna sebagai pencarian infromasi
yang dibutuhkan serta berkomunikasi dengan orang lain melalui sosial media.
Aplikasi yang diperlukan untuk website adalah browser. Browser memiliki scriptscript yang dapat dimengerti oleh komputer.
Perkembangan internet juga memberi pengaruh signifikan dalam segala
aspek kehidupan. Internet membantu untuk berinteraksi, berkomunikasi, bahkan
melakukan perdagangan dengan orang dari segala penjuru dunia dengan murah,
cepat dan mudah. Salah satu manfaat dari keberadaan internet adalah sebagai
media promosi suatu produk. Suatu produk yang dipromosikan melalui internet
dapat membawa keuntungan besar bagi pengusaha karena produknya dikenal di
seluruh dunia. E-commerce merupakan salah satu bentuk kontak transaksi
perdagangan antara penjual dengan pembeli menggunakan media internet. Jadi,
1
2
proses pemesanan barang dikomunikasikan melalui internet. Keberadaan ecommerce memberikan banyak kemudahan bagi kedua belah pihakdi dalam
melakukan transaksi perdagangan, meskipun berada di benua berbeda sekalipun.
Setiap transaksi yang dilakukan dengan e-commerce tidak memerlukan pertemuan
dalam tahap negoisasi. Berbelanja atau melakukan transaksi perdagangan melalui
internet sangat berbeda dengan dunia nyata, karena lebih cepat dan biaya murah
tanpa melalui proses yang berbelit-belit. Pihak pembeli (buyer) cukup mengakses
internet ke website perusahaan yang mengiklankan produknya di internet,
kemudian mempelajari term of condition (ketentuan-ketentuan yang diisyaratkan)
pihak penjual. Manfaat dari e-commerce ini dapat menekan biaya barang dan jasa,
meningkatkan kepuasan pembeli, mempercepat dalam hal mendapatkan barang
yang dibutuhkan dengan kualitas yang terbaik sesuai dengan harganya.
Oleh karena itu, Praktikum Pemrograman Internet dibuat untuk
membahas pembuatan dan penggunaan aplikasi berbasis website mengenai bisnis
penjualan. Website ini diberikan nama “Toko Online Tipro”. Website ini berfungsi
untuk tempat memperjual-belikan barang elektronik seperti Laptop, dengan harga
perbandingan jauh lebih murah daripada website-website lain.
1.2
Rumusan Masalah
Berdasarkaan latar belakang yang telah dibuat, maka adapun perumusan
masalah yang dirumuskan adalah, sebagai berikut.
a.
Bagaimana perancangan website Toko Online.
b.
Bagaimana bisnis proses dari website Toko Online.
c.
Bagaimana membangun website Toko Online menggunakan framework
Laravel.
1.3
Tujuan Penelitian
Melihat dari rumusan masalah di atas, adapun tujuan dari laporan
Praktikum Pemrograman Internet ini adalah sebagai berikut.
a.
Mengetahui rancangan website Toko Online
b.
Mengetahui bisnis proses dari website Toko Online.
c.
Mengimplementasikan framework Laravel.
3
1.4
Manfaat Penelitian
Manfaat yang dapat diambil setelah penelitian ini selesai dilaksanakan
yaitu, diharapkan pada laporan Praktikum Pemrograman Internet ini dapat
memberikan pemikiran terhadap pengembangan ilmu pengetahuan khususnya
Teknologi Informasi dan mengasah keterampilan yang berkaitan dengan
perancangan sistem website.
1.5
Batasan Masalah
Adapun beberapa masalah yang dapat membatasi masalah, diangkat pada
laporan Praktikum Pemrograman Internet ini, meliputi perancangan bisnis proses,
perancangan database pada MySQl, penggunaan fungsi model, view dan
controller pada bahasa Pemrograman PHP dan framework Laravel, serta
penggunaan CSS Bootstrap untuk memperindah tampilan website.
1.6
Sistematika Penulisan
Sistematika penulisan yang digunakan pada laporan Praktikum
Pemrograman Internet ini terdiri dari pembahasan umum secara teori disertai
dengan pemaparan contoh dari penjelasan tersebut. Pengambilan teori
menggunakan metode pengumpulan data seperti artikel yang nantinya dirangkum
dari beberapa sumber.
1.6.1
BAB I PENDAHULUAN
Bab I merupakan pendahuluan dari laporan Praktikum Pemrograman
Internet. Laporan pada Bab I ini mengenai latar belakang, rumusan masalah,
tujuan penelitian, manfaat penelitian, batasan masalah dan sistematika penulisan
yang digunakan dalam proses penulisan laporan Praktikum Pemrograman Internet
ini.
1.6.2
BAB II TINJAUAN PUSTAKA
Bab II merupakan tinjauan pustaka dari laporan Praktikum Pemrograman
Internet. Laporan Bab II ini membahas tentang landasan teori secara umum yang
menjadikan dasar untuk digunakan dalam proses penulisan laporan Praktikum
Pemrograman Internet.
4
1.6.3
BAB III METODE DAN PERANCANGAN SISTEM
Bab III merupakan metode dan perancangan sistem dari laporan
Praktikum Pemrograman Internet. Laporan Bab III membahas tentang tempat dan
waktu penelitian, sumber data dan perancangan website Sistem Informasi
Penjualan Laptop.
1.6.4
BAB IV PEMBAHASAN
Bab IV merupakan pembahasan dari laporan Praktikum Pemrograman
Internet. Laporan Bab IV membahas tentang bisnis proses, kode program pada
model, view, controller dan screenshoot tampilan website yang dipraktikan pada
mata kuliah Praktikum Pemrograman Internet.
1.6.5
BAB V PENUTUP
Bab V merupakan penutup dari laporan Praktikum Pemrograman
Internet. Laporan ini mengenai kesimpulan dari keseluruhan modul-modul
Praktikum Pemrograman Internet serta saran atau masukan yang diberikan oleh
dosen pengempu mata kuliah Praktikum Pemrograman Internet.
BAB II
TINJAUAN PUSTAKA
Bab II merupakan tinjauan pustaka dari laporan Praktikum Pemrograman
Internet. Laporan Bab II ini membahas tentang landasan teori secara umum yang
menjadikan dasar untuk digunakan dalam proses penulisan laporan Praktikum
Pemrograman Internet.
2.1
Sistem Informasi
Sistem informasi adalah suatu sistem pada suatu organisasi yang
mempertemukan kebutuhan dalam pengolahan transaksi harian, mendukung
operasi, bersifat manajerial dan menciptakan strategi dari suatu organisasi serta
menyediakan informasi bagi pihak luar dalam bentuk laporan apabila diperlukan.
Sistem informasi terdiri dari komponen-komponen, yaitu blok masukan
(input block), blok model (model block), blok keluaran (output block), blok
teknologi (technology block), blok basis data (database block) dan blok kendali
(control block). Sebagai suatu sistem, keenam blok tersebut masing-masing saling
berinteraksi satu dengan yang lainnya membentuk satu kesatuan untuk mencapai
sasarannya.
2.1.1
Blok Masukan
Blok masukan (input block) mewakili data yang masuk ke dalam sistem
informasi. Input dapat berupa metode-metode dan media untuk menangkap data
yang akan dimasukkan, yang dapat berupa dokumen-dokumen dasar.
2.1.2
Blok Model
Blok model (model block) terdiri dari kombinasi prosedur, logika dan
model matematik yang akan memanipulasi data input dan data yang tersimpan di
basis data dengan cara yang sudah tertentu untuk menghasilkan keluaran yang
diinginkan.
5
6
2.1.3
Blok Keluaran
Produk dari sistem informasi adalah keluaran yang merupakan informasi
yang berkualitas dan dokumentasi yang berguna untuk semua tingkatan
manajemen serta semua pemakai sistem.
2.1.4
Blok Teknologi
Teknologi digunakan untuk menerima input, menjalankan model,
menyimpan dan mengakses data, menghasilkan dan mengirimian keluaran dan
membantu pengendalian dari sistem secara keseluruhan. Teknologi terdiri dari 3
bagian utama, yaitu teknisi (brainware), perangkat lunak (software) dan perangkat
keras (hardware).
2.1.5
Blok Basis Data
Basis data (database) merupakan kumpulan dari data yang saling
berhubungan satu dengan yang lainnya, tersimpan di perangkat keras komputer
dan digunakan perangkat lunak untuk memanipurasinya.
2.1.6
Blok Kendali
Pengendalian perlu dirancang dan diterapkan untuk meyakinkan bahwa
hal-hal yang dapat merusak sistem (bencana alam atau kecurangan) dapat dicegah
ataupun bila terlanjur terjadi kesalahan-kesalahan dapat langsung cepat diatasi.
2.2
E-Commerce
Electronic Commerce (e-commerce) merupakan bagian dari e-business,
tidak hanya sekedar perniagaan tetapi mencakup pengkolaborasian mitra bisnis,
pelayanan nasabah, lowongan pekerjaan dan lain-lain. E-commerce adalah proses
pembelian, penjualan atau pertukaran produk, jasa dan informasi melalui jaringan
komputer.
E-commerce mencakup distribusi, penjualan, pembelian, marketing dan
service dari sebuah produk yang dilakukan dalam sebuah sistem elektronika
seperti Internet atau bentuk jaringan komputer yang lain. E-commerce bukan
sebuah jasa atau sebuah barang, tetapi perpaduan antara jasa dan barang. E-
7
commerce dan kegiatan yang terkait melalui internet dapat menjadi penggerak
untuk memperbaiki ekonomi domestik melalui liberalisasi jasa domestik dan
mempercepat integrasi dengan kegiatan produksi global.
E-commerce
mengintegrasikan
perdagangan
domestik
dengan
perdagangan dunia, berbagai bentuk pembicaraan atau negosiasi tidak hanya
terbatas dalam aspek perdagangan dunia, tetapi bagaimana kebijakan domestik
tentang pengawasan di sebuah negara, khususnya dalam bidang telekomunikasi,
jasa keuangan, dan pengiriman serta distribusi.
E-commerce
dijalankan
menggunakan
beberapa
perpaduan
dari
infrastruktur teknologi. Contohnya menggunakan teknologi jaringan World Wide
Web (www). Selain teknologi jaringan www, e-commerce juga memerlukan
teknologi basis data (database), surat elektronik (e-mail), dan bentuk teknologi
non komputer yang lain seperti halnya sistem pengiriman barang, dan alat
pembayaran untuk e-commerce ini.
2.3
Database
Database merupakan komponen dasar dari sebuah sistem informasi dan
pengembangan serta penggunaannya dipandang dari perspektif kebutuhan
organisasi yang lebih besar. Database merupakan kumpulan dari data-data yang
membentuk suatu berkas (file) yang saling berhubungan (relation) dengan proses
tertentu untuk membentuk data baru atau informasi. Oleh karena itu siklus hidup
sebuah sistem informasi organisasi berhubungan dengan siklus hidup sistem
database yang mendukungnya.
Relasi data biasanya ditunjukkan dengan kunci (key) dari tiap file yang
ada. Data yang merupakan fakta yang tercatat dan selanjutnya dilakukan
pengolahan menjadi bentuk yang berguna atau bermanfaat bagi pemakainya
sebagai informasi. Bentuk informasi yang kompleks dan terintegrasi dan
pengolahan sebuah database dengan komputer digunakan untuk proses
pengambilan keputusan pada manajemen membentuk SIM (Sistem Informasi
Manajemen), data dalam database merupakan item terkecil dan terpenting untuk
membangun database yang baik dan valid.
8
Database memiliki beberapa komponen yang penting di dalamnya, yaitu
sebagai berikut.
1.
Hardware, perangkat yang mendukung operasi pengolahan data seperti
CPU, memori, disk, terminal, dan sebagainya.
2.
Software sistem operasi, contohnya Windows 10, Windows 2000/XP,
Linux, Unix.
3.
Software program aplikasi misalnya Visual Basic, Delphi, Visual Foxpro.
4.
Software pengelola database (DBMS) seperti MS-Access, SQL
(Structured Query Language), Oracle. DBMS (Database Management
System) menyediakan akses data yang efisien, kebebasan data, integritas
data, keamanan, dan pengembangan aplikasi yang cepat, mendukung
akses bersamaan dan perbaikan dari kerusakan.
5.
Database, semua data yang diperlukan, dipelihara, dikelola oleh sistem.
6.
Pemakai atau pengguna database (Brainware).
2.4
Pemrograman Web
Pemrograman adalah proses menulis, menguji dan memperbaiki (debug)
dan memelihara kode yang membangun suatu program komputer. Web adalah
jaringan komputer yang terdiri dari kumpulan situs internet yang menawarkan
teks dan grafik dan suara dan sumber daya animasi melalui protokol transfer
hypertext. Web dikenal dengan istilah WWW (World Wide Web) merupakan
layanan internet yang paling populer saat ini. Pemrograman web merupakan
proses penulisan kode atau pembangunan sebuah situs web dengan menggunakan
bahasa pemrograman tingkat tinggi (high level).
WWW adalah halaman website yang saling terkoneksi satu dengan
lainnya (hyperlink) dan membentuk samudera belantara informasi. WWW
berjalan dengan protokol HTTP (HyperText Transfer Protokol). Halaman Web
merupakan file teks murni (plain text) yang berisi sintaks-sintaks HTML dapat
dibuka atau diterjemahkan dengan browser. Sintaks HTML mampu memuat
konten text, gambar, audio, video dan animasi. Web dijadikan sebagai standar
interface pada layanan-layanan yang ada di internet, mulai dari penyedia
9
informasi, lalu penggunaanya dalam bidang komunikasi seperti e-mail dan
chatting, sampai transaksi bisnis (commerce).
Keuntungan yang diberikan oleh Aplikasi berbasis Web dibandingkan
dengan aplikasi berbasis desktop sangat banyak, sehingga aplikasi berbasis web
diadopsi oleh perusahaan sebagai bagian dari strategi teknologi informasinya,
karena memberikan kemudahan dalam mengakses informasi, setup server,
pendistribusian informasi dan kebebasan menggunakan platform dapat disajikan
oleh web browser pada sistem operasi apapun.
2.5
HTML
HTML (Hypertext Markup Language) adalah bahasa markup yang
digunakan untuk membuat halaman web. HTML merupakan bahasa markup atau
penandaan terhadap sebuah dokumen teks. Tanda ini digunakan untuk
menentukan format atau style dari teks yang di tandai.
HTML dibuat oleh Tim Berners-Lee ketika bekerja untuk CERN dan
dipopulerkan pertama kali oleh browser Mosaic. Awal tahun 1990 HTML
mengalami perkembangan yang sangat pesat.
HTML disahkan sebagai suatu dokumen HTML standard dan disetujui
oleh World Wide Web Consortium (W3C) untuk dievaluasi secara ketat.
Perkembangan yang terjadi untuk versi HTML, browser memperbaiki diri agar
bisa mendukung kode-kode HTML yang baru, jika tidak browser tidak dapat
menampilkan HTML tersebut.
Fungsi utama HTML adalah membuat, mendesain, dan mengontrol
tampilan dari web page dan isinya. HTML juga berfungsi untuk mempublikasikan
document secara Online, sehingga dapat diakses dan dilihat dari seluruh dunia.
HTML digunakan untuk membuat Online form yang digunakan untuk menangani
pendaftaran transaksi secara Online. Fungsi lain HTML adalah menambahkan
object seperti image, audio, video dan juga java applet di dalam dokumennya.
2.6
CSS
CSS (Cascading Style Sheet) adalah bahasa pemrograman web yang
digunakan untuk mempercantik halaman web dan mengendalikan beberapa
10
komponen sebuah web, sehingga lebih terstruktur dan seragam. CSS digunakan
dalam mengendalikan ukuran gambar, warna teks, warna tabel, ukuran border,
warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi
antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS diartikan
sebagai bahasa style sheet untuk mengatur tampilan dokumen.
Tahun 1996 CSS menjadi teknologi internet yang direkomendasikan oleh
World Wide Web Consortium atau W3C. CSS distandarisasi oleh Internet
Explorer dan Netscape untuk melepas browser terbaru yang mendekati standar
CSS.
Kelebihan CSS yaitu dapat memisahkan desain dengan konten halaman
web, mengatur desain, mengubah suatu tema halaman web, dan sebagainya. CSS
menghadirkan sesuatu yang tidak dapat dilakukan oleh HTML. CSS lebih mudah
di-download karena ukuran filenya lebih ringan. Satu CSS dapat digunakan
banyak halaman web.
2.7
PHP
Hypertext Prepocessor atau PHP merupakan bahasa pemograman
berbasis web yang menerapkan sistem sisi server side. PHP disisipkan antara
skrip-skrip bahasa HTML dan arena bahasa server side lainnya, sehingga PHP
dieksekusi secara langsung oleh server.
Kelebihan PHP yaitu web yang menggunakan PHP mudah dibuat dan
memiliki kecepatan akses yang cukup tinggi. Skrip-skrip PHP berjalan dalam web
server yang berbeda dan dalam sistem operasi yang berbeda. PHP berjalan dalam
berbagai sistem operasi seperti UNIX, Windows dan Macintosh. PHP juga
berjalan pada web server Microsoft Personal Web Server, Apache, IIS (Internet
Information Services), Xitami dan sebagainya. PHP diletakan dalam tag HTML
karena termasuk bahasa embedded.
Web server diperlukan untuk menjalankan PHP untuk memproses file-file
PHP dan mengirimkan hasil pemrosesan untuk ditampilkan di browser client
sehingga PHP termasuk server-side scripting (script yang diproses di sisi server).
Web server adalah software yang di-install pada komputer lokal ataupun
komputer lain yang berada di jaringan intranet atau internet yang berfungsi untuk
11
melayani permintaan-permintaan web dari client. Web server yang paling banyak
digunakan saat ini untuk PHP adalah apache.
Selain apache, PHP juga memerlukan PHP binary yang dikonfigurasikan
sebagai modul apache atau aplikasi CGI (Computer Generated Image). Media
penyimpanan datanya (database server), PHP biasa menggunakan MySQL.
Setelah meng-install ketiga komponen, program PHP dapat dibuat dan dijalankan
melalui web browser.
2.8
Bootstrap
Bootstrap adalah sebuah framework CSS yang dapat digunakan untuk
mempermudah dan mempercepat pembuatan halaman website. Hal ini karena
Bootstrap sudah menyediakan CSS dan Javascript yang siap pakai dan mudah
dikembangkan. Bootstrap merupakan framework yang dikhususkan untuk frontend website. Bootstrap pertama kali dikembangkan pertengahan 2010 pada
Twitter oleh Mark Otto dan Jacob Thornton.
Bootstrap menyediakan kumpulan komponen class interface dasar yang
dapat menciptakan tampilan website yang menarik, bersih dan ringan. Bootstrap
juga memiliki fitur grid yang berfungsi untuk mengatur layout pada halaman
website yang dapat digunakan dengan mudah dan cepat. Developer dapat
mengembangkan Bootstrap yang digunakan dengan menambah class dan CSS.
Keuntungan Bootstrap dapat menghemat waktu pembuatan website
karena sudah disiapkan template yang dibuat menggunakan HTML, CSS, dan
Jacvascript. Tampilan Bootstrap sangat responsive dan mendukung semua jenis
resolusi baik dari komputer, laptop, dan smartphone. Bootstrap sangat ringan
karena dibuat sangat terstruktur dan terlihat modern.
2.9
J-Query
J-Query merupakan library JavaScript multiplatform yang dirancang
untuk memudahkan penyusunan client-side script pada file HTML. Sintaks jQuery dirancang untuk memudahkan pengembang website dalam menavigasi
dokumen, menyeleksi elemen-elemen DOM (Document Object Model),
12
menerapkan animasi, mengaplikasikan events, serta membangun aplikasi AJAX
(Asynchronous JavaScript and XML).
J-Query membantu menciptakan berbagai plugin berbasis library
JavaScript. Plugin-plugin dapat menyusun sejumlah abstraksi untuk interaksi dan
animasi sederhana, dan beberapa efek yang cukup kompleks dan berbagai widget
yang dapat dikonfigurasikan. Fitur-fitur j-Query meliputi sebagai berikut.
1.
Syntax ekspresif (CSS selectors) untuk menunjuk elemen pada dokumen.
2.
Query yang efektif dan efisien dalam menemukan elemen pada dokumen.
3.
Kumpulan method yang berguna untuk memanipulasi elemen yang
terpilih.
4.
Succinct idiom (method berantai) untuk membuat sequence dari operasi
yang dibuat.
2.10
Laravel
Laravel adalah framework yang digunakan untuk web development di
PHP. Laravel dibangun dengan konsep MVC (Model View Controller). Laravel
mengembangkan website berbasis MVC dan ditulis dalam PHP. Laravel
dirancang untuk meningkatkan kualitas perangkat lunak dengan mengurangi biaya
pengembangan awal dan biaya maintenance, serta mempermudah pengerjaan,
karena menyediakan sintaks yang ekspresif dan mengefisiensikan waktu
pembuatan.
MVC merupakan metode dalam pembuatan aplikasi dengan memisahkan
data (Model) dari tampilan (View) dan memprosesnya (Controller). MVC
memisahkan pengembangan aplikasi berdasarkan komponen utama yang
membangun sebuah aplikasi seperti manipulasi data, antarmuka pengguna, dan
bagian yang menjadi kontrol sebuah aplikasi web. MVC terdiri dari, sebagai
berikut.
1.
Model mewakili struktur data. Model berisi fungsi-fungsi yang
membantu dalam pengelolaan database seperti memasukkan data ke
database, pembaruan data dan lain-lain.
2.
View adalah bagian yang mengatur tampilan ke pengguna. View berupa
halaman web.
13
3.
Controller merupakan bagian yang menjembatani model dan view.
Laravel memiliki beberapa fitur yang digunakan untuk membangun
sebuah website. Fitur- fitur yang ada pada laravel, yaitu sebagai berikut.
1.
Bundles, fitur sistem pengemasan modular dan tersedia di beragam
aplikasi.
2.
Eloquent ORM, menerapkan PHP lanjutan menyediakan metode internal
dari pola active record yang mengatasi masalah pada hubungan objek
database.
3.
Application Logic, aplikasi yang menggunakan controller atau bagian
route.
4.
Reverse Routing, relasi atau hubungan antara link dan route.
5.
Restful controllers, memisahkan logika dalam melayani HTTP GET and
POST.
6.
Class Auto Loading, menyediakan loading otomatis untuk class PHP.
7.
View Composer, kode unit logikal yang dapat dieksekusi ketika view
sedang loading.
8.
IoC Container, objek baru dihasilkan dengan pembalikan controller.
9.
Migration, menyediakan sistem kontrol untuk skema database.
10.
Unit Testing, banyak tes untuk mendeteksi dan mencegah regresi.
11.
Automatic Pagination, menyederhanakan tugas dari penerapan halaman.
2.11
GitHub
GitHub merupakan layanan web bersama yang digunakan untuk proyek
pengembangan perangkat lunak yang menggunakan sistem pengontrol versi Git
dan layanan hosting internet. GithHub banyak digunakan untuk kode komputer.
Ini memberikan kontrol akses dan beberapa fitur kolaborasi seperti pelacakan bug,
permintaan fitur, manajemen tugas, dan wiki untuk setiap proyek.
Github menyediakan fungsi jejaring sosial seperti feed, Followers, dan
wiki. Github dilengkapi dengan forks, yaitu fitur untuk menduplikasi suatu proyek
dan menjadi kanal bagi pengembang lain di luar team utama proyek tersebut
untuk mengirimkan kode yang hendak dikontribusikan.
14
GitHub menawarkan paket repositori pribadi dan gratis pada akun yang
sama dan digunakan untuk proyek perangkat lunak sumber terbuka yang
menjadikannya sebagai layanan terbesar dari kode sumber di dunia. GitHub
mempunyai sebuah maskot yang bernama Octocat, seekor kucing dengan 5
tentakel dan wajah seperti manusia.
Git sebagai Distributed Version Control System (DVCS), menjadikan Git
sebagai sebuah sistem yang mencatat setiap perubahan terhadap berkas atau
kumpulan berkas sehingga pada suatu saat dapat dikembalikan pada salah satu
versi dari berkas tersebut. Git mampu menangani sejumlah remote repository
dengan baik, jadi dapat kolaborasi dengan berbagai kelompok kolaborator dalam
berbagai cara, secara bersama-sama pada suatu proyek. Git dapat melakukan
version control secara terdistribusi dan dapat menangani sejumlah remote
repository, maka perlu adanya Git Server untuk menyediakan layanan tersebut.
GitHub dapat dijalankan dengan menggunakan command prompt. Dalam
membuat dan mengembangkan project menggunakan GitHub terdapat beberapa
perintah yang harus digunakan, yaitu sebagai berikut.
1.
Pembuatan Repository
Pembuatan repository Online dilakukan setelah akun GitHub sudah ada
sehingga dapat mengakses GitHub. Pembuatan repository Online, dilakukan
dengan mengarahkan kursor pada tombol “+” lalu klik tombol dan pilih “new
repository”. Tampilan GitHub dapat dilihat pada Gambar 2.1
Gambar 2. 1 New Repository GitHub
Gambar 2.1 Menampilkan cara membuat repository baru. Pembuatan
repository baru perlu memilih “New Repository” dengan mengarahkan kursor
pada tombol “+”. Setelah memilih “new repository”, pengguna perlu memasukan
beberapa informasi meliputi nama repository, deskripsi repository, kondisi
repository berupa public atau private, dan initialize the repository with README.
Tampilan dari GitHub dapat dilihat pada Gambar 2.2
15
Gambar 2. 2 Repository GitHub
Gambar 2.2 merupakan tampilan GitHub saat membuat repository.
Dalam memasukan informasi repository perlu diperhatikan kondisi dari repository
Online yakni bersifat public (di buat untuk umum) atau private (untuk digunakan
pribadi dan tertutup). Selain itu perlu diperhatikan “Initiallize the repository with
README” yakni isi dokumentasi pada project yang dikerjakan.
2.
Git Clone
Perintah Git Clone digunakan untuk mengunduh kode yang ada pada
repository. Pengguna GitHub dapat mengunduh semua repository yang bersifat
public. Kode pada repository tersimpan pada folder htdocs. Tampilan dari
perintah git clone dapat dilihat pada Gambar 2.3.
Gambar 2. 3 Git Clone
16
Gambar 2.3 merupakan kode program yang perlu dimasukan pada
command prompt. Perintah git clone digunakan untuk mengunduh kode dalam
repository GitHub. Kode program ini berisi perintah yakni “git clone” dan link
repository yaitu “https://github.com/satriaumbaraditha/tiproo.git”.
3.
Git Status
Perintah git status digunakan untuk mengecek status dari repository
project. dengan memasukan perintah ini, akan diketahui file atau folder yang
belum dimasukan kedalam repository GitHub. Tampilan dari perintah git
status
dapat dilihat pada Gambar 2.4.
Gambar 2. 4 Git Status
Gambar 2.4 merupakan penggunaan dari perintah git status. Apabila
kontributor melakukan perubahan pada repository maka akan ditampilkan file atau
folder yang belum masuk dalam repository GitHub. File atau folder ini berwarna
merah. Setelah file atau folder sudah dimasukan kedalam repository maka
warnanya berubah menjadi hijau.
4.
Git Add
Perintah git add digunakan untuk menambah file atau folder project
yang diunggah pada repository GitHub. Dengan menggunakan perintah git add
“.”
maka mewakili isi keseluruhan file yang ada pada folder project. Sedangkan
untuk memasukan beberapa file kedalam repository dapat menggunakan perintah
git add
dan diikuti dengan nama file yang ingin dimasukan dalam repository.
Tampilan dari perintah git add dapat dilihat pada Gambar 2.5.
17
Gambar 2. 5 Git Add
Gambar 2.5 menampilkan penggunaan perintah git
add
dalam
memasukan file project kedalam repository GitHub. Untuk memasukan file
project perintah git add perlu diikuti dengan nama file yang ingin dimasukan
kedalam repository.
5.
Git Commit
Perintah git
commit
digunakan untuk menambahkan keterangan
ataupun status perubahan saat menngunggah file project pada repository GitHub.
Keterangan dapat berupa pemberitahuan file yang telah diunggah sehingga dapat
meminimalisir kesalahan dalam project. Tampilan dari perintah git commit
dapat dilihat pada Gambar 2.6.
Gambar 2. 6 Git Commit
Gambar 2.6 menampilkan penggunaan perintah git commit dalam
memberitahukan status perubahan dari project di repository GitHub. Dalam
menambahkan keterangan perintah git commit –m perlu diikuti dengan isi
komentar yakni “menambahkan css home”.
6.
Git Push
Perintah git push digunakan untuk mengunggah file yang ada pada
repository lokal ke repository Online yang diletakan pada branch yang sudah
tersedia di repository Online. Perintah git push dilakukan setelah melakukan
commit pada tempat penyimpanan projeknya. Tampilan dari perintah git push
dapat dilihat pada Gambar 2.7.
18
Gambar 2. 7 Git Push
Gambar 2.7 menampilkan penggunaan perintah git
push
dalam
menggungah file projek yang ada pada repository lokal ke repository Online.
Setelah memasukan perintah ini, maka perlu memberikan username dan password
GitHub dan file segera terunggah.
7.
Git Pull
Perintah git pull digunakan untuk mengambil file porject dari
repository Online ke repository lokal. Perintah ini sering digunakan dalam
pembuatan dan pengembangan aplikasi secara tim. Tampilan dari perintah git
pull
dapat dilihat pada Gambar 2.8.
Gambar 2. 8 Git Pull
Gambar 2.8 merupakan gambar untuk menampilkan penggunaan perintah
git pull
dalam mengunduh file project dari repository Online ke repository
lokal. Apabila perintah ini telah dijalankan maka muncul pemberitahuan yakni
“Already up to date”. Sehingga pengguna dapat mengakses project.
BAB III
METODE DAN PERANCANGAN SISTEM
Bab III merupakan metode dan perancangan sistem dari laporan
Praktikum Pemrograman Internet. Laporan Bab III membahas tentang tempat dan
waktu penelitian, sumber data, bisnis proses dan perancangan website Sistem
Informasi Penjualan Laptop.
3.1
Tempat dan Waktu Penelitian
Tempat pembuatan laporan Praktikum Pemrograman Internet ini
bertempat di kampus Program Studi Teknologi Informasi Fakultas Teknik
Universitas Udayana dan Kampus Sudirman yang bertempat di Bukit, Jimbaran
dan Denpasar dengan rentangan waktu pembuatan selama tiga bulan dari MaretMei 2018.
3.2
Gambaran Umum Sistem
Gambaran umum sistem merupakan penjelasan mengenai bisnis proses
yang menjadikan mekanisme dan alur kerja dari bisnis penjualan laptop secara
Online ini berjalan, yaitu seperti berikut.
1.3.1
Mekanisme Penjualan Laptop
Mekanisme website dalam menjual dan memasarkan produk berupa
laptop, yaitu dengan beberapa tahapan sebagai berikut.
1.
Website menyediakan beberapa produk berupa laptop yang tersedia yang
dapat dilihat oleh semua pengunjung website. Menu home menyediakan
berbagai produk mulai dari produk termurah hingga termahal yang di
pasarkan.
2.
Website memiliki kebijakan dimana untuk melihat lebih rinci mengenai
detail produk meliputi spesifikasi produk serta harga yang ditawarkan
ataupun melihat koleksi produk yang lebih luas, pengunjung perlu
melakukan Register bagi yang belum memiliki akun atau melakukan
Login untuk yang sudah memiliki akun.
19
20
3.
Website menyediakan fitur search untuk mempermudah pengunjung
dalam mencari produk sesuai dengan kebutuhan dan keinginan. Dengan
memasukkan nama produk, website akan menampilkan produk-produk
sesuai input-an pengunjung.
4.
Untuk dapat melihat spesifikasi produk, pengunjung dapat mengklik
gambar produk. Website tersebut menampilkan spesifikasi dari produk
dengan jelas dan rinci.
5.
Agar dapat membeli produk, pengunjung perlu memasukan jumlah
produk yang ingin dibeli mengklik tombol “Tambah ke Cart”. Setelah
itu, muncul pemberitahuan bahwa produk telah ditambahkan ke
keranjang dan kemudian disediakan dua buah pilihan untuk melanjutkan
pembelian produk lain atau melanjutkan pada menu pembayaran.
6.
Menu pembayaran dalam website menampilkan detail pembelian serta
total yang harus dibayarkan. Halaman ini juga menampilkan beberapa
syarat yang harus dimasukan oleh pengunjung meliputi nama dan alamat
yang ingin dituju. Apabila pengunjung memiliki alamat baru yang ingin
dituju, pembeli perlu mengisi informasi mengenai alamat meliputi nama,
alamat, provinsi, kabupaten/kota, serta nomer telepon penerima. Setelah
itu pembeli memilih pihak ketiga (bank) sebagai media untuk
mengirimkan dana sejumlah total belanja.
7.
Setelah melakukan pembayaran, maka admin dapat mengecek halaman
order yang berisi bukti transfer dari pengunjung. Admin perlu melihat
kecocokan informasi tersebut. Apabila sudah sesuai, admin dapat
memvalidasi atau memverifikasi sehingga barang dapat langsung
dikirim.
8.
Pengunjung melakukan transfer dana ke rekening yang sudah diberikan
sesuai dengan kesepakatan pada menu pembayaran. Setelah melakukan
transfer pengunjung menunggu barang diantarkan oleh pihak ketiga
(ekspedisi pengiriman barang).
21
1.3.2
Cara Kerja Admin
Cara kerja untuk admin dalam melakukan penjualan laptop ini, yaitu
dengan tahapan-tahapan sebagai berikut.
1.
Admin perlu melakukan login agar admin dapat mengakses akun dan
melihat halaman dashboard khusus admin. Dalam halaman dashboard
terdapat grafik penjualan dari produk yang dipasarkan.
2.
Admin dapat menambah produk yang dipasarkan. Admin perlu menginput nama, jenis (merk), dan stok, serta spesifikasi dari laptop yang
dipasarkan. Data mengenai produk otomatis tersimpan di dalam
database.
3.
Apabila ada pesanan dari pembeli, admin dapat menmerikksa pada
halaman order. Admin dapat melihat informasi pembelian yang meliputi
nama, jenis, jumlah produk yang dibeli.
4.
Setelah pembeli melakukan pembayaran, maka admin dapat kembali
mengecek halaman order yang berisi bukti transfer dari pembeli. Admin
perlu melihat kecocokan informasi tersebut. Apabila sudah sesuai, admin
dapat memvalidasi atau memverifikasi sehingga barang dapat langsung
dikirim.
1.3.3
Cara Kerja Pembeli
Cara kerja untuk pembeli dalam melakukan pembelian laptop ini, yaitu
dengan tahapan-tahapan sebagai berikut.
1.
Pembeli dapat melihat produk-produk berupa laptop yang tersedia dalam
website ini. Menu home terdapat berbagai produk mulai dari produk
termurah hingga termahal yang di pasarkan.
2.
Untuk melihat lebih rinci mengenai detail produk meliputi spesifikasi
produk serta harga yang ditawarkan ataupun melihat koleksi produk yang
lebih luas, pembeli perlu melakukan Register bagi pembeli yang belum
memiliki akun atau melakukan Login bagi yang sudah memiliki akun.
3.
Website menyediakan fitur search untuk mempermudah pembeli dalam
mencari produk sesuai dengan kebutuhan dan keinginan, dengan meng-
22
inputkan nama produk, website menampilkan produk-produk sesuai
input-an pembeli.
4.
Pembeli dapat mengklik gambar produk untuk melihat spesifikasi
produk. Setelah itu website menampilkan spesifikasi dari produk dengan
jelas dan rinci.
5.
Pembeli yang berminat untuk membeli produk, perlu memasukan jumlah
produk yang ingin dibeli mengklik tombol “Tambah ke Cart”. Setelah itu
muncul pemberitahuan bahwa produk telah ditambahkan ke keranjang
dan kemudian disediakan dua buah pilihan untuk melanjutkan pembelian
produk lain atau melanjutkan pada menu pembayaran.
6.
Menu pembayaran dalam website menampilkan detail pembelian serta
total yang harus dibayarkan. Halaman ini juga menampilkan beberapa
syarat yang harus dimasukan oleh pembeli meliputi Nama dan alamat
yang ingin dituju. Apabila pembeli memiliki alamat baru yang ingin
dituju, pembeli perlu mengisi informasi mengenai alamat meliputi nama,
alamat, provinsi, kabupaten/kota, serta nomor telepon penerima. Setelah
itu pembeli memilih pihak ketiga (bank) sebagai media untuk
mengirimkan dana sejumlah total belanja.
7.
Pembeli melakukan transfer dana ke rekening yang sudah diberikan
sesuai dengan kesepakatan pada menu pembayaran. Setelah melakukan
transfer pembeli menunggu barang diantarkan oleh pihak ketiga
(ekspedisi pengiriman barang).
1.3.4
Perancangan Use Case Diagram
Perancangan Use Case Diagram ini merupakan gambaran umum yang
menjelaskan tentang interaksi yang terjadi antara aktor (inisiator) sistem sendiri
dengan sistem yang ada. Use Case Diagram digambarkan dengan urutan langkahlangkah yang sederhana. Berikut merupakan Use Case Diagram dari Sistem
Informasi Penjualan Laptop pada website Toko Online Tipro seperti Gambar 3.1.
23
Gambar 3. 1 Use Case Diagram Penjualan Laptop
Gambar 3.1 merupakan Use Case Diagram dari Sistem Informasi
Penjualan Laptop. Terdapat 2 aktor yaitu antara admin dan pembeli yang memiliki
batasan tersendiri. Aktor admin pada Use Case Diagram penjualan laptop dapat
melakukan login, mengubah password, melihat dashboard, menambahkan barang,
mengelola barang, melakukan verifikasi dan melakukan pembayaran. Sedangkan
aktor pembeli dapat melakukan registrasi, melakukan login, melihat barang,
memilih barang, memesan barang, memasukkan barang ke keranjang, mengisikan
alamat baru, melakukan pembayaran, serta menerima verifikasi.
1.3.5
Perancangan Mockup
Perancangan mockup adalah rancangan gambaran sederhana atau desain
dari tampilan website yang dibuat. Mockup dibuat sebagai acuan untuk
memudahkan dalam pengaplikasiannya. Terdapat 7 tampilan mockup yang dibuat,
yaitu sebagai berikut.
1.3.5.1 Mockup Halaman Login
Mockup halaman login merupakan rancangan tampilan atau desain dari
halaman login, baik login sebagai admin maupun sebagai pembeli (member).
Berikut merupakan mockup halaman login dari aplikasi website Toko Online
Tipro Gambar 3.2.
24
Gambar 3. 2 Mockup Halaman Login
Gambar 3.2 merupakan tampilan mockup halaman login dari aplikasi
berbasis website Toko Online Tipro. Tampilan ini merupakan form untuk masuk
sebagai admin maupun sebagai member. Terdapat form login yang berisi field
email address,
field password, checkbox “Remember Me” serta button login.
Checkbox “Remember Me” berfungsi untuk menyimpan data login pembeli
dengan mencentang kolom sebelum menekan button login. Pembeli dapat
mengklik kalimat “Forgot Your Password?”, apabila member melupakan
password-nya dan diarahkan untuk membuat password yang baru.
1.3.5.2 Mockup Halaman Register
Mockup halaman register merupakan rancangan tampilan atau desain
dari halaman register untuk calon pembeli mendaftarkan dirinya sebelum
bergabung menjadi member dalam aplikasi website Toko Online Tipro. Berikut
merupakan mockup halaman register dari website Toko Online Tipro Gambar 3.5.
25
Gambar 3. 3 Mockup Halaman Register
Gambar 3.3 merupakan tampilan mockup halaman register dari aplikasi
berbasis website Toko Online Tipro. Tampilan ini merupakan form untuk
mendaftarkan diri sebagai member. Terdapat form register yang berisi field name,
field email address, field password, field confirm password yang semuanya
harus diisikan serta button register.
1.3.5.3 Mockup Halaman Pembeli
Mockup halaman pembeli merupakan rancangan tampilan atau desain
dari halaman pembeli yanag menampilkan beberapa list barang yang dijual oleh
aplikasi website Toko Online Tipro. Berikut merupakan mockup halaman pembeli
dari aplikasi website Toko Online Tipro Gambar 3.4.
26
Gambar 3. 4 Mockup Halaman Pembeli
Gambar 3.4 merupakan mockup halaman pembeli pada website Toko
Online Tipro. Halaman ini menyediakan fitur cart yang digunakan untuk melihat
detail pembelian member, fitur search yang dapat digunakan untuk mencari
produk dengan memasukan nama produk pada kolom pencaria, fitur logout jika
member ingin keluar dari website Toko Online Tipro serta menyediakan beberapa
produk yang sudah dilengkapi dengan nama, model, kategori, gambar dan button
untuk menambahkan produk ke dalam cart.
27
1.3.5.4 Mockup Halaman Detail Barang
Mockup halaman detail barang merupakan rancangan tampilan atau
desain dari halaman deskripsi mengenai barang yang dipilih. Berikut merupakan
mockup halaman detail barang dari aplikasi website Toko Online Tipro Gambar
3.5.
Gambar 3. 5 Mockup Halaman Detail Barang
Gambar 3.5 merupakan mockup halaman detail barang pada website Toko
Online Tipro. Halaman ini mendeskripsikan secara detail barang yang dipilih
sebelumnya pada halaman pembeli. Terdapat gambar, nama, model, harga serta
deskripsi yang berisikan spesifikasi mengenai barang tersebut. Halaman ini juga
menyediakan fitur cart yang digunakan untuk melihat detail pembelian member
serta fitur logout jika member ingin keluar dari website Toko Online Tipro
1.3.5.5 Mockup Halaman Keranjang
Mockup halaman keranjang merupakan rancangan tampilan atau desain
dari halaman keranjang (cart), ketika member sudah memilih barang yang
dibelinya. Berikut merupakan mockup halaman keranjang dari aplikasi website
Toko Online Tipro Gambar 3.6.
28
Gambar 3. 6 Mockup Halaman Keranjang
Gambar 3.6 merupakan mockup halaman keranjang pada website Toko
Online Tipro. Halaman ini menampilkan barang yang sudah dipilih untuk
disimpan sementara di dalam keranjang (cart). Terdapat gambar, nama, harga,
jumlah beserta total pemesanan. Terdapat pula button edit dan hapus, jika
member ingin mengubah atau menghapus barang yang sudah dipilih sebelumnya.
Selanjutnya, member yang sudah selesai memilih barang diarahkan ke proses
pengisian alamat dan berlanjut ke proses pembayaran, namun jika member masih
ingin memilih barang diarahkan kembali ke halaman pembeli. Halaman ini juga
menyediakan fitur cart yang digunakan untuk melihat detail pembelian member
serta fitur logout jika member ingin keluar dari website Toko Online Tipro
1.3.5.6 Mockup Halaman Pengisian Alamat
Mockup halaman pengisian alamat merupakan rancangan tampilan atau
desain dari halaman pengisian alamat member, agar mengetahui alamat yang
dituju untuk proses pengiriman barang. Berikut merupakan mockup halaman
pengisian alamat dari aplikasi website Toko Online Tipro Gambar 3.7.
29
Gambar 3. 7 Mockup Halaman Pengisian Alamat
Gambar 3.7 merupakan mockup halaman pengisian alamat pada website
Toko Online Tipro. Halaman ini berisi informasi mengenai nama produk, subtotal
dan total pembelajaan produk pada tabel cart. Halaman ini juga berisi beberapa
data yang harus di-inputkan oleh pembeli yakni nama, alamat, provinsi,
kabupaten/kota
dan telepon yang berupa field serta button nama untuk
mengarahkan pembeli pada halaman selanjutnya yakni halaman pembayaran.
Halaman ini juga menyediakan fitur cart yang digunakan untuk melihat detail
pembelian member serta fitur logout jika member ingin keluar dari website Toko
Online Tipro.
1.3.5.7 Mockup Halaman Pembayaran
Mockup halaman pembayaran merupakan rancangan tampilan atau desain
dari halaman pembayaran yang diterima oleh pembeli setelah melengkapi data
30
yang diperlukan untuk proses pengiriman. Berikut merupakan mockup halaman
pembayaran dari aplikasi website Toko Online Tipro Gambar 3.8.
Gambar 3. 8 Mockup Halaman Pembayaran
Gambar 3.8 merupakan mockup halaman pembayaran pada website Toko
Online Tipro. Halaman pembayaran berisikan beberapa syarat yang harus
dimasukan berupa media perantara (bank) yang digunakan untuk mengirimkan
uang serta nama pengirim yang mengirimkan uang tersebut. Terdapat juga
informasi mengenai nama barang, subtotal dan total pembelanjaan barang pada
tabel cart yang harus dibayarkan nantinya. Halaman ini juga menyediakan fitur
cart yang digunakan untuk melihat detail pembelian member serta fitur logout
jika member ingin keluar dari website Toko Online Tipro
1.3.5.8 Mockup Halaman Notifikasi
Mockup halaman notifikasi merupakan rancangan tampilan atau desain
dari halaman notifikasi yang diterima oleh member untuk informasi dan tata cara
oengiri Berikut merupakan mockup halaman notifikasi dari aplikasi website Toko
Online Tipro Gambar 3.9.
31
Gambar 3. 9 Mockup Halaman Notifikasi
Gambar 3.9 merupakan mockup halaman notifikasi yang diterima oleh
member setelah member melakukan serangkaian proses peng-inputan data pada
halaman pembayaran. Terdapat informasi bahwa proses pengisian data telah
berhasil, kemudian dilanjutkan dengan pemberian informasi berupa rekening
tujuan, nomor pesanan dan total pembayaran yang harus di transfer. Halaman ini
memiliki button yakni “Lanjutkan Belanja” untuk mengarahkan pembeli pada
menu home agar pembelian dapat dilakukan lagi apabila diperlukan. Halaman ini
juga menyediakan fitur cart yang digunakan untuk melihat detail pembelian
member serta fitur logout jika member ingin keluar dari website Toko Online
Tipro.
1.3.5.9 Mockup Halaman Dashboard Admin
Mockup halaman dashboard admin merupakan rancangan tampilan atau
desain dari halaman dashboard admin yaitu berupa data-data yang berhubungan
mengenai penjualan barang di website Toko Online Tipro. Berikut merupakan
mockup halaman keranjang pada website Toko Online Tipro Gambar 3.10.
32
Gambar 3. 10 Mockup Halaman Dashboard Admin
Gambar 3.10 merupakan mockup halaman dashboard admin pada
website Toko Online Tipro. Halaman ini berisi data yang ditampilkan dalam
bentuk diagram mengenai data yang diperoleh dari hasil penjualan laptop berbasis
website ini.
1.3.5.10 Mockup Halaman Admin
Mockup halaman admin merupakan rancangan tampilan atau desain dari
halaman admin yang berisikan list barang yang dijual. Berikut merupakan mockup
halaman admin pada website Toko Online Tipro Gambar 3.11.
33
Gambar 3. 11 Mockup Halaman Admin
Gambar 3.11 merupakan mockup halaman admin dari website Toko
Online Tipro. Sebenarnya halaman ini tidak jauh berbeda isinya dengan halaman
pembeli, namun yang membedakan ketika admin mengklik gambar yang
ditampilkan halaman yang dituju selanjutnya adalah halaman kategori dari barang,
yang mana barang tersebut dapat dikelola oleh admin baik di edit ataupun di
hapus. Halaman ini juga menyediakan fitur manage yang digunakan untuk pilihan
(option) mengenai halaman yang dituju seperti halaman category, halaman
dashboard, halaman orders dan halaman product, fitur profil jika admin ingin
melihat atau mengubah tampilan profilnya, serta fitur logout jika member ingin
keluar dari website Toko Online Tipro.
34
1.3.5.11 Mockup Halaman Kategori
Mockup halaman kategori merupakan rancangan tampilan atau desain
dari halaman kategori barang-barang yang dijual. Berikut merupakan mockup
halaman kategori dari aplikasi website Toko Online Tipro Gambar 3.12.
Gambar 3. 12 Mockup Halaman Kategori
Gambar 3.12 merupakan mockup halaman kategori pada website Toko
Online Tipro. Halaman ini menyediakan button search untuk memudahkan
admin dalam proses pencarian nama kategori barang, disedikan button edit dan
hapus
serta button new
category
untuk mengubah, menghapus dan
menambahkan kategori baru. Halaman ini juga menyediakan fitur manage yang
digunakan untuk pilihan (option) mengenai halaman yang dituju seperti halaman
category, halaman dashboard, halaman orders dan halaman product, fitur profil
jika admin ingin melihat atau mengubah tampilan profilnya, serta fitur logout jika
member ingin keluar dari website Toko Online Tipro.
1.3.5.12 Mockup Halaman Edit Kategori
Mockup halaman edit kategori merupakan rancangan tampilan atau
desain dari halaman edit kategori barang yang dipilih pada halaman kategori.
Berikut merupakan mockup halaman edit kategori dari aplikasi website Toko
Online Tipro Gambar 3.13.
35
Gambar 3. 13 Mockup Halaman Edit Kategori
Gambar 3.13 merupakan mockup halaman edit kategori pada website
Toko Online Tipro. Halaman ini berupa form yang dapat diisikan dengan title
dan parent barang, jika ada perubahan kategori serta button update untuk
menyimpan perubahan data. Halaman ini sama seperti halaman membuat kategori
baru namun button yang digunakan adalah button save. Halaman ini juga
menyediakan fitur manage yang digunakan untuk pilihan (option) mengenai
halaman yang dituju seperti halaman category, halaman dashboard, halaman
orders dan halaman product, fitur profil jika admin ingin melihat atau mengubah
tampilan profilnya, serta fitur logout jika member ingin keluar dari website Toko
Online Tipro.
1.3.5.13 Mockup Halaman Order Pesanan
Mockup halaman order pesanan merupakan rancangan tampilan atau
desain dari halaman order pesanan berupa data-data dari para member yang telah
memesan barang di aplikasi website Toko Online Tipro. Berikut merupakan
mockup halaman order pesanan dari aplikasi website Toko Online Tipro Gambar
3.14.
36
Gambar 3. 14 Mockup Halaman Order Pesanan
Gambar 3.14 merupakan mockup halaman order pesanan pada website
Toko Online Tipro. Terdapat button search serta diberikan pilihan (option) untuk
memudahkan admin dalam proses pencarian id dan mengenai status yang sudah
dilakukan oleh para member mengenai orderan yang dipesan. Halaman ini juga
menyediakan fitur manage yang digunakan untuk pilihan (option) mengenai
halaman yang dituju seperti halaman category, halaman dashboard, halaman
orders dan halaman product, fitur profil jika admin ingin melihat atau mengubah
tampilan profilnya, serta fitur logout jika member ingin keluar dari website Toko
Online Tipro.
1.3.5.14 Mockup Halaman Produk
Mockup halaman produk merupakan rancangan tampilan atau desain dari
halaman produk barang yang dijual. Berikut merupakan mockup halaman
pengisian alamat dari aplikasi website Toko Online Tipro Gambar 3.15.
37
Gambar 3. 15 Mockup Halaman Produk
Gambar 3.15 merupakan mockup halaman produk pada website Toko
Online Tipro. Halaman ini berisikan nama, model, kategori dan deskripsi dari
produk yang dijual pada website Toko Online Tipro. Halaman ini menyediakan
fitur checkbox mark jika admin ingin memilih produk yang akan dikelolanya, ada
button search untuk memudahkan admin dalam proses pencarian nama produk
barang, disedikan button edit dan hapus serta button new product untuk
mengubah, menghapus dan menambahkan produk baru. Halaman ini juga
menyediakan fitur manage yang digunakan untuk pilihan (option) mengenai
halaman yang dituju seperti halaman category, halaman dashboard, halaman
orders dan halaman product, fitur profil jika admin ingin melihat atau mengubah
tampilan profilnya, serta fitur logout jika member ingin keluar dari website Toko
Online Tipro.
1.3.5.15 Mockup Halaman Tambah Produk
Mockup halaman tambah produk merupakan rancangan tampilan atau
desain dari halaman tambah produk untuk menambahkan jumlah barang yang
ingin dijual pada aplikasi website Toko Online Tipro. Berikut merupakan mockup
halaman tambah produk dari aplikasi website Toko Online Tipro Gambar 3.16.
38
Gambar 3. 16 Mockup Halaman Tambah Produk
Gambar 3.16 merupakan mockup halaman tambah produk pada website
Toko Online Tipro. Admin dapat menambahkan barang terbaru yang ingin dijual
dan mungkin belum ada pada aplikasi website Toko Online Tipro. Halaman ini
berisikan form berupa nama, model, harga, kategori, berat serta deskripsi dari
barang tersebut. Lalu ada kolom pilih file dimana gambar yang diambil berasal
dari gambar yang disimpan dalam file komputer admin. Setelah mengisikan data,
admin dapat menekan button save untuk menyimpan datanya. Halaman ini juga
menyediakan fitur manage yang digunakan untuk pilihan (option) mengenai
halaman yang dituju seperti halaman category, halaman dashboard, halaman
orders dan halaman product, fitur profil jika admin ingin melihat atau mengubah
tampilan profilnya, serta fitur logout jika member ingin keluar dari website Toko
Online Tipro.
39
1.3.5.16 Mockup Halaman Edit Produk
Mockup halaman edit produk merupakan rancangan tampilan atau desain
dari halaman edit produk untuk mengubah beberapa data barang yang dijual.
Berikut merupakan mockup halaman edit produk dari aplikasi website Toko
Online Tipro Gambar 3.17.
Gambar 3. 17 Mockup Halaman Edit Produk
40
Gambar 3.17 merupakan mockup halaman edit produk pada website Toko
Online Tipro. Sebenarnya halaman ini tidak jauh berbeda isinya dengan halaman
tambah produk, namun yang membedakan hanya gambar yang tersedia pada
halaman ini dimunculkan sedangkan pada halaman tambah produk tidak dan
button yang digunakan adalah button update. Halaman ini juga menyediakan fitur
manage yang digunakan untuk pilihan (option) mengenai halaman yang dituju
seperti halaman category, halaman dashboard, halaman orders dan halaman
product, fitur profil jika admin ingin melihat atau mengubah tampilan profilnya,
serta fitur logout jika member ingin keluar dari website Toko Online Tipro.
1.3.5.17 Mockup Halaman Verifikasi
Mockup halaman verifikasi merupakan rancangan tampilan atau desain
dari halaman verifikasi untuk persetujuan jika member sudah membayar dengan
mengirimkan uang. Berikut merupakan mockup halaman verifikasi dari aplikasi
website Toko Online Tipro Gambar 3.18.
Gambar 3. 18 Mockup Halaman Verifikasi
Gambar 3.18 merupakan mockup halaman verifikasi pada website Toko
Online Tipro. Halaman ini berisi informasi data order pesanan member yang
41
disetujui oleh admin, jika member sudah mengirimkan uangnya, maka status
pembayarannya diubah oleh admin tergantung pilihan seperti menunggu
pembayaran, order disiapkan, paket dikirim dan paket diterima. Halaman ini juga
menyediakan fitur manage yang digunakan untuk pilihan (option) mengenai
halaman yang dituju seperti halaman category, halaman dashboard, halaman
orders dan halaman product, fitur profil jika admin ingin melihat atau mengubah
tampilan profilnya, serta fitur logout jika member ingin keluar dari website Toko
Online Tipro.
3.3
Perancangan Database
Perancangan pada Sistem Informasi Penjualan Laptop ini menggunakan
database sebagai tempat penyimpanan data. Perancangan database ini berbasis
web. Perancangan database menghasilkan skema konseptual tergantung pada
sebuah DBMS yang spesifik. Skema konseptual, harus merinci aplikasi-aplikasi
database yang diketahui. Perancangan database melalui tahapan Physical Data
Model (PDM) merupakan gambaran secara detail basis data dalam bentuk fisik.
Penggambaran rancangan PDM memperlihatkan struktur penyimpanan data yang
benar pada basis data yang digunakan sesungguhnya. PDM website toko Online
ini mempunyai 13 tabel. Tabel-tabel tersebut dihubungkan dengan tabel lainnya
untuk memperlihatkan struktur penyimpanan data yang benar pada basis data
website Toko Online Tipro. Berikut merupakan tabel-tabel yang membangun
struktur PDM Website Toko Online Tipro pada Gambar 3.19.
42
Gambar 3. 19 Database Website Toko Online
Gambar 3.19 merupakan 13 tabel pada Database Website Toko Online.
Tabel tersebut berisi addresses, carts, category_product, categories, fees,
migration, orders, order_details, password_resets, products, provinces,
regencies
dan users. Tabel-tabel tersebut saling berhubungan antara tabel satu
dengan tabel lainnya.
Tabel-tabel pada database tersebut memiliki kolom-kolomnya sendiri
seperti tabel addresses berisikan kolom-kolom id, user_id, name, detail,
regency_id, phone, created_at,
dan update_at. Tabel carts berisikan kolom-
kolom id, user_id, product_id, quantity, created_at, dan update_at. Tabel
category_product
created_at,
berisikan kolom-kolom id, product_id, category_id,
dan update_at. Tabel categories berisikan kolom-kolom id,
tittle, parent_id, created_at,
kolom
id,
created_at,
migration
origin,
dan update_at. Tabel fees berisikan kolom-
destination,
courier,
service,
dan update_at. Tabel migration
weight,
cost,
berisikan kolom-kolom
dan batch. Tabel orders berisikan kolom-kolom id, order_id,
product_id, address_id, status, bank, sender, total_payment, created_at,
dan update_at. Tabel password_resets berisikan kolom-kolom email, token,
dan created_at. Tabel products berisikan kolom-kolom id, name, photo,
model,
price,
provinces
created_at,
update_at, description
dan weight. Tabel
berisikan kolom-kolom id, name, created_at dan update_at. Tabel
43
users
berisikan kolom-kolom id, name, email, remember_token, email,
created_at, update_at
dan role.
BAB IV
PEMBAHASAN
Bab IV merupakan pembahasan dari laporan Praktikum Pemrograman
Internet. Laporan Bab IV membahas tentang kode program pada model, view,
controller dan screenshoot tampilan website yang dipraktikan pada mata kuliah
Praktikum Pemrograman Internet.
4.1
Source Code
Sistem informasi Toko Online Tipro memiliki memiliki source code
yang terdiri dari model, controller dan view. Berikut merupakan penjelasan dari
source code dari program website Toko Online Tipro.
4.2.1
Controller
Website Toko Online Tipro terdiri dari banyak controller. Berikut
merupakan penjelasan dari semua controllerl yang ada pada website Toko Online
Tipro.
4.2.1.1 Controller Address Controller
Controller AddressController merupakan salah satu dari controller
website Toko Online Tipro. Berikut merupakan sintaks dari Controller
AddressController
seperti pada Kode Program 4.1.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Requests;
use App\Http\Controllers\Controller;
use App\Regency;
class AddressController extends Controller
{
public function regencies(Request $request)
{
$this->validate($request, [
'province_id'=>'required|exists:provinces,id'
]);
return Regency::where('province_id', $request-
44
45
>get('province_id'))->get();
}
}
Kode Program 4. 1 Controller AddressController
Kode
Program
AddressController.
mengambil
4.1
merupakan
sintaks
Controller AddressController
permintaan
address,
memparsing
dari
ini
Controller
berguna
permintaan
untuk
address,
menginisialisasi, memanggil model dan kemudian mengambil responnya, dan
mengirimkannya ke View. Controller AddressController berguna untuk
memvalidasi status kabupaten dan provinsi pada fungsi regencies.
4.2.1.2 Controller Cart Controller
Controller CartController merupakan salah satu dari controller
website Toko Online Tipro. Berikut merupakan sintaks dari Controller
CartController
seperti pada Kode Program 4.2.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Requests;
use App\Product;
use Session;
use Auth;
use App\Support\CartService;
use Flash;
use App\Cart;
class CartController extends Controller
{
protected $cart;
public function __construct(CartService $cart)
{
$this->cart = $cart;
}
public function removeProduct(Request $request, $product_id)
{
$cart = $this->cart->find($product_id);
46
if (!$cart) return redirect('cart');
{
Flash::success($cart['detail']['name'] .' Berhasil
dihapus dari Cart.');
if (Auth::check()) {
$cart = Cart::firstOrCreate([
'product_id'=>$product_id,
'user_id'=>$request->user()->id
]);
$cart->delete();
return redirect('cart');
}else{
$cart = $request->cookie('cart', []);
unset($cart[$product_id]);
return redirect('cart')->withCookie(cookie()>forever('cart', $cart));
}
}
}
public function addProduct(Request $request)
{
$this->validate($request, [
'product_id' => 'required|exists:products,id',
'quantity' => 'required|integer|min:1'
]);
$product = Product::find($request->get('product_id'));
$quantity = $request->get('quantity');
Session::flash('flash_product_name', $product->name);
if (Auth::check()) {
$cart = Cart::firstOrCreate([
'product_id'=> $product->id,
'user_id'=>$request->user()->id
]);
$cart->quantity += $quantity;
$cart->save();
return redirect('catalogs');
} else {
$cart = $request->cookie('cart', []);
if (array_key_exists($product->id, $cart)) {
$quantity += $cart[$product->id];
}
$cart[$product->id] = $quantity;
return redirect('catalogs')->withCookie(cookie()>forever('cart', $cart));
}
}
public function show(){
return view('carts.index');
}
public function changeQuantity(Request $request,
$product_id)
47
{
$this>validate($request,['quantity'=>'required|integer|min:1']);
$quantity=$request->get('quantity');
$cart = $this->cart->find($product_id);
if (!$cart) return redirect('cart');
{
\Flash::success('Jumlah untuk ' .
$cart['detail']['name'] . ' berhasil dirubah.');
if (Auth::check()) {
$cart= Cart::firstOrCreate(['user_id'=>$request>user()->id, 'product_id'=>$product_id]);
$cart->quantity = $quantity;;
$cart->save();
}else{
$cart= $request->cookie('cart',[]);
$cart[$product_id] = $quantity;
return redirect('cart')->withCookie(cookie()>forever('cart', $cart));
}
}
}
}
Kode Program 4. 2 Controller CartController
Kode Program 4.2 merupakan sintaks dari Controller CartController.
Controller CartController ini berguna untuk mengambil permintaan cart,
memparsing permintaan cart, menginisialisasi, memanggil model dan kemudian
mengambil responnya, dan mengirimkannya ke View. Fungsi removeProduct
berguna untuk menghapus data produk yang sudah masuk ke dalam cart
(keranjang belanja). Fungsi addProduct berguna untuk menambah data belanja
pada cart. Fungsi show untuk menampilkan atau me – return ke view
cart.index.
Fungsi
changeQuantity
berguna untuk mengubah jumlah
belanjaan pada cart sebelum pembayaran.
4.2.1.3 Controller Catalogs Controller
Controller CatalogsController merupakan salah satu dari controller
website Toko Online Tipro. Berikut merupakan sintaks dari Controller
CatalogsController
seperti pada Kode Program 4.3.
<?php
namespace App\Http\Controllers;
48
use Illuminate\Http\Request;
use App\Http\Requests;
use App\Product;
use App\Category;
class CatalogsController extends Controller
{
public function index(Request $request)
{
// return view('berandauser');
$q = $request->get('q');
if($request->has('cat')) {
$cat = $request->get('cat');
$category = Category::findOrFail($cat);
//we use to get product form curret category and
its child
$products = Product::whereIn('id', $category>related_products_id)->where('name','LIKE', '%'.$q.'%');
}else{
$products =Product::where('name',
'LIKE','%'.$q.'%');
}
if ($request->has('sort')) {
$sort = $request->get('sort');
$order = $request->has('order') ? $request>get('order') : 'asc';
$filed = in_array($sort, ['price','name']) ?
$request->get('sort') : 'price';
$proucts = $products->orderBy($filed, $order);
}
$products = $products->paginate(4);
return view('catalogs.index', compact('products', 'q',
'cat' , 'selected_category', 'sort', 'order', 'category'));
}
}
Kode Program 4. 3 Controller CatalogsController
Kode
Program
CatalogsController.
mengambil
4.3
merupakan
sintaks
dari
Controller
Controller CatalogsController ini berguna untuk
permintaan
catalog,
memparsing
permintaan
catalog,
menginisialisasi, memanggil model dan kemudian mengambil responnya, dan
mengirimkannya ke View. Fungsi index pada Controller CatalogsController
berguna untuk memilah kategori dari produk – produk yang tersedia dan lewat
kategori pun bisa langsung melakukan order dan memasukkannya ke cart.
49
4.2.1.4 Controller Categories Controller
Controller CategoriesController merupakan salah satu dari controller
website Toko Online Tipro. Berikut merupakan sintaks dari Controller
CategoriesController
seperti pada Kode Program 4.4.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Requests;
use App\Category;
class CategoriesController extends Controller
{
public function __construct()
{
$this->middleware('auth');
$this->middleware('role:admin');
}
public function index(Request $request)
{
$q = $request->get('q');
$categories = Category::where('title','LIKE',
'%'.$q.'%')->orderBy('title')->paginate(5);
return view('categories.index', compact('categories',
'q'));
}
public function create()
{
return view('categories.create');
}
public function store(Request $request)
{
$this->validate($request, [
'title'=>'required|string|max:255|unique:categories',
'parent_id'=>'exists:categories,id'
]);
Category::create($request->all());
\Flash::success($request->get('title') . ' category
saved');
return redirect()->route('categories.index');
}
public function show($id)
{
//
}
50
public function edit($id)
{
$category = Category::findOrFail($id);
return view('categories.edit', compact('category'));
}
public function update(Request $request, $id)
{
$category = Category::findOrFail($id);
$this->validate($request,[
'title'=>'required|string|max:255|unique:categories,title,' .
$category->id,
'parent_id'=>'exists:categories,id'
]);
$category->update($request->all());
\Flash::success($request->get('title') . ' category
update.' );
return redirect()->route('categories.index');
}
public function destroy($id)
{
Category::find($id)->delete();
\Flash::success('Category Deleted');
return redirect()->route('categories.index');
}
}
Kode Program 4. 4 Controller CategoriesController
Kode
Program
CategoriesController.
mengambil
permintaan
4.4
merupakan
sintaks
dari
Controller
Controller CategoriesController berguna untuk
category,
memparsing
permintaan
category,
menginisialisasi, memanggil model dan kemudian mengambil responnya, dan
mengirimkannya ke View. Fungsi create berguna untuk membuat kategori.
Fungsi store berguna untuk memvalidasi input-an kategori baru. Fungsi update
dan edit berguna untuk menguba kategori yang ada dan harus unique. Fungsi
destroy
berguna untuk menghapus kategori.
4.2.1.5 Controller Checkout Controller
Controller CheckoutController merupakan salah satu dari controller
website Toko Online Tipro. Berikut merupakan sintaks dari Controller
CheckoutController
seperti pada Kode Program 4.5.
51
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use
use
use
use
use
use
use
use
use
use
use
use
App\Http\Requests;
App\Http\Controllers\Controller;
App\Http\Requests\CheckoutLoginRequest;
App\Http\Requests\CheckoutAddressRequest;
Auth;
Illuminate\Support\MessageBag;
App\User;
App\Address;
App\Product;
App\Support\CartService;
App\Order;
App\OrderDetail;
class CheckoutController extends Controller
{
protected $cart;
public function __construct(CartService $cart)
{
$this->cart = $cart;
$this->middleware('checkout.have-cart', [
'only' => ['login', 'postLogin',
'address', 'postAddress',
'payment', 'postPayment']
]);
$this->middleware('checkout.login-step-done', [
'only' => ['address', 'postPayment',
'payment', 'postPayment']
]);
$this->middleware('checkout.address-step-done', [
'only' => ['payment', 'postPayment']
]);
$this->middleware('checkout.payment-step-done', [
'only' => ['success']
]);
}
public function login()
{
if (Auth::check()) {
return redirect('/checkout/address');
} else {
return view('checkout.login');
}
}
public function postLogin(CheckoutLoginRequest $request)
{
52
$email = $request->get('email');
$password = $request->get('checkout_password');
$is_guest = $request->get('is_guest') > 0;
if ($is_guest) {
return $this->guestCheckout($email);
}
return $this->authenticatedCheckout($email, $password);
}
protected function guestCheckout($email)
{
if ($user = User::where('email', $email)->first()) {
if ($user->hasPassword()) {
$errors = new MessageBag();
$errors->add('checkout_password', 'Alamat email
"' . $email . '" sudah terdaftar, silahkan masukan password.');
return redirect('checkout/login')>withErrors($errors)
->withInput(compact('email') + ['is_guest'
=> 0]);
}
// show view to request new password
session()->flash('email', $email);
return view('checkout.reset-password');
}
session(['checkout.email' => $email]);
return redirect('checkout/address');
}
protected function authenticatedCheckout($email, $password)
{
if (!Auth::attempt(['email' => $email, 'password' =>
$password])) {
$errors = new MessageBag();
$errors->add('email', 'Data user yang dimasukan
salah');
return redirect('checkout/login')
->withInput(compact('email', 'password') +
['is_guest' => 0])
->withErrors($errors);
}
$deleteCartCookie = $this->cart->merge();
return redirect('checkout/address')>withCookie($deleteCartCookie);
}
public function address()
{
return view('checkout.address');
}
public function postAddress(CheckoutAddressRequest $request)
{
if (Auth::check()) return $this-
53
>authenticatedAddress($request);
return $this->guestAddress($request);
}
protected function
authenticatedAddress(CheckoutAddressRequest $request)
{
$address_id = $request->get('address_id');
session()->forget('checkout.address');
if ($address_id == 'new-address') {
$this->saveAddressSession($request);
} else {
session(['checkout.address.address_id' =>
$address_id]);
}
return redirect('checkout/payment');
}
protected function guestAddress(CheckoutAddressRequest
$request)
{
$this->saveAddressSession($request);
return redirect('checkout/payment');
}
protected function saveAddressSession(CheckoutAddressRequest
$request)
{
session([
'checkout.address.name' => $request->get('name'),
'checkout.address.detail' => $request>get('detail'),
'checkout.address.province_id' => $request>get('province_id'),
'checkout.address.regency_id' => $request>get('regency_id'),
'checkout.address.phone' => $request->get('phone')
]);
}
public function payment()
{
return view('checkout.payment');
}
public function postPayment(Request $request)
{
$this->validate($request, [
'bank_name' => 'required|in:' .
implode(',',array_keys(config('bank-accounts'))),
'sender' => 'required'
]);
session([
'checkout.payment.bank' => $request>get('bank_name'),
'checkout.payment.sender' => $request->get('sender')
]);
54
if (Auth::check()) return $this>authenticatedPayment($request);
return $this->guestPayment($request);
}
protected function authenticatedPayment(Request $request)
{
$user = Auth::user();
$bank = session('checkout.payment.bank');
$sender = session('checkout.payment.sender');
$address = $this->setupAddress($user,
session('checkout.address'));
$order = $this->makeOrder($user->id, $bank, $sender,
$address, $this->cart->details());
session()->forget('checkout');
$this->cart->clearCartRecord();
return redirect('checkout/success')>with(compact('order'));
}
protected function guestPayment(Request $request)
{
$user = $this->setupCustomer(session('checkout.email'),
session('checkout.address.name'));
$bank = session('checkout.payment.bank');
$sender = session('checkout.payment.sender');
$address = $this->setupAddress($user,
session('checkout.address'));
$order = $this->makeOrder($user->id, $bank, $sender,
$address, $this->cart->details());
session()->forget('checkout');
$deleteCartCookie = $this->cart->clearCartCookie();
return redirect('checkout/success')>with(compact('order'))
->withCookie($deleteCartCookie);
}
protected function setupCustomer($email, $name)
{
$user = User::create(compact('email', 'name'));
$user->role = 'customer';
$user->save();
return $user;
}
protected function setupAddress(User $customer,
$addressSession)
{
if (Auth::check() &&
isset($addressSession['address_id'])) {
return Address::find($addressSession['address_id']);
}
return Address::create([
'user_id' => $customer->id,
55
'name' => $addressSession['name'],
'detail' => $addressSession['detail'],
'regency_id' => $addressSession['regency_id'],
'phone' => $addressSession['phone']
]);
}
protected function makeOrder($user_id, $bank, $sender,
Address $address, $cart)
{
$status = 'waiting-payment';
$address_id = $address->id;
$order = Order::create(compact('user_id', 'address_id',
'bank', 'sender', 'status'));
foreach ($cart as $product) {
OrderDetail::create([
'order_id' => $order->id,
'address_id' => $address->id,
'product_id' => $product['id'],
'quantity' => $product['quantity'],
'price' => $product['detail']['price'],
'fee' => Product::find($product['id'])>getCostTo($address->regency_id)
]);
}
return Order::find($order->id);
}
public function success()
{
return view('checkout.success');
}
}
Kode Program 4. 5 Controller CheckoutController
Kode Program 4.5 merupakan sintaks dari CheckoutController. Kode
program ini berguna untuk mengetahui langkah-langkah pada cart. Langkahlangkah yang terdapat pada CheckoutController yaitu login, input alamat, dan
pembayaran.
4.2.1.6 Controller Home Controller
Controller HomeController merupakan salah satu dari controller
website Toko Online Tipro. Berikut merupakan sintaks dari Controller
HomeController
seperti pada Kode Program 4.6.
<?php
namespace App\Http\Controllers;
use App\Http\Requests;
56
use Illuminate\Http\Request;
class HomeController extends Controller
{
public function __construct()
{
$this->middleware('auth', ['only'=>['index',
'viewOrders']]);
$this->middleware('role:customer',
['only'=>'viewOrders']);
}
public function index()
{
return view('home');
}
public function viewOrders(Request $request)
{
$q = $request->get('q');
$status = $request->get('status');
$orders = auth()->user()->orders()
->where('id', 'LIKE', '%'.$q.'%')
->where('status', 'LIKE', '%'.$status.'%')
->orderBy('updated_at')
->paginate(5);
return view('customer.view-orders')>with(compact('orders', 'q', 'status'));
}
}
Kode Program 4. 6 Controller HomeController
Kode Program 4.6 merupakan sintaks dari HomeController. Kode
program ini berguna untuk mengambil permintaan home, memparsing permintaan
home, menginisialisasi, memanggil model dan kemudian mengambil responnya,
dan mengirimkannya ke view. Home berfungsi untuk menamilkan produk di menu
home dan juga bisa klik like untuk laptop yang disukai agar bisa disimpan dan kita
mudah mencari laptop yang disukai.
4.2.1.7 Controller Orders Controller
Controller OrdersController merupakan salah satu dari controller
website Toko Online Tipro. Berikut merupakan sintaks dari Controller
HomeController
seperti pada Kode Program 4.7.
<?php
namespace App\Http\Controllers;
57
use Illuminate\Http\Request;
use App\Http\Requests;
use App\Http\Controllers\Controller;
use App\Order;
class OrdersController extends Controller
{
public function __construct()
{
$this->middleware('auth');
$this->middleware('role:admin');
}
public function index(Request $request)
{
$status = $request->get('status');
$orders = Order::where('status', 'LIKE',
'%'.$status.'%');
if ($request->has('q')) {
$q = $request->get('q');
$orders = $orders->where(function($query) use ($q) {
$query->where('id', $q)
->orWhereHas('user', function($user) use ($q) {
$user->where('name', 'LIKE', '%'.$q.'%');
});
});
}
$orders = $orders->orderBy( 'updated_at', 'desc')>paginate(7);
return view('orders.index', compact('orders', 'status',
'q'));
}
public function edit($id)
{
$order = Order::find($id);
return view('orders.edit')->with(compact('order'));
}
public function update(Request $request, $id)
{
$order = Order::find($id);
$this->validate($request, ['status'=>'required|in:'.
implode(',',Order::allowedStatus())]);
$order->update($request->only('status'));
\Flash::success($order->padded_id.' Berhasil
Tersimpan');
return redirect()->route('orders.index');
}
}
Kode Program 4. 7 Controller OrderController
58
Kode
Program
OrderController.
4.7
merupakan
sintaks
dari
Controller
Controller OrderController berguna untuk mengambil
permintaan order, memparsing permintaan order, menginisialisasi, memanggil
model dan kemudian mengambil responnya, dan mengirimkannya ke View.
Fungsi store berguna untuk membuat order baru. Fungsi update dan edit
berguna untuk mengubah orderan.
4.2.1.8 Controller Products Controller
Controller ProductsController merupakan salah satu dari controller
website Toko Online Tipro. Berikut merupakan sintaks dari Controller
HomeController
seperti pada Kode Program 4.8.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Requests;
use App\Product;
use Symfony\Component\HttpFoundation\file\UploadedFile;
use File;
class ProductsController extends Controller
{
public function __construct()
{
$this->middleware('auth');
$this->middleware('role:admin');
}
public function deletePhoto($filename)
{
$path = public_path().DIRECTORY_SEPARATOR. 'img'.
DIRECTORY_SEPARATOR. $filename;
}
protected function savePhoto(UploadedFile $photo)
{
$filename = str_random(40). '.'. $photo>guessClientExtension();
$destentionPath =
public_path().DIRECTORY_SEPARATOR.'img';
$photo->move($destentionPath, $filename);
return $filename;
}
public function index(Request $request)
{
59
$q= $request->get('q');
$products= Product::where('name', 'LIKE',
'%'.$q.'%')->orderBy('model', 'LIKE', '%'.$q.'%')>orderBy('name')->paginate(5);
return view('products.index',
compact('products','q'));
}
public function create()
{
return view('products.create');
}
public function store(Request $request)
{
$this->validate($request,[
'name' =>'required|unique:products',
'model'=>'required',
'photo'=>'mimes:jpeg,png,jpg|max:10240',
'price'=>'required|numeric|min:1000',
'weight'=>'required|numeric|min:1'
]);
$data = $request->only('name', 'model', 'price',
'weight');
if ($request->hasFile('photo'))
{
$data['photo'] = $this->savePhoto($request>file('photo'));
}
$product = Product::create($data);
$product->categories()->sync($request>get('category_lists'));
\Flash::success($product->name. ' saved.');
return redirect()->route('products.index');
}
public function show($id)
{
}
public function edit($id)
{
$product = Product::findOrFail($id);
return view('products.edit', compact('product'));
}
public function update(Request $request, $id)
{
$product = Product::findOrFail($id);
$this->validate($request, [
'name'=>'required|unique:products,name,'.$product>id,
'model'=>'required',
'photo'=>'mimes:jpeg,jpg,png|max:10240',
60
'price'=>'required|numeric|min:1000',
'weight'=>'required|numeric|min:1'
]);
$data = $request->only('name', 'model', 'price',
'weight');
if ($request->hasFile('photo')) {
$data['photo'] = $this->savePhoto($request>file('photo'));
if ($product->photo !== '') $this>deletePhoto($product->photo);
}
$product->update($data);
if (count($request->get('category_lists')) > 0) {
$product->categories()->sync($request>get('category_lists'));
}else{
$product->categories()->detach();
}
\Flash::success($product->name. ' update.');
return redirect()->route('products.index');
}
public function destroy($id)
{
$product= Product::find($id);
if ($product->photo !=='') $this->deletePhoto($product>photo);
$product->delete();
\Flash::success('Product Deleted.');
return redirect()->route('products.index');
}
}
Kode Program 4. 8 Controller ProductsController
Kode
Program
ProductsCOntoller.
4.8
merupakan
sintaks
dari
Controller
Controller ProductsContoller berguna untuk mengambil
permintaan produk, memparsing permintaan produk, menginisialisasi, memanggil
model dan kemudian mengambil responnya, dan mengirimkannya ke View.
Fungsi store berguna untuk menambahkan produk baru. Fungsi update dan
edit
berguna untuk mengedit produk yang ada di website Toko Online Tipro.
Fungsi destroy beguna unuk menghapus produk.
61
4.2.1.9 Controller Users Controller
Controller UserController merupakan salah satu dari controller
website Toko Online Tipro. Berikut merupakan sintaks dari Controller
UserController
seperti pada Kode Program 4.9.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Requests;
use App\User;
use Auth;
class UsersController extends Controller
{
public function __construct()
{
$this->middleware('auth');
$this->middleware('role:admin');
}
public function edit()
{
return view('profile.edit');
}
public function update(Request $request)
{
$this->validate($request, [
'name'=>'alpha|max:20',
'email'=>'max:20',
'password'=>'max:20'
]);
Auth::user()->update([
'name'=>$request->input('name'),
'email'=>$request->input('email'),
'password'=>$request->input('password'),
]);
\Flash::success('Profile has been updated');
return redirect()->route('profile.edit');
}
}
Kode Program 4. 9 Controller UsersController
Kode Program 4.9 merupakan sintaks dari controller UserController.
Controller UserController untuk mengupdate password lama, password baru
dan konfirmasi password yang kemudian disimpan pada database.
62
4.2.2
Model
Website Toko Online Tipro terdiri dari banyak model. Berikut merupakan
penjelasan dari semua model yang ada pada website Toko Online Tipro.
4.2.2.1 Address
Model Address merupakan salah satu dari model website Toko Online
Tipro. Berikut merupakan sintaks dari Model Address seperti pada Kode Program
4.10.
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Address extends Model
{
protected $fillable = ['user_id', 'name', 'detail',
'regency_id', 'phone'];
public function user()
{
return $this->belongsTo('App\User');
}
public function regency()
{
return $this->belongsTo('App\Regency');
}
}
Kode Program 4. 10 Address Model
Kode Program 4.10 merupakan sintaks dari address model. Model
address mewakili struktur data address user. Model berisi fungsi-fungsi yang
membantu dalam pengelolaan database seperti memasukkan data ke database,
pembaruan data dan lain-lain. Fungsi protected $fillable digunakan agar
controller dapat mengakses dan memasukkan data berupa id, user_id, name,
detail,
regency_id
dan phone. Fungsi
public
function
regency
berguna untuk menghubungkan antara tabel addresses dengan tabel regencys.
Fungsi public function user berguna untuk menghubungkan antara tabel
addresses
dengan tabel users.
63
4.2.2.2 Cart
Model Cart merupakan salah satu dari model website Toko Online Tipro.
Berikut merupakan sintaks dari Model Cart seperti pada Kode Program 4.11.
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Cart extends Model
{
protected $fillable = ['user_id', 'product_id', 'quantity'];
public function user()
{
return $this->belongsTo('App\User');
}
public function product()
{
return $this->belongsTo('App\Product');
}
}
Kode Program 4. 11 Cart Model
Kode Program 4.11 merupakan sintaks dari cart model. Model cart
mewakili struktur data belanja user. Model berisi fungsi-fungsi yang membantu
dalam pengelolaan database seperti memasukkan data ke database, pembaruan
data dan lain-lain. Fungsi protected $fillable digunakan agar controller
dapat mengakses dan memasukkan data berupa id, user_id, product_id,
dan
quantity.
Fungsi
public
function
user
berguna
menghubungkan antara tabel carts dengan tabel users. Fungsi
function product
untuk
public
berguna untuk menghubungkan antara tabel carts dengan
tabel products.
4.2.2.3 Category
Model Category merupakan salah satu dari model website Toko Online
Tipro. Berikut merupakan sintaks dari Model Category seperti pada Kode
Program 4.12.
<?php
64
namespace App;
use Illuminate\Database\Eloquent\Model;
class Category extends Model
{
protected $fillable = ['title', 'parent_id'];
public function childs()
{
return $this->hasMany('App\Category','parent_id');
}
public function parent()
{
return $this->belongsTo('App\Category', 'parent_id');
}
public function products()
{
return $this->belongsToMany('App\Product');
}
public static function boot()
{
parent::boot();
static::deleting(function ($model){
//removing relations to products
$model->products()->detach();
foreach ($model->childs as $child) {
$child->parent_id = '';
$child->save();
}
});
}
public function getRelatedProductsIdAttribute()
{
$result = $this->products->lists('id')->toArray();
foreach ($this->childs as $child) {
$result = array_merge($result, $child>related_products_id);
}
return $result;
}
public function scopeNoParent($query)
{
return $this->where('parent_id','');
}
public function getTotalProductsAttribute()
{
return Product::whereIn('id', $this>related_products_id)->count();
}
65
public function hasParent()
{
return $this->parent_id >0;
}
public function hasChild()
{
return $this->childs()->count() >0;
}
}
Kode Program 4. 12 Categories Model
Kode Program 4.12 merupakan sintaks dari categories model. Model
categories mewakili struktur data jenis perangkat apakah laptop atau notebook.
Model berisi fungsi-fungsi yang membantu dalam pengelolaan database seperti
memasukkan data ke database, pembaruan data dan lain-lain. Fungsi protected
$fillable
digunakan agar controller dapat mengakses dan memasukkan data
berupa id, title, dan parent_id. Fungsi public function product
berguna untuk menghubungkan antara tabel categories dengan tabel products.
4.2.2.4 Chart
Chart merupakan salah satu model yang digunakan untuk membantu
contoroller Home untuk menampilkan statistic penjualan. Berikut merupakan
sintaks dari Model Chart seperti pada Kode Program 4.13.
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Stock extends Model
{
protected $fillable = ['order_id', 'product_id', 'quantity'];
}
Kode Program 4. 13 Chart Model
Kode Program 4.13 merupakan sintaks dari Chart model. Model Chart
berisi fungsi-fungsi class stock yang mem-protected variable fillable dengan
array order_id, produk_id dan quantity.
66
4.2.2.5 Fee
Model Fee merupakan salah satu dari model website Toko Online Tipro.
Berikut merupakan sintaks dari Model Fee seperti pada Kode Program 4.14.
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
use Carbon\Carbon;
use RajaOngkir;
use App\Product;
class Fee extends Model
{
protected $fillable = ['origin', 'destination', 'courier',
'service', 'weight', 'cost', 'update_at'];
public static function getCost($origin_id, $destination_id,
$weight, $courier, $service)
{
$free = static::firstOrCreate([
'origin'=>$origin_id,
'destination'=>$destination_id,
'weight'=>$weight,
'courier'=>$courier,
'service'=>$service
]);
if ($free->haveCost() && !$free->isNeedUpdate()) return
$free->cost;
return $free->populateCost();
}
protected function haveCost()
{
return $this->cost > 0;
}
protected function isNeedUpdate()
{
return $this->updated_at->diffInDays(Carbon::today()) >
7;
}
public function populateCost()
{
$params = $this->toArray();
$costs = RajaOngkir::Cost($params)->get();
$cost = 0;
67
foreach ($costs[0]['costs'] as $result) {
if ($result['service'] == $this->service) {
$cost = $result['cost'][0]['value'];
break;
}
}
$cost = $cost > 0 ? $cost :
config('rajaongkir.fallback_fee');
//update cost & force update 'update_at' field
$this->update(['cost' => $cost,
'updated_at'=>Carbon::today()]);
return $cost;
}
}
Kode Program 4. 14 Fees Model
Kode Program 4.14 merupakan sintaks dari Fees model. Model Fees
mewakili struktur data pembayaran. Model berisi fungsi-fungsi yang membantu
dalam pengelolaan database seperti memasukkan data ke database, pembaruan
data dan lain-lain. Fungsi protected $fillable digunakan agar controller
dapat mengakses dan memasukkan data berupa id, origin, destination,
courier, service, weight,
dan cost.
4.2.2.6 Order
Model Order merupakan salah satu dari model website Toko Online
TIipro. Berikut merupakan sintaks dari Model Order seperti pada Kode Program
4.15.
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Order extends Model
{
protected $fillable = ['id', 'user_id', 'address_id',
'bank', 'sender', 'status', 'total_payment'];
public function user()
{
return $this->belongsTo('App\User');
}
public function details()
{
return $this->hasMany('App\OrderDetail');
}
68
public function address()
{
return $this->belongsTo('App\Address');
}
public function refreshTotalPayment()
{
$total_payment = 0;
foreach ($this->details as $detail) {
$total_payment += $detail->total_price;
}
$this->total_payment = $total_payment;
$this->save();
}
public function getPaddedIdAttribute()
{
return str_pad($this->id, 6, 0, STR_PAD_LEFT);
}
public static function statusList()
{
return [
'waiting-payment'=>'Menunggu Pembayaran',
'packaging'=>'Order disiapkan',
'sent'=>'Paket dikirim',
'finised'=>'Paket Diterima'
];
}
public function getHumanStatusAttribute()
{
return static::statusList()[$this->status];
}
public static function allowedStatus()
{
return array_keys(static::statusList());
}
}
Kode Program 4. 15 Orders Model
Kode Program 4.15 merupakan sintaks dari Orders model. Model Orders
mewakili struktur data order. Model berisi fungsi-fungsi yang membantu dalam
pengelolaan database seperti memasukkan data ke database, pembaruan data dan
lain-lain. Fungsi protected
$fillable
digunakan agar controller dapat
mengakses dan memasukkan data berupa id, user_id, address_id, status,
bank,
sender,
dan total_payment. Fungsi public function
user
berguna untuk menghubungkan antara tabel orders dengan tabel users. Fungsi
public function details
berguna untuk menghubungkan antara tabel orders
69
dengan tabel orderdetails. Fungsi public function address berguna untuk
menghubungkan antara tabel orders dengan tabel addresses.
4.2.2.7 Order Detail
Model OrderDetail merupakan salah satu dari model website Toko
Online Tipro. Berikut merupakan sintaks dari Model OrderDetail seperti pada
Kode Program 4.16.
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class OrderDetail extends Model
{
protected $table = 'order_details';
protected $fillable = ['id', 'order_id', 'product_id',
'quantity', 'price', 'fee', 'total_price'];
public function product()
{
return $this->belongsTo('App\Product');
}
public function order()
{
return $this->belongsTo('App\Order');
}
public static function boot()
{
parent::boot();
static::saved(function($model) {
if ($model->total_price <1 ) {
$model->refreshTotalPrice();
}
$model->order->refreshTotalPayment();
});
}
public function refreshTotalPrice()
{
$total_price = ($this->price + $this->fee) * $this>quantity;
$this->total_price = $total_price;
$this->save();
}
}
Kode Program 4. 16 Orders Details Model
70
Kode Program 4.16 merupakan sintaks dari OrderDetails model. Model
OrderDetails mewakili struktur data detail order. Model berisi fungsi-fungsi yang
membantu dalam pengelolaan database seperti memasukkan data ke database,
pembaruan data dan lain-lain. Fungsi protected $fillable digunakan agar
controller dapat mengakses dan memasukkan data berupa id, order_id,
product_id, quantity, price, fee,
function user
users.
tabel
dan total_price.
Fungsi public
berguna untuk menghubungkan antara tabel orders dengan
Fungsi
public
function
details
berguna
untuk
menghubungkan antara tabel orders dengan tabel orderdetails. Fungsi
public function address
berguna untuk menghubungkan antara tabel orders
dengan tabel addresses.
4.2.2.8 Product
Model Product merupakan salah satu dari model website Toko Online
Tipro. Berikut merupakan sintaks dari Model Product seperti pada Kode Program
4.17.
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
use App\Fee;
class Product extends Model
{
protected $appends = ['photo_path'];
protected $fillable = ['name', 'photo', 'model', 'prince',
'weight'];
public function categories()
{
return $this->belongsToMany('App\Category');
}
public function getCategoryListsAttribute()
{
if ($this->categories()->count() < 1) {
return null;
}
return $this->categories->lists('id')->all();
71
}
public static function boot()
{
parent::boot();
static::deleting(function($model){
$model->categories()->detach();
$model->cart()->detach();
});
}
public function getPhotoPathAttribute()
{
if ($this->photo !=='') {
return url ('/img/'. $this->photo);
}else{
return 'http://placehold.it/850x618';
}
}
public function carts()
{
return $this->hasMany('App\Cart');
}
public function getCostTo($destination_id)
{
return Fee::getCost(
config('rajaongkir.origin'),
$destination_id,
$this->weight,
config('rajaongkir.courier'),
config('rajaongkir.service')
);
}
}
Kode Program 4. 17 Products Model
Kode Program 4.17 merupakan sintaks dari Product model. Model
Product mewakili struktur data produk yang dijual di Toko Online Tipro. Model
berisi fungsi - fungsi yang membantu dalam pengelolaan database seperti
memasukkan data ke database, pembaruan data dan lain-lain. Data yang
dimasukkan berupa id, name, photo, model, price, dan weight.
4.2.2.9 Province
Model Province merupakan salah satu dari model website Toko Online
Tipro. Berikut merupakan sintaks dari Model Province seperti pada Kode
Program 4.18.
72
<?php
namespace App;
use RajaOngkir;
use Illuminate\Database\Eloquent\Model;
class Province extends Model
{
protected $fillable = ['id', 'name'];
public static function populate(){
foreach (RajaOngkir::Provinsi()->all() as $province) {
$model =
static::firstOrNew(['id'=>$province['province_id']]);
$model->name = $province['province'];
$model->save();
}
}
}
Kode Program 4. 18 Province Model
Kode Program 4.18 merupakan sintaks dari Provice model. Model
Provice mewakili struktur data provinsi. Model berisi fungsi-fungsi yang
membantu dalam pengelolaan database seperti memasukkan data ke database,
pembaruan data dan lain-lain. Data yang dimasukkan berupa id dan name.
4.2.2.10 Regency
Model Regency merupakan salah satu dari model website Toko Online
Tipro. Berikut merupakan sintaks dari Model Regency seperti pada Kode Program
4.19.
<?php
namespace App;
use RajaOngkir;
use Illuminate\Database\Eloquent\Model;
class Regency extends Model
{
protected $fillable = ['id', 'province_id', 'name'];
public static function populate(){
foreach (RajaOngkir::Kota()->all() as $kota) {
$model =
static::firstOrNew(['id'=>$kota['city_id']]);
$model->province_id = $kota['province_id'];
$model->name = $kota['type'] .' '.
$kota['city_name'];
$model->save();
73
}
}
public function province()
{
return $this->belongsTo('App\Province');
}
}
Kode Program 4. 19 Regenciess Model
Kode Program 4.19 merupakan sintaks dari Regencies model. Model
Regencies mewakili struktur data kabupaten. Model berisi fungsi-fungsi yang
membantu dalam pengelolaan database seperti memasukkan data ke database,
pembaruan data dan lain-lain. Data yang dimasukkan berupa id, provice_id
dan name.
4.2.2.11 Users
Model Users merupakan salah satu dari model website Toko Online
Tipro. Berikut merupakan sintaks dari Model Users seperti pada Kode Program
4.20.
<?php
namespace App;
use Illuminate\Foundation\Auth\User as Authenticatable;
class User extends Authenticatable
{
protected $fillable = [
'name', 'email', 'password',
];
protected $hidden = [
'password', 'remember_token',
];
public function hasPassword()
{
return $this->password !=='';
}
public function addresses()
{
return $this->hasMany('App\Address');
}
public function orders()
{
74
return $this->hasMany('App\Order');
}
}
Kode Program 4. 20 Orders Model
Kode Program 4.20 merupakan sintaks dari Orders model. Model Fees
mewakili struktur data order. Model berisi fungsi-fungsi yang membantu dalam
pengelolaan database seperti memasukkan data ke database, pembaruan data dan
lain-lain. Data yang dimasukkan berupa id, user_id, address_id, status,
bank, sender,
4.2.3
dan total_payment.
View
Website Toko Online Tipro terdiri dari banyak view. Berikut merupakan
penjelasan dari semua view yang ada pada website Toko Online Tipro.
4.2.3.1 Auth
Folder Auth merupakan salah satu tampilan dari view. View Auth terdiri
dari
beberapa
bagian
Register.blade.php.
1.
yaitu
View
Login.blade.php,
View
Sintaks dari folder Auth dapat dilihat sebagai berikut.
View Login.blade.php
View Login.blade.php merupakan sintaks yang menampilkan halaman
pada saat user ataupun admin melakukan login. Berikut merupakan sintaks dari
View Login.blade.php seperti pada Kode Program 4.21.
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default" style="backgroundcolor:powderblue; border-radius: 20px;">
<div class="panel-heading">Login</div>
<div class="panel-body">
<form
class="form-horizontal"
role="form"
method="POST" action="{{ url('/login') }}">
{!! csrf_field() !!}
<div
class="form-group{{
$errors>has('email') ? ' has-error' : '' }}">
<label
class="col-md-4
controllabel">E-mail Address</label>
<div class="col-md-6">
<input type="email" class="formcontrol" name="email" value="{{ old('email') }}">
75
@if ($errors->has('email'))
<span class="help-block">
<strong>{{
$errors>first('email') }}</strong>
</span>
@endif
</div>
</div>
<div
class="form-group{{
>has('password') ? ' has-error' : '' }}">
<label
class="col-md-4
label">Password</label>
$errorscontrol-
<div class="col-md-6">
<input
type="password"
class="form-control" name="password">
@if ($errors->has('password'))
<span class="help-block">
<strong>{{
$errors>first('password') }}</strong>
</span>
@endif
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-4">
<div class="checkbox">
<label>
<input
type="checkbox"
name="remember"> Remember Me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-4">
<button type="submit" class="btn
btn-primary">
<i
class="fa
fa-btn
fa-sign-
<a class="btn btn-link"
url('/password/reset') }}">Forgot Your Password?</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
@endsection
Kode Program 4. 21 View Login.blade.php
href="{{
in"></i>Login
</button>
76
Kode Program 4.21 merupakan sintaks yang digunakan untuk melakukan
login ke website Toko Online Tipro. Halaman ini berisi form untuk mengisi email dan password dari user maupun admin untuk melakukan login, jika login
sebagai user maka menuju ke halaman user, apabila login sebagai admin maka
menuju ke halaman dashboard.
2.
View Register.blade.php
View Register.blade.php merupakan sintaks yang menampilkan
halaman register untuk user yang belum terdaftar pada website Toko Online
Tipro. Sintaksnya dapat dilihat pada Kode Program 4.22.
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Register</div>
<div class="panel-body">
<form class="form-horizontal" role="form"
method="POST" action="{{ url('/register') }}">
{!! csrf_field() !!}
<div class="form-group{{ $errors>has('name') ? ' has-error' : '' }}">
<label class="col-md-4 controllabel">Name</label>
<div class="col-md-6">
<input type="text" class="formcontrol" name="name" value="{{ old('name') }}">
@if ($errors->has('name'))
<span class="help-block">
<strong>{{ $errors>first('name') }}</strong>
</span>
@endif
</div>
</div>
<div class="form-group{{ $errors>has('email') ? ' has-error' : '' }}">
<label class="col-md-4 controllabel">E-Mail Address</label>
<div class="col-md-6">
<input type="email" class="formcontrol" name="email" value="{{ old('email') }}">
77
@if ($errors->has('email'))
<span class="help-block">
<strong>{{ $errors>first('email') }}</strong>
</span>
@endif
</div>
</div>
<div class="form-group{{ $errors>has('password') ? ' has-error' : '' }}">
<label class="col-md-4 controllabel">Password</label>
<div class="col-md-6">
<input type="password"
class="form-control" name="password">
@if ($errors->has('password'))
<span class="help-block">
<strong>{{ $errors>first('password') }}</strong>
</span>
@endif
</div>
</div>
<div class="form-group{{ $errors>has('password_confirmation') ? ' has-error' : '' }}">
<label class="col-md-4 controllabel">Confirm Password</label>
<div class="col-md-6">
<input type="password"
class="form-control" name="password_confirmation">
@if ($errors>has('password_confirmation'))
<span class="help-block">
<strong>{{ $errors>first('password_confirmation') }}</strong>
</span>
@endif
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-4">
<button type="submit" class="btn
btn-primary">
<i class="fa fa-btn fauser"></i>Register
</button>
</div>
</div>
</form>
</div>
</div>
78
</div>
</div>
</div>
@endsection
Kode Program 4. 22 View Register.blade.php
Kode Program 4.22 merupakan sintaks yang digunakan untuk melakukan
registrasi pada website Toko Online Tipro. Halaman ini berisi form registrasi yang
terdapat kolom nama, e-mail, dan password. User yang sudah melakukan
registrasi maka datanya tersimpan pada database.
4.2.3.2 Cart
Folder Cart merupakan salah satu tampilan dari view. View Cart terdiri
dari beberapa bagian yaitu View index.blade.php. Sintaks dari folder Cart dapat
dilihat sebagai berikut.
1.
View index.blade.php
View index.blade.php merupakan sintaks yang menampilkan halaman
cart untuk menyimpan barang yang akan di beli user. Sintaksnya dapat dilihat
pada Kode Program 4.23.
@extends('layouts.app')
@section('content')
<div class="container" style="background-color:powderblue;
border-radius: 20px;">
@if($cart->isEmpty())
<div class="text-center">
<h1> : | </h1>
<p>Cart Masih Kosong</p>
<p><a href="{{url ('/catalogs')}}">Lihat Semua
Produk <i class="fa fa arrow-right"></i></a></p>
</div>
@else
<table class="cart table table-hover table-condensed">
<thead>
<tr>
<th style="width:50%">Produk</th>
<th style="width:10%">Harga</th>
<th style="width:8%">Jumlah</th>
<th style="width:22%" class="textcenter">Subtotal</th>
<th style="width:10%"></th>
</tr>
</thead>
<tbody>
@foreach($cart->details() as $order)
<tr>
79
<td data-th="Produk">
<div class="row">
<div class="col-sm-2 hiddenxs"><img src="{{ $order['detail']['photo_path']}}" alt="..."
class="img-responsive"></div>
<div class="col-sm-10">
<h4 class="nomargin">{{
$order['detail']['name']}}</h4>
</div>
</div>
</td>
<td data-th="Harga">Rp{{
number_format($order['detail']['price']) }}</td>
<td data-th="jumlah">
{!! Form::open(['url'=>['cart',
$order['id']],
'method'=>'put', 'class'=>'forminline']) !!}
{!! Form::number('quantity',
$order['quantity'], ['class'=>'form-control text-center']) !!}
<td data-th="Subtotal" class="textcenter">
Rp{{ number_format($order['subtotal'])
}}</td>
<td class="actions" data-th="">
{!! Form::button('<i class="fa farefresh"></i>', array('type'=>'submit', 'class'=>'btn btn-info
btn-sm')) !!}
{!! Form::close() !!}
{!! Form::open(['url'=>['cart',
$order['id']], 'method'=>'delete', 'class'=>'form-inline']) !!}
{!! Form::button('<i class="fa fatrash-o"></i>', array('type'=>'submit', 'class'=>'btn btn-danger
btn-sm js-submit-confirm', 'data-confrim-message'=>'Kamu akan
Menghapus ' .$order['detail']['name'] . ' dari cart.')) !!}
{!! Form::close() !!}
</td>
</td>
</tr>
@endforeach
</tbody>
<tfoot>
<tr class="visible-xs">
<td class="text-center"><strong>Total
Rp{{number_format($cart->totalPrice() )}}</strong></td>
</tr>
<tr>
<td><a href="{{url('/catalogs')}}"
class="btn btn-warning"><i class="fa fa-angel-left"></i>Belanja
Lagi</a></td>
<td colspan="2" class="hidden-xs"></td>
80
<td class="hidden-xs textcenter"><strong>Total {{number_format($cart>totalPrice())}}</strong></td>
<td><a href="{{url('/checkout/login')}}"
class="btn btn-success btn-block">Pembayaran <i class="fa faangle-right"></i></td>
</tr>
</tfoot>
</table>
@endif
</div>
@endsection
Kode Program 4. 23 View index.blade.php
Kode Program 4.23 merupakan sintaks yang digunakan untuk membuat
tampilan halaman cart pada website Toko Online Tipro. Halaman ini berisi nama
produk, harga produk, jumlah produk, dan total harga produk yang akan dibeli.
Halaman ini juga berisi tombol pembayaran yang berfungsi untuk melakukan
pembayaran. User dapat menghapus produk yang sudah dimasukkan ke dalam
cart jika batal membeli produk tersebut. Index.blade.php menampilkan
halaman cart yang merupakan turunan dari layout.app
4.2.3.3 Catalogs
Folder catalogs merupakan folder tampilan yang digunakan untuk
menampilkan tampilan catalog pada tampilan catalog ini dibagi menjadi beberapa
blade yang kemudian dijadikan satu pada index.blade.php. Sintaks dari folder
catalogs dapat dilihat sebagai berikut.
1.
View _add-product-form.blade.php
View_add-product-form.blade.php
merupakan
sintaks
yang
menampilkan produk yang dibeli sebelum di tambahkan ke cart. Sintaksnya dapat
dilihat pada Kode Program 4.24.
<p>
{!! Form::open(['url'=>'cart', 'method'=>'post',
'class'=>'form-inline']) !!}
{!! Form::hidden('product_id', $product->id) !!}
<div class="form-group">
{!! Form::number('quantity', null, ['class'=>'formcontrol', 'min'=>1, 'placeholder'=> 'Jumlah Order']) !!}
</div>
{!! Form::submit('Tambah Ke Cart', ['class'=>'btn btnprimary']) !!}
{!! Form::close() !!}
81
</p>
Kode Program 4. 24 View _add-product-form.blade.php
Kode Program 4.24 merupakan sintaks yang digunakan untuk membuat
tampilan pada bagian menambahkan jumlah belanja pada website Toko Online
Tipro. View _add-product-form.blade.php menggunakan metode laravel
collective. User dapat menambahkan produk yang dibeli.
2.
View _breadcrumb.blade.php
View _breadcrumb.blade.php merupakan sintaks yang menampilkan
filter untuk menentukan barang termurah dan barang termahal. Sintaksnya dapat
dilihat pada Kode Program 4.25.
<ol class="breadcrumb" style="background-color:powderblue;">
@if(!is_null($current_category))
<li>Kategori : <a href="{{
url('/catalogs?cat'.$current_category->id)}}">{{$current_category>title}}</a></li>
@else
<li>Kategori Semua Produk :</li>
@endif
<span class="pull-right">Urutkan Harga:
<a
href="{{appendQueryString(['sort'=>'price','order'=>'asc'])}}"
class="btn btn-default btn-xs
{{isQueryStringEqual(['sort'=>'price',
'order'=>'asc']) ? 'active' : ''}}" >Termurah</a> |
<a href="{{appendQueryString(['sort'=>'price',
'order'=>'desc']) }}" class="btn btn-default btn-xs {{
isQueryStringEqual(['sort'=>'price', 'order'=>'desc']) ? 'active'
: '' }}">Termahal</a>
</span>
</ol>
Kode Program 4. 25 View _breadcrumb.blade.php
Kode Program 4.25 merupakan sintaks yang digunakan untuk membuat
bagian yang menentukan barang termurah dan barang termahal pada website Toko
Online Tipro. View _breadcrumb.blade.php menggunakan metode laravel
collective. User dapat melihat produk yang dijual dengan mengurutkan dari
barang yang termurah sampai dengan barang yang termahal.
82
3.
View _category-panel.blade.php
View_category-panel.blade.php
merupakan
sintaks
yang
menampilkan bagian menentukan kategori. Sintaksnya dapat dilihat pada Kode
Program 4.26.
<div class="panel panel-default">
<div class="panel-heading"style="background-color:powderblue;
border-radius: 4px;">
<h3 class="panel-title" >Lihat Per Kategori</h3>
</div>
<div class="list-group">
<a href="/catalogs" class="list-group-item"
style="background-color:powderblue; border-radius: 4px;">Semua
Produk <span class="badge">{{ App\Product::count() }}</span></a>
@foreach(App\Category::noParent()->get() as $category)
<a href="{{url('/catalogs?cat='.$category->id)}}"
class="list-group-item"style="background-color:powderblue; borderradius: 4px;">{{ $category->title }}
{!! $category->total_products > 0 ? '<span
class="badge">'.$category->total_products.'</span>' : '' !!}</a>
@endforeach
</div>
</div>
Kode Program 4. 26 View _category-panel.blade.php
Kode Program 4.26 merupakan sintaks yang digunakan untuk membuat
bagian yang menentukan kategori pada website Toko Online Tipro. View
_category-panel.blade.php
menggunakan metode laravel collective. User
dapat melihat kategori produk yang dijual.
4.
View _product-added.blade.php
View_product-added.blade.php
merupakan
sintaks
yang
menampilkan tampilan java script yang berfungsi untuk melakukan konfirmasi
pesanan. Sintaksnya dapat dilihat pada Kode Program 4.27.
<script>
$(document).ready(function(){
swal({
title: "Suksess",
text
:"Berhasil
menambahkan
<strong>{{
Session::get('flash_product_name') }}</strong> ke cart",
type: "success",
showCancelButton:true,
confirmButtonColor:"#63BC81",
confirmButtonText:"Konfirmasi Pesanan",
cancelButtonText:"Lanjutkan belanja",
html :true
83
}, function (isConfirm){
if (isConfirm) {
window.location ='/cart';
}
});
});
</script>
Kode Program 4. 27 View _product-added.blade.php
Kode Program 4.27 merupakan sintaks yang digunakan untuk membuat
tampilan konfirmasi pesanan atau lanjutkan belanja website Toko Online Tipro.
View _product-added.blade.php menggunakan metode laravel collective. User
dapat mengkonfirmasi suatu pesanan dan melanjutkan belanja pada website Toko
Online Tipro.
5.
View _product-thumbnail.blade.php
View
_product-thumbnail.blade.php
merupakan
sintaks
yang
menampilkan gambar, nama, model, harga dan kategori pada suatu produk.
Sintaksnya dapat dilihat pada Kode Program 4.28.
<h3>{{$product->name}}</h3>
<div class="thumbnail" style="background-color:powderblue;">
<a
href="{{
url('/produk')
}}/{{$product->id
}}">
<img
src="{{$product->photo_path}}" class="img-rounded"></a>
<p>Model : {{$product->model}}</p>
<p>Harga
:<strong>Rp{{number_format($product->price,
2)}}</strong></p>
<p>Category:
@foreach($product->categories as $category)
<span class="label label-primary">
<i class="fa fa-tags"></i>
{{$category->title}}
</span>
@endforeach
</p>
@include('layouts._customer-feature',
['partial_view'=>'catalogs._add-product-form',
'data'=>compact('product')])
</div>
Kode Program 4. 28 View _product-thumbnail.blade.php
Kode Program 4.28 merupakan sintaks yang digunakan untuk membuat
tampilan gambar, nama, model, harga, dan kategori produk yang terjual pada
website
Toko
Online
Tipro.
View
_product-thumbnail.blade.php
menggunakan metode laravel collective. User dapat melihat produk yang dijual
pada website Toko Online Tipro.
84
6.
View _search-panel.blade.php
View
_search-panel.blade.php
merupakan
sintaks
yang
menampilkan pencarian suatu produk. Sintaksnya dapat dilihat pada Kode
Program 4.29.
<div class="panel panel-default" style="backgroundcolor:powderblue;">
<div class="panel-heading"style="backgroundcolor:powderblue;">
<h3 class="panel-title">Cari Poduk</h3>
</div>
<div class="panel-body">
{!! Form::open(['url'=> 'catalogs', 'method'=>'get']) !!}
<div class="form-group {!! $errors->has('q') ? 'haserror' : '' !!}">
{!! Form::label('q', 'Apa Yang Kamu Cari ?') !!}
{!! Form::text('q', $q, ['class'=>'form-control'])
!!}
{!! $errors->first('q', '<p class="helpblock">:message</p>') !!}
</div>
{!! Form::hidden('cat', $cat) !!}
{!! Form::submit('Cari', ['class'=>'btn btn-primary'])
!!}
{!! Form::close() !!}
</div>
</div>
Kode Program 4. 29 View _search-panel.blade.php
Kode Program 4.29 merupakan sintaks yang digunakan untuk membuat
tampilan yang menampilkan pencarian suatu produk yang tersedia pada website
Toko Online Tipro. View _search-panel.blade.php menggunakan metode
laravel collective. User dapat melakukan proses pencarian produk yang ingin di
beli berdasarkan nama produk dan kategori produk.
7.
View _sub-category-panel.blade.php
View _sub-category-panel.blade.php
merupakan sintaks yang
menampilkan tampilan pada bagian untuk menentukan kategori pada website
Toko Online Tipro. Sintaksnya dapat dilihat pada Kode Program 4.30.
<div class="panel panel-default">
<div
class="panel-heading"
color:powderblue;">
<h3
class="panel-title">Sub
style="backgroundKategori
Untuk
85
{{$current_category->title}}</h3>
</div>
<div class="list-group">
@foreach($current_category->childs as $category)
<a
href="{{url('/catalogs?cat='.
$category->id)}}"
class="list-group-item"
style="background-color:powderblue;
border-radius: 4px;">{{$category->title}}
{!!
$category->total_products
>
0
?
'<span
class="badge">'.$category->total_products.'</span>' : '' !!}
</a>
@endforeach
</div>
</div>
Kode Program 4. 30 View _sub-category-panel.blade.php
Kode Program 4.30 merupakan sintaks yang digunakan untuk membuat
tampilan pada bagian untuk menentukan kategori dan sub kategori pada website
Toko Online Tipro. View _sub-category-panel.blade.php menggunakan
metode laravel collective. Admin dapat melakukan penentuan kategori pada
produk yang ditambahkan pada website, selain kategori admin juga bisa
menentukan sub kategori pada website Toko Online Tipro.
8.
View index.blade.php
View index.blade.php merupakan sintaks untuk mengambil nama
blade.php
pada catalogs. Sintaksnya dapat dilihat pada Kode Program 4.31.
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row">
<div class="col-md-3">
@include ('catalogs._search-panel',[
'q'=>isset($q) ? $q :null,
'cat'=>isset($cat) ? $cat :''
])
@include('catalogs._category-panel')
@if(isset($category)&& $category->hasChild())
@include('catalogs._sub-category-panel',
['current_category'=>$category])
@endif
@if(isset($category)&& $category->hasParent())
@include('catalogs._sub-category-panel',
['current_category'=>$category->parent])
@endif
86
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-12">
@include('catalogs._breadcrumb', [
'current_category' => isset($category) ?
$category :null
])
@if($errors->has('quantity'))
<div class="alert alert-danger">
<button
type="button"
class="close"
datadismis="alert" aria-hidden="true">×</button>
{{$errors->first('quantity')}}
</div>
@endif
</div>
@forelse($products as $product)
<div
class="col-md-6"
style="backgroundcolor:powderblue; border-radius: 20px;">
<!-<a
href="{{
url('/produk')
}}">@include('catalogs._product-thumbnail',
['product'=>
$product]) </a> -->
@include('catalogs._product-thumbnail',
['product'=> $product])
</div>
@empty
<div class="col-md-12 text-center">
@if(isset($q))
<h1>:(</h1>
<p>Produk
Yang
Anda
Cari
Tidak
Ditemukan.</p>
@if(isset($category))
<p><a
href="{{url('/catalogs?q='.$q)}}">Cari
Disemua
Kategori<i
class="fa fa-arrow-right"></i></a></p>
@endif
@else
<h1>:|</h1>
<p>Belum
Ada
Produk
Untuk
Kategori
Ini.</p>
@endif
<p><a
href="{{url('/catalogs')}}">Lihat
Semua Produk <i class="fa fa-arrow-right"></i></p>
</div>
@endforelse
<div class="pull-right">
{!!
$products>appends(compact('cat','category','q', 'sort', 'order'))->links()
!!}
</div>
</div>
</div>
</div>
</div>
87
@endsection
Kode Program 4. 31 View index.blade.php
Kode Program 4.31 merupakan sintaks yang digunakan sebagai tempat
untuk mengambil nama blade.php catalogs pada website Toko Online Tipro. View
index.blade.php
index.blade.php
menggunakan
metode
laravel
collective.
View
mengambil setiap blade.php pada catalogs yang dijadikan
satu pada index.blade.php.
4.2.3.4 Categories
Folder categories merupakan tampilan yang berisi tampilan kategori
untuk menambahkan kategori dan mengubah kategori. Sintaks dari folder
categories dapat dilihat sebagai berikut.
1.
View _form.blade.php
View _form.blade.php merupakan sintaks yang menampilkan tambah
kategori yang terdapat input text title. Sintaksnya dapat dilihat pada Kode
Program 4.32.
<div class="form-group {!! $errors->has('title') ? 'has-error' :
'' !!}">
{!! Form::label('title', 'Title') !!}
{!! Form::text('title', null, ['class'=>'form-control']) !!}
{!! $errors->first('title', '<p class="helpblock">:message</p>') !!}
</div>
<div class="form-group {!! $errors->has('parent_id') ? 'has-error'
: '' !!}">
{!! Form::label('parent_id', 'Parent') !!}
{!! Form::select('parent_id',
[''=>'']+App\Category::lists('title','id')->all(), null,
['class'=>'form-control']) !!}
{!! $errors->first('parent_id', '<p class="helpblock">:message</p>') !!}
</div>
<!-- <div class="form-group {!! $errors->has('parent_id') ? 'haserror' : '' !!}">
{!! Form::label('parent_id', 'Perusahaan') !!}
{!! Form::text('parent_id', null, ['class'=>'form-control']) !!}
{!! $errors->first('parent_id', '<p class="helpblock">:message</p>') !!}
</div> -->
88
{!! Form::submit(isset($model) ? 'Update' : 'Save', ['class'=>'btn
btn-primary']) !!}
Kode Program 4. 32 View _form.blade.php
Kode Program 4.32 merupakan sintaks yang digunakan untuk
menambahkan kategori yang terdapat input text title dan input list title
berdasarkan id pada website Toko Online Tipro. View _form.blade.php
menggunakan metode laravel collective.
2.
View create.blade.php
View create.blade.php
merupakan sintaks yang menampilkan
tampilan pada bagian untuk menambah kategori. Sintaksnya dapat dilihat pada
Kode Program 4.33.
@extends('layouts.app')
@section('content')
<div
class="container"
style="background-color:powderblue;
border-radius: 20px;">
<div class="row">
<div class="col-md-12">
<h3>New Category</h3>
{!! Form::open(['route' => 'categories.store']) !!}
@include('categories._form')
{!! Form::close() !!}
</div>
</div>
<br></br>
</div>
@endsection
Kode Program 4. 33 View create.blade.php
Kode Program 4.33 merupakan sintaks yang digunakan untuk
menambahkan kategori yang berupa button New Category pada website Toko
Online
Tipro.
create.blade.php.
View
create.blade.php
menampilkan
halaman
View create.blade.php menggunakan metode laravel
collective.
3.
View edit.blade.php
View edit.blade.php merupakan sintaks yang menampilkan tampilan
edit kategori. Sintaksnya dapat dilihat pada Kode Program 4.34.
@extends('layouts.app')
89
@section('content')
<div class="container">
<div class="row">
<div class="col-md-12">
<h3>Edit {{ $category->title }}</h3>
{!! Form::model($category, ['route'=>
['categories.update', $category], 'method'=>'patch']) !!}
@include('categories._form', ['model'=>$category])
{!! Form::close() !!}
</div>
</div>
</div>
@endsection
Kode Program 4. 34 View edit.blade.php
Kode Program 4.34 merupakan sintaks yang digunakan untuk
menampilkan tampilan edit kategori pada website Toko Online Tipro. Edit
kategori berupa button edit yang menampilkan halaman _form.blade.php. View
edit.blade.php
4.
menggunakan metode laravel collective.
View index.blade.php
View index.blade.php merupakan sintaks yang menampilkan tampilan
pada bagian hasil pembuatan kategori. Sintaksnya dapat dilihat pada Kode
Program 4.35.
@extends('layouts.app')
@section('content')
<div class="container" style="background-color:powderblue; borderradius: 20px;">
<div class="row">
<div class="col-md-12">
<h3>Category <small ><a
href="{{route('categories.create')}}" class="btn btn-warning btnsm">New Category</a></small></h3>
{!! Form::open(['url'=>'categories', 'method'=>'get',
'class'=>'form-inline']) !!}
<div class="form-group {!! $errors->has('q') ? 'haserror':'' !!}">
{!! Form::text('q', isset($q)? $q : null,
['class'=>'form-control', 'placeholder'=>'Type Category']) !!}
{!! $errors->first('q', '<p class="helpblock">:massage</p>') !!}
</div>
{!! Form::submit('Search', ['class'=>'btn btn-primary'])
!!}
{!! Form::close() !!}
<table class="table table-hover">
<thead>
<tr>
90
<td>Title</td>
<td>Parent</td>
<td>Action</td>
</tr>
</thead>
<tbody>
@foreach($categories as $category)
<tr>
<td>{{$category->title}}</td>
<td>{{$category->parent ? $category->parent>title : ''}}</td>
<td>
{!! Form::model($category,
['route'=>['categories.destroy', $category], 'method'=>'delete',
'class'=>'form-inline']) !!}
<a href="{{route('categories.edit',
$category->id)}}">Edit</a> |
{!! Form::submit('delete',['class'=>'btn
btn-xs btn-danger js-submit-confirm']) !!}
{!! Form::close() !!}
</td>
</tr>
@endforeach
</tbody>
</table>
{{$categories->appends(compact('q'))->links()}}
</div>
</div>
</div>
@endsection
Kode Program 4. 35 View index.blade.php
Kode Program 4.35 merupakan sintaks yang digunakan untuk
menampilkan tampilan bagian menampilkan hasil pembuatan kategori pada
_form.blade.php.
View index.blade.php dapat menampilkan action delete dan
edit. View index.blade.php menggunakan metode laravel collective.
4.2.3.5 Checkout
Folder checkout merupakan tampilan yang berisi tampilan proses
transaksi yang dilakukan oleh user. Sintaks dari folder checkout dapat dilihat
sebagai berikut.
1.
View _address-choose-form.blade.php
View_address-choose-form.blade.php
merupakan
sintaks
yang
menampilkan alamat user. Sintaksnya dapat dilihat pada Kode Program 4.36.
{!! Form::open(['url'=>'/checkout/address', 'method'=>'post',
'class'=>'form-horizontal']) !!}
<div class="form-group {!! $errors->has('address_id') ? 'has-
91
error' : '' !!}">
{!! Form::label('address_id', 'Pilih Alamat',
['class'=>'col-md-4 control-label']) !!}
<div class="col-md-6">
@foreach(auth()->user()->addresses as $address)
<div class="row">
<div class="col-md-1">
<label>
{!! Form::radio('address_id', $address>id, null) !!}
</label>
</div>
<div class="col-md-11">
<address>
<strong>{{ $address->name }}</strong><br>
{{ $address->detail }} <br>
{{ $address->regency->name }}, {{ $address>regency->province->name }} <br>
<abbr title="Phone">P:</abbr> +62 {{ $address>phone }}
</address>
</div>
</div>
@endforeach
<div class="row">
<div class="col-md-1">
<label>
{!! Form::radio('address_id', 'newaddress', null) !!}
</label>
</div>
<div class="col-md-11">
<strong>Alamat Baru</strong>
</div>
</div>
<div class="row">
{!! $errors->first('address_id', '<p class="helpblock">:message</p>') !!}
</div>
</div>
</div>
<div id="js-new-address">
@include('checkout._address-field')
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-4">
{!! Form::button('Lanjut <i class="fa fa-arrowright"></i>', array('type'=>'submit', 'class'=>'btn btn-primary'))
!!}
</div>
</div>
{!! Form::close() !!}
Kode Program 4. 36 View _address-choose-form.blade.php
Kode Program 4.36 merupakan sintaks yang digunakan untuk
menampilkan alamat user yang akan memesan produk pada website Toko Online
92
Tipro. View _address-choose-form.blade.php dapat meng-inputkan alamat
user pada saat melakukan transaksi pembelian barang. View _address-chooseform.blade.php
2.
menggunakan metode laravel collective.
View _address-field.blade.php
View
_address-field.blade.php
merupakan
sintaks
yang
menampilkan tampilan untuk meng-inputkan alamat. Sintaksnya dapat dilihat
pada Kode Program 4.37.
<div class="form-group {!! $errors->has('name') ? 'has-error' : ''
!!}">
{!! Form::label('name', 'Nama', ['class'=>'col-md-4 controllabel']) !!}
<div class="col-md-6">
{!! Form::text('name', null, ['class'=>'form-control'])
!!}
{!! $errors->first('name', '<p class="helpblock">:message</p>') !!}
</div>
</div>
<div class=" form-group {!! $errors->has('detail') ? 'has-error'
: ''!!}">
{!! Form::label('detail', 'Alamat', ['class'=>'col-md-4
control-label']) !!}
<div class="col-md-6">
{!! Form::textarea('detail', null, ['class'=>'form-control',
'row'=>3]) !!}
{!! $errors->first('detail', '<p class="helpblock">:message</p>') !!}
</div>
</div>
<div class="form-group {!! $errors->has('province_id') ? 'haserror' : '' !!}">
{!! Form::label('province_id', 'Provinsi', ['class' => 'colmd-4 control-label']) !!}
<div class="col-md-6">
{!! Form::select('province_id',
[''=>'']+DB::table('provinces')->lists('name', 'id'),null,
['class'=>'form-control', 'id'=>'province_selector']) !!}
{!! $errors->first('province_id', '<p class="helpblock">:message</p>') !!}
</div>
</div>
<div class="form-group {!! $errors->has('regency_id') ? 'haserror' : '' !!}">
{!! Form::label('regency_id', 'Kabupaten/Kota',
['class'=>'col-md-4 control-label'])
93
!!}
<div class="col-md-6">
{!! Form::select('regency_id',
old('province_id') !== null ? DB::table('regencies')->where
('province_id', old('province_id'))->lists('name', 'id') : [],
old('regency_id'), ['class'=>'form-control',
'id'=>'regency_selector']) !!}
{!! $errors->first('regency_id','<p class-"helpblock">:message</p>') !!}
</div>
</div>
<div class="form-group {!! $errors->has('phone') ? 'has-error' :
'' !!}">
{!! Form::label('phone','Telepon', ['class'=>'col-md-4
control-label']) !!}
<div class="col-md-6">
<div class="input-group">
<div class="input-group-addon">+62</div>
{!! Form::text('phone', null, ['class'=>'formcontrol']) !!}
</div>
{!! $errors->first('phone', '<p class="helpblock">:message</p>') !!}
</div>
</div>
Kode Program 4. 37 View _address-field.blade.php
Kode Program 4.37 merupakan sintaks yang digunakan untuk
menampilkan input alamat user pada website Toko Online Tipro. View _addressfield.blade.php
form.blade.php.
memasukkan
alamat
pada
blade
_address-choose-
View _address-field.blade.php menggunakan metode
laravel collective.
3.
View _address-new-form.blade.php
View_address-new-form.blade.php
merupakan
sintaks
yang
menampilkan lantujan proses transaksi. Sintaksnya dapat dilihat pada Kode
Program 4.38.
{!! Form::open(['url'=>'/checkout/address', 'method'=>'post',
'class'=>'form-horizontal']) !!}
@include('checkout._address-field')
<div class="form-group">
<div class="col-md-6 col-md-offset-4">
{!! form::button('Lanjut<i class="fa fa-arrowright"></i>', array('type'=>'submit', 'class'=>'btn btn-primary'))
!!}
</div>
</div>
94
{!! Form::close() !!}
Kode Program 4. 38 View _address-new-form.blade.php
Kode Program 4.38 merupakan sintaks yang digunakan untuk
menampilkan button untuk melanjutkan proses transaksi pada website Toko
Online Tipro . View_address-new-form.blade.php akan menampilkan proses
transaksi
pada
form.blade.php
4.
blade
_address-field.blade.php.
View_address-new-
menggunakan metode laravel collective.
View _cart-panel.blade.php
View _cart-panel.blade.php merupakan sintaks yang menampilkan
cart belanja dari user. Sintaksnya dapat dilihat pada Kode Program 4.39.
<div class="panel panel-default">
<div class="panel-heading">Cart</div>
<div class="panel-body"style="background-color:powderblue;
border-radius: 4px;">
<table class="table table-condensed">
<thead>
<tr>
<th style="width:50%">Produk</th>
<th style="width:20%">Jumlah</th>
<th style="width:30%">Harga</th>
</tr>
</thead>
<tbody>
@foreach($cart->details() as $order)
<tr>
<td datath="Produk">{{$order['detail']['name']}}</td>
<td data-th="Jumlah" class="text-center">
{{$order['quantity']}}
</td>
<td data-th="Harga" class="textright">{{number_format($order['detail']['price'])}}</td>
</tr>
<tr>
<td data-th="Subtotal">Subtotal</td>
<td data-th="Subtotal" class="text-right"
colspan="2">Rp{{number_format($order['subtotal'])}}</td>
</tr>
@endforeach
</tbody>
<tfoot>
@if(request()->is('checkout/payment'))
<tr>
<td data-th="Subtotal"><strong>Ongkos
Kirim</strong></td>
<td data-th="subtotal" class="text-right"
colspan="2"><strong>Rp{{number_format($cart>shipingFee())}}</strong></td>
95
</tr>
<tr>
<td><strong>Total</strong></td>
<td class="text-right"
colspan="2"><strong>{{number_format($cart->totalPrice()+$cart>shipingFee())}}</strong></td>
</tr>
@else
<tr>
<td><strong>total</strong></td>
<td class="textright"colspan="2"><strong>{{number_format($cart>totalPrice())}}</strong></td>
</tr>
@endif
</tfoot>
</table>
</div>
</div>
Kode Program 4. 39 View _cart-panel.blade.php
Kode Program 4.39 merupakan sintaks yang digunakan untuk
menampilkan cart belanja pada website Toko Online Tipro. Cart belanja pada
View_cart-panel.blade.php terdapat nama produk, jumlah produk, harga
produk, subtotal harga, dan ongkos kirim pada website Toko Online Tipro. Cart
berfungsi sebagai keranjang barang user yang berguna untuk menyimpan barang
yang akan dibeli.
5.
View _login-form.blade.php
View _login-form.blade.php merupakan sintaks yang menampilkan
tampilan login. Sintaksnya dapat dilihat pada Kode Program 4.40.
{!!
Form::open(['url'=>'/checkout/login',
'method'=>'post',
'class'=>'form-horizontal']) !!}
<div class="form-group {!! $errors->has('email') ? 'has-error' :''
!!}">
{!!
Form::label('email','Email',
['class'=>'col-md-4
controllabel']) !!}
<div class="col-md-6">
{!! Form::email('email', null, ['class'=>'form-control'])
!!}
{!!
$errors->first('email','<p
class="helpblock">:message</p>') !!}
</div>
</div>
<div class="form-group {!! $errors->has('is_guest') ? 'has-error'
: ''!!}">
<div class="col-md-6 col-md-offset-4 radio">
<p><label>{{ Form::radio('is_guest', 1, true)}}Saya adalah
96
pelanggan baru</label></p>
<p><label>{{Form::radio('is_guest',
0)}}
pelanggan tetap</label></p>
{!!
$errors->first('is_guest','<p
block">:message</p>') !!}
</div>
</div>
Saya
adalah
class="help-
<div class="form-group{!! $errors->has('checkout_password')
?
'has-error' : '' !!}">
{!! Form::label('checkout_password','Password',['class'=>'colmd-4 control-label']) !!}
<div class="col-md-6">
{!!
Form::password('checkout_password',['class'=>'formcontrol']) !!}
{!!
$errors->first('checkout_password','<p
class="helpblock">:message</p>') !!}
<a href="{{url('/password/reset')}}">Lupa kata sandi ?</a>
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-4">
{!!
Form::button('Lanjut<i
class="fa
fa-arrowright"></i>', array('type'=>'submit', 'class'=>'btn btn-primary'))
!!}
</div>
</div>
{!! Form::close() !!}
Kode Program 4. 40 View _login-form.blade.php
Kode Program 4.40 merupakan sintaks yang digunakan untuk
menampilkan tampilan login pada website Toko Online Tipro. Tampilan login
dapat memasukkan e-mail, radio button, password dan button lanjut. Login
berfungsi untuk user yang akan melakukan transaksi pada website Toko Online
Tipro.
6.
View _payment-form.blade.php
View
_payment-form.blade.php
merupakan
sintaks
yang
menampilkan pembayaran oleh user yang akan membeli produk. Sintaksnya dapat
dilihat pada Kode Program 4.41.
{!! Form::open(['url'=>'/checkout/payment', 'method'=>'post',
'class'=>'form-horizontal']) !!}
<div class="form-group {!! $errors->has('bank_name') ? 'haserror' : '' !!}">
{!! Form::label('bank_name', 'Pilih Bank Yang Anda
Gunakan', ['class'=>'col-md-4 control-label']) !!}
<div class="col-md-6">
97
{!! Form::select('bank_name', bankList(), null,
['class'=>'form-control js-selectize']) !!}
{!! $errors->first('bank_name', '<p class="helpblock">:message</p>') !!}
</div>
</div>
<div class="form-group {!! $errors->has('sender') ? 'haserorr' : '' !!}">
{!! Form::label('sender', 'Name Pengirim', ['class'=>'colmd-4 control-label']) !!}
<div class="col-md-6">
{!! Form::text('sender', null, ['class'=>'formcontrol']) !!}
{!! $errors->first('sender', '<p class="helpblock">:message</p>') !!}
</div>
</div>
<div class="form-group ">
<div class="col-md-6 col-md-offset-4">
{!! Form::button('<i class="fa fa-lock"></i>Konfirmasi
Pesan', array('type'=>'submit', 'class'=>'btn btn-primary')) !!}
</div>
</div>
{!! Form::close() !!}
Kode Program 4. 41 View _payment-form.blade.php
Kode Program 4.41 merupakan sintaks yang digunakan untuk
menampilkan tampilan pembayaran pada website Toko Online Tipro. View
_payment-form.blade.php
menampilkan tampilan pembayaran menggunakan
bank dengan memasukkan nama pengirim dan button konfirmasi.
7.
View_step.blade.php
View_step.blade.php merupakan sintaks yang menampilkan langkah-
langkah belanja ketika user akan melakukan transaksi. Sintaksnya dapat dilihat
pada Kode Program 4.42.
<div class="row">
<div class="col-xs-12">
<ul class="nav nav-pills nav-justified thumbnail setuppanel">
<li class="{{Request::is('checkout/login') ? 'active'
:
'disabled'}}"><a><h4
class="list-group-itemheading">Login</h4></a></li>
<li
class="{{Request::is('checkout/address')
?
'active' : 'disabled'}}"><a>
<h4 class="list-group-item-heading">Alamat</h4>
</a></li>
<li
class="{{Request::is('checkout/payment')
?
'active' : 'disabled'}}"><a>
<h4
class="list-group-item-
98
heading">Pembayaran</h4>
</a></li>
</ul>
</div>
</div>
Kode Program 4. 42 View_step.blade.php
Kode Program 4.42 merupakan sintaks yang digunakan untuk
menampilkan langkah-langkah belanja pada website Toko Online Tipro.
View_step.blade.php menampilkan langkah-langkah belanja yang dilakukan
user ketika akan melakukan transaksi. Langkah-langkah tersebut diawali dari
melakukan login, kemudian menentukan alamat pengiriman, dan menentukan atau
melakukan pembayaran.
8.
View address.blade.php
View address.blade.php merupakan sintaks yang menampilkan alamat
yang di-input oleh user. Sintaksnya dapat dilihat pada Kode Program 4.43.
@extends('layouts.app')
@section('content')
<div class="container">
@include('checkout._step')
<div class="row">
<div class="col-xs-8">
<div
class="panel
panel-default"
style="background-color:powderblue; border-radius: 20px;">
<div class="panel-heading">
Alamat Pengirim
</div>
<div class="panel-body">
@if(auth()->check())
@include('checkout._address-chooseform')
@else
@include('checkout._address-new-form')
@endif
</div>
</div>
</div>
<div class="col-xs-4">
@include('checkout._cart-panel')
</div>
</div>
</div>
@endsection
Kode Program 4. 43 View address.blade.php
Kode Program 4.43 merupakan sintaks yang digunakan untuk
menampilkan
alamat
user
pada
website
Toko
Online
Tipro.
View
99
address.blade.php
merupakan sebagai tempat untuk memanggil blade seperti
_address-choose-form.php
9.
dan _address-new-form.php.
View login.blade.php
View login.blade.php merupakan sintaks yang menampilkan tampilan
login. Sintaksnya dapat dilihat pada Kode Program 4.44.
@extends('layouts.app')
@section('content')
<div class="container">
@include('checkout._step')
<div class="row">
<div class="col-xs-8">
<div class="panel panel-default">
<div class="panel-heading">
Login atau Checkout Tanpa Mendaftar
</div>
<div class="panel-body">
@if (session('status'))
<div class="alert alert-success">
{{session('status')}}
</div>
@endif
@include('checkout._login-form')
</div>
</div>
</div>
<div class="col-xs-4">
@include('checkout._cart-panel')
</div>
</div>
</div>
@endsection
Kode Program 4. 44 View login.blade.php
Kode Program 4.44 merupakan sintaks yang digunakan untuk
menampilkan tampilan login pada website Toko Online Tipro. View
login.blade.php
merupakan sebagai tempat untuk memanggil blade seperti
_login-form.blade.php.
10.
View payment.blade.php
View payment.blade.php
merupakan sintaks untuk menampilkan
pembayaran yang dilakukan oleh user. Sintaksnya dapat dilihat pada Kode
Program 4.45.
100
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row">
<div class="col-xs-8">
<div class="panel panel-default">
<div class="panel-heading">
Pembayaran
</div>
<div class="panel-body"style="backgroundcolor:powderblue; border-radius: 4px;">
@include('checkout._payment-form')
</div>
</div>
</div>
<div class="col-xs-4">
@include('checkout._cart-panel')
</div>
</div>
</div>
@endsection
Kode Program 4. 45 View payment.blade.php
Kode Program 4.45 merupakan sintaks yang digunakan untuk
menampilkan tampilan pembayaran pada website Toko Online Tipro. View
payment.blade.php
merupakan sebagai tempat pembayaran untuk memanggil
blade seperti _payment-form.blade.php dan _cart-panel.blade.php pada
folder checkout.
11.
View success.blade.php
View success.blade.php
merupakan sintaks yang menampilkan
tampilan success saat berhasil melakukan transaksi. Sintaksnya dapat dilihat pada
Kode Program 4.46.
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Berhasil!</h3>
</div>
<div class="panel-body">
<p>Hi <strong>{{ session('order')->user->name
}}</strong></p>
<p></p>
101
<p>Terima Kasih Telah Berbelanja Di TIPro.<br>
Untuk Melakukan Pembayaran Dengan {{
config('bank-accounts')[session('order')->bank]['title'] }}</p>
<ol>
<li>Silahkan transfer ke rekening
<strong>{{ config('bank-accounts')[session('order')->bank]['bank']
}} {{ config('bank-accounts')[session('order')->bank]['number'] }}
An. {{ config('bank-accounts')[session('order')->bank]['name']
}}</strong>.</li>
<li>Ketika Melakukan Pembayaran Sertakan
nomor pesanan <strong>{{ session('order')->padded_id
}}</strong></li>
<li>Total Pembayaran <strong>Rp{{
number_format(session('order')->total_payment) }}</strong></li>
</ol>
</div>
<div class="panel-footer"><a href="/">Lanjutkan
Belanja</a></div>
</div>
</div>
</div>
</div>
</div>
@endsection
Kode Program 4. 46 View success.blade.php
Kode Program 4.46 merupakan sintaks yang digunakan untuk
menampilkan tampilan success saat berhasil melakukan transaksi pada website
Toko Online Tipro. View payment.blade.php menampilkan perintah success
saat berhasil melakukan pembayaran dan kemudian menampilkan rekening sesuai
bank yang dipilih.
4.2.3.6 Customer
Folder Customer merupakan salah satu tampilan dari view. View
Customer terdiri dari beberapa bagian yaitu View view-orders.blade.php yang
dijelaskan sebagai berikut.
1.
View view-orders.blade.php
View view-orders.blade.php merupakan sintaks yang menampilkan
tampilan view order. Sintaksnya dapat dilihat pada Kode Program 4.47.
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row">
<div class="col-md-12">
{!! Form::open(['url'=>'home/orders',
102
'method'=>'get', 'class'=>'form-inline']) !!}
<div class="form-group {!! $errors->has('q') ? 'haserror' : ''!!}">
{!! Form::text('q', isset($q) ? $q : null,
['class'=>'form-control', 'placeholder'=>'Order ID']) !!}
{!! $errors->first('q', '<p class="helpblock">:message</p>') !!}
</div>
<div class="form-group {!! $errors->has('status') ?
'has-error' : '' !!}">
{!! Form::text('q', isset($q) ? $q : null,
['class'=>'form-control', 'placeholder'=>'Order ID']) !!}
{!! Form::select('status', [''=>'Semua
Status']+App\Order::statusList(), isset($status) ? $status : null,
['class'=>'form-control']) !!}
{!! $errors->first('status', '<p class="helpblock">:message</p>') !!}
</div>
{!! Form::submit('Cari', ['class'=>'btn btnprimary']) !!}
{!! Form::close() !!}
<table class="table">
<thead>
<tr>
<td>Order #</td>
<td>Tanggal Order</td>
<td>Status</td>
<td>Pembayaran</td>
<td>Detail</td>
</tr>
</thead>
<tbody>
@forelse( $orders as $order)
<tr>
<td>{{ $order->padded_id}}</td>
<td>{{ $order->created_at}}</td>
<td>{{ $order->human_status}}</td>
<td>
Total :
<strong>{{number_format($order->total_payment)}}</strong><br>
Transfer ke : {{ config('bankaccounts')[$order->bank]['bank']}} An. {{ config('bankaccounts')[$order->bank]['name'] }} {{ config('bankaccounts')[$order->bank]['number'] }}<br>
Dari : {{$order->sender}}
</td>
<td>
@include('orders._details',
compact('order'))
</td>
</tr>
@empty
<tr>
<td colspan="4">Tidak Ada order yang
ditemukan</td>
</tr>
103
@endforelse
</tbody>
</table>
{!! $orders->appends(compact('q', 'status'))>links() !!}
</div>
</div>
</div>
@endsection
Kode Program 4. 47 View edit.blade.php
Kode Program 4.47 merupakan sintaks yang digunakan untuk admin
yang dimana admin dapat mengkonfirmasi pembayaran pelanggan. Data yang
digunakan untuk memvalidasikan adalah status dimana status akan di-update oleh
admin pada saat user sudah melakukan pembayaran dengan mengirimkan bukti
pembayaran.
4.2.3.7 Errors
Folder Errors merupakan salah satu tampilan error dari view. View
Errors terdiri dari beberapa bagian yaitu View 404.blade.php dan View
503.blade.php
1.
yang dijelaskan sebagai berikut.
View 404.blade.php
View 404.blade.php merupakan sintaks yang menampilkan tampilan
error. Sintaksnya dapat dilihat pada Kode Program 4.48.
<!DOCTYPE html>
<html>
<head>
<title>Page Not Found</title>
<link
href="https://fonts.googleapis.com/css?family=Lato:100"
rel="stylesheet" type="text/css">
<style>
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
width: 100%;
color: black;
display: table;
font-weight: 100;
font-family: 'serif';
}
104
.container {
text-align: center;
display: table-cell;
vertical-align: middle;
}
.content {
text-align: center;
display: inline-block;
}
.title {
font-size: 60px;
margin-bottom: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<div class="title"><h3>Page Not Found</h3></div>
<a href="{{ url('/')}}"><h4>back to home</h4></a>
</div>
</div>
</body>
</html>
Kode Program 4. 48 404.blade.php
Kode Program 4.48 merupakan sintaks yang digunakan untuk
menampilkan tampilan error pada website Toko Online Tipro. View
404.blade.php
akan menampilkan halaman yang berisi tampilan “Page Note
Found”.
4.2.3.8 Layout
Folder Layout merupakan salah satu tampilan dari view. View Layout
terdiri dari beberapa bagian yaitu View app.blade.php yang dijelaskan sebagai
berikut.
1.
View app.blade.php
View app.blade.php merupakan sintaks yang menampilkan tampilan
edit kategori. Sintaksnya dapat dilihat pada Kode Program 4.49.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
105
scale=1">
<title>TOKO ONLINE TIPRO</title>
<link
href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700
" rel='stylesheet' type='text/css'>
<link rel="shortcut icon" href="{{ URL::to('/')
}}/themes/img/iya.ico">
<link href="{{ asset(elixir('css/app.css')) }}"
rel="stylesheet">
<style>
body {
font-family: 'Lato';
}
.fa-btn {
margin-right: 6px;
}
</style>
</head>
<body id="app-layout">
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle
collapsed" data-toggle="collapse" data-target="#app-navbarcollapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/') }}">
<img src="{{ URL::to('/')
}}/themes/img/ITPrognet.png" alt="" style="height: 25px;">
</a>
</div>
<div class="collapse navbar-collapse" id="app-navbarcollapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
@if(Auth::check())
<!-- <li><a href="{{ url('/home')
}}">Home</a></li> -->
@can('admin-access')
<li class="dropdown">
<a href="#" class="dropdown-toggle" datatoggle="dropdown" role="button" aria-expanded="false">
Manage <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="{{
106
route('categories.index')}}"><i class="fa fa-btn fatags"></i>Categories</a></li>
<li><a href="{{
route('products.index')}}"><i class="fa fa-gift">
Products</i></a></li>
<li><a href="{{ route('orders.index')
}}"><i class="fa fa-btn fa-shopping-cart"></i>Orders</a></li>
<li><a href="{{ url('/dashboard')
}}"><i class="fa fa-user fa-fw"></i>Dashboard</a></li>
</ul>
</li>
@endcan
@endif
</ul>
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
@include('layouts._customer-feature',
['partial_view'=>'layouts._cart-menu-bar'])
@if (Auth::guest())
<li><a href="{{ url('/login')
}}">Login</a></li>
<li><a href="{{ url('/register')
}}">Register</a></li>
@else
<li class="dropdown">
<a href="#" class="dropdown-toggle"
data-toggle="dropdown" role="button" aria-expanded="false">
{{ Auth::user()->name }} <span
class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
@if(Auth::check())
@can('admin-access')
<li><a href="{{url('profile/edit')
}}"><i class="fa fa-user-md"></i>Profile</a></li>
@endcan
@endif
<li><a href="{{ url('/logout')
}}"><i class="fa fa-btn fa-sign-out"></i>Logout</a></li>
</ul>
</li>
@endif
</ul>
</div>
</div>
</nav>
@if(session()->has('flash_notification.message'))
<div class="container">
<div class="alert alert-{{session()>get('flash_notification.level')}}">
<button type="button" class="close" datadismis="alert" aria-hidden="true">×</button>
{{session()->get('flash_notification.message')}}
</div>
</div>
107
@endif
@yield('content')
<script src="{{ asset(elixir('js/all.js')) }}"></script>
@if(Session::has('flash_product_name'))
@include('catalogs._product-added', ['product_name'=>
Session::get('flash_product_name')])
@endif
</body>
</html>
Kode Program 4. 49 View app.blade.php
Kode Program 4.50 merupakan sintaks yang digunakan untuk
menampilkan tampilan utama pada website Toko Online Tipro. View
app.blade.php
menampilkan tampilan keseluruhan dari website Toko Online
Tipro.
4.2.3.9 Orders
Folder Orders merupakan salah satu tampilan dari view. View Orders
terdiri
dari
beberapa
_form.blade.php,
bagian
yaitu
_details.blade.php,
View
View edit.blade.php, dan View index.blade.php
yang dijelaskan sebagai berikut.
1.
View _details.blade.php
View _details.blade.php merupakan sintaks yang menampilkan
tampilan detail order. Sintaksnya dapat dilihat pada Kode Program 4.50.
<table class="table table-condensed">
<thead>
<tr>
<th style="width:50%">Produk</th>
<th style="width:20%">Jumlah</th>
<th style="width:30%">Harga</th>
</tr>
</thead>
<tbody>
@foreach($order->details as $detail)
<tr>
<td data-th="Produk">{{$detail->product->name}}</td>
<td
data-th="Jumlah"
class="text-center">{{$detail>quantity}}</td>
<td
data-th="Harga"
class="textright">{{number_format($detail->price)}}</td>
</tr>
<tr>
<td data-th="Subtotal">Subtotal</td>
<td
data-th="Subtotal"
class="text-right"
108
colspan="2">Rp{{number_format($detail->total_price)}}</td>
</tr>
@endforeach
<tr>
<td
data-th="Subtotal"><strong>Ongkos
Kirim</strong></td>
<td
data-th="Subtotal"
class="text-right"
colspan="2">{{ number_format($order->total_fee) }}</td>
</tr>
<tr>
<td><strong>Total</strong></td>
<td
class="text-right"
colspan="2"><strong>Rp{{
number_format($order->total_payment) }}</strong></td>
</tr>
</tbody>
</table>
Kode Program 4. 50 View edit.blade.php
Kode Program 4.50 merupakan sintaks yang digunakan untuk
menampilkan detail order yaitu produk, jumlah dan harga yang dibeli. Produk
yang dibeli akan ditotal lalu dimasukan ke tabel orders dan detailsorder.
2.
View _form.blade.php
View _form.blade.php merupakan sintaks yang menampilkan tampilan
form order. Sintaksnya dapat dilihat pada Kode Program 4.51.
<div class="form-group">
<div class="row">
<div class="col-md-4 text-right">
<label>Order #</label>
</div>
<div class="col-md-6">
{{ $order->padded_id }}
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-4 text-right">
<label>Customer</label>
</div>
<div class="col-md-6">
{{ $order->user->name}}
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-4 text-right">
<label>Alamat Pengirim</label>
</div>
109
<div class="col-md-6">
<address>
<strong>{{$order->address->name}}</strong><br>
{{$order->address->detail}}<br>
{{$order->address->regency->name}}, {{$order>address->regency->province->name}}<br>
<abbr title="Phone">P:</abbr>+62{{$order->address>phone}}
</address>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-4 text-right">
<label>Detail</label>
</div>
<div class="col-md-6">
@include('orders._details', compact('order'))
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-4 text-right">
<label class="control-label">Status</label>
</div>
<div class="col-md-6">
{!! Form::select('status', App\Order::statusList(),
null, ['class'=>'form=control']) !!}
{!! $errors->first('status', '<p class="helpblock">:message</p>') !!}
</div>
</div>
</div>
{!! Form::submit('Simpan', ['class'=>'btn btnprimary']) !!}
Kode Program 4. 51 View _form.blade.php
Kode Program 4.51 merupakan sintaks yang digunakan untuk
menampilan order, customer, alamat pengirim, phone, detail product. View dapat
dilihat dari _detail.blade.php, status dan button simpan.
3.
View edit.blade.php
View edit.blade.php merupakan sintaks yang menampilkan tampilan
edit order. Sintaksnya dapat dilihat pada Kode Program 4.52.
@extends('layouts.app')
@section('content')
<div class="container">
110
<div class="row">
<div class="col-md-12">
<h3>Edit{{ $order->title }}</h3>
{!! Form::model($order,
['route'=>['orders.update', $order], 'method'=>'patch',
'class'=>'form-horizontal']) !!}
@include('orders._form', ['model'=>$order])
{!! Form::close() !!}
</div>
</div>
</div>
@endsection
Kode Program 4. 52 View edit.blade.php
Kode Program 4.52 merupakan sintaks yang digunakan untuk
menampilkan tampilan untuk mengesekusi button simpan pada tampilan blade
_form.blade.php.
4.
View index.blade.php
View index.blade.php merupakan sintaks yang menampilkan tampilan
order. Sintaksnya dapat dilihat pada Kode Program 4.53.
@extends('layouts.app')
@section('content')
<div class="container" style="background-color:powderblue;
border-radius: 20px;">
<div class="row">
<br></br>
<div class="col-md-12">
{!! Form::open(['url'=>'orders', 'method'=>'get',
'class'=>'form-inline']) !!}
<div class="form-group {{ $errors->has('q') ? 'haserrot' : '' }}">
{!! Form::text('q', isset($q) ? $q : null,
['class'=>'form-control', 'placeholder'=>'Order ID/Customer...'])
!!}
{!! $errors->first('q', '<p class="helpblock">:message</p>') !!}
</div>
<div class="form-group {!! $errors->has('status') ?
'has-error' : '' !!}">
{!! Form::select('status', [''=>'Semua
Status']+App\Order::statusList(), isset($status) ? $status : null,
['class'=>'form-control']) !!}
{!! $errors->first('status', '<p class="helpblock">:message</p>') !!}
</div>
{!! Form::submit('Cari', ['class'=>'btn btn-primary'])
!!}
{!! Form::close() !!}
<br></br>
<table class="table table-hover">
111
<thead>
<tr>
<td>Order #</td>
<td>Customer</td>
<td>Status</td>
<td>Pembayaran</td>
<td>Update Terakhir</td>
</tr>
</thead>
@forelse($orders as $order)
<tbody>
<tr>
<td><a href="{{ route('orders.edit',
$order->id) }}">{{ $order->padded_id }}</a></td>
<td>{{ $order->user->name }}</td>
<td>{{ $order->human_status }}</td>
<td>
Total : <strong>{{
number_format($order->total_payment) }}</strong><br>
Transfer ke : {{ config('bankaccounts')[$order->bank]['bank'] }} <br>
Dari : {{ $order->sender }}
</td>
<td>{{ $order->updated_at }}</td>
</tr>
@empty
<tr>
<td colspan="4">Tidak Ada Order Yang
ditemukan</td>
</tr>
@endforelse
</tbody>
</table>
{!! $orders->appends(compact('status', 'q'))>links() !!}
</div>
</div>
</div>
@endsection
Kode Program 4. 53 View index.blade.php
Kode Program 4.53 merupakan sintaks View index.blade.php. Sintaks
ini View index.blade.php digunakan untuk menampilkan orders yang terdapat
beberapa fungsi yaitu melakukan pencarian berdasarkan order id atau customer
dan berdasarkan status pembayaran.
4.2.3.10 Product
Folder Product merupakan salah satu tampilan dari view. View Product
terdiri
dari
beberapa
create.blade.php,
bagian
yaitu
View
_form.blade.php,
View
View create.blade.php, dan View create.blade.php
yang dijelaskan sebagai berikut.
112
1.
View _form.blade.php
View _form.blade.php merupakan sintaks yang menampilkan tampilan
form untuk melakukan input produk baru. Sintaksnya dapat dilihat pada Kode
Program 4.54.
<div class="form-group {!! $errors->has('name') ? 'has-error' : ''
!!}">
{!! Form::label('name', 'Name') !!}
{!! Form::text('name',null, ['class'=>'form-control']) !!}
{!! $errors->first('name', '<p class="helpblock">:message</p>') !!}
</div>
<div class="form-group {!! $errors->has('model') ? 'has-error' :
'' !!}">
{!! Form::label('model', 'Model') !!}
{!! Form::text('model',null, ['class'=>'form-control']) !!}
{!! $errors->first('model', '<p class="helpblock">:message</p>') !!}
</div>
<div class="form-group {!! $errors->has('price') ? 'has-error' :
'' !!}">
{!! Form::label('price', 'Price') !!}
{!! Form::text('price', null, ['class'=>'form-control']) !!}
{!! $errors->first('price', '<p class="helpblock">:message</p>') !!}
</div>
<div class="form-group {!! $errors->has('category_lists') ? 'haserror' : '' !!}">
{!! Form::label('category_lists', 'Categories') !!}
{!! Form::select('category_lists[]',
[''=>'']+App\Category::lists( 'title','id')->all(), null,
['class'=>'form-control js-selectize','multiple']) !!}
{!! $errors->first('category_lists', '<p class="helpblock">:message</p>') !!}
</div>
<div class="form-group{!! $errors->has('weight') ? 'has-error' :
'' !!}">
{!! Form::label('weight', 'Berat (Gram)') !!}
{!! Form::number('weight', null, ['class'=>'form-control'])
!!}
{!! $errors->first('weight', '<p class="helpblock">:message</p>') !!}
</div>
<div class="form-group{!! $errors->has('description') ? 'haserror' : '' !!}">
{!! Form::label('description', 'Description') !!}
{!! Form::textarea('description', null, ['class'=>'formcontrol']) !!}
{!! $errors->first('description', '<p class="help-
113
block">:message</p>') !!}
</div>
<div class="form-group {!! $errors->has('photo') ? 'has-error' :''
!!}">
{!! Form::label('photo', 'Product photo (jpeg, png, jpg)') !!}
{!! Form::file('photo') !!}
{!! $errors->first('photo', '<p class="helpblock">:message</p>') !!}
@if(isset($model) && $model->photo !== '')
<div class="row">
<div class="col-sm-6">
<p>Current Photo :</p>
<div class="thumbnail">
<img src="{{ url('/img/' . $model->photo) }}"
class="img-rounded">
</div>
</div>
</div>
@endif
</div>
{!! Form::submit(isset($model) ? 'Update' : 'Save',
['class'=>'btn btn-primary']) !!}
Kode Program 4. 54 View _form.blade.php
Kode Program 4.54 merupakan sintaks View _form.blade.php.
Sintaks View _form.blade.php digunakan untuk menampilkan tampilan untuk
memasukkan nama, model, harga, kategori, berat, deskripsi, photo dan button
submit pada produk.
2.
View create.blade.php
View create.blade.php
merupakan sintaks yang menampilkan
tampilan untuk mengeksekusi form. Sintaksnya dapat dilihat pada Kode Program
4.55.
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row">
<div class="col-md-6"style="backgroundcolor:powderblue; border-radius: 10px;">
<h3>New Product</h3>
{!! Form::open(['route'=>'products.store',
'files'=>'true']) !!}
@include('products._form')
{!! Form::close() !!}
</div>
114
</div>
</div>
@endsection
Kode Program 4. 55 View create.blade.php
Kode Program 4.55 merupakan sintaks View create.blade.php.
Sintaks View create.blade.php merupakan tampilan untuk mengeksekusi
button simpan pada tampilan form.blade.php.
3.
View edit.blade.php
View edit.blade.php merupakan sintaks yang menampilkan tampilan
edit produk. Sintaksnya dapat dilihat pada Kode Program 4.56.
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row">
<div class="col-md-12">
<h3>Edit {{$product->litle}}</h3>
{!! Form::model($product, ['route'=>['products.update',
$product], 'method'=>'patch', 'files'=>true]) !!}
@include('products._form', ['model'=> $product])
{!! Form::close() !!}
</div>
</div>
</div>
@endsection
Kode Program 4. 56 View edit.blade.php
Kode Program 4.56 merupakan sintaks View
_edit.blade.php.
Sintaks View _form.blade.php merupakan tampilan untuk mengeksekusi button
simpan pada tampilan _form.blade.php
.
4.
View index.blade.php
View index.blade.php merupakan sintaks yang menampilkan detail
produk. Sintaksnya dapat dilihat pada Kode Program 4.57.
@extends('layouts.app')
@section('content')
115
<div class="container" style="background-color:powderblue; borderradius: 10px;">
<div class="row">
<div class="col-md-12">
<h3>Product <small><a href="{{route('products.create')
}}" class="btn btn-warning btn-sm">New Product</a></small></h3>
{!! Form::open(['url'=>'products', 'method'=>'get',
'class'=>'form-inline']) !!}
<div class="form-group {!! $errors->has('q') ? 'haserror' :'' !!}">
{!! Form::text('q', isset($q) ? $q :null,
['class'=>'form-control', 'placeholder'=>'Type Nama / Model']) !!}
{!! $errors->first('q', '<p class="helpblock">:message</p>') !!}
</div>
{!! Form::submit('Search',['class'=>'btn btn-primary']
) !!}
{!! Form::close() !!}
</div>
<table class="table table-hover">
<thead>
<!-- <input type="checkbox" id="checkAll"/> Check
all</label> and <a href="">Delete all checked</a> -->
<tr>
<!-- <td>Mark</td> -->
<td>Name</td>
<td>Model</td>
<td>Category</td>
<td>Description</td>
<td>Action</td>
</tr>
</thead>
<tbody>
@foreach($products as $product)
<tr>
<!-- <td><input type="checkbox" name="checkbox[]"
data-id="checkbox"class="cb" value="{{$product->id}}" /></td> -->
<td>{{ $product->name}}</td>
<td>{{ $product->model}}</td>
<td>
@foreach($product->categories as $category)
<span class="label label-primary">
<i class="fa fa-btn fa-tags"></i>
{{$category->title}}</span>
@endforeach
</td>
<td>{{ $product->description}}</td>
<td>
{!!
Form::model($product,['route'=>['products.destroy', $product],
'method'=>'delete', 'class'=>'form-inline']) !!}
<a href="{{route('products.edit', $product>id)}}">Edit</a> |
{!! Form::submit('Delete', ['class'=>'btn btnxs btn-danger js-submit-confirm']) !!}
{!! Form::close() !!}
</td>
</tr>
116
@endforeach
</tbody>
</table>
{{$products->appends(compact('q'))->links() }}
</div>
</div>
@endsection
Kode Program 4. 57 View index.blade.php
Kode Program 4.57 merupakan sintaks View index.blade.php. View
index.blade.php
merupakan tampilan yang menampilan detail produk meliputi
nama, mode, category, description, dan action. Action terdapat fungsi edit dan
delete.
4.2.3.11 Profile
Folder Profile merupakan salah satu tampilan dari view. View Profile
terdiri dari beberapa bagian yaitu View edit.blade.php yang dijelaskan sebagai
berikut.
1.
View edit.blade.php
View edit.blade.php merupakan sintaks yang menampilkan tampilan
edit profile admin. Sintaksnya dapat dilihat pada Kode Program 4.58.
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Profile <span
style="color:blue">{{Auth::user()->name }}</span></div>
<div class="panel-body">
<form class="form-horizontal" role="form"
method="POST" action="{{ route('profile.edit') }}">
<!-- <div class="form-group{{ $errors>has('name') ? ' has-error' : '' }}">
<div class="form-group{{ $errors>has('name') ? ' has-error' : '' }}">
<label class="col-md-4 controllabel">Name</label>
<div class="col-md-6">
<input type="text" class="formcontrol" name="name" value="{{ Request::old('name') ?:
Auth::user()->name }}">
@if ($errors->has('name'))
117
<span class="help-block">
<strong>{{ $errors>first('name') }}</strong>
</span>
@endif
</div>
</div>
<div class="form-group{{ $errors>has('email') ? ' has-error' : '' }}">
<label class="col-md-4 controllabel">E-Mail Address</label>
<div class="col-md-6">
<input type="email" class="formcontrol" name="email" value="{{ Request::old('email')
?:Auth::user()->email }}">
@if ($errors->has('email'))
<span class="help-block">
<strong>{{ $errors>first('email') }}</strong>
</span>
@endif
</div>
</div> -->
<div class="form-group{{ $errors>has('current_password') ? ' has-error' : '' }}">
<label class="col-md-4 controllabel">Current Password</label>
<div class="col-md-6">
<input type="password"
class="form-control" name="current_password" placeholder="Current
Password">
@if ($errors>has('current_password'))
<span class="help-block">
<strong>{{ $errors>first('current_password') }}</strong>
</span>
@endif
</div>
</div>
<div class="form-group{{ $errors>has('password') ? ' has-error' : '' }}">
<label class="col-md-4 controllabel">New Password</label>
<div class="col-md-6">
<input type="password"
class="form-control" name="password" placeholder="New Password">
</div>
</div>
<div class="form-group{{ $errors>has('password_confirmation') ? ' has-error' : '' }}">
118
<label class="col-md-4 controllabel">Confirm Password</label>
<div class="col-md-6">
<input type="password"
class="form-control" name="password_confirmation"
placeholder="Confirm Password">
@if ($errors>has('password_confirmation'))
<span class="help-block">
<strong>{{ $errors>first('password_confirmation') }}</strong>
</span>
@endif
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-4">
<button type="submit" class="btn
btn-primary">
<i class="fa fa-btn fauser"></i>Update
</button>
</div>
</div>
<input type="hidden" name="_token"
value="{{Session::token()}}">
</form>
</div>
</div>
</div>
</div>
</div>
@endsection
Kode Program 4. 58 View edit.blade.php
Kode Program 4.58 merupakan sintaks View edit.blade.php.
Sintaks
View edit.blade.php merupakan tampilan untuk mengganti password admin
yang terdapat Current Password, New Password, Confirm Password dan button
Update.
4.2
Uji Coba
Uji coba merupakan beberapa screenshoot tampilan merupakan
gambaran dari fitur-fitur yang terdapat di dalam aplikasi berbasis website yang
telah dibuat, yaitu sebagai berikut.
4.2.1
User
User dalam website Toko Online Tipro dapat melakukan beberapa hal.
Berikut uji coba website Toko Online Tipro dapat dilakukan oleh user. Awalnya
119
user langsung ke halaman home dari website Toko Online Tipro yang dapat
dilihat pada Gambar 4.1.
Gambar 4. 1 Halaman Home Website Toko Online Tipro
Gambar 4.1 merupakan halaman home website Toko Online Tipro yang
dimana merupakan halaman untuk melihat–lihat produk yang ada di website Toko
Online Tipro, jika user menekan salah satu gambar dari produk maka user akan
disuruh login atau register jika sudah memiliki akun. Menu register dapat dilihat
pada Gambar 4.2.
Gambar 4. 2 Halaman Register Website Toko Online Tipro
120
Gambar 4.2 merupakan menu register dari website Toko Online Tipro
dimana user harus memasukkan nama, e-mail, password dan confirm password
untuk melakukan registrasi, setelah melakukan regitrasi maka user harus login.
Halaman login dapat dilihat pada Gambar 4.2.
Gambar 4. 3 Halaman Login Website Toko Online Tipro
Gambar 4.3 merupakan menu login dari website Toko Online Tipro
dimana user harus meng-inputkan e-mail dan password untuk dapat melakukan
transaksi pada website Toko Online Tipro pada menu home, pada menu home user
dapat membeli produk yang dijual dengan cara menekan salah satu produk dan
memasukkan banyaknya produk yang dibeli jika sudah meng-inputkan maka user
dapat melihat data belanja pada menu cart. Halaman cart dapat dilihat pada
Gambar 4.4.
121
Gambar 4. 4 Halaman Cart Website Toko Online Tipro
Gambar 4.4 merupakan menu cart dari website Toko Online Tipro
dimana user dapat melihat apa saja yang sudah di input untuk melakukan
pembelian. Pembelian itu dapat diedit jumlahnya dan juga membatalkan
pembeliannya, setelah selesai mengkonfirmasi maka akan masuk ke menu
pembayaran. Halaman pembayaran dapat dilihat pada Gambar 4.5.
Gambar 4. 5 Halaman Pembayaran Website Toko Online Tipro
Gambar 4.5 merupakan menu pembayaran dari website Toko Online
Tipro dimana user dapat melakukan pembayaran dengan memilih bank yang akan
122
digunakan untuk melakukan pembayaran. Halaman Address User dapat dilihat
pada Gambar 4.6.
Gambar 4. 6 Halaman Address User Website Toko Online Tipro
Gambar 4.6 merupakan menu Address User dari website Toko Online
Tipro dimana user dapat memasukkan nama dan alamat yang dituju untuk
mengirim barang yang akan dibeli.
4.2.2
Admin
Admin dalam website Toko Online Tipro dapat melakukan bebrapa hal.
Berikut uji coba website Toko Online Tipro dapat dilakukan oleh admin. Awalnya
admin akan langsung ke halaman dashboard dari website Toko Online Tipro yang
dapat dilihat pada Gambar 4.7.
123
Gambar 4. 7 Halaman Dashboard Website Toko Online Tipro
Gambar 4.7 merupakan halaman dashboard website Toko Online Tipro
yang dimana merupakan halaman untuk me-manage website Toko Online Tipro.
Admin dapat melakukan manage pada categories, product, order dan statistic
penjualan. Menu categories dapat dilihat pada Gambar 4.8.
Gambar 4. 8 Halaman Categories Website Toko Online Tipro
Gambar 4.8 merupakan menu categories dari website Toko Online Tipro.
Halaman categories terdapat tiga menu yaitu new category, search engine, dan
tampilan category. Admin dapat menambahkan category baru pada menu new
category. Admin dapat melakukan mencarian kategori pada menu search engine.
124
Tampilan category terdapat beberapa field title, parent, dan action Halaman
product dapat dilihat pada Gambar 4.9.
Gambar 4. 9 Halaman Product Website Toko Online Tipro
Gambar 4.9 merupakan menu product dari website Toko Online Tipro.
Halaman categories terdapat tiga menu yaitu new product, search engine, dan
tampilan product. Admin dapat menambahkan product baru pada menu new
product. Admin dapat melakukan mencarian product pada menu search engine.
Tampilan product terdapat beberapa field name, model, category, description dan
action. Halaman order dapat dilihat pada Gambar 4.10.
125
Gambar 4. 10 Halaman Order Website Toko Online Tipro
Gambar 4.10 merupakan menu order dari website Toko Online Tipro.
Halaman order terdapat dua menu yaitu search engine, dan tampilan order. Admin
dapat mengubah status pembayaran. Admin dapat melakukan pencarian order
berdasarkan id user pada menu search engine. Tampilan order terdapat beberapa
field order, customer, status, pembayaran dan update terakhir. Halaman statistic
dapat dilihat pada Gambar 4.11.
Gambar 4. 11 Halaman Statistic Website Toko Online Tipro
126
Gambar 4.11 merupakan menu statistic dari website Toko Online Tipro.
Halaman statistic terdapat tampilan diagram yang merupakan diagram hasil
penjualan terbanyak.
BAB V
PENUTUP
Bab V merupakan penutup dari laporan Praktikum Pemrograman
Internet. Laporan ini mengenai kesimpulan dari keseluruhan modul-modul
Praktikum Pemrograman Internet serta saran atau masukan yang diberikan oleh
dosen pengampu mata kuliah Praktikum Pemrograman Internet.
5.1
Simpulan
Simpulan yang dapat ditarik dari penulisan laporan Praktikum
Pemrograman Internet adalah dalam perancangan dan pengembangan aplikasi
berbasis website Toko Online Tipro ini dapat diketahui alur bisnis proses
kerjanya. Aplikasi berbasis website Toko Online Tipro ini menggunakan
framework bernama Laravel. Laravel merupakan cara yang lebih mudah,
terperinci dan efisiensi dalam sebuah web berbasis PHP. Sehingga, menjadikan
aplikasi berbasis website yang sebenarnya membutuhkan beberapa software yang
mendukung kegiatan dalam pengembangan Toko Online Tipro.
5.2
Saran
Saran yang dapat diberikan bagi mahasiswa yaitu diharapkan dapat
mengenal dan memperbanyak referensi untuk memahami bahasa pemrograman
PHP dengan framework Laravel serta MySQL dalam mengoperasikan software
penunjang Praktikum Pemrograman Internet. Perintah-perintah dasar yang ada
pada sistem operasi PHP dan SQLyog sangat penting untuk dikuasai agar
memudahkan mahasiswa dalam melakukan aktifitas ataupun bekerja pada
pemrograman web.
127
DAFTAR PUSTAKA
Priyanka
Permata
Putri.
Aplikasi
TIK
dalam
Perpustakaan.
Website:
<https://priyankapermataputri.wordpress.com/web/>. Diakses pada tanggal
1 April 2018.
Andre. 2013. Tutorial Belajar CSS Part 1: CSS. Website
<http://www.duniailkom.com/tutorial-belajar-css-part-1-pengertian-cssapa-yang-dimaksud-dengan-css/. Diakses pada tanggal 1 April 2018.
Andika
Saputra,
2012,
“tipe-tipe
data
mysql”.Website
<https://andikasaputra.web.id/2012/07/tipe-tipe-data-mysql.html>.
Diakses 3 April 2018.
Arief, Rudyanto.2011. Pemrograman Web Dinamis Menggunakan PHP dan
MySQL.Yogyakarta: Andi.
Rohman,
Abdul.
2014.
“Mengenal
Framework
Laravel”.
Website
<http://www.abdulrohman.web.id/>. Diakses 24 April 2018.
Hilman. 2016. “Mengenal CSS Framework dan 5 Macam Contohnya”. Website
<http://www.plimbi.com/article/166276/mengenalcssframework?force_desktop=1>. Diakses 24 April 2018.
Zaki, Ali. 2016. “Pengenalan Cascading Style Sheet (CSS). Online Journal
<http://mahasiswa.dinus.ac.id/docs/skripsi/bab2/20269.pdf>. Diakses 26
April 2018.
Suryanto,
Kap.
2015.
“Pembuatan
Web”.
Website
<http://kap-
suryanto.id/pembuatan-web/> . Diakses 26 April 2018
Universitas
Dian
Nusantoro.
2015
“Skripsi
Bab
2”.
Website
<http://mahasiswa.dinus.ac.id/docs/skripsi/bab2/20269.pdf>. Diakses 26
April 2018
Sugiyanti. 2016 “Pengertian Server Side Scripting dan Client Side Scripting”.
Website
<https://sugiyanti27.wordpress.com/2016/04/06/pengertian-
server-side-scripting-dan-client-side-scripting/>. Diakses 26 April 2018
128