Merancang Aplikasi FoodMarket SERI I_clone

Disini kita membuat tampilan halaman ketika proses midtrans yang kita
lakukan itu gagal.Sekarang coba kita akses halaman
http://localhost:8000/midtrans/error Maka nanti akan muncul tampilan
seperti ini:

17. Membuat Dokumentasi & Testing API menggunakan
Postman

Postman merupakan salah satu alat paling populer untuk melakukan
pengujian API.Postman muncul pada tahun 2012 sebagai proyek sampingan
oleh Abhinav Asthana untuk menyederhanakan alur kerja API dalam
pengujian dan pengembangan. API memungkinkan aplikasi perangkat lunak
untuk berkomunikasi satu sama lain melalui panggilan API.
Panduan Instalasi Postman
Langkah Pertama
Silahkan Kunjungi halaman https://www.postman.com/downloads/
Kemudian lakukan pengunduhan postman nya sesuai Sistem operasi kalian.

 Page 47

LangkahKe 2
Jalankan file installer nya yang berformat .exe .
LangkahKe 3
Buat akun postman baru atau masuk dengan akun postman (kita dapat
melewati nya tanpa masuk akun).
Maka nanti akan muncul tampilan halaman postman seperti ini:

Panduan Membuat Dokumentasi & Testing API menggunakan Postman
Langkah Pertama
Kunjungi halaman
https://documenter.getpostman.com/view/14311218/Tz5iA1RC
lalu pilih tombol Runin postman yang berada di pojok kanan atas

 Page 48

Langkah Ke 2
Setelah muncul collection FoodMarketAPI nya muncul di
postman,selanjutnya pilih collection tersebut ,kemudian kita akan men
testing API Login nya dengan cara memilih POST Register. Lalu akan muncul
tampilan seperti ini :

v

Kemudian ganti url nya dengan url local host project kita masing-masing.

 Page 49

Selanjutnya pilih bagian Body lalu isi kolom nya sesuka kalian,Kemudian pilih
tombol send yang berada dipojok kanan atas

v
v

Maka nanti jika berhasil akan muncul respons seperti ini:

v

 Page 50

D.Pembuatan Admin Area

1. Menambahkan Middleware Admin

Langkah Pertama
Jalankan perintah php artisan make:middleware IsAdmin Pada terminal project
kita di Visual Studio Code
Perintah diatas digunakan untuk membuat middleware yang akan
mengauthentican admin,yang mana nanti akan muncul file IsAdmin.php
pada folder app > Http > Middleware.
Langkah Ke 2
Buka file file IsAdmin.php pada folder app > Http > Middleware.
Lalu tambahkan code berikut :

 Page 51

Public function handle diatas berisi logika apakah authentic itu adalah user
yang sedang login yang roles nya adalah admin.Jika ia maka silahkan
lanjutkan request nya,namun jika tidak maka kita arahkan ke halaman
homepage atau tidak boleh mengakses.
Langkah Ke 3
Buka file file Kernel.php Pada folder app > Http ,lalu tambahkan code berikut

Kemudian tambahkan juga code berikut,untuk mendaftarkan IsAdmin pada
route middleware .

2. Membuat Halaman Dashboard

Pada saat kitamelakukan login maka akan kita jumpai tampilan dashboard
nya seperti ini :

 Page 52

Sekarang kita akan melakukan costum tampilan dashboard nya
Langkah Pertama
Jalankan perintah php artisan make:controller DashboardController
Pada terminal project kita di Visual Studio Code

Ketika perintah tersebut dijalankan maka akan muncul file
DashboardController.php yang berada pada folder app > Http > Controllers.
Langkah Ke 2
Buka file DashboardController.php lalu tambahakan code berikut :

Public function index diatas akan mengembalikan kita ke halaman view
dashboard.
Langkah Ke 3
Buka file web.php pada folder routes lalu tambahkan code berikut dan
perhatikan perubahan nya:

 Page 53

