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
Tag: Blade Directive
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.
Create IF and SWITCH Statements With Blade Displaying data is one thing, but Blade has directives such as PHP’s if and switch statements. Blade directives are just shortcuts for implementing PHP code. You can even create your own Blade Directives, and we’ll look at that much later. For now, let’s focus on the built in ones: @if and @switch. Read the previous article on Displaying Data in Blade Files. @if Directive As mentioned above, blade directives replicate actual PHP code. The regular PHP way of writing an if statement is: <?php if ($something == true) { // Do something here } PHP also has the elseif and else statements that pair up with
Discussing Blade Directives We ended our previous article with a quick introduction into Blade. What we really wanted to achieve was introduce what Blade is, understand that there are Blade Directives, and figure out how to load our blade component once a specific route is hit. Read the previous articles on Blade Introduction. In this article, we go deeper. We’re going to look at the following concepts: Displaying Data Displaying Unescaped Data Displaying Data We looked at passing data in the previous article, but we’re going to review it once more. Let’s create a route and pass data to our