QRdvark.com

Laravel 101 Setting Up Common Header And Footer Template With Laravel

Laravel 101 Setting Up Common Header And Footer Template With Laravel

  1. Installing Laravel on Ubuntu>
  2. Setting Up Common Header And Footer Template With Laravel.php
  3. Fetching Database Results And Displaying

Laravel makes templating simple. In this tutorial we see how Laravel uses template files known as 'blades' to create basic templating system using a common header and footer, with dynamic content between them.

The Laravel template system brings all the features one would expect from a well developed engine. Of course, you could still use good old PHP for templating if that is required. Because Laravel is a MVC framework, this tutorial will cover the creation and and implementation of the Controller and View components. The Model will be handled in the next installment of this series when dealing with the database.

Common Header and Footer

Laravel provides a templating system which uses "blades" as templates. These files are typically named my_template.blade.php and are store in the resources/views directory. A layout can be used to give the site a global layout along in a layouts directory. Four files will need be created in the resources/views directory and a directory created resources/views/layouts which will hold the initial layout blade.

A layouts directory will need to be created in the resources/views directory.

mkdir resources/views/layouts
resources/views/layouts/main.blade.php
resources/views/header.blade.php
resources/views/index.blade.php
resources/views/footer.blade.php resources/views/contact.blade.php

Each of these files will be used to create two pages. The index page, and a contact page.

The resources/views/layouts/main.blade.php file

This is the main layout file which holds the structure of this, and all subsequent pages. Laravel uses the @ symbol to prefix commands. So to include the header.blade.php. Only the 'header' name is required as Laravel will pick up that it is a blade.php file.

Another command in the layout is the yeild command, again prefixed with the @ symbol. More on this later, suffice it to say this is where much magic happens.

At the bottom of the file, the footer is included in the same manner as the header file was included.

<!DOCTYPE html>
<html lang="en">
<!-- head -->
<head>

@include('header')

</head>
<!-- end head -->

<body>
<!-- wrapper -->
<div id="wrapper">
@yield('content')
</div>
<!-- end wrapper -->

<!-- footer -->
@include('footer')
<!-- end footer -->
</body>

</html>

The header.blade.php file

The header file contains the code and text that will be inserted into the layout where header is included, as shown above.

<div><a href="/">Home</a> | <a href="/contact">Contact</a></div>
<h3>This is the header and contains the nav bar</h3>

<hr>

The index.blade.php file

In the layout file above, the use of @yield('content') is used to render the body of the web page. This is done by extending the layout in the same was a class is extended. When the layout is extended, the content section, which is enclosed in @section and @endsection tags, is saved into content, which is then able to be rendered with the @yield command.

@extends('layouts.main')

@section('content')

<h4>This is the Index Page</h4>
<p>This is the index.blade.php file</p>

@endsection

The footer.blade.php file

The footer, like the header blade (template) has no magic and is simply included in the same manner as the header.

<hr>
<p>This is the footer. Thanks for stopping by!</p>

The contact.blade.php file

The contact.blade.php file takes the same form as the index as it extends the main layout located in the layouts directory. Once again the content section is used to hold the page body.

@extends('layouts.main')

@section('content')

<h3>Contact Page</h3>
<p>Website: https://QRdvark.com</p>
<p>Lots of contact information would go here</p>

@endsection

Controllers

Of course, with several pages a controller for each page will be required. A controller will be created for the index and for the contact.

The Index Controller

In Laravel world, the controllers are held in the app/Http/Controllers directory. Here, two controllers will be created, one for the index and the contact. Note the naming convention of the filenames.

app/Http/Controllers/IndexController.php file


<?php namespace App\Http\Controllers;

use 
View;

class 
IndexController extends Controller {

        protected 
$layout 'layouts.main';

        
/**
         * Constructor, duh!
         *
         * @access      public
         * @return      void
         *
         */
        
public function __construct()
        {
                
$this->middleware('guest');
        }

        
/**
         * Show the application index.
         *
         * @access      public
         * @return      Response
         *
         */
        
public function index()
        {
                return 
view('index');
        }

// end of class

The controller for the contact page is pretty much a replica of with the exception of the file name, the view name and the controller name. Once again, note the naming conventions used.

app/Http/Controllers/ContactController.php file


<?php namespace App\Http\Controllers;

use 
View;

class 
ContactController extends Controller {

        protected 
$layout 'layouts.main';

        
/**
         * Constructor, duh!
         *
         * @access      public
         * @return      void
         *
         */
        
public function __construct()
        {
                
$this->middleware('guest');
        }

        
/**
         * Show the application index.
         *
         * @access      public
         * @return      Response
         *
         */
        
public function index()
        {
                return 
view('contact');
        }

// end of class

Routing

This tutorial shows only simple routing. Here two routes are created, once each for the index and the contact pages.

The first route works for the index page and calls the index controller and the index method.

The second route works for the URI /contact and calls the contact controller and the index method.

Calling the @index method is not strictly required for index pages, however, is left in place for clarity.


<?php

Route
::get('/''IndexController@index');

Route::get('/contact''ContactController@index');