Baris code ke-22 s/d 23 berguna untuk menangani request kita di Url
kemudian mengarahkan aplikasi untuk memanggil halaman dashboard yang
telah kita buat di route dashboard dibagian bawah route ini.
Baris code ke-27 s/d 32 berguna untuk menangani request middleware admin
kemudian mengarahkan aplikasi untuk memanggil halaman dashboard.
Langkah Ke 4
Jalankan perintah php artisan vendor:publish –tag=jetstream-views
Pada terminal project kita di Visual Studio Code

Ketika peritah tersebut dijalankan makan nanti akan muncul folder baru
bernama vendor pada folder resources > views
Langkah Ke 5
Buka file welcome.blade.php yang berada pada folder resources > views >
vendor > jetsream > components lalu ubah code nya menjadi seperti berikut

 Page 54

Code diatas mengatur tampilan pada halaman dashboard kita menjadi
seperti ini :

Sebelum Login dan mengakses halaman dashboard nya silahkan buka
terlebih dahulu database nya di http://localhost/phpmyadmin/
Kemudian pilih table users lalu pilih edit dan ceklik kolom check all lalu ubah
roles pada user nya yang sebelum nya USER menjadi ADMIN seperti berikut

v

 Page 55

3. CRUD User Controller dan Index

Langkah Pertama
Jalankan perintah php artisan make:controller UserController –resource pada
terminal project kita di Visual Studio Code

Ketika perintah tersebut dijalankan maka akan muncul file
UserController.php yang berada pada folder app > Http > Controllers.
Langkah Ke 2
Buka file web.php pada folder routes lalu tambahkan code berikut dan
perhatikan perubahan nya:

v
Baris code ke-31 berguna untuk menangani request kita di Url kemudian
mengarahkan aplikasi untuk memanggil halaman users .Jangan lupa untuk
meng include use App\Http\Controllers \UserController; dibagian atas.
Langkah Ke 3
Buka file UserController.php pada Folder app > Http > Controllers lalu
tambahkan code berikut :

 Page 56

Public function index diatas berguna untuk memunculkan halaman list data
users nya disertai paginate 5, yang kemudian akan mengarahkan kita ke
view food.index.
Langkah Ke 4
Buat folder baru dengan nama users pada folder resources >
views.Kemudian didalam folder users tersebut kita buat file baru dengan
nama index.blade.php,lalu didalam file tersebut tambahkan code berikut :

 Page 57

Code diatas akan membuat sebuah tampilan tabel user yang berisi
ID,Name,Email,Roles dan Tombol Action ( Edit & Delete ) disertai dengan
tombol create user untuk menambahkan user nantinya.
Maka Jika kita coba untuk mengakses halaman
http://localhost:8000/dashboard/users
Maka nanti akan muncul tampilan seperti ini yang berisi nama nama user
yang pernah kita daftarkan sebelumnya.

4. CRUD User FormRequest, Create dan Save

Langkah Pertama
Jalankan perintah php artisan make:request UserRequest pada terminal project
di Visual Studio Code.

 Page 58

Ketika perintah tersebut dijalankan maka akan muncul file UserRequest.php
yang berada pada folder app > Http > Request.
Langkah Ke 2
Buka file UserRequest.php lalu tambahkan code berikut

Pada code diatas kita akan mengatur User Request dimulai dari authorize
hingga rules yang berkaitan dengan usernya.
Langkah Ke 3
Buka file UserController.php yang berada pada folder app > Http >
Controllers lalu tambahkan code berikut:

 Page 59

Baris code ke-30 s/d 33 digunakan untuk mengembalikan function create ke
view users.create.
Baris code ke-41 s/d 50 digunakan untuk memproses upload gambar.Yang
mana nanti nya dia akan mengambil seluruh data request dan membuat
data user .Lalu akan di redirect ke user.index.
Langkah Ke 4
Buat file baru dengan nama create.blade.php pada folder resources > views
> users. Kemudian tambahkan code berikut :

 Page 60

 Page 61

Code diatas akan membuat sebuah tampilan form user create seperti ini

 Page 62

