Laravel - Views

Laravel Tutorial Index

Views and Templating

Laravel views are an essential part of the Laravel framework, allowing the definition of the structure and layout of the application's user interface. In this tutorial, you will learn how to use Views in Laravel and create dynamic, reusable templates for an application.

What are Laravel Views?

To get started, let's first define what views are in the context of Laravel. A view is a file containing a mix of PHP code, HTML markup, and Blade templates. These templates contain placeholders for dynamic content and are used to define the structure and layout of a web page. When a user requests the application, the view is rendered and returned to the user's browser.

Views are stored in the resources/views directory of the Laravel project. By default, Laravel comes with a set of predefined views, such as welcome.blade.php and errors/404.blade.php.

Creating a View

To create a view in Laravel, follow these steps:

  1. Navigate to the resources/views directory in your Laravel project.
  2. Create a new file with a .blade.php extension. This extension tells Laravel to use the Blade template engine to parse the view.
  3. In the view file, add the HTML, PHP, and/or Blade templates that define the structure and layout of the page. You can use placeholders for dynamic content, such as or .
  4. Save the view file.

Here's an example of a simple view that displays a greeting:

Example:

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

<h1>Hello, !</h1>

In the above example, the $name is a placeholder for dynamic content. The value of $name will be displayed in the view when it is rendered.

Rendering a View

View helper functions can be used to display a view in a Laravel application. This function takes the name of the view as its first argument and an array of data as its second argument.

Here's an example of how to render the greeting view:

Example:

// in a Laravel controller
return view('greeting', ['name' => 'Alex']);

This will display the greeting view with the $name variable set to "Alex".

You can also render a view from a route.

Example:

// in routes/greeting.php

Route::get('/greeting', function () {
    return view('greeting', ['name' => 'Alex']);
});

The above code will display the greeting view when the user visits the /greeting route.

Using Layouts

In Laravel, a layout is a blade template that defines the basic structure of a webpage. It usually consists of HTML head and body tags and may include links to CSS and JavaScript files and other common elements such as headers, footers, and navigation menus. It can also have placeholders for dynamic content, such as the page title and main content. To create a layout, create a new view file in the resources/views directory and define the HTML structure and placeholders.

Here is an example of a layout template using the blade:

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>

This layout defines a sidebar section and a content section. To use this layout in a view, the layout can be extended, and sections can be defined like this:

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

@extends('layouts.app')

@section('title', 'Home')

@section('sidebar')
    @parent

    <p>This is appended to the master sidebar.</p>
@endsection

@section('content')
    <p>This is my body content.</p>
@endsection

The @extends directive tells Laravel to use the app layout as the parent template. The @section directives define the sections that will be rendered in the layout. The @parent directive within the sidebar section tells Laravel to append the content to the sidebar section defined in the layout rather than replacing it.

Finally, to render this view, the view helper function in the controller can be used like this:

return view('home');

The above code will render the home view and inject the content into the layout, resulting in the following HTML being sent to the browser:

<html>
    <head>
        <title>App Name - Home</title>
    </head>
    <body>
        This is the main sidebar.

        <p>This is appended to the main  sidebar.</p>

        <div class="container">
            <p>This is my body content.</p>
        </div>
    </body>
</html>
Found This Page Useful? Share It!
Get the Latest Tutorials and Updates
Join us on Telegram