How to Pass Arguments to Views
We know how to grab URL parameters and return them from our route, but how do we pass arguments to the view?
Read the previous article to see how to pass arguments via the url.
It’s a pretty simple thing to implement. Before we look at our route, let’s create a new blade file in the resources/views/ directory called car.blade.php.
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Car</title>
<!-- Fonts -->
<link href="https://fonts.bunny.net/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
<!-- Styles -->
<style>
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}a{background-color:transparent}[hidden]{display:none}html{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}*,:after,:before{box-sizing:border-box;border:0 solid #e2e8f0}a{color:inherit;text-decoration:inherit}svg,video{display:block;vertical-align:middle}video{max-width:100%;height:auto}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.bg-gray-100{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}.border-gray-200{--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity))}.border-t{border-top-width:1px}.flex{display:flex}.grid{display:grid}.hidden{display:none}.items-center{align-items:center}.justify-center{justify-content:center}.font-semibold{font-weight:600}.h-5{height:1.25rem}.h-8{height:2rem}.h-16{height:4rem}.text-sm{font-size:.875rem}.text-lg{font-size:1.125rem}.leading-7{line-height:1.75rem}.mx-auto{margin-left:auto;margin-right:auto}.ml-1{margin-left:.25rem}.mt-2{margin-top:.5rem}.mr-2{margin-right:.5rem}.ml-2{margin-left:.5rem}.mt-4{margin-top:1rem}.ml-4{margin-left:1rem}.mt-8{margin-top:2rem}.ml-12{margin-left:3rem}.-mt-px{margin-top:-1px}.max-w-6xl{max-width:72rem}.min-h-screen{min-height:100vh}.overflow-hidden{overflow:hidden}.p-6{padding:1.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.pt-8{padding-top:2rem}.fixed{position:fixed}.relative{position:relative}.top-0{top:0}.right-0{right:0}.shadow{--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.text-center{text-align:center}.text-gray-200{--tw-text-opacity: 1;color:rgb(229 231 235 / var(--tw-text-opacity))}.text-gray-300{--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity))}.text-gray-400{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity))}.text-gray-700{--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity))}.text-gray-900{--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity))}.underline{text-decoration:underline}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.w-5{width:1.25rem}.w-8{width:2rem}.w-auto{width:auto}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}@media (min-width:640px){.sm\:rounded-lg{border-radius:.5rem}.sm\:block{display:block}.sm\:items-center{align-items:center}.sm\:justify-start{justify-content:flex-start}.sm\:justify-between{justify-content:space-between}.sm\:h-20{height:5rem}.sm\:ml-0{margin-left:0}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:pt-0{padding-top:0}.sm\:text-left{text-align:left}.sm\:text-right{text-align:right}}@media (min-width:768px){.md\:border-t-0{border-top-width:0}.md\:border-l{border-left-width:1px}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:1024px){.lg\:px-8{padding-left:2rem;padding-right:2rem}}@media (prefers-color-scheme:dark){.dark\:bg-gray-800{--tw-bg-opacity: 1;background-color:rgb(31 41 55 / var(--tw-bg-opacity))}.dark\:bg-gray-900{--tw-bg-opacity: 1;background-color:rgb(17 24 39 / var(--tw-bg-opacity))}.dark\:border-gray-700{--tw-border-opacity: 1;border-color:rgb(55 65 81 / var(--tw-border-opacity))}.dark\:text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.dark\:text-gray-400{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity))}.dark\:text-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity))}}
</style>
</head>
<body class="p-6">
<h1>Your Car is</h1>
<h2>Make: <!-- Add Make --></h2>
<h2>Model: <!-- Add Model --></h2>
<h2>Option: <!-- Add Option --></h2>
</body>
</html>
http://0.0.0.0/car/Nissan/GT-R/Nismo, we get to see the car that we just selected. We’ll setup the route like we normally would and pass the three arguments to the function. The function will then return the car view.<?php
// ...
Route::get('/car/{make}/{model}/{option}', function($make, $model, $option) {
return view('car');
});
When we visit the page, we get the following:
How can we get those arguments to display in our view? We have to first pass the arguments to the view. The view global helper has an optional second parameter declaration. It accepts an array of key/value pairs. So, let’s add that.
<?php
// ...
Route::get('/car/{make}/{model}/{option}', function($make, $model, $option) {
return view('car', [
'make' => $make,
'model' => $model,
'option' => $option,
]);
});
Our car.blade.php now has access to the arguments. The variable names will be the key names. Our first key is make so the variable that it’ll be bound to is $make within our car view. We can use plain PHP to display our arguments.
<body class="p-6">
<h1>Your Car is</h1>
<h2>Make: <?php echo $make; ?></h2>
<h2>Model: <?php echo $model; ?></h2>
<h2>Option: <?php echo $option; ?></h2>
</body>
When we visit our page again, we get the populated content.
It’s not ideal to use PHP directly in our views, but we haven’t learned about blade templating yet. That’s going to be the topic of the next article.
We’ll end this one with one more example, to make sure that this is solidified. Lets pass a user_type of admin key/value pair and display the $user_type within the view. A modification to the view, car.blade.php, needs to occur first.
<body class="p-6">
<h1>Hello <?php echo $user_type; ?>. Your car is:</h1>
<h2>Make: <?php echo $make; ?></h2>
<h2>Model: <?php echo $model; ?></h2>
<h2>Option: <?php echo $option; ?></h2>
</body>
</html>
Next, let’s pass the argument through our route.
Route::get('/car/{make}/{model}/{option}', function($make, $model, $option) {
return view('car', [
'make' => $make,
'model' => $model,
'option' => $option,
'user_type' => "admin",
]);
});
Refreshing the page, we get the anticipated result.
Simple. See you in the next article when start looking through the blade syntax.
Laravel Series
Continue your Laravel Learning.
Pass Parameters to Your Laravel Route
Laravel – P5: Route Parameters
Frequently we need to pass arguments to our route file via URL parameters. You might know how to do it with PHP but it’s even easier with Laravel.
How to Pass Arguments to Views
Laravel – P6: Passing Arguments to Views
We know how to grab URL parameters and return them from our route, but how do we pass arguments to the view?
Organize Your Views Better With Subdirectories
Laravel – P7: View Subdirectories and Checks
If you want to keep your Laravel views directory organized, we’ll need to look at subdirectories. There is a standard that we should strive to follow.