Akan muncul halaman form create user dengan banyak kolom diantaranya
Name,Email,Image,Password,Password Confirmation,Address,Roles,House
Number,Phone Number,dan city yang wajib kita isi tatkala ingin
menambahkan user.
Sekarang silahkan Coba untuk menambahkan user baru .Jika proses nya
berhasil maka user baru tersebut akan muncul di table index user dan
otomatis akan muncul juga di table user database kita.

5. CRUD User Edit dan Update

Langkah Pertama
Buka file User.php pada folder app > models ,lalu tambahkan
profile_photo_path agar kita bisa menyimpan dan mengupload photo path
nya ,karena sebelumnya kita lupa menambahkan nya.

Langkah Ke 2
Buka file UserController.php yang berada pada folder app > Http >
Controllers lalu tambahkan code berikut:

Baris code ke-69 s/d 73 digunakan untuk mengembalikan function edit user ke
view users.edit setelah sebelumnya mengambil data user.

 Page 63

Baris code ke-83 s/d 95 digunakan untuk memproses update upload
gambar.Yang mana nanti nya dia akan mengambil seluruh data request dan
mengupdate data user .Lalu akan di redirect ke user.index.
Langkah Ke 3
Buat file baru dengan nama edit.blade.php pada folder resources > views >
users. Kemudian tambahkan code berikut :

 Page 64

 Page 65

Maka nanti akan muncul halaman form edit user dengan banyak kolom
diantaranya Name,Email,Image,Password,Password
Confirmation,Address,Roles,House Number,Phone Number,dan city yang
wajib kita isi tatkala ingin mengupdate user.
Sekarang silahkan Coba untuk mengupdate user .Jika proses nya berhasil
maka user tersebut akan terupdate dan muncul di table index user dan
otomatis akan terupdate juga di table user database kita.

Kita akan mencoba mengupdate data user yang sebelumnya bernama Fahmi
Nuradi menjadi Fahmi Nurudin ,jika prosesnya berhasil maka yang akan
muncul di index user adalah fahmi Nurudin ,bukan lagi Fahmi Nuradi

 Page 66

6. CRUD User Delete dan Menambahkan Navigasi Users

Langkah Pertama
Buka file UserController.php yang berada pada folder app > Http >
Controllers lalu tambahkan code berikut:

Pada function destroy ini kita akan menambahkan action delete pada user
,setelah sebelumnya kita telah membuat tombol delete nya. Yang mana jika
proses delete nya berhasil dia akan mengarahkan kita ke halaman
user.index.
Sekarang silahkan Coba untuk mendelete user .Jika proses nya berhasil
maka user tersebut akan terhapus dan hilang di table index user Namun
data user pada database nya tidak benar-benar hilang karena kita
sebelumnya menggunakan soft delete.

 Page 67

Langkah Ke 2
Sekarang kita akan menambahkan Navigasi users dibagian atas halaman
web kita dengan cara membuka file navigation-menu.blade.php pada folder
resources > views kemudian tambahkan code berikut :

Code diatas akan membuat sebuah navigasi baru bernama users yang
apabila di klik akan mengarahkan kita menuju route dashboard/users.

v

Langkah Ke 3
Sekarang kita akan mengatur route menu
Food,Users,transaction,profile,yang mana jika menu tersebut kita akan
arahkan ke route nya masing masing.Silahkan buka file welcome.blade.php

 Page 68

Pada folder resources > views > vendor > jetsream > components lalu
tambahkan code berikut :

Code diatas akan mengatur masing masing route menu yang ada pada
halaman dashboard.Jika kita mengklik menu users maka kita akan diarahkan
menuju route /dashboard/users. Sekarang silahkan coba untuk mengklik
menu users dan profile karena untuk menu food dan transaction belum kita
buat.Jika Prosesnya berhasil maka secara otomatis kita akan diarahkan ke
route yang telah kita atur diatas.

7. CRUD Food Controller dan Index

Langkah Pertama
Jalankan perintah php artisan make:controller FoodController –resource pada
terminal project kita di Visual Studio Code

