Basic CRUD Laravel 9

Modul Praktikum II

BASIC CRUD Laravel 9 | Breeze Package Ketut Agus Seputra, S.ST., M.T
 BAB I
MENGENAL DAN INSTALASI LARAVEL
1. 1. Tujuan :
1. Mahasiswa dapat mengetahui framework php
2. Mahasiswa dapat mengetahui software pendukung dalam menggunakan framework php
3. Mahasiwa dapat memahami proses instalasi framework php
4. Mahasiswa dapat memahami Konsep Model, View dan Controller (MVC)
5. Mahasiswa dapat memahami struktur folder dalam framework php
1. 2. DASAR TEORI
Laravel merupakan salah satu dari sekian banyak framework PHP yang dapat digunakan secara
gratis. Laravel dikembangkan oleh programmer asal amerika yang bernama Taylor Otwell pada tahun
2011. Framework sendiri dapat diartikan sebagai kumpulan kode-kode program yang akan selalu
digunakan pada setiap pembuatan aplikasi. Karena selalu digunakan maka kode-kode tersebut
dikumpulkan dan disusun secara rapi pada folder-folder agar mudah digunakan dan jadilah sebuah
framework.
1. 3. SOFTWARE PENDUKUNG LARAVEL
1. TEXT EDITOR
Text editor menjadi kebutuhan wajib yang harus dimiliki untuk menulis suatu program.
Beberapa text editr yang biasa digunakan oleh para programmer di antaranya Notepad++,
Sublime Text, ATOM dan sebagainya, namun pada modul ini akan menggunakan text editor
Sublime Text.
2. WEB SERVER
Web server sebagai penyedia layanan web pada komputer lokal. Laravel mendukung web server
Apache maupun Ngix. Pada modul ini akan menggunakan web server XAMPP yang didalamnya
menggunakan server Apache. Paket aplikasi ini dapat diunduh dari website apachefriends.org.
adapun versi yang digunakan pada modul ini adalah versi 3.2.2 yang telah mendukung PHP
dengan versi 5.6.30 untuk menjalankan laravel versi 5.4.
3. COMPOSER
Composer digunakan untuk memudahkan instalasi Laravel dan mendapatkan library yang
dibutuhkan dari internet. Jadi sebelum melakukan instalasi Laravel, komputer atau laptop atau
mesin yang digunakan harus sudah terinstal Composer. Aplikasi ini dapat diunduh dari website
getcomposer.org.
4. Node JS
Node.js adalah runtime environment untuk JavaScript yang bersifat open-source dan cross-
platform. Untuk mengawali bisa download aplikasi atau ikuti tahapan instalasi dari url berikut
https://nodejs.org/
5. NPM
NPM adalah Node Package Manager yang digunakan secara luas oleh developer JavaScript untuk
berbagi tool, menginstal modul, dan mengelola dependensi. Ada banyak library javascript yang
nanti akan digunakan dalam pemrograman web, oleh karena itu menginstal library javascript akan
jauh lebbih mudah menggunakan NPM.
1. 4. PENGANTAR LARAVEL
Dalam pengembangan sistem informasi, khusunya berbasis web. Laravel menghadirkan fitur-fitur yang
siap digunakan seperti autentikasi, routing, Object Relational Model (ORM) yang akan sering kita gunakan.
Laravel juga menyedikan beberapa starter kit dengan beberapa fitur yang telah diintegrasikan. Laravel
Breeze adalah salah satu fitur standar yang bisa digunakan untuk memulai pemrograman laravel. Package
ini menyediakan fitur standar pengembangan sistem informasi seperti autentikasi, register, reset

BASIC CRUD LARAVEL 9 | BREEZE PACKAGE 1

password, verivikasi email, termasuk konfirmasi password. UI yang dintegrasikan menggunakan template
Blade X dan dukungan Tailwind CSS juga sangat mendukung pengembangan sistem informasi dengan lebih
cepat dan progresive.
1. 5. Instalasi
1. https://getcomposer.org/ then download and run Composer-Setup.exe
lalu panggil composer melalui CMD dengan perintah composer, hingga muncul report seperti
pada gambar 1.

