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=”;600;700&display=swap” rel=”stylesheet”> <!– Styles –> <style> /*! normalize.css v8.0.1 | MIT License | */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. 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

Using the Blade Engine to Remove PHP Blade is a templating engine that allows you to write some front-end friendly code. The last thing that the designer wants to see is PHP wrapped up inside of the views. Looking at Blade components, you’ll quickly appreciate the elegance in the appearance vs the mess that PHP can create when used outside of the backend. Blade templates are compiled into PHP code, but we don’t need to worry about it. As long as we use the correct tags, Laravel/Blade will take care of this for us. .blade.php In order to use the

Organize Your Views Better With Subdirectories There are a couple of more concepts that we should look at before we move on to the blade templating engine. This time, we’ll cover subdirectories and one simple check to see if the view that we’re calling actually exists. Read the previous article on Passing Arguments to Views. Subdirectories Who cares about subdirectories? Why not just shove all of the views under one directory, views? It’s incredibly important for organization. Most of the time, you’ll list your resource name, likes users as a subdirectory of views, and then the 4 CRUD views: create.blade.php edit.blade.php index.blade.php show.blade.php

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=”;600;700&display=swap” rel=”stylesheet”> <!– Styles –> <style> /*! normalize.css v8.0.1 | MIT License | */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