Ketika perintah tersebut dijalankan maka akan muncul file
FoodController.php yang berada pada folder app > Http > Controllers.
Langkah Ke 2
Buka file web.php pada folder routes lalu tambahkan code berikut dan
perhatikan perubahan nya:

 Page 69

Baris code ke-32 berguna untuk menangani request kita di Url kemudian
mengarahkan aplikasi untuk memanggil halaman food.Jangan lupa untuk
meng include use App\Http\Controllers \FoodController; dibagian atas.
Langkah Ke 3
Buka file FoodController.php pada Folder app > Http > Controllers lalu
tambahkan code berikut :

Public function index diatas berguna untuk memunculkan halaman list data
Food nya disertai paginate 5,yang kemudian akan mengarahkan kita ke view
food.index.
Langkah Ke 4
Buat folder baru dengan nama food pada folder resources > views.Kemudian
didalam folder food tersebut kita buat file baru dengan nama
index.blade.php,lalu didalam file tersebut tambahkan code berikut :

 Page 70

Code diatas akan membuat sebuah tampilan tabel Food yang berisi
ID,Name,Price,Rate,Types, dan Tombol Action ( Edit & Delete ) disertai
dengan tombol create Food untuk menambahkan Food nantinya.
Maka Jika kita coba untuk mengakses halaman
http://localhost:8000/dashboard/food
Maka nanti akan muncul tampilan yang berisi tabel food disertai dengan
kolom kolom nya yang telah kita buat sebelumnya.Karena kita belum pernah
menambahkan food sebelumnya maka keterangan yang akan muncul pada
tabel tersebut adalah data tidak ditemukan.

 Page 71

Langkah Ke 5
Sekarang kita akan menambahkan Navigasi Food dan transaction dibagian
atas halaman web kita dengan cara membuka file navigation-
menu.blade.php pada folder resources > views kemudian tambahkan code
berikut :

v

Code diatas akan membuat sebuah navigasi baru bernama food dan
transaction yang apabila di klik akan mengarahkan kita menuju route
dashboard/food dan dashboard/transaction.

v

 Page 72

8. CRUD Food FormRequest, Create dan Save

Langkah Pertama
Jalankan perintah php artisan make:request FoodRequest pada terminal project
di Visual Studio Code.

Ketika perintah tersebut dijalankan maka akan muncul file FoodRequest.php
yang berada pada folder app > Http > Request.
Langkah Ke 2
Buka file FoodRequest.php lalu tambahkan code berikut :

Pada code diatas kita akan mengatur Food Request dimulai dari authorize
hingga rules yang berkaitan dengan foodnya.
Langkah Ke 3
Buka file FoodController.php yang berada pada folder app > Http >
Controllers lalu tambahkan code berikut:

 Page 73

Baris code ke-32 s/d 35 digunakan untuk mengembalikan function create ke
view food.create.
Baris code ke-43 s/d 52 digunakan untuk memproses upload gambar.Yang
mana nanti nya dia akan mengambil seluruh data request dan membuat
data food .Lalu akan di redirect ke food.index.
Langkah Ke 4
Buat file baru dengan nama create.blade.php pada folder resources > views
> food. Kemudian tambahkan code berikut :

 Page 74

 Page 75

Code diatas akan membuat sebuah tampilan form food create seperti ini

Akan muncul halaman form create food dengan banyak kolom diantaranya
Name ,Image,Description,Ingredients,Price,Rate,dan Types yang wajib kita
isi tatkala ingin menambahkan food.
Sekarang silahkan Coba untuk menambahkan food baru .Jika proses nya
berhasil maka food baru tersebut akan muncul di table index food dan
otomatis akan muncul juga di table food database kita.

 Page 76

9. CRUD Food Edit dan Update

Langkah Pertama
Buka file FoodController.php yang berada pada folder app > Http >
Controllers lalu tambahkan code berikut:

Baris code ke-72 s/d 77 digunakan untuk mengembalikan function edit food ke
view food.edit setelah sebelumnya mengambil data food.
Baris code ke-86 s/d 98 digunakan untuk memproses update upload
gambar.Yang mana nanti nya dia akan mengambil seluruh data request dan
mengupdate data food .Lalu akan di redirect ke food.index.
Langkah Ke 2
Buat file baru dengan nama edit.blade.php pada folder resources > views >
food. Kemudian tambahkan code berikut :

 Page 77

 Page 78

Maka nanti akan muncul halaman form edit fooddengan banyak kolom
diantaranya Name ,Image,Description,Ingredients,Price,Rate,dan Types yang
wajib kita isi tatkala ingin mengupdate food.
Sekarang silahkan Coba untuk mengupdate food .Jika proses nya berhasil
maka food tersebut akan terupdate dan muncul di table index food dan
otomatis akan terupdate juga di table food database kita.

 Page 79

Kita akan mencoba mengupdate data food yang sebelumnya bernama Mie
goreng super pedas dengan harga 15.000 menjadi Mie goreng super pedas
level 5 dengan harga 18.000 ,jika prosesnya berhasil maka yang akan muncul
di index fooduser adalah mie goreng super pedas level 5 ,bukan lagi mie
goreng super pedas biasa.

10. CRUD Food Delete

Langkah Pertama
Buka file FoodController.php yang berada pada folder app > Http >
Controllers lalu tambahkan code berikut:

Pada function destroy ini kita akan menambahkan action delete pada
food,setelah sebelumnya kita telah membuat tombol delete nya. Yang mana

 Page 80

jika proses delete nya berhasil dia akan mengarahkan kita ke halaman
food.index.
Sekarang silahkan Coba untuk mendelete food nya .Jika proses nya berhasil
maka food tersebut akan terhapus dan hilang di table index food Namun
data food pada database nya tidak benar-benar hilang karena kita
sebelumnya menggunakan soft delete.

11. CRUD Transaksi Controller dan Index

Langkah Pertama
Jalankan perintah php artisan make:controller TransactionController –resource
pada terminal project kita di Visual Studio Code

Ketika perintah tersebut dijalankan maka akan muncul file
TransactionController.php yang berada pada folder app > Http > Controllers.

 Page 81

Langkah Ke 2
Buka file web.php pada folder routes lalu tambahkan code berikut dan
perhatikan perubahan nya:

Baris code ke-34 berguna untuk menangani request kita di Url kemudian
mengarahkan aplikasi untuk memanggil halaman transaction .Jangan lupa
untuk meng include use App\Http\Controllers \TransactionController; dibagian
atas.
Langkah Ke 3
Buka file TransactionController.php pada Folder app > Http > Controllers lalu
tambahkan code berikut :

Public function index diatas berguna untuk memunculkan halaman list data
transaction nya disertai paginate 10, yang kemudian akan mengarahkan kita
ke view transaction.index.

 Page 82

Langkah Ke 4
Buat folder baru dengan nama transaction pada folder resources >
views.Kemudian didalam folder transaction tersebut kita buat file baru
dengan nama index.blade.php,lalu didalam file tersebut tambahkan code
berikut :

Code diatas akan membuat sebuah tampilan tabel Transaction yang berisi
ID,Food,User,Quantity,Total,Status, dan Tombol Action ( Edit & Delete )
disertai dengan tombol create Transaction untuk menambahkan Transaksi
nantinya.

 Page 83

Maka Jika kita coba untuk mengakses halaman
http://localhost:8000/dashboard/transaction
Maka nanti akan muncul tampilan yang berisi tabel transaction disertai
dengan kolom kolom nya yang telah kita buat sebelumnya.Karena kita
belum pernah menambahkan transaction sebelumnya maka keterangan
yang akan muncul pada tabel tersebut adalah data tidak ditemukan.

12. CRUD Transaksi View dan Change Status

Langkah Pertama
Buka file web.php pada folder routes lalu tambahkan code berikut

v
Baris code ke-34 dan 35 berguna untuk menangani request kita di Url
kemudian mengarahkan aplikasi untuk memanggil halaman
transaction.changeStatus .
Langkah Ke 2
Buka file TransactionController.php yang berada pada folder app > Http >
Controllers lalu tambahkan code berikut:

 Page 84

