The process of learning Laravel Blade and How To Make Use of It Understanding Laravel Blade and How To Use It (r)

Aug 12, 2023
Learn more about Laravel Blade and find out how to use it properly

-sidebar-toc>

This article provides the fundamentals of what Blade is, how it works in conjunction with the functionality in applications like Laravel applications.

Everything you need to be aware of about Laravel Blade

Laravel Blade can be described as the principal templating engine that comes with the Laravel framework. It permits you to utilize loops, variables conditionsal loops, statements, along with additional PHP functions directly inside the HTML code. To create Blade files, you will need to define blade views through the creation of files that have an extension of .blade.php extension in the views/resources directory within your Laravel project. Then, you can organize your desired dynamic pages in these file formats.

What are the benefits that come with the use of Blade?

Blade's primary benefit Blade is the flexibility of its code structure. Blade allows you to arrange your code into modular components that are easy to change to add or remove features without impacting the rest of your application.

Coding is another one of Blade's advantages. Blade can help encapsulate the aspects of the program making the process of debugging, testing and maintenance of code more feasible. This method is beneficial when dealing with large scale applications, as poorly organized software can get complicated to handle.

What exactly is Laravel Blade

In this training, we create an Laravel application that lets you see Blade templates in action. Learn how to design and alter blade layouts, pass data between the blade views, and use the different options available to build your personal blades.

The conditions

To adhere to this guide, make sure you've got the following items in your possession:

  • Experiential experience using PHP
  • Composer installed. Verify that Composer is installed on your system by using the composer option --V

Check out the complete tutorial code for guidance while performing.

What Do I Need to Know? Design my Laravel Application

In order to create a test Laravel application, execute:

composer create-project laravel/laravel my-app

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

Following that, browse the directory to find apps, and then run it with this command:

cd my-app php artisan serve

Just click on the link within the terminal to start your Laravel Welcome page on your web browser.

Layout Defined

Layouts let you design elements of your application for web that are shared across multiple pages. For example, if your application has a consistent navigation bar and footer across all the pages, it's easier to design the layout once as creating it on each page.

Before you begin working through the step-bystep steps, take a look at the skeleton you will see.

The code used to build sites without layouts can be seen below. The code you need to use is the footer and navigation bar code for every page.

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

Instead, you can easily develop your application using layouts to use identical components in one code block

. . . Slot . . .

Once you've designed your layout, make it work on any webpage you'd like to:

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. Utilize the DB interface to download these tasks and forward them to the view you want:

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

However, in the event that you do not have a database, you can modify your web entry route to include a range of static to-dos. Navigate to the routes/web.php file and alter your default (/) route with the instructions below:

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

Replace the content within welcome.blade.php. Replace the content in welcome.blade.php file with this code, which permits you to view the tasks listed as an encrypted JSON array.

 Home | Example Website json_encode($todos) 

How do you use Control Shortcuts

The Blade engine that handles templating has different directives that render different data types conditionally. For instance, you could iterate through the to-dos list that you had passed to your welcome view, make a foreach loop by copying the following code into the welcome.blade.php file:

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

The change will put your agendas on a randomized schedule, similar to the picture below.

To-dos in an unordered list
to-dos in an unordered list

For the construction of a block conditional statement, make the use of @if, atelseif, @else @if, @elseif, @else, and @endif directives. To illustrate,

If (count($todos) is equal to= 1) I'm given one task! @elseif (count($todos) > 1) (count($todos) > 1)I'm assigned multiple jobs! @else I don't have any tasks! @endif

Edit the text in your welcome.blade.php file with the above code. The different directivesor else directives will count the completed items and show a particular message in diverse scenarios. Given that you have several projects listed on the task list, you should get the output "I have several projects!" within the browser.

Additional support guidelines are included in the documentation on Laravel.

How To Make an extension that you can customize

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

First, you must make a brand new company by running:

php artisan make:provider TruncateTextServiceProvider

This command generates a new service provider file at app/Providers/TruncateTextServiceProvider.php. The file can be opened before changing its content to:

"; ); 

The code is imported into the Blade facade, and then creates a custom directive named @truncate. It can be used with two parameters: $text and the $length parameter. It uses an algorithm known as the Str::limit() method to shrink the text to the desired length.

Then, you must sign up the service provider inserting the array for the service provider into the config/app.php configuration file:

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

Use the instruction you've written in your Blade template ( welcome.blade.php) through the @truncate syntax.

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

Summary

The article discussed the various ways Laravel Blade enables you to optimize your development process through the creation of modular and repeatable views for web applications. But it's important to remember that your Laravel development should not stop there.

The system that runs your application is just as important to the success of your application development as the local processes for development. If you are looking to take your Laravel application to the next level, you need a reliable hosting system that can handle the requirements.

Marcia Ramos

I'm the Editorial Team Lead at . I'm a open source enthusiast and am a big fan of coding. In the last seven years of writing technical content and editing in the technology industry, I enjoy collaborating with colleagues to create straightforward and easy articles and developing procedures.

Article was first seen on here