Gambar 1. Composer
2. Pilih folder tempat project, boleh diluar htdocs
3. Buka panduan instalasi pada url berikut https://laravel.com/docs/9.x/installation.
4. Install laravel melalui CLI dengan perintah create-project
composer create-project laravel/laravel nama_project
5. Tunggu beberapa menit, setelah itu jalankan virtual server laravel artisan
php artisan serve
Artisan merupakan command line interface yang dimiliki oleh Laravel. Artisan mencakup
sekumpulan perintah yang membantu Anda untuk membangun sebuah website atau aplikasi
web.
6. Pastikan artisan jalan dan dapat diakses melalui url public localhost 127.0.0.1. Langkah
selanjutnya pelajari request life cycle laravel https://laravel.com/docs/9.x/installation#next-
steps.
1.6 Starter Kits
Langkah awal dalam membangun aplikasi Laravel baru, laravel menawarkan autentikasi dan package
standar pengembangan website. Package ini secara otomatis membuat routes, controllers and views yang
diperlukan untuk register dan autentikasi pengguna aplikasi. Laravel breeze menawarkan fitur standar
mulai dari pendaftaran, autentikasi, reset password, dan verifikasi email. Laravel breeze dibangun dengan
tampilan template blade yang dikombinasikan dengan tailwindcss. Breeze memungkinkan pengembangan
Single Page Application (SPA) menggunakan Vue dan React, atau Inertia. Berikut panduan instalasi
package breeze, namun pastikan terlebih dahulu instalasi laravel telah dilakukan dengan baik, dan
memahami konsep request life cylce laravel.
1. Instal Laravel Breeze pada folder aplikasi via terminal VS Code, lalu jalankan perintah dibawah
ini.
composer require laravel/breeze --dev
2. Setelah download package sukses, selanjutnya install laravel melalui terminal
php artisan breeze:install
3. Jangan lupa siapkan sebuah database, oleh karena itu pastikan MySQL aktif dan web server
(Apache juga aktif sebagai optional).
4. Setting database yang digunakan pada file .env pada root folder.

BASIC CRUD LARAVEL 9 | BREEZE PACKAGE 2

 Gambar 2. Pengaturan Database
5. Pastikan nama database, username, dan password benar. Selanjutnya jalankan perintah berikut
untuk generate tabel yang diperlukan oleh breeze.
php artisan migrate
6. Ikuti intruksi yang diberikan melalui console terminal
npm install
npm run dev
7. Setelah instal sukses, selanjutnya untuk menjalankan aplikasi silakan run php artisan serve pada
root project melalui terminal VS Code

Gambar 3. Url Projek

8. Akses Url tersebut untuk melihat aplikasi, maka tampilan aplikasi

Gambar 4. Welcome Page

9. Sampai pada tahap ini instalasi laravel telah sukses.
10. Jika sudah, coba pastikan klik kembali link login atau register, jika terdapat CSS yang tidak diload
dengan baik, maka diperlukan sedikit perubahan pada
resources\views\layouts\app.blade.php dan
resources\views\layouts\guest.blade.php. Temukan code <!-- Scripts --> lalu
replace code dibawahnya.

Refresh kembali halaman register, login, serta dasboard Aplikasi.

BASIC CRUD LARAVEL 9 | BREEZE PACKAGE 3

1. 7. Pengenalan
Pada folder hasil instal Laravel terdapat beberapa folder yang penting untuk diketahui. Struktur
folder tersebut dapat dilihat pada gambar 5.

Gambar 5. Folder pada Laravel

Untuk dapat bekerja pada laravel, maka penting untuk diketahui struktur folder pada laravel. Berikut
fungsi masing-masing folder pada laravel.
1. Folder app merupakan folder yang paling banyak mendapatkan perhatian karena hampir
semua script aplikasi yang kita buat ditaruh pada folder ini. Di dalam folder ini berisi folder
seperti pada gambar 6.

Gambar 6. Struktur Folder App

Sebenarnya ada beberapa folder lagi yang terdapat dalam folder app, namun folder-folder
tersebut tidak tampil secara default. Folder tersebut akan ada ketika kita menjalankan
perintah artisan make. Fungsi dari folder-folder tersebut yaitu sebagai berikut.
• Folder Console merupakan folder yang berisi perintah artisan custom untuk aplikasi
yang akan dibuat.
• Folder Exception merupakan folder yang berisi exception handler dari aplikasi yang
kita buat.
• Folder Http merupakan folder yang berisi controller, middleware dan form request.
• Folder Providers merupakan folder yang berisi semua service providers untuk aplikasi
yang akan dibuat.
2. Folder bootstrap merupakan folder yang berisi file app.php yang mengendalikan framework
Laravel dan file autoload.php yang mengkonfigurasikan autoloading. Folder ini juga berisi
folder cache yang berisi file-file cache untuk meningkatkan kecepatan aplikasi.
3. Folder config merupakan folder yang berisi file-file konfigurasi aplikasi. Sebaiknya kita
memahami setiap file yang ada di dalam folder ini beserta pengaturan-pengaturan yang harus
diberikan di dalamnya.

BASIC CRUD LARAVEL 9 | BREEZE PACKAGE 4

 4. Folder database merupakan folder yang berisi database migration dan seeds. Migration dan
