Learning Laravel Blade and How To Make Use of It Understanding Laravel Blade and How To Use It (r)

-sidebar-toc>

This article explains the basics of what Blade is, how it works, and how it enhances the functionality of your Laravel applications.

Everything you need to know about Laravel Blade

Laravel Blade is the primary templating engine that comes with the Laravel framework. It allows you to use loops, variables conditionsal statements, loops, as well as other PHP functions directly within the HTML code. For creating Blade files, you need to define blade views through the creation of files that have an extension of .blade.php extension in the views/resources directory of your Laravel project. You can then arrange your preferred dynamic pages in these file formats.

What are the benefits of using Blade?

The main advantage of Blade is its modular code organization. Blade allows you to arrange your code into reuseable modules that you can easily change, add or modify without impacting the rest of your application.

Encapsulation of code is yet another one of Blade's advantages. Blade can help encapsulate the functions of a program, which makes the process of testing, debugging and maintenance of code more manageable. This technique is advantageous for large-scale applications as unorganized software can get difficult to manage.

What is Laravel Blade

In this course, we create an Laravel application that lets you experience Blade templates in action. Learn to define and modify blade layouts, pass data between blade views and use the different controls available as well as build your personal blades.

The prerequisites

In order to follow this tutorial make sure you've got these items:

• Experience with PHP
• Composer installed. Make sure Composer is running on your computer using composer --V

Check out the full tutorial code for guidance while performing.

How Do I Design the Laravel Application

For creating a test Laravel application, execute:

composer create-project laravel/laravel my-app

Follow the set of instructions on your terminal to finish developing the app.

After that, you must go to the directory for apps and then serve it with this command:

cd my-app
 php artisan serve

Simply click the link inside the terminal to launch your Laravel Welcome page on your internet browser.

The Layout Definition

Layouts allow you to set up elements of your website application that you can share between multiple pages. If, for instance, your application has a consistent footer and navbar across all the pages, it's easier to design it one time rather instead of creating it for each page.

Prior to working through the step-by-step directions, take a look at the skeleton that follows.

The code used to build websites without layouts is shown below. You have to write your footer and navigation bar codes for each page.

 . . . 
 Content for page 1
  . . . 

 . . . 
 Content for page 2
(footer> . . . 

Instead, you can easily create your application by using layouts to use the same components within one code block

 . . . 
 slot
  . . . 

After you've created the layout you want, make it work on any webpage you like:

It is possible to use this technique to load the data into a database. For instance, suppose you have a to-dos table containing a to-do list. Use the DB interface to load these to-dos and forward them to the view you want:

get();
 return view('welcome', ['todos' => $todos]);
 );

But, if you do not have a database, you can update the web entry route to include a range of static to-dos. Navigate to the routes/web.php file and change your default (/) route with the code below:

Route::get('/', function () 
 $todos = ['Learn Laravel', 'Learn Blade', 'Build Cool Stuff'];
 return view('welcome', ['todos' => $todos]);
 );

Replace the content in the welcome.blade.php file with this code, which allows you to see the list of tasks in an encoded JSON array.

 
 Home | Example Website
 
  json_encode($todos) 
 
 

How to use Control Shortcuts

The Blade engine for templating also has different directives that render different data types conditionally. To for example, iterate through the to-dos list that you had passed into your welcome view create an foreach loop by pasting the following code inside your welcome.blade.php file:

 
 Home | Example Website
 
 
 @foreach ($todos as $todo)
  $todo 
 @endforeach
  
 

The change will put your to-dos in an unordered schedule, similar to the image below.

To construct a block of conditional statement, make use of @if, @elseif, @else @if, @elseif, @else, and @endif directives. As an example,

@if (count($todos) === 1)
 I'm assigned one thing!
 @elseif (count($todos) > 1)
(count($todos) > 1)I'm assigned multiple jobs!
 @else
 I don't have any projects!
 @endif

Replace the content of the welcome.blade.php file with the above code. The various directives, ifor else directives are used to count the completed items, and then display a specific message for different scenarios. Given that you have several tasks listed within your task list You should get the output "I have multiple projects!" in the browser.

There are more support directives in the documentation for Laravel.

How To Make a Custom Extension

You can write a custom directive, too, as in the earlier example. For this make a custom directive that uses text to reduce.

The first step is to create a the new service provider by running:

php artisan make:provider TruncateTextServiceProvider

This command generates a new service provider file at app/Providers/TruncateTextServiceProvider.php. You can open this file, and then change its contents to:

";
 );
 
 

The code imports the Blade facade and defines a new custom directive named @truncate. It accepts two arguments: $text and the $length parameter. The directive uses an algorithm called the Str::limit() method to reduce the text down to the specified length.

Then, you must register the service provider by adding the provider's array within your config/app.php configuration file:

'providers' => [
 // Other service providers
 App\Providers\TruncateTextServiceProvider::class,
 ],
 

Utilize the directive that you have created in your Blade template ( welcome.blade.php) by invoking it via the @truncate syntax.

  @truncate('Lorem dolor sit amet', 10,)
 Outputs: Lorem ipsu... --> 

Summary

This article outlined the ways Laravel Blade enables you to improve your development workflow by creating modular and reuseable views for web applications. However it is important to remember that your Laravel development process shouldn't stop there.

The system that runs your application is as critical for your development success as the local development processes. If you want to bring your Laravel application to the next level you need a reliable hosting system that is able to handle the demands.

Marcia Ramos

I'm the Editorial Team Lead at . I'm a open source enthusiast and am a huge fan of coding. Over the past seven years of technical writing and editing for the technology industry, I enjoy working with colleagues in creating simple and clear pieces of content and improve processes.

•                 LinkedIn