Plug content into components with ease Aside from passing attribute data to blade components, sometimes you need to pass a large chunk of data. That data can be displayed through slots. Laravel renders the data by echoing out the $slot variable. https://www.dinocajic.com/laravel-p68-defining-custom-directives-in-blade/ We’ll start by creating a button component. All we want to be able to do with our button component is change the inner-text. It’ll be located in resources/views/components/button.blade.php. <button class=”btn”> {{ $slot }} </button> To use it, we’ll create a new Blade file: resources/views/blade-test/index.blade.php. <x-button> Test </x-button> We just need a route to display it. Route::get(‘/blade-slots’, function () { return view(‘blade-slots.index’); });
Tag: Blade Directive
Extend Blade on your terms How many times have you wished that a specific directive existed in Blade? If the answer to that question is “many,” then do I have a surprise for you. You can create your own directives in Blade. First, you need to create a service provider using the php artisan make:provider command. This provider will register your Blade directives with Laravel. # php artisan make:provider CustomBladeServiceProvider INFO Provider [app/Providers/CustomBladeServiceProvider.php] created successfully. # <?php namespace App\Providers; use Illuminate\Support\ServiceProvider; class CustomBladeServiceProvider extends ServiceProvider { /** * Register services. * * @return void */ public function register() { // } /**
Keep every Blade view in sync—share once, use everywhere Let’s get back to views. There are a few more concepts that we should cover, like how do you share data with all views? We’ll recap what we’ve done so far and take a look at an another option. https://www.dinocajic.com/laravel-p60-resource-route-names/ How Have We Passed Data to Views So Far? The second argument of our view method accepts an array of data. In the example below, we grabbed the data from the database and passed it to our view. public function index() { $cars = PersonalCar::with([‘brand’, ‘model’])->orderBy(‘year’, ‘desc’)->get(); return view(‘personalcars/index’, [ ‘title’ => ‘Personal
Secure actions with controller-level middleware Where do you add your middleware? We looked at adding it to our routes file, but we also added it to our Kernel.php in a previous example. Now we’re looking to add it to our Controller? Won’t this get confusing? https://www.dinocajic.com/laravel-p56-dependency-injection-in-controllers/ If you need to freshen up on the middleware in routes topic, check out the article that I wrote on it when we looked at route groups. https://medium.com/geekculture/laravel-p54-route-groups-middleware-and-controllers-f41804f40d31 We looked at adding it in our Kernel file when we were implementing the throttle:web middleware. <?php namespace App\Http; use Illuminate\Foundation\Http\Kernel as HttpKernel; class Kernel extends HttpKernel { // … /** *
Inject services, unclutter your controllers Since we just tackled everything route related, the next logical step is to get into Controllers. There are those that would have argued that we should have covered migrations, Models and then Controllers/Routes/Views, and there’s no disagreeing with that statement. Maybe I should write two Laravel article series concurrently. In the routing concept, without getting too far into the weeds, the Controller comes next. https://www.dinocajic.com/laravel-p55-soft-deleted-models-in-routes/ It’s not that we haven’t covered controllers yet, we just haven’t dug into some of the more infrequently/complicated functionality yet. Most of the concepts that we have already covered in
What Are Anonymous Components in Blade? We’ve been leading up to it for the last few articles and we’re finally here, components. The funny part about it is, although I prefer components, I actually prefer Vue components more than Blade components. Vue components might come much later down the road, but if you’re interested in reading on it before we actually get there, I wrote an article or two on it already. https://blog.devgenius.io/laravel-9-x-with-vue-tailwind-and-vue-router-4c2da39831ea If you haven’t read the previous article on Template Inheritance, you should since we’ll cover how to transition the code from the layout file there to component
Building Larger Applications with Layouts When you’re building larger applications, it makes sense to create layouts. We did that somewhat in the last couple of articles with the @include directive but we’ll actually create a layout this time. Even when we covered the @include directive, the reason why we used it was because the layout of the pages did not change. We had the same header and the same footer. Creating Blade Layouts using Template Inheritance was widely used before components were brought in. We’ll get to components in the next article, but I wanted to show you what it used to look
Breaking Apart the Views If you’ve downloaded the code and have been following along in the previous articles, you might have noticed that we have been creating almost the same view with the exception of changing the body content. That means we start with the same html tag and end with it. Let’s take a look at the previous view that we created, the loops/foreach-lop-variable-nested.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>Foreach Loop Variable</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
A Powerful Blade Tool For Loops An additional benefit to using the Blade syntax for your foreach loop is that you get access to the loop variable. The loop variable gives you access to various information such as how many iterations are left in the loop. If you haven’t read on Blade Loops, be sure to do so first. https://medium.com/geekculture/laravel-p11-loops-fc8e11f61998 What is part of the $loop variable? $loop->index the index of the current loop iteration (starts at 0). $loop->iteration the current loop iteration (starts at 1). $loop->remaining the iterations remaining in the loop. $loop->count the total number of items in the array being iterated. $loop->first whether this is the
How Do You Loop With Blade Directives? Blade directives have proven to be useful in the previous few articles, however, only now will they begin to shine. Loops can look quite messy with PHP when they’re embedded inside of HTML. Blade makes them look nice, almost like they belong there. Read the previous article on IF and SWITCH Blade Directives. Blade has your standard loops, like the for, foreach and while loops, but it also has another one called forelse. I’m going to assume that you know about the various different loops in PHP. If you don’t, take a look at my PHP articles on them.