seeds akan dibahas pada modul akan dibahas pada modul-modul selanjutnya.
5. Folder public folder public merupakan folder yang berisi file index.php yang merupakan file
utama sebagai pintu masuk semua request atau permintaan pada aplikasi yang dibangun.
Folder ini juga tempat menyimpan semua aset aplikasi seperti gambar dan file javascript atau
css external.
6. Folder resources merupakan folder yang berisi file-file aset yang berlum dikompilasi seperti
file LESS, SASS atau javascript. Folder ini juga sebagai tempat semua file bahasa.
7. Folder routes merupakan folder yang berisi semua route yang kita definisikan pada aplikasi.
Untuk materi route akan dibahas lebih detail pada modul selanjutnya.
8. Folder storage merupakan folder yang berisi file file yang dibuat oleh framework. Folder ini
berisi tiga folder di dalamnya, yaitu app, freamework dan logs. Folder app digunakan untuk
menyimpan file yang dibuat oleh aplikasi, folder framework digunakan untuk menyimpan file
yang dibuat oleh framework. Sedangkan folder logs digunakan untuk menyimpan file logs.
9. Folder tests merupakan folder-folder yang berisi file-file pengetesan.
10. Folder vendor merupakan folder yang berisi file-file dependency yang diperoleh dari
composer.
1. 8. MODUL ROUTING
Routing pada Laravel merupakan cara mengakses suatu halaman pada aplikasi melalui URL.
Misalnya untuk membuka halaman awal aplikasi dapat dilakukan dengan mengetik URL localhost:8000.
Berarti dalam menentukan route, kita menentukan bagaimana struktur URL untuk mengakses halaman
tertentu. File yang digunakan untuk melakukan penyetingan route terdapat pada folder routes. Pada
folder ini terdapat empat file php untuk pembuatan aplikasi, file yang digunakan untuk pembuatan route
adalah web.php. Alur routing pada laravel dapat dilihat pada gambar 7.

Gambar 7. Routing Laravel

Penjelasan:
1. User mengakses aplikasi melalui route tertentu
2. Route tersebut oleh aplikasi telah dipetakan ke controller action
3. Controller action akan menggunakan model untuk mengakses data. Atau langsung
mengembalikan view tanpa data (langsung ke step 5)
4. Model berinteraksi ke database untuk mendapatkan data atau menyimpan data
5. Setelah berhasil mendapatkan data melalui model, controller akan mengembalikan sebuah view
sekaligus data jika ada.
6. View tersebut pada akhirnya yang dilihat oleh user.
BASIC CRUD LARAVEL 9 | BREEZE PACKAGE 5
1. 9. EVALUASI
Silakan lakukan evaluasi tekait latihan yang telah dikerjakan. Pastikan semua check list pada bagian
evaluasi ini terpenuhi. Keberhasilan pada BAB ini akan menentukan pengerjaan latihan berikutnya. Silakan
centang pada checklist yang telah terpenuhi.
 Webserver terinstal dengan baik
 MySQL terinstal dengan baik
 Composer dapat digunakan
 NPM dapat digunakan
 Laravel terinstal dengan baik
 Laravel dapat diakses

BASIC CRUD LARAVEL 9 | BREEZE PACKAGE 6

 BAB II
Request Lifecycle
2. 1. TUJUAN
1. Mahasiswa dapat memahami proses dasar routing, controller, dan view
2. Mahasiswa dapat memahami blade template, component, dan layout.
3. Mahasiswa dapat memahami Konsep Model, View dan Controller (MVC)
4. Mahasiswa dapat memahami struktur folder dalam framework laravel
5. Mahasiwa dapat memahami penggunaan fungsi dan helper dasar pada framework laravel untuk
melakukan proses manajemen data (Controller, route, views, migration, dan model)
2. 2. DASAR TEORI
Laravel merupakan salah satu dari sekian banyak framework PHP yang dapat digunakan secara gratis.
Laravel dikembangkan oleh programmer asal amerika yang bernama Taylor Otwell pada tahun 2011.
Framework sendiri dapat diartikan sebagai kumpulan kode-kode program yang akan selalu digunakan
pada setiap pembuatan aplikasi. Karena selalu digunakan maka kode-kode tersebut dikumpulkan dan
disusun secara rapi pada folder-folder agar mudah digunakan dan jadilah sebuah framework.

