Templating

By standard, the original Blade library is part of Laravel (Illuminate components) and to use this template library, you’re required to install Laravel and Illuminate-view components.

With BladeOne, we’re able to import most features of Laravel blade without having to install unwanted Illuminate components.

They are no significant difference in syntax or usage between this template engine and that of the existing Laravel blade, therefore, if you’re already familiar with Laravel blade templating you might find this documentation pretty boring and hence advised to skip.

Usage

Inheritance

In parent view (layout page)

In child view (using the layout page)

Example

Parent View

<html>
    <head>
        <title>@yield('title')</title>
    </head>
    <body>
        <div>Content</div>
        <div>@section('sidebar')</div>
    </body>
</html>

Child View

@section('title', 'Welcome to ' . $app_name)
@section('sidebar')
    This is a sidebar for 
@endsection

Given that a variable $app_name = 'Blade', the resulting HTML will be

<html>
    <head>
        <title>Welcome to Blade</title>
    </head>
    <body>
        <div>Content</div>
        <div>This is a sidebar for Blade</div>
    </body>
</html>

Variables

|Tag|Note| |—|—| ||escapes and displays the value of the variable using `htmlentities` to avoid xss attacks| |`@`|show the value of the content directly (not evaluated, useful for js)| |`{!!$variable!!}`|Displays the value of the variable without escaping| ||Displays the variable or default if the variable is null or undefined| |``|calls and displays the value of a function|

Logic

Loop

For loop

Template

@for($variable; $condition; $increment) 
    //List items here
@endfor

Generates a loop until the condition is met and the variable is incremented for each loop

Tag	Note	Example
`$variable`	is a variable that should be initialized.	$i=0
`$condition`	is the condition that must be true, otherwise the cycle will end.	$i<10
`$increment`	is how the variable is incremented in each loop.	$i++

Example:

@for ($i = 0; $i < 3; $i++)
    The current value is <br>
@endfor

Returns:

The current value is 0
The current value is 1
The current value is 2

Foreach

Template

@foreach($array as $alias) / @endforeach

Generates a loop for each values of the variable.

Tag	Note	Example
`$array`	Array to loop through	$countries
`$alias`	A variable that holds the item in the current loop.	$country

Example: Given that $users is an array of objects

@foreach($users as $user)
    This is user 
@endforeach

Returns:

This is user 1
This is user 2

Forelse

Template

@forelse($array as $alias) 
    //List item here
@empty 
    //Default goes here. Something to display if the array is empty
@endforelse

Its the same as foreach but jumps to the @empty tag if the array is null or empty

Tag	Note	Example
`$array`	Array to loop through	$countries
`$alias`	A variable that holds the item in the current loop.	$country

Example: Given that $users is an array of objects.

@forelse($users as $user)
    <li></li>
@empty
    <p>No users</p>
@endforelse

Returns:

John Doe
Anna Smith

While

Template

@while($condition) / @endwhile

Loops until the condition is not meet.

Tag	Note	Example
`$condition`	The cycle loops until the condition is false.	$counter<10

Example: Given $users is an array of objects

@set($whilecounter=0)
@while($whilecounter<3)
    @set($whilecounter)
    I'm looping forever.<br>
@endwhile

Returns:

I'm looping forever.
I'm looping forever.
I'm looping forever.

Split Foreach

Template

@foreach
  @splitforeach($n, $textbetween, $textend="")  
@endforeach

This functions show a text inside a @foreach cycle every “n” of elements.
This function could be used when you want to add columns to a list of elements.

NOTE: The $textbetween is not displayed if its the last element of the last.
With the last element, it shows the variable $textend

Tag	Note	Example
`$nElem`	Number of elements	2
`$textbetween`	Text to show	`</tr><tr>`
`$textend`	Text to show	`</tr>`

Example: Given $users is an array of objects

<table border="1">
<tr>
    @foreach($drinks7 as $drink)
        <td></td>
        @splitforeach(2,'</tr><tr>','</tr>')
    @endforeach
</table>

Returns a table with 2 columns.

Continue and Break

Template

@continue

@break

Continue jump to the next iteration of a cycle.
@break jump out of a cycle.

|Tag|Note|Example| |—|—|—|

Example: Given that $users is an array of objects

@foreach($users as $user)
    @if($user->type == 1) // ignores the first user John Smith
    @continue
    @endif
    <li> - </li>

    @if($user->number == 5) // ends the cycle.
        @break
    @endif
@endforeach

Returns:

2 - Anna Smith

Switch case

Example:

@switch($countrySelected)
    @case(1)
        first country selected<br>
    @break
    @case(2)
        second country selected<br>
    @break
    @defaultcase()
        other country selected<br>
@endswitch()

@switch The first value is the variable to evaluate.
@case Indicates the value to compare. It should be run inside a @switch/@endswitch
@default (optional) If not case is the correct then the block of @defaultcase is evaluated.
@break Break the case
@endswitch End the switch.

Sub Views

@include

Includes a template

You could include a template as follow:

<div>
    @include('shared.errors')
    <form>
        <!-- Form Contents -->
    </form>
</div>

You can also pass parameters to the template

@include('view.name', ['some' => 'data'])

@includeif

Additionally, if the template does not exist then it will fail. You could avoid it by using includeif

@includeIf('view.name', ['some' => 'data'])

@includefast

@Includefast is similar to @include. However, it does not allow parameters because it merges the template in a big file (instead of relying on different files), so it must be fast at runtime by using more space on the hard disk versus less call to read a file.

@includefast('view.name')

This template runs at compile time, so it does not work with runtime features such as @if() @includefast() @endif()

Comments

|Tag|Note| |—|—| |``|Include a comment|

Stacks

@set

@set($variable=[value])

@set($variable) is equals to @set($variable=$variable+1)

$variable defines the variable to add. If not value is defined and it adds +1 to a variable.
value (option) define the value to use.

Asset Management

The next libraries are designed to work with assets (CSS, JavaScript, images and so on). While it’s possible to show an asset without a special library but it’s a challenge if you want to work with a relative path using an MVC route.

For example, let’s say the next example: http://localhost/img/resource.jpg

you could use the full path.

<img src='http://localhost/img/resource.jpg' />

However, it will fail if the server changes. So, you could use a relative path.

<img src='img/resource.jpg' />

However, it fails if you are calling the web http://localhost/controller/action/

because the browser will try to find the image at http://localhost/controller/action/img/resource.jpg instead of http://localhost/img/resource.jpg

So, the solution is to set a base URL and to use an absolute or relative path

Absolute using @asset

<img src='@asset("img/resource.jpg")' />

is converted to

<img src='http://localhost/img/resource.jpg' />

Relative using @relative

<img src='@relative("img/resource.jpg")' />

is converted to (it depends on the current url)

<img src='../../img/resource.jpg' />

@asset

It returns an absolute path of the resource.

@asset('js/jquery.js')

@resource

It’s similar to @asset. However, it uses a relative path.

@resource('js/jquery.js')