Belajar Membuat Route Dan View Di Laravel
Oke balik lagi sama saya Dicky Frandika ( Mr.Dick ) seperti yang gua bahas sebelum tentang laravel sekarang kita belajar membuat Route dan View di Laravel. Seperti yang kamu sudah ketahui, Laravel adalah framework berbasis MVC (model view controller). Otomatis, Anda harus menguasai cara membuat route dan view untuk bisa menjalankan Laravel.
Udah gak sabarkan jadi langsung aja ke belajar langsung cekgejrot
Laravel Tutorial : Konsep View dan Route Laravel
Sebelum terjun ke praktek Laravel tutorial membuat route dan view, tentunya elu harus memahami dengan betul konsep dari route dan view ini terlebih dahulu. Pemahaman yang benar dan tepat otomatis akan menghindarkan Anda dari error logika coding.
Perlu untuk elu ketahui, error logika coding adalah jenis error yang paling sering menimpa programmer sekaligus paling susah untuk diperbaiki.
Tentunya elu tidak ingin hal ini terjadi pada software yang sedang elu buat, bukan?
Jadi, mari kita mulai Laravel tutorial kali ini dengan mengenal apa itu view dan route Laravel. Mengapa kedua elemen ini penting? View adalah elemen yang menampilkan hasil atau output proses data.
Sementara route Laravel berfungsi untuk menjalankan proses routing, alias penentuan jalur dari setiap request yang diinput oleh user agar bisa diproses secara tepat dan menghasilkan output.
Semisal elu melakukan input request ‘dashboard’ ke aplikasi atau website. Mesin yang sudah di-routing tentunya sudah punya jalur untuk request penampilan ‘dashboard’, sehingga software bisa menampilkan output ‘dashboard’ beserta isinya (seperti menu, konten, tombol login, dan seterusnya) sesuai kehendak user.
Jadi, tugas elu selaku programmer adalah melakukan pemetaan sendiri kemana arah atau alur yang harus diproses Laravel untuk sebuah request.
Route dibuat untuk menghandle aneka macam request dan task yang diinput oleh user. Ada beberapa macam http method route yang bisa eli buat di Laravel, antara lain route Post, Get, Options, Delete, Patch, dan Put.
Sebagai catatan, method route Patch, Put dan Delete biasanya tidak disupport oleh form HTML. Sehingga untuk mengakalinya, elu perlu melakukan method spoofing. Spoofing adalah metode penambahan suatu hidden field pada form. Saat membuat penambahan ini, elu perlu memasukkan kode _method dan isikan metode route yang ingin di-spoof. Namun elu harus menggunakan form method ‘Post’ agar bisa melakukan spoofing method route lainnya.
Contoh spoofing route Delete di Laravel:
<form action="/path/action" method="POST">
{{csrf_field()}}
<input type="hidden" name="_method" value="DELETE">
</form>
Alternatif lainnya, elu juga bisa memakai helper untuk melakukan generate input method spoofing dengan kode: method_field(). Contoh pemakaian helper untuk spoofing route Delete di Laravel:
<?php {{ method_field('DELETE') }}
Berikutnya, kita akan melihat bagaimana Laravel tutorial membuat route dan view secara praktis. langsung geser bawah slur
Step by Step Mudah Membuat View dan Route Website
Membuat routing untuk perintah yang diinput oleh user bukanlah hal yang sulit. Kali ini, gua yang ganteng ini akan menjabarkan cara membuat route perintah pada website memakai Laravel, sehingga web bisa menampilkan output pengolahan data pada view secara rinci ke user.
Sebagai catatan, folder /route pada Laravel umumnya terdapat 4 file: channels.php, web.php, api.php dan console.php. Mengingat kita akan mencoba membuat beberapa route pada website, maka otomatis kita akan banyak memakai file web.php.
Langsung ke tutorialnya geng
Mengubah Tampilan Polos Web
Anggaplah praktek ini bertujuan untuk mengubah tampilan kosong (plain example) menjadi ucapan “Selamat Datang” saat user selesai me-loading website. Berikut caranya:
1. Mula-mula buat project Laravel (create project) > buka composer > input kode:
composer create-project –prefer-dist laravel/laravel portfolio
2. Pada file, cari struktur coding
Route::get('/', function () {
return view('plainexample');
});
3. Ubah struktur coding di atas menjadi berikut:
Route::get('/', function () {
return 'Selamat Datang!';
});
4. Selesai. Untuk mengecek, buka browser > input kode URL: http://localhost:8000 > tekan enter atau klik loading. Nantinya Anda akan menemukan tampilan / view tulisan ‘Selamat Datang!’ saat website selesai di download.
Mencoba Route GET
Selanjutnya adalah mencoba melakukan route get untuk menampilkan halaman-halaman pada website, seperti about, home page dan halaman menu khusus ‘daftar project’. Berikut caranya:
1. Buka file: routes/web.php
2. Hapus semua isinya.
3. Coding ulang untuk ketiga halaman (about, home page, dan daftar project) dengan kode-kode berikut:
# routing untuk halaman about
Route::get('/about', function () {
return 'About Page';
});
# routing untuk halaman home page
Route::get('/', function () {
return 'Home Page';
});
# routing untuk halaman daftar project
Route::get('/projects', function () {
return 'List Projects';
});
4. elh sudah punya 3 routing untuk home page, about dan halaman daftar project dengan metode get (perhatikan kembali, metode get terinput pada kode route::get).
5. Untuk mengecek, buka browser > input kode URL ke browser > tekan enter. URL about = http://localhost:8000/about. URL home page = http://localhost:8000. URL daftar project = http://localhost:8000/projects.
Jika berhasil, maka elu akan sukses mendapatkan view dalam bentuk sederhana atau response string (teks biasa). Namun proses routing sederhana sudah selesai dilakukan.
Jika elu ingin melakukan editing atau kustomisasi tampilan halaman website memakai Laravel, maka elu bisa memakai ekstensi file blade.php. File blade.php punya banyak helper untuk mempermudah proses kustomisasi tampilan halaman website ataupun aplikasi.
Membuat Named Route (Nama untuk Route)
Contoh Laravel tutorial membuat route yang terakhir adalah membuat named route atau nama untuk route. Banyak programmer sering membuat named route ini dengan tujuan memudahkan proses linking atau redirecting route yang satu ke yang lain.
Sehingga, proses perpindahan view dapat menjadi lebih dinamis dan mudah di hadapan para user.
Memberikan nama pada routing juga akan mempermudah pekerjaan elu untuk menghandle path URL. Saat elu mengganti path URL di routing, elu tidak perlu repot mengganti keseluruhan nama link di view semasih nama route tetap seperti sebelumnya.
Berikut adalah cara membuat named routing di Laravel:
1. Buka file: /routes/web.php
2. Ganti kode pada file menjadi:
# routing untuk halaman about
Route::get('/about', function () {
return view('about');
})->name('about');
# routing untuk halaman home page
Route::get('/', function () {
return view('home');
})->name('home');
# routing untuk halaman daftar project
Route::get('/projects', function () {
return view('projects');
})->name('projects');
Lakukan generate URL dari route tersebut > panggil fungsi route > masukkan nama route (sebagai parameter) > gunakan kode: route(‘namahalaman’)
Contoh:
route(‘homepage’); # > mengembalikan https://localhost:8000
route(‘about’); # > mengembalikan https://localhost:8000/about
route(‘daftarproject’); # > mengembalikan https://localhost:8000/projects
3. sebut > panggil fungsi route > masukkan nama route (sebagai parameter) > gunakan kode: route(‘namahalaman’)
Contoh:
route(‘homepage’); # > mengembalikan https://localhost:8000
route(‘about’); # > mengembalikan https://localhost:8000/about
route(‘daftarproject’); # > mengembalikan https://localhost:8000/projects
Gunakan route helper untuk mengubah metode input URL manual > buka kembali file /resources/views/home.blade.php > ubah kode navbar:
<nav class=”navbar navbar-expand-lg navbar-light bg-light ml-auto”>
<div class=”container”>
<a class=”navbar-brand” href=”{{ route(‘home’) }}”>Example</a>
<button class=”navbar-toggler” type=”button” data-toggle=”collapse” data-target=”#navbarSupportedContent” calibri-controls=”navbarSupportedContent” calibri-expanded=”false” calibri-label=”Toggle navigation”>
<span class=”navbar-toggler-icon”></span>
</button>
<div class=”collapse navbar-collapse” id=”navbarSupportedContent”>
<ul class=”navbar-nav ml-auto”>
<li class=”nav-item active”>
<a class=”nav-link” href=”{{ route(‘home’) }}”>Home
<span class=”sr-only”>(current)</span></a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”{{ route(‘about’) }}”>About</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”{{ route(‘projects’) }}”>Projects</a>
</li>
</ul>
</div>
</div>
</nav>
4. Ulangi coding yang sama untuk kedua file lain. Jika sudah selesai, Anda bisa melakukan pengecekan ulang di browser seperti pada contoh sebelumnya.
Oke sampai di sini tutorial kali ini tentang Laravel semoga Bermanfaat bagi elu elu pada:v nantikan materi dari w lagi sekian terimakasih