Laravel / Laravel Basics
Working with Blade Template Engine
In this tutorial, you'll learn about Laravel's Blade templating engine. Blade makes it easy to manage and display dynamic data in your HTML.
Section overview
5 resourcesIntroduces the fundamental concepts of Laravel, including installation, routing, and MVC architecture.
Working with Blade Template Engine
1. Introduction
- Goal of the Tutorial: This tutorial aims to introduce you to Blade, the simple yet powerful templating engine provided with Laravel. We will cover how to create Blade views, how to use Blade’s control structures and how to extend layouts.
- Learning Outcomes: By the end of this tutorial, you will have a good understanding of Blade and how to use it to manage and display dynamic data in your Laravel applications.
- Prerequisites: Basic understanding of Laravel and PHP is required. Familiarity with HTML and CSS will be helpful.
2. Step-by-Step Guide
Blade views are stored in the resources/views directory and use the .blade.php file extension. They allow you to use plain PHP code in your views, which makes it super easy to manage and display dynamic data.
Creating a Blade View
To create a Blade view, you simply create a new file in the resources/views directory. For example, to create a view called welcome, you would create a file named welcome.blade.php.
Displaying Data
To display data, you use curly braces {}. The data must be passed to the view by the route or controller.
Example:
// Route
Route::get('/', function () {
return view('welcome', ['name' => 'Taylor']);
});
// View
Hello, {{ $name }}.
Control Structures
Blade offers several helpful control structures, like @if, @foreach, and @while.
Example:
@if (count($records) === 1)
I have one record!
@elseif (count($records) > 1)
I have multiple records!
@else
I don't have any records!
@endif
3. Code Examples
Let's see some practical examples.
Extending A Layout
You can create a layout with a yield section and then extend that layout in child views.
Example:
<!-- Stored in resources/views/layouts/app.blade.php -->
<html>
<head>
<title>App Name - @yield('title')</title>
</head>
<body>
@section('sidebar')
This is the master sidebar.
@show
<div class="container">
@yield('content')
</div>
</body>
</html>
<!-- Stored in resources/views/child.blade.php -->
@extends('layouts.app')
@section('title', 'Page Title')
@section('sidebar')
@parent
<p>This is appended to the master sidebar.</p>
@endsection
@section('content')
<p>This is my body content.</p>
@endsection
In the above example, the layout file app.blade.php is specified with @extends. The @section directive is used to specify sections of content, while @yield is used to display the contents of a given section.
4. Summary
In this tutorial, we covered Blade, the simple yet powerful templating engine provided with Laravel. We learned how to create Blade views and display data, how to use Blade’s control structures, and how to extend layouts. For further learning, consider exploring more complex Blade features like sub-views, components, and slots.
5. Practice Exercises
- Create a Blade view that displays a list of items passed to it from a route. Use a
@foreachloop to display each item. - Create a form in a Blade view that posts to a route. Display a confirmation message in the view after the form is submitted.
- Create a master layout with a header, footer, and main content section. Extend this layout in a child view and add content to each section.
Hint: Use the @extends, @section, and @yield directives to create and extend layouts.
Need Help Implementing This?
We build custom systems, plugins, and scalable infrastructure.
Related topics
Keep learning with adjacent tracks.
Popular tools
Helpful utilities for quick tasks.
Latest articles
Fresh insights from the CodiWiki team.
AI in Drug Discovery: Accelerating Medical Breakthroughs
In the rapidly evolving landscape of healthcare and pharmaceuticals, Artificial Intelligence (AI) in drug dis…
Read articleAI in Retail: Personalized Shopping and Inventory Management
In the rapidly evolving retail landscape, the integration of Artificial Intelligence (AI) is revolutionizing …
Read articleAI in Public Safety: Predictive Policing and Crime Prevention
In the realm of public safety, the integration of Artificial Intelligence (AI) stands as a beacon of innovati…
Read articleAI in Mental Health: Assisting with Therapy and Diagnostics
In the realm of mental health, the integration of Artificial Intelligence (AI) stands as a beacon of hope and…
Read articleAI in Legal Compliance: Ensuring Regulatory Adherence
In an era where technology continually reshapes the boundaries of industries, Artificial Intelligence (AI) in…
Read article