Integrate template in Laravel 8.x

#STEP 1: Locate template file

Industrious by TEMPLATED

download the files and inspect them.

We could see that we have asssets, images and several html files.

Lets open the generic template.

If we inspect the code of it we could see that we have Header, Main and Footer parts of the template.

This template is ready to be used.

#STEP 2: Split template in Laravel

Create new folder in resources/views named layouts. In the newly created layouts folder add a file name app.blade.php. Paste the contents of the generic.html into app.blade.php.

#STEP 3: Create controller in Laravel

php artisan make:controller IndexController

Paste the following method into the controller

public function index() {
    //Get data from DB in here and pass it to the view

    return view('index.index', [
        'title' => 'Feugiat consequat',
        'text' => '<p>Lorem ipsum dolor sit accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Magna et cursus lorem faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod tempus. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac sed amet praesent. Nunc lacinia ante nunc ac gravida lorem ipsum dolor sit amet dolor feugiat consequat. </p>
        <p>Lorem ipsum dolor sit accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Magna et cursus lorem faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod tempus. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac sed amet praesent. Nunc lacinia ante nunc ac gravida lorem ipsum dolor sit amet dolor feugiat consequat. </p>
        <hr />
        <h3>Magna odio tempus commodo</h3>
        <p>In arcu accumsan arcu adipiscing accumsan orci ac. Felis id enim aliquet. Accumsan ac integer lobortis commodo ornare aliquet accumsan erat tempus amet porttitor. Ante commodo blandit adipiscing integer semper orci eget. Faucibus commodo adipiscing mi eu nullam accumsan morbi arcu ornare odio mi adipiscing nascetur lacus ac interdum morbi accumsan vis mi accumsan ac praesent.</p>
        <p>Felis sagittis eget tempus primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Magna sed etiam ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus lorem ipsum dolor sit amet nullam.</p>'
    ]);
}

#STEP 4: Register controller in routes

We need to tell Laravel that we are going to use the IndexController and then point to the correct method of the controller.

#STEP 5: Create controller templates

We need to alter tha layout. Go to app.blade.php make the following adjustment.

We are replaing the main content with @yield(‘content’)

This will responsible for having different content across controllers/methods useing the same layout.

Go and create a new folder named index in views directory. Inside the newly created folder we need a new file index.blade.php

@extends('layouts.app')

@section('content')
    <div class="inner">
        <div class="content">
            <header>
                <h2>{{$title}}</h2>
            </header>
            {!! $text !!}
        </div>
    </div>
@endsection

We are stating that we will extend the layout (this guarantees us that header/footer/menu and etc will come ready for us).

Then we are stating that we will have a section named content and we are populating it.

Please note that we have {{$title}} — this is showing the data coming from the controller assigned to the title key.

{!! $text !!} — showing data from controller assigned to text key — which is not escaped.

#STEP 6: Copy assets to public directory

We are copying assets and images folder to the public directory of your project.

Note: This is only to have the template functional. Project in a ready steady will have those assets being compiled following Laravel standards — this is out of scope for this tutorial and for the students making their course works!