Reading Time: 8 minutes

23,044 Views

For any application we always should have a user interface in short UI to present application. It can be in any form like an admin panel, social platform, a website etc. Laravel is a MVC supported framework, so here inside this keyword V stands for Views.

Laravel views serve HTML to browser. To create & store view file in laravel we prefer the standard /resources/views folder. Also we use blade template engine to create these. Why we use Blade templates?

Learn More –

Blade templates are the template engine provided by laravel. These templates have their own syntax to define the layout for views. These syntax dynamically parsed by view files.

Inside this article we will see the concept of Laravel 8 Layouts And Views and cover following topics –

Basic view file concept
Routing with views
Concept of Blade layout
Including Partial files
Adding Assets to Layout & View files

Step by step we will cover each topic in detailed concept. Let’s get started.

Laravel Installation

We will create laravel project using composer. So, please make sure your system should have composer installed. If not, may be this article will help you to Install composer in system.

Here is the command to create a laravel project-

composer create-project --prefer-dist laravel/laravel blog

To start the development server of Laravel –

php artisan serve

URL: http://127.0.0.1:8000

Assuming laravel already installed inside your system.

Basic view concept

We can render view in many configuration. Step by step we will see each of these.

Closure Route

Open file /routes/web.php

Route::get('/', function () {
  
    return view('welcome'); // /resources/views/welcome.blade.php
  
});

When we open route /, it will open welcome view file. If we need to pass parameters to view file, also we can send.

Route::get('/', function () {
  
    $data = ["name" => "Sanjay", "email" => "sanjay@mail.com"];
  
    return view('welcome', $data); // /resources/views/welcome.blade.php
  
});

# At view file - welcome.blade.php

{{ $name }} {{ $email }}

Routing with Views

Here, we will use view() method of Route. First parameter is the route, Second is view file & third is optional which contains data set for view files.

# Route for welcome page
Route::view("/", "welcome");

# Route with parameters
Route::view("/", "welcome", ["name" => "Sanjay", "email" => "sanjay@mail.com"]);

Calling View via Controller Route

Let’s say we have a controller in our application. In that controller we have a simple method. Firstly let’s configure route first.

# Import controller here
use App\Http\Controllers\Student;

Route::get("/", [Student::class, "welcome"]);

Route /, Method welcome of Student controller. Back to controller file

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class Student extends Controller
{
    public function welcome(Request $request)
    {
        $data = ["name" => "Sanjay", "email" => "sanjay@mail.com"];
      
        return view("welcome", $data); // welcome.blade.php
    }
}

Concept of Blade layout

Blade layout means the layout which have several common parts which can be used through out application, no need to load multiple files for that. Common area includes like header, footer, sidebar etc. It includes blade syntax.

We use the same folder structure /resources/views to store layouts as well. Let’s create a simple basic blade layout. Create a file in /resources/views/layouts/app.blade.php

<html>
    <head>
        <title>App Name - @yield('title')</title>
    </head>
    <body>
        @section('sidebar')
            This is the common sidebar.
        @show

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

We have used some directives inside blade template @yield, @section etc. We can say these the dynamic placeholders to rendering dynamic page contents.

Now, let’s see how to use inside application. Create a file /resources/views/about-us.blade.php. Inside this view file, we need to extends and add contents for dynamic placeholder.

@extends('layouts.app')

@section('title', 'About Us')

@section('sidebar')
    @parent <!-- Includes parent sidebar -->

    <p>About us page sidebar</p>
@stop

@section('content')
    <p>This is about us content page.</p>
@stop

@extends(‘layouts.app’) Extending layout from layouts folder.
In same way we can create multiple application views and according to page we put page content.

Include Partial Files in Layout

To include partial files or sub views we use @include directive. This directive allow us to render sub views into other views. We can either include master blade layout or in any of view files as well.

Let’s say we have a slider file called slider.blade.php into /resources/views/partials/slider.blade.php file which includes HTML code for slider. Now we want to include into a welcome page layout.

@extends('layouts.app')

@section('title', 'About Us')

@section('sidebar')
    @parent <!-- Includes parent sidebar -->

    <p>About us page sidebar</p>
@stop

@section('content')
 
    @include('partials.slider')

    <p>This is about us content page.</p>
@stop

@include(‘partials.slider’) Including partial file slider partials folder.

How to attach Public files to view files

All public acessible files should be placed into public directory. Let’s say we have created & stored few files as /public/assets/css/style.css and /public/assets/js/script.js.

There are several ways to attach public asset files to layouts and view files. We will use one of them as URL::to() to add into layouts. This is from use Illuminate\Support\Facades\URL Facade.

Adding Assets to view files as –

<link rel="stylesheet" type="text/css" href="{{ URL::to('assets/css/style.css') }}">
  
<script type="text/javascript" src="{{ URL::to('assets/js/script.js') }}"></script>

Adding styles & javascripts to view files

We are using @stack directive to place assets like javascript and stylesheet files. This particularly useful for specifying any JavaScript libraries required by your child views and style files.

<html>
    <head>
        <title>App Name - @yield('title')</title>

        @stack('styles')<!-- To include style links -->
    </head>
    <body>
        @section('sidebar')
            This is the common sidebar.
        @show

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

        @stack('scripts') <!-- To include script links -->
    </body>
</html>

Extending layout in any view file.

@extends('layouts.app')

@section('title', 'About Us')

@push('styles')
    <link rel="stylesheet" href="/assets/css/style.css"/>
    <style>
      /* css code */
    </style>
@endpush

@section('sidebar')
    @parent <!-- Includes parent sidebar -->

    <p>About us page sidebar</p>
@stop

@section('content')
 
    @include('partials.slider')

    <p>This is about us content page.</p>
@stop

@push('scripts')
    <script src="/assets/js/script.js"></script>
    <script>  
     // .. custom js code
    </script>
@endpush

Asset files should be placed inside /public/assets/css and /public/assets/js folder.

We hope this article helped you to learn about Laravel 8 Layouts And Views in a very detailed way.

Online Web Tutor invites you to try Skillshike! Learn CakePHP, Laravel, CodeIgniter, Node Js, MySQL, Authentication, RESTful Web Services, etc into a depth level. Master the Coding Skills to Become an Expert in PHP Web Development. So, Search your favourite course and enroll now.

If you liked this article, then please subscribe to our YouTube Channel for PHP & it’s framework, WordPress, Node Js video tutorials. You can also find us on Twitter and Facebook.