Laravel Tutorial | Yuk Belajar Membuat Route dan View di Laravel!

Last Updated on October 31, 2023 by

Hai! Kembali lagi di seri Laravel tutorial dari Appkey.id

Kali ini kita akan belajar tentang tutorial Laravel 2. Apa itu tutorial Laravel 2?

Tutorial Laravel 2 adalah belajar membuat route view Laravel. Seperti yang Anda sudah ketahui, Laravel adalah framework berbasis MVC (model view controller). Otomatis, Anda harus menguasai cara membuat route dan view untuk bisa menjalankan Laravel.

Sudah tidak sabar untuk berkenalan lebih lanjut seputar route view Laravel pada Laravel tutorial kali ini? Tanpa berbasa-basi lagi, yuk kita langsung mulai Laravel tutorial dengan konsep route view Laravel. Selamat membaca!

Laravel Tutorial : Konsep View dan Route Laravel

Sebelum terjun ke praktek Laravel tutorial membuat route dan view, tentunya Anda 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 Anda ketahui, error logika coding adalah jenis error yang paling sering menimpa programmer sekaligus paling susah untuk diperbaiki.

Tentunya Anda tidak ingin hal ini terjadi pada software yang sedang Anda 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 Anda 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 Anda 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 Anda 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, Anda perlu melakukan method spoofing. Spoofing adalah metode penambahan suatu hidden field pada form. Saat membuat penambahan ini, Anda perlu memasukkan kode _method dan isikan metode route yang ingin di-spoof. Namun Anda 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, Anda 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. Yuk lanjutkan scrolling ke bagian selanjutnya!

Step by Step Mudah Membuat View dan Route Website

Membuat routing untuk perintah yang diinput oleh user bukanlah hal yang sulit. Kali ini, kami 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.

Yuk kita mulai tutorialnya:

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!';
});
3. 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. Anda 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 Anda akan sukses mendapatkan view dalam bentuk sederhana atau response string (teks biasa). Namun proses routing sederhana sudah selesai dilakukan.

Jika Anda ingin melakukan editing atau kustomisasi tampilan halaman website memakai Laravel, maka Anda 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 Anda untuk menghandle path URL. Saat Anda mengganti path URL di routing, Anda 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');

3. 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. 3. 4. 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>

5. Ulangi coding yang sama untuk kedua file lain. Jika sudah selesai, Anda bisa melakukan pengecekan ulang di browser seperti pada contoh sebelumnya.

Demikianlah seri Laravel tutorial kali ini. Semoga artikel kali ini dapat membantu menambah pemahaman Anda, ya! Nantikan artikel seri belajar Laravel lainnya dan juga artikel menarik seputar dunia IT hanya dari Appkey. Sampai jumpa!