The simplest Blade tutorial !
Disambiguation: This tutorial is about Blade, the template engine for Laravel…. I am covering blade on Laravel 9, but I am also taking into account that you might be maintaining code from blade 5 !
Why yet another blade tutorial ? they are all over the place !
long as this tutorial may be, it should be an easy read. no need to memorize stuff or write notes, I am trying to structure it in such a way so that you can effortlessly understand the concept, then come back for that one little syntax you have forgotten very easily.
Simply put, i think blade is a very simple framework that you can complicate if you insist, I think there is an easier way to get someone up and running with blade, a tutorial that compares the Blade way to the traditional way, does not invoke flashy abbreviations before explaining what they mean, and serves you the simplest explanation first… Also one that involves illustrations, shows the different features and explains how they differ and when to use features and why…
I’ll leave the flashy terms and history lessons near the end of the tutorial for completeness, and because they may be useful, but not before you are comfortable with Blade.
Why not a video tutorial
If this gets any attention, I will create a video from it, but I personally prefer reading and looking at illustrations.
What is blade in simple terms ?
Traditionally, when creating a website in PHP, your HTML is mostly in the same PHP files that provide the functionality ! blade is here to help you separate your HTML content from your PHP functionality…
Blade is a special folder in your Laravel project where you add those PHP files that contain your HTML*, plain old folder where you simply separate those files from the rest of your code. files in that folder enjoy extra functionality provided by blade that takes out the inconveniences of separating the HTML.
in your Laravel project, that folder is usually /resources/views, blade PHP files end in .blade.php, for example, mytheme.blade.php
* HTML And JSON if you are also writing an API…. and whatever you normally add to your HTML such as inline CSS and inline JS
Isn’t Separating my HTML into it’s own files a lot more work ?
Well, that is what blade is for, it provides tools to make this simple and easy
Traditionally, if you wanted to separate the HTML from the rest of your code, you would create PHP files with the HTML in them, and use PHP’s include function to show them… or embed the HTML inside functions that are in separate files, and send the data to those functions (or classes) and print what is returned…
That works, and blade is more or less the same thing, but as you proceed with Blade, you will see how blade resolves many inconveniences that this method comes with.
Let’s get down to it !
Setup Laravel on your system
First, I am assuming you have already setup Laravel and created a new project, if not, please take a look here (/2022/09/07/laravel-tutorial-laravel-setup/) for instructions on how to do that !
Create a couple of dummy routes
Now that you have such a setup, We will need to add a couple of routes (URL definitions), don’t concern yourself with what they are or what they mean, they are covered in the next section, they are just here to enable us to learn blade, routes is in a totally different place, all you need to learn for now that those two routes are invoked when you visit the URLs they define, and they pass the variables you see in them to the blade templates
Routes are added to the /routes/web.php file, so open that file and add the following at the end of it, now you have two URLs that work, the home page, and a /test page
First Blade File: plain HTML and nothing more
Now, let us create our first BLADE file, let us call it example.blade.php, and in that file, we will simply add an HTML page with nothing to do with blade specific features, Just that page that will display whether you use the home page (the first route from above), or the /test route that you see in the other route !
—————–
Unorganized content to be incorporated into the tutorial
If you stick to a couple of rules, it is compiled into PHP code and cached, so it is really fast !
Asset helpers
Layouts (extends, Yeild, section, show)
Partials
Components: includes, arrays vs collections {{$var->entry}}, props, <x-cards>,
BLADE is inspired by .NET’s Razor engine.
Allows you to use PHP code inside (@php directive), but you should not need to, and you should not unless you have to
(If you feel a need, you are misplacing your code)
If you come from Symfony, you can use Twig through Twig-bridge !
Syntax
1- Echo
{{ $variable }} is equivalent to <?= htmlentities( $variable ) ?>
Sometimes you may need to echo handlebar notation into the output, so you can simply use an @ before the above notation
@{{ $variable }} will output {{ $variable }} (Without the @)
or, if you want things to just print as they are, you can use the @verbatim directive !
{!! $variable !!} is equivalent to <?= $variable ?>
{{ $variable }} = <?= htmlentities( $variable ) ?>
{!! $variable !!} = <?= $variable ?>
{{-- comment is here --}}
self explanatory blade directives
if elseif else endif (endif is the closing after all of them)
@unless and @endunless = equivilent to if(!cond)
@for, @foreach, and @while (endfor endforeach enwhile)
@forelse and @endforelse = ForElse is a ForEach loop, but with extra handling for empty array.
@forelse ($talks as $talk)
{{ $talk->title }} ({{ $talk->length }} minutes)<br>
@empty
No talks this day.
@endforelse
-----------------------------------------------------------
Defining Sections with @section/@show and @yield
yeilds first param is the section name, it's second is A DEFAULT VALUE
instead of yeild, if you want an entier block as a default fallback, you can use
@section('footerScripts')
<script src="app.js"></script>
@show
In this @section .... @show, if we want to append to the default value above, we should include @parent in the child template extending this, otherwise, the contents above will be overwritten !
Note that The @show is in the parent section, shows in place, while the @section and @endsection are in the child !
the section show is both defining a default and doing so in such a way that its default contents will be available to its children, through @parent
to use all of the above... assuming the template is at resources/views/layouts/master.blade.php
@extends('layouts.master') {{-- Each file should only extend one other file, and the @extends call should be the first line of the file --}}
@section('title', 'Dashboard')
@section('content')
Welcome to your application dashboard!
@endsection
@section('footerScripts')
@parent
<script src="dashboard.js"></script>
@endsection
-----------------------------------
partials
------------------------------------------------
1: creating a folder called images under public !
---------------------------------------------------
Method 1: @yeild
put the header and footer in one file called layout.blade.php in one peice (empty doc)
within the template, you put in
@yield('content)
in other layout components, you use the extends directive, and make the content inside
@extends(layout)
@section('content')
whatever needed to appear in the theme, the content that is labeled content just like in yeild
@endsection
partials are added with include, so if you put the thing in the partials directory, the convention is that a file starts with underscore as a partial, _hero.blade.php
include('partials._hero)
Method 2: making the layout a component
---------------
in routes, read on route model binding, instead of passing $id to the inner function and route specification, we pass an object of type listing (The model listing) to the inner function, and in the route specification, the word /blah/{listing}, we it allows us to just