2. 3. STUDI KASUS
Bali sebagai salah satu destinasi tujuan wisata dunia tentu harus selalu menghadirkan keunikan baru
baik dari sisi budaya maupun keindahan alam. Selain keindahan alam dan budaya, sebuah destinasi wisata
harus mampu memadukan antara budaya dan alam melalui atraksi yang bisa dinikmati wisatawan,
akomodasi, serta transportasi yang memadai. Salah satu budaya yang menjadi icon bali yakni tari kecak.
Pementasan tari kecak ini menjadi kegiatan yang umum sudah dilakukan dibeberapa tempat wisata
terbaik di Bali diantaranya pura uluwatu, tanah lot, dan ubud. Terlebih lagi, saat ini desa adat juga
mengambil peran melalui beberapa komunitas seni yang rutin mengadakan pertunjukan seni dipalaba
pura masing-masing desa adat. Tentu hal ini harus ditopang oleh akses informasi yang luas baik untuk
menggait calon penikmat seni maupun sekedar untuk menginformasikan jadwal pertunjukan kepada
calon wisatawan. Untuk itu, perlu dikembangkan sebuah portal Sistem Informasi Wisata untuk
memasarkan pertunjukan seni, baik terkait jadwal, komunitas seni yang tampil, maupun pemesanan tiket
secara online. Secara singkat berikut beberapa catatan utama yang dapat menjadi benang merah
pengembangan sistem.

- Salah satu tujuan utama pengembangan sistem untuk memasarkan atau menginformasikan jadwal
pertunjukan seni kepada wisatawan
- Tujuan berikutnya wisatawan dapat melakukan pemesanan tiket secara online maupun on the spot
saat pertunjukan
- Sistem harus mampu memberitahukan ketersediaan tiket berdasarkan jadwal yang dibuka serta
kuota
- Terdapat pilihan harga untuk wisatwan domestik dan mancanegara, serta desawa atau anak-anak
- Pengelola pertunjukan dalam hal ini desa adat dapat melihat jumlah pemesanan, terbayar, dan
yang telah hadir saat pertunjukan. Sehingga cash flow dari setiap penyelenggara pertunjukan dapat
diketahui.
- Secara umum terdapat 4 level pengguna yakni wisatawan, pengguna, admin pertunjukan, serta
super admin.
-

Profil Pengguna
BASIC CRUD LARAVEL 9 | BREEZE PACKAGE 7
 - Gender : Pria dan Wanita
- Umur : 15 - 55 tahun
- Profesi : Wisatawan dan pelaku seni

Perilaku / Kebiasaan :

- Biasa menggunakan WA dan Facebook

- Tingkat pemahaman tentang teknologi mulai dari rendah hingga menengah
- Penggunaan bahasa daerah masih tinggi
- Penggunaan brosur dan spanduk masih tinggi

Tugas Proyek 2.1

Mahasiswa membuat prototipe aplikasi dari sisi pengguna yang terdiri dari beberapa tampilan
berdasarkan user flow yang telah dirancang. Prototipe dibuat dengan framework laravel yang didukung
tampilan menarik dapat menggunakan tailwindcss atau bootstrap sebagai framework CSS.

2. 4. PENGEMBANGAN FRONT PAGE

Website yang menarik akan menumbuhkan minat para pengunjung untuk mengunjungi serta berlama-
lama menjelajahinya. Maka, sebaiknya dipertimbangkan dasar-dasar desain web yang baik. Dasar-dasar
web design akan membantu untuk memberikan kesan yang baik pada pandangan pertama pengunjung.
Desain halaman utama sebuah website mengalami perkembangan cukup cepat, dulu biasa dikenal dengan
istilah homepage namun saat ini lebih dikenal dengan landingpage. Keduanya pun ternyata memiliki
perbedaan fungsi. Kalau homepage sebagai sebuah halaman awal website umumnya menampilkan
beberapa produk atau informasi terkini lengkap dengan tombol navigasinya. Namun landingpage sebagai
halaman utama website memiliki tujuan mengajak pengguna untuk melakukan aksi tertentu seperti
membeli, mendaftar, atau hanya sekedar mempelajari informasi. Istilah ini biasa dikenal dengan Click to
Action (CTA). Sebagai tahap awal pengembangan sebuah sistem informasi atau aplikasi, tentu yang harus
dipastikan valid pertama adalah desain antarmuka pengguna sesuai dengan user flow yang telah
dirancang. Perancangan userflow tentu harus diawali dengan tahapan analisis kebutuhan pengguna bisa
melalui feasibility study maupun design thingking. Selain memperhatikan userflow, pengembangan desain
antarmuka tentu harus berbasis pada kebutuhan pengguna atau user centered design. Terakhir jangan
lupa juga, memperhatikan design sistem seperti color, typography, dan icon.

Sesuai tugas proyek I, maka pada praktikum kali ini akan membuat beberapa rancangan antarmuka
halaman depan sesuai dengan userflow sebagai berikut.

