HTML Layout - The master template

Image Upload Service

In this video lesson we will work on setting our the master template. This template will be used in our other blade files and will act as a skeleton for the website. We will include the navigation for our Image Upload Service as well.

Video Information

Hi everyone , welcome back to Laracademy. It's Mickey again and in this video we are going to work our HTML layout for our Image Upload Service. Now because it is going to be extremely simple I will not be using Laravel Mix, but this possibly could be a lesson in the future if there is enough interest. For now we are going to be pulling our in files via a CDN (also known as a content delivery network) and then referencing our style sheet for any minor changes we need.

To get started let's create a new folder within our views called layout and then add a app.blade.php file to it. This is going to be the main file for our layout. We can extend this file and simply add content into the page where we need it. So let's start coding our layout file.

  <html>
    <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>{{ config('app.name') }}</title>

      <link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>
      <link rel='stylesheet' href='//bootswatch.com/4-alpha/lux/bootstrap.css'>
      <link rel="stylesheet" href="{{ asset('css/style.css') }}">
    </head>
    <body>

      @yield('content')

      <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
      <script src='//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js'></script>
    </body>
</html>

Now that we have our main layout complete, let's add some navigation. I want this navigation to appear on every page, so lets include it straight from the main layout.

@include('layout.partials.navigation')

<nav class="navbar navbar-toggleable-md navbar-inverse bg-primary">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar">
  <span class="navbar-toggler-icon"></span>
</button>
  <a class="navbar-brand" href="#">{{ config('app.name') }}</a>

  <div class="collapse navbar-collapse" id="navbar">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="{{ route('home') }}">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Upload Monster</a>
      </li>
    </ul>
  </div>
</nav>

Now that we have our navigation bar, let's add the route name of "home" into our routes so that our application will not crash.

Route::get('/', function() { ... })->name('home');

Now before we test let's load up the welcome.blade.php and remove everything from that file and extends the layout file.

@extends('layout.app')

Now lets check everything is loading.... and yup it is. Ok let's work on getting some default content into the page. If you remember eariler we added a spot to yield out some content. So we can utilize this by using a @section tag. It would look something like this. In our welcome.blade.php

@section('content')
  <section id="main">
    <div class="container">
      <div class="row">
        <div class="col">
          <h3>
            Today's
            <small class="text-muted">Monsters</small>
          </h3>
      </div>
    </div>
  </section>

Alright if we take a look at it, the only thing I am not happy with is the spacing between the navigation and the header. So let's open up our css file and add

#main { margin-top: 25px; }

Ok, lets reload everything. And if you are having problems seeing it, bring up your inspector in chrome, then right click on reload, and choose empty cache and hard reload.

Ok now that looks better. We are going to wrap up the HTML layout for this lesson now. In the next lesson we are going to work on the HTML for the adding of a image to our service. Thanks for watching.

Do you have a question? Go ahead and ask it below.

Please login to ask your question