Laravel Blade Basics


What is Blade in Laravel?

Blade is Laravel's built-in templating engine that allows developers to create dynamic HTML views using a simple, expressive syntax. Blade templates are compiled into plain PHP, making them efficient and fast. Blade supports features like template inheritance, sections, control structures, and component-based views, making it easy to build reusable templates.


How do you define a Blade template in Laravel?

A Blade template is simply a file that contains HTML and Blade syntax. Blade templates are stored in the resources/views directory and use the .blade.php file extension.

Example of a Blade template:

<!-- resources/views/welcome.blade.php -->

<h1>Welcome, {{ $name }}!</h1>
<p>This is the welcome page.</p>

In this example, the name variable is output within the template using Blade's {{ }} syntax.


What is the {{ }} directive in Blade?

The {{ }} directive in Blade is used to output a variable's value to the view. It automatically escapes the value to prevent XSS (Cross-Site Scripting) attacks. If you need to output raw HTML, you can use the {!! !!} directive.

Example of using the {{ }} directive:

<h1>Hello, {{ $name }}!</h1>

In this example, the value of the $name variable is displayed in the heading.


How do you use conditional statements in Blade?

Blade provides directives like @if, @elseif, @else, and @endif to handle conditional logic in templates.

Example of using conditionals in Blade:

@if($user->isAdmin())
    <p>Welcome, Admin!</p>
@else
    <p>Welcome, User!</p>
@endif

In this example, Blade checks if the user is an admin and displays a different message based on the result.


How do you loop through data in Blade?

Blade provides several directives for looping through data, such as @foreach, @for, @while, and @forelse. These are used to iterate over arrays or collections.

Example of using the @foreach directive:

@foreach($users as $user)
    <p>{{ $user->name }}</p>
@endforeach

In this example, the @foreach directive loops through each user in the $users array and displays their name.


What is Blade template inheritance?

Blade template inheritance allows you to define a base layout and extend it in other views. This feature helps reduce repetition and creates a consistent layout across multiple views.

Example of a base layout:

<!-- resources/views/layouts/app.blade.php -->

<html>
<head>
    <title>My Application</title>
</head>
<body>
    <header>This is the header</header>
    
    <div class="content">
        @yield('content')
    </div>

    <footer>This is the footer</footer>
</body>
</html>

Child view that extends the layout:

<!-- resources/views/home.blade.php -->

@extends('layouts.app')

@section('content')
    <h1>Welcome to the homepage</h1>
@endsection

In this example, the home.blade.php view extends the app.blade.php layout and provides content for the @yield('content') section.


What is the @include directive in Blade?

The @include directive is used to include another Blade view within the current view. This is useful for reusing components like headers, footers, or navigation bars.

Example of using @include:

<!-- resources/views/layouts/app.blade.php -->

<html>
<body>
    @include('partials.header')

    <div class="content">
        @yield('content')
    </div>

    @include('partials.footer')
</body>
</html>

In this example, the partials.header and partials.footer views are included in the layout.


How do you pass data to an included view in Blade?

To pass data to an included view, you can provide an array as the second argument to the @include directive.

Example of passing data to an included view:

@include('partials.user', ['user' => $user])

In this example, the $user variable is passed to the partials.user view and can be accessed within that view using {{ $user }}.


What is the @yield directive in Blade?

The @yield directive is used to define a section of a layout where child views can inject content. It's commonly used in layouts to create regions that child views can populate.

Example of using @yield in a layout:

<div class="container">
    @yield('content')
</div>

In this example, the @yield('content') directive defines a section named content that child views will fill.


What is the @section directive in Blade?

The @section directive defines a section of content that can be injected into a layout using the @yield directive. It is used in child views to specify content for particular sections of a layout.

Example of using @section in a child view:

@extends('layouts.app')

@section('content')
    <h1>This is the content for the home page</h1>
@endsection

In this example, the @section('content') directive defines content that will be inserted into the @yield('content') section of the layout.


What is the @csrf directive in Blade?

The @csrf directive generates a hidden input field containing a CSRF (Cross-Site Request Forgery) token, which is required for any form that performs POST, PUT, PATCH, or DELETE requests. Laravel automatically validates the CSRF token to ensure that form submissions are secure.

Example of using @csrf in a form:

<form method="POST" action="/submit">
    @csrf
    <input type="text" name="name" />
    <button type="submit">Submit</button>
</form>

The @csrf directive adds a hidden input field containing the CSRF token to protect against CSRF attacks.


How do you escape output in Blade?

By default, Blade escapes any output within {{ }} tags to prevent XSS (Cross-Site Scripting) attacks. If you want to display raw, unescaped HTML, you can use the {!! !!} directive.

Example of escaping output:

<p>{{ $name }}</p>  <!-- Escaped -->

<p>{!! $htmlContent !!}</p>  <!-- Not escaped -->

In this example, the {{ $name }} directive escapes the output, while the {!! $htmlContent !!} directive outputs raw HTML without escaping it.


What is the @foreach directive in Blade?

The @foreach directive is used to loop through an array or collection. It's the most common looping construct in Blade.

Example of using @foreach:

@foreach($users as $user)
    <p>User: {{ $user->name }}</p>
@endforeach

In this example, Blade loops through the $users array and displays each user's name.


What is the @forelse directive in Blade?

The @forelse directive is similar to @foreach, but it provides an alternative if the array or collection being looped over is empty.

Example of using @forelse:

@forelse($posts as $post)
    <p>{{ $post->title }}</p>
@empty
    <p>No posts available.</p>
@endforelse

In this example, if the $posts collection is empty, Blade will display the message "No posts available." Otherwise, it will loop through and display the post titles.

Ads