BASIC CRUD LARAVEL 9 | BREEZE PACKAGE 8

2.4.1 LANGKAH PRAKTIKUM
Entry point dari request yang masuk ke laravel adalah file public/index.php. Semua request diarahkan ke
file ini oleh webserver. Namun kalau dilihat, file ini tidak memiliki banyak code hanya sebagai entry point
saja untuk memuat seluruh library framework. Sesuai dengan apa yang sudah dibahas pada BAB I, maka
pada praktikum ini kita akan menggunakan routing, kemudian controller, dan view. Berikut langkah-
langkah praktikum.

1. Start PHP Artisan Serve

Buka aplikasi lalu jalankan dengan command
php artisan serve
2. Memahami Route
Buka file routes\web.php kemudian perhatikan baris kode 16.

Baris kode 17 merupakan route utama yang mengarah ke halaman awal yaitu welcome page.
Route tersebut memanggil langsung berupa sebuah view blade yang terdapat pada
resources\views\welcome.blade.php. Berikutnya route pada baris 20 merupakan
route yang mengarah ke halaman dashboard untuk pengguna. Jika dilihat sambungannya pada
baris ke 22, maka route ini membutuhkan sebuah middleware autentikasi yang digenerate oleh
breeze. Sehingga untuk mengakses halaman ini, pengguna harus berhasil login terlebih dahulu
referensi https://laravel.com/docs/9.x/routing.
3. Membuat Controller
Sebagai awal latihan, kita akan memanggil sebuah controller untuk menampilkan halaman
landingpage, yang nantinya controller itu akan dipanggil oleh route pada baris 17. Salah satu
fungsi controller pengelolaan view, termasuk didalamnya jika diperlukan hingga memanggil
model. Buat sebuah controller untuk menangani interaksi pengguna pada sisi frontpage. Nantinya
Controller ini fokus menangani perpindahan halaman ataupun interaksi lainnya bagi pengunjung
https://laravel.com/docs/9.x/controllers.
php artisan make:Controller HomeController
Controller akan digenerate otomatis oleh artisan, silakan dibuka file
app\Http\Controllers\HomeController.php File tersebut masih kosong hanya ada
nama Class. Nantinya file ini memiliki fungsi untuk memanggil view landing page.
4. Membuat Component Home Layout
Componen dan slot memberikan manfaat untuk section, layout, termasuk keterkaitan antar
componen dalam setiap view yang dipanggil. Untuk membuat componen, khususnya pada kasus
ini adalah membuat sebuah layout baru untuk halaman landingpage. Layout ini akan memberikan
konsistensi tata letak seperti header, navbar, serta footer pada seluruh halaman depan aplikasi.
Untuk membuat component gunakan perintah berikut.
php artisan make:component HomeLayout

BASIC CRUD LARAVEL 9 | BREEZE PACKAGE 9

 Setelah perintah tersebut berhasil dieksekusi, akan ada dua file yang dibuat. Pertama pada