Baris code ke-51 s/d 56 digunakan untuk mengembalikan function show
transaction ke view transaction.detail setelah sebelumnya mengambil data
transaction.
Kemudian tambahkan juga code berikut pada baris ke 87 s/d 104

Pada function destroy kita akan menambahkan action delete pada transaction
,setelah sebelumnya kita telah membuat tombol delete nya. Yang mana jika
proses delete nya berhasil dia akan mengarahkan kita ke halaman
transaction.index.
Pada function change kita akan memanggil model transaksi nya terlebih
dahulu,jika id nya tidak dtemukan maka prosesnya tidak akan dimunculkan
dan dilanjutkan.Kemudian kita memasukan transaction status nya mengikuti
yang dikasih oleh parameternya.Kemudian selanjutnya kita menambahkan
transaction save untuk menyimpan data transaksi nya.Selanjutnya kita
jalankan redirect ke route transaction.show serta menambahkan parameter
id untuk mengarahkan ke id yang sesuai.
Langkah Ke 3
Buat file baru dengan nama detail.blade.php pada folder resources > views >
transaction. Kemudian tambahkan code berikut :

 Page 85

 Page 86

Code diatasa akan membuat sebuah tampilan detail transaction yang berisi
didalam nya Product Name,User Name, Address,Payment URL,Quantity,
Email,Total,Number ,Status,City,Phone,dan Change Status.
Untuk melihat detail halaman nya silahkan tambahkan terlebih dahulu data
transaction nya melalui database di tabel transaction melalui php mya
admin.Silahkan tambah data transaction nya dengan cara mengisi kolom
kolom form yang disediakan.Jika prosesnya berhasil maka akan muncul
transaction baru pada tabel transaction.index nya

Kemudian klik tombol action view untuk melihat halaman detail nya,
Maka nanti akan muncul tampilan seperti ini:
s

 Page 87

E.Upload Website ke Hosting

Buka halaman https://www.niagahoster.co.id/blog/cara-upload-website-ke-
hosting/ lalu ikuti tutorial nya.

F.Daftar Pusaka

1. Kelas Online Premium Full-stack Laravel Kotlin: FoodMarket Apps
BuildWithAngga
https://buildwithangga.com/kelas/full-stack-laravel-kotlin-foodmarket-apps

 Page 88

Penutup

Terima Kasih bagi semua yang telah membaca buku ini, semoga buku ini
bermanfaat untuk pembaca sekalian. Kami sadar bahwa di dalam buku ini
masih banyak kekurangan, oleh karena itu, kami sangat mengharap kritik
dan dan saran dari pembaca sekalian. Agar dalam tugas berikutnya kami
dapat lebih baik lagi.sekian dan terima kasih,sampai jumpa dilain waktu.

Kuningan,14 Maret 2021
Penulis

Merancang Aplikasi

FoodMarket

Laravel adalah Framework PHP yang sedang populer saat ini. Sejak
dibuat oleh
Taylor Otwell dan dirilis pertama kali pada 2011, Laravel
mendapatkan sambutan
yang baik. Banyak developer yang semula
menggunakan Framework lain, kini
beralih menggunakan Laravel. Hal
itu tidak lain karena Laravel memiliki banyak
fitur modern yang sangat
membantu dalam proses web development.

Tidak seperti Framework PHP berskala kecil misalnya Codeigniter
yang relatif
mudah untuk dipelajari dan dikuasai, mempelajari dan
menguasai Laravel
itu cukup sulit terutama bagi pemula.

Buku ini akan membantu Anda untuk
mempelajari dan menguasai
Laravel sambil merancang sebuah aplikasi penjualan makanan yang
kita beri nama FoodMarket.

Riza Hidayat merupakan seorang android Developer
dan UI UX Designer.Lahir pada 4 februari tahun
2000 , berasal dari kota Serang Banten.Saat ini
sedang menjalankan study di Kampus IDN (Islamic
Development Network ) Bogor.

RIZA HIDAYAT