Understanding View Data and Route Wildcards
Ghulam Mujtaba
Posted on August 31, 2024
Today, I learned about view data and route wildcards in a Laravel project.
View Data:
In Laravel, view data refers to the data passed from a controller to a view (template) for display. This data is typically stored in an array and passed to the view using the view() helper function or the View facade. The data is then accessible in the view using Blade syntax, enabling dynamic content display.
Route Wildcards:
Route wildcards in Laravel are placeholders in a route's URI that match any value. They are denoted by a {} syntax. For example:
Route::get('/jobs/{id}', function ($id) { ... });
In the web.php file, we have the following routes:
<?php
use Illuminate\Support\Arr;
use Illuminate\Support\Facades\Route;
Route::get('/', function () {
return view('home');
});
Route::get('/jobs', function () {
return view('jobs', [
'jobs' => [
[
'id' => 1,
'title' => 'Director',
'salary' => '$50,000'
],
[
'id' => 2,
'title' => 'Programmer',
'salary' => '$10,000'
],
[
'id' => 3,
'title' => 'Teacher',
'salary' => '$40,000'
]
]
]);
});
Route::get('/jobs/{id}', function ($id) {
$jobs = [
[
'id' => 1,
'title' => 'Director',
'salary' => '$50,000'
],
[
'id' => 2,
'title' => 'Programmer',
'salary' => '$10,000'
],
[
'id' => 3,
'title' => 'Teacher',
'salary' => '$40,000'
]
];
$job = Arr::first($jobs, fn($job) => $job['id'] == $id);
return view('job', ['job' => $job]);
});
Route::get('/contact', function () {
return view('contact');
});
In this example, {id} is a wildcard that matches any value, allowing the route to handle requests like /jobs/1, /jobs/2, etc. The value matched by the wildcard is then passed to the route's closure or controller method as a parameter ($id in this case). Wildcards can be used to create flexible and dynamic routes.
The route file allows us to view two files: jobs.blade.php and job.blade.php.
Jobs Listing File
The first file lists jobs on the screen when a user clicks on the jobs tab:
<x-layout>
<x-slot:heading>
Job Listings
</x-slot:heading>
<ul>
@foreach ($jobs as $job)
<li>
<a href="/jobs/{{ $job['id'] }}" class="text-blue-500 hover:underline">
<strong>{{ $job['title'] }}:</strong> Pays {{ $job['salary'] }} per year.
</a>
</li>
@endforeach
</ul>
</x-layout>
File to view single job data
The second file displays detailed data for a single job when a user clicks on the desired job:
<x-layout>
<x-slot:heading>
Job
</x-slot:heading>
<h2 class="font-bold text-lg">{{ $job['title'] }}</h2>
<p>
This job pays {{ $job['salary'] }} per year.
</p>
</x-layout>
These views utilize Blade syntax to display dynamic content passed from the controller. The jobs view displays a list of jobs, while the job view displays details of a single job.
Posted on August 31, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