componen view app\View\Components\HomeLayout.php. Kedua pada
resources\views\components\home-layout.blade.php. Komponen home-
layout.blade.php ini sebaiknya dibawa kedalam folder resources/views/layouts
agar menjadi satu dengan layout lain, sehingga mudah dikenali. Untuk itu silakan dibuka
app\View\Components\HomeLayout.php kemudian rubah alamat view render yang
dipanggil.
public function render()
{
return view(layouts.home-layout');
}

5. Membuat Template Front Page

Buka resources\views\components\home-layout.blade.php kemudian sesuaikan
template untuk halaman front page. Latihan kali ini menggunakan file
resources\views\layouts\app.blade.php sebagai dasar dalam pembuatan
template. Kemudian sesuaikan bagian navigation dan konten seperti berikut.
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
{{-- karena template untuk frontpage, silakan Lengkapi meta tag yang lain untuk SEO --
}}
{{-- nama web sesuai konfigurasi, dapat juga dibuat dinamis --}}
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;6
00;700&display=swap">
<!-- Scripts -->
{{-- @vite(['resources/css/app.css', 'resources/js/app.js']) --}}
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<script src="{{ asset('js/app.js') }}" defer></script>
{{-- karena terjadi maslah pada instalasi tailwind, shg masih menggunakan CDN --}}
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tw-
elements/dist/css/index.min.css" />
<script src="https://cdn.jsdelivr.net/npm/tw-elements/dist/js/index.min.js"></script>
</head>
<body class="font-sans antialiased">
<div class="min-h-screen bg-gray-100">
{{-- membuat komponen navigation untuk home --}}
{{-
- basenya bisa menggunakan layouts.navigation, hanya saja hilangkan bagian menu login --}}
@include('layouts.navigationhome')
<!-- Page Content -->
<main>
{{-- SLot untuk halaman konten yang berubah dinamis
sesuai dengan view yang dipanggil oleh controller --}}
{{ $slot }}
</main>
</div>
</body>
</html>

BASIC CRUD LARAVEL 9 | BREEZE PACKAGE 10

6. Membuat Component Navigation
Selanjutnya mari buat component navigation yang dipanggil oleh home layout. Silakan copy file
resources\views\layouts\navigation.blade.php. Kemudian hilangkan bagian
login dan logout pada navigation baru
resources\views\layouts\navigationhome.blade.php. Lebih bagus jika dapat
membuat navigation yang sesuai dengan studi kasus masing-masing.
<nav x-data="{ open: false }" class="bg-white border-b border-gray-100">
<!-- Primary Navigation Menu -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex">
<!-- Logo -->
<div class="shrink-0 flex items-center">
<a href="{{ route('dashboard') }}">
<x-application-logo class="block h-10 w-auto fill-current text-gray-600" />
</a>
</div>
<!-- Navigation Links -->
<div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
<x-nav-link :href="route('dashboard')" :active="request()-
>routeIs('dashboard')">
{{ __('Dashboard') }}
</x-nav-link>
<x-nav-link :href="route('dashboard')" :active="request()-
>routeIs('dashboard')">
Promo
</x-nav-link>
</div>
</div>
<!-- Settings Dropdown -->
<div class="hidden sm:flex sm:items-center sm:ml-6">
<x-dropdown align="right" width="48">
<x-slot name="trigger">
<button class="flex items-center text-sm font-medium text-gray-
500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-
700 focus:border-gray-300 transition duration-150 ease-in-out">
<div class="ml-1">
{{-- icon SVG https://heroicons.com/ --}}
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24
24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-
linecap="round" stroke-
linejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-
3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-
1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-
1.5 0 .75.75 0 011.5 0z" />
</svg>
</div>
</button>
</x-slot>
</x-dropdown>
</div>
<!-- Hamburger -->
<div class="-mr-2 flex items-center sm:hidden">
<button @click="open = ! open" class="inline-flex items-center justify-center p-
2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-
gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path :class="{'hidden': open, 'inline-flex': ! open }" class="inline-
flex" stroke-linecap="round" stroke-linejoin="round" stroke-
width="2" d="M4 6h16M4 12h16M4 18h16" />
<path :class="{'hidden': ! open, 'inline-
flex': open }" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-
width="2" d="M6 18L18 6M6 6l12 12" />
</svg>

BASIC CRUD LARAVEL 9 | BREEZE PACKAGE 11

 </button>
</div>
</div>
</div>

<!-- Responsive Navigation Menu -->

<div :class="{'block': open, 'hidden': ! open}" class="hidden sm:hidden">
<div class="pt-2 pb-3 space-y-1">
<x-responsive-nav-link :href="route('dashboard')" :active="request()-
>routeIs('dashboard')">
{{ __('Dashboard') }}
</x-responsive-nav-link>
</div>

<!-- Responsive Settings Options -->

<div class="pt-4 pb-1 border-t border-gray-200">
<div class="px-4">
<div class="font-medium text-base text-gray-800">Name</div>
<div class="font-medium text-sm text-gray-500">Email</div>
</div>
</div>
</div>
</nav>

7. Membuat halaman Landing Page

Selanjutnya mari buat sebuah halaman landing page yang nantinya sebagai halaman utama atau
beranda dari front page website. Silakan buat sebuah folder untuk menampung seluruh file
blaade frontpage, kemudian buat satu file didalamnya
resources\views\frontpage\landingpage.blade.php. File blade ini nantinya akan menggunakan
home layout yang telah dibuat pada langkah 5 sebagai layout dari landing page.
<x-home-layout>
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
<div class="p-6 bg-white border-b border-gray-200">
<main class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div class="flex items-baseline justify-between border-b border-gray-
200 pt-2 pb-6">
<h1 class="text-4xl font-bold tracking-tight text-gray-
900">New Arrivals</h1>
<div class="flex items-center">
<div date-rangepicker class="flex items-center">
<div class="relative">
<div class="flex absolute inset-y-0 left-0 items-center pl-
3 pointer-events-none">
<svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-
gray-
400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-
rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-
2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-
rule="evenodd"></path></svg>
</div>
<input name="start" type="text" class="bg-gray-50 border border-
gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-
full pl-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-
white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Select date start">
</div>
<span class="mx-4 text-gray-500">to</span>
<div class="relative">
<div class="flex absolute inset-y-0 left-0 items-center pl-
3 pointer-events-none">

BASIC CRUD LARAVEL 9 | BREEZE PACKAGE 12

 <svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-
gray-
400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-
rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-
2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-
rule="evenodd"></path></svg>
</div>
<input name="end" type="text" class="bg-gray-50 border border-gray-
300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-
full pl-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-
white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Select date end">
</div>
</div>
<button type="button" class="inline-block mx-4 px-6 py-2 border-
2 border-blue-600 text-blue-600 font-medium text-xs leading-tight uppercase rounded-r-
md hover:bg-indigo-100 hover:bg-opacity-5 focus:outline-none focus:ring-0 transition duration-
150 ease-in-out">Check</button>
</div>
</div>

<section>
<div class="md:flex font-sans pt-8">
<div class="md:shrink-0">
<img src="https://www.baliaround.com/wp-
content/uploads/2014/05/kecakdance.jpg" alt="" class="h-48 w-full md:h-full md:w-56 inset-0 w-
full h-full object-cover rounded-lg" loading="lazy" />
</div>
<form class="p-6">
<div class="flex flex-wrap">
<h1 class="flex-auto font-medium text-slate-900">
Kecak Fire Gianyar
</h1>
<div class="w-full flex-none mt-2 order-1 text-3xl font-
bold text-violet-600">
Rp. 120.000
</div>
<div class="text-sm font-medium text-slate-400">
Available
</div>
</div>
<div class="flex items-baseline mt-4 mb-6 pb-6 border-b border-
slate-200">
First, one of the most-
visited tourist attractions in Bali is Ubud, visited by either
local or international tourists.
Ubud Bali tourist attraction has astonished many visitors who alway
s want to return
</div>
<div class="flex space-x-4 mb-5 text-sm font-medium">
<div class="flex-auto flex space-x-4">
<button class="h-10 px-6 font-semibold rounded-full bg-violet-
600 text-white" type="submit">
Book Now
</button>
<button data-bs-toggle="modal" data-bs-
target="#exampleModalLg" class="h-10 px-6 font-semibold rounded-full border border-slate-
200 text-slate-900" type="button">
Check Availability
</button>
</div>
<button class="flex-none flex items-center justify-center w-9 h-
9 rounded-full text-violet-600 bg-violet-50" type="button" aria-label="Like">
<svg width="20" height="20" fill="currentColor" aria-
hidden="true">
<path fill-rule="evenodd" clip-
rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-
1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" />
</svg>

BASIC CRUD LARAVEL 9 | BREEZE PACKAGE 13

 </button>
</div>
<p class="text-sm text-slate-500">
Free welcome drink, mask, and lunch.
</p>
</form>
</div>
<div class="md:flex font-sans pt-8">
<div class="md:shrink-0">
<img src="https://www.baliaround.com/wp-
content/uploads/2014/05/kecakdance.jpg" alt="" class="h-48 w-full md:h-full md:w-56 inset-0 w-
full h-full object-cover rounded-lg" loading="lazy" />
</div>
<form class="p-6">
<div class="flex flex-wrap">
<h1 class="flex-auto font-medium text-slate-900">
Kecak Fire & Trance Dance (Pura Dalem Taman Kaja)
</h1>
<div class="w-full flex-none mt-2 order-1 text-3xl font-
bold text-violet-600">
Rp. 150.000
</div>
<div class="text-sm font-medium text-slate-400">
Available
</div>
</div>
<div class="flex items-baseline mt-4 mb-6 pb-6 border-b border-
slate-200">
First, one of the most-
visited tourist attractions in Bali is Ubud, visited by either
local or international tourists.
Ubud Bali tourist attraction has astonished many visitors who alway
s want to return
</div>
<div class="flex space-x-4 mb-5 text-sm font-medium">
<div class="flex-auto flex space-x-4">
<button class="h-10 px-6 font-semibold rounded-full bg-violet-
600 text-white" type="submit">
Book Now
</button>
<button data-bs-toggle="modal" data-bs-
target="#exampleModalLg" class="h-10 px-6 font-semibold rounded-full border border-slate-
200 text-slate-900" type="button">
Check Availability
</button>
</div>
<button class="flex-none flex items-center justify-center w-9 h-
9 rounded-full text-violet-600 bg-violet-50" type="button" aria-label="Like">
<svg width="20" height="20" fill="currentColor" aria-
hidden="true">
<path fill-rule="evenodd" clip-
rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-
1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" />
</svg>
</button>
</div>
<p class="text-sm text-slate-500">
Free welcome drink, mask, and lunch.
</p>
</form>
</div>

<div class=" font-sans pt-8 text-center">

<a href="#" class="inline-flex items-center py-2 px-4 text-sm font-
medium text-gray-500 bg-white rounded-lg border border-gray-300 hover:bg-gray-100 hover:text-
gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-
700 dark:hover:text-white">
Previous

BASIC CRUD LARAVEL 9 | BREEZE PACKAGE 14

 </a>

<!-- Next Button -->

<a href="#" class="inline-flex items-center py-2 px-4 ml-3 text-sm font-
medium text-gray-500 bg-white rounded-lg border border-gray-300 hover:bg-gray-100 hover:text-
gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-
700 dark:hover:text-white">
Next
</a>
</div>
</section>
</main>
</div>
</div>
</div>
{{-- modal form untuk cek availibility --}}
<div class="modal fade fixed top-0 left-0 hidden w-full h-full outline-none overflow-x-
hidden overflow-y-auto" id="exampleModalLg" tabindex="-1" aria-
labelledby="exampleModalLgLabel" aria-modal="true" role="dialog">
<div class="modal-dialog modal-lg relative w-auto pointer-events-none">
<div class="modal-content border-none shadow-lg relative flex flex-col w-
full pointer-events-auto bg-white bg-clip-padding rounded-md outline-none text-current">
@include('frontpage.calendar')
</div>
</div>
</div>
</div>
</x-home-layout>

Referensi template bisa menggunakan tailwind component (https://tailwindui.com/components),

tailwindtoolbox (https://www.tailwindtoolbox.com/), atau bisa custom lebih bagus.
8. Memanggil view landing page pada controller
Silakan buka kembali controller yang telah dibuat sebelumnya
app\Http\Controllers\HomeController.php. Kemudian berikan root function berupa index, dan
panggil view landing page pada fungsi tersebut.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class HomeController extends Controller
{
function index(){
//memanggil view landing page pada folder frontpage
//disertai dengan variable title yang dapat ditampilkan pada layout
return view('frontpage.landingpage', ['title' => "Landing Page"]);
}
}
9. Daftarkan Fungsi pada route web
Semua fungsi yang ada dicrontroller wajib terdaftar pada router untuk dapat digunakan. Dalam
hal ini adalah router web. Silakan daftarkan controller pada route web. Buka route pada
routes/web.php. Referensi routing Laravel 8 https://laravel.com/docs/9.x/routing.
<?php
use Illuminate\Support\Facades\Route;
//memanggil file controller
use App\Http\Controllers\HomeController;
//route sebelumnya
// Route::get('/', function () {
// return view('frontpage.landingpage');
// });
//route yang terbaru
Route::get('/', [HomeController::class, 'index']);

BASIC CRUD LARAVEL 9 | BREEZE PACKAGE 15

 Route::get('/dashboard', function () {
return view('dashboard');
})->middleware(['auth'])->name('dashboard');

require __DIR__.'/auth.php';
Langkah terakhir akses kembali url root dari aplikasi http://127.0.0.1:8000/ maka tampilan web
seperti gambar berikut.

10. Langkah terakhir adalah menambahkan url pada navigation. Seperti pada contoh, pada router
terdapat syntax seperti ini.
Route::get('/dashboard', function () {
return view('dashboard');
})->middleware(['auth'])->name('dashboard');
//dashboard name router

Route dashboard tersebut akan dipanggil pada navigation seperti pada langkah 6 yaitu pada tag
<a></a>.
<a href="{{ route('dashboard') }}">
<!—sesuai nama router-->
<x-application-logo class="block h-10 w-auto fill-current text-gray-600" />
</a>

11. Selanjutnya silakan buat beberapa halaman lagi untuk menguji pemahaman mengenai request
life cycle laravel. Tidak perlu semua langkah diatas diulang kembali, seperti layout componen,
navigation, controller bisa digunakan kembali untuk page-page berikutnya. Yang perlu dibuat

BASIC CRUD LARAVEL 9 | BREEZE PACKAGE 16

 kembali adalah blade page yang ada di folder view/frontpage, kemudian fungsi baru untuk
memanggil view blade, mendaftarkan router, serta memanggil pada navigation.

2.4.2 EVALUASI
Silakan lakukan evaluasi tekait latihan yang telah dikerjakan. Pastikan semua check list pada bagian
evaluasi ini terpenuhi. Keberhasilan pada Latihan ini akan menentukan pengerjaan latihan berikutnya.
Silakan centang pada checklist yang telah terpenuhi.

 Template Home layout telah dibuat dan dapat digunakan

 Controller Home dan beberapa fungsi telah dibuat untuk memanggil halaman
 Seluruh fungsi pada controller tersebut telah terdaftar pada web route
 Seluruh route tersebut dapat diakses
 Membuat sebuah Landing Page
 Membuat setidaknya 3 buah page baru

BASIC CRUD LARAVEL 9 | BREEZE PACKAGE 17