Actually Creating the Layout Believe it or not, the difficult part was covered in the previous article. Breaking apart the header and footer components was a tedious task. Creating a layout is simple. Laravel — P18: Component Layout Prep-Work Recap We first created the following file: views/layouts-test/index.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>{{ $title }}</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 /

Layouts For Our Blade Components In the previous article, we looked at breaking apart our header and storing it into components. This time, we’ll continue on and break apart our footer. We’ll then create a layout and add our body content in the next article Laravel — P17: Components Within Components The Setup In our components directory, we’ll create a new subdirectory called layouts. The layouts directory will contain a header and a footer subdirectory. The header directory will contain all of our code that we focused on in the previous article: logo.blade.php main.blade.php nav.blade.php nav-button.blade.php nav-dropdown.blade.php nav-dropdown-option.blade.php The footer subdirectory will contain our footer components that we’ll work

Component Inception We’re going to see what the true power of components looks like; I should have called this article Component Inception since we’ll be going deep inside our components. In the previous article, we just touched on the topic, but we’re going to expand it fully this time. Laravel — P16: Blade Anonymous Components Introduction Our header component will be composed of smaller components. We can choose how small we want to go. What it looks like right now Our header contains all of the code that composes our top menu navigation. <!DOCTYPE html> <html lang=”{{ str_replace(‘_’, ‘-‘, app()->getLocale())

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

Sometimes You Need to Inject Pure PHP Raw PHP in Blade Files: it’s not something that I advocate, but sometimes you just need to write some raw PHP in your Blade files. Read the previous article on Including Subviews Imagine the following scenario. You’re a front-end developer working with a backend developer on a product view. You’re both building an e-commerce application for a B2B company. The customer can log in and they should be able to see their pricing since the distributor offers tiered pricing for their customers. Currently, the backend sends you the regular price of the product.

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