RastcodeS

Where we take good care of both your front and back-end needs

Great place to take your code to the next level

Checkout my work and get in touch

Go Back

Laravel Blade Dynamic Content - How I made this app Part V

Laravel PHP

Written by Rastko

date - 01/Sep/18 | views - 1864

Laravel Blade Dynamic Content - How I made this app Part V

Finishing the main layout. Adding header and footer areas. Intro to Laravel dynamic content - dynamic title and description. Dynamically adding the active class on links and a special go back button.

This is actually the fifth chapter of the How I made this app series. Check out previous four:

Laravel Starter App - How I made this app Part I

Laravel Folder Structure - How I made this app Part II

Laravel Routes and Controllers - How I made this app Part III

Laravel Blade Layout - How I made this app Part IV

Recap

If you've been following along, your layout should look like this:

{{-- Main Layout --}}
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="description" content="Non dynamic content">

   <title>Non dynamic title</title>

   <!-- Styles -->
   <link href="{{ asset('css/app.css') }}" rel="stylesheet">

</head>

<body>
   <div id="app">

      <!-- Navbar -->
      @include('includes.navbar')

      <!-- Hero -->

      <div class="container">

         <div class="row">

            <div class="col-lg-9">

               <!-- Main Content -->
               @yield('content')
					
            </div>

            <div class="col-lg-3">

               <!-- Sidebar -->
               @section('sidebar')
                  @include('includes.sidebar')
                  @show
            </div>

         </div>

      </div>

   </div>

   <!-- Footer -->

   <!-- Scripts -->
   <script src="{{ asset('js/app.js') }}"></script>

</body>

</html>

Previously, we've added the navbar and the sidebar, and also included the styles and the scripts. Now, we're going to finish up the layout by including what's missing - the header and the footer areas.

Header

Just like we did with the navbar, we're going to include the header in our layout. Under  add:

<!-- Hero -->
@include('includes.header')

Refreshing now would give us an error as we don't have that file, so let's fix that. In the includes directory create a new file - header.blade.php :

{{-- Header --}}
<header class="jumbotron text-center">
   <h1>YourAppName</h1>
   <p>Welcome to our greate website, where we provide amazing services</p>
   <a href="/about" class="btn btn-primary">Learn More About Us</a>
</header>

What we get is a simple Bootstrap jumbotron - if you like, you can replace the background with a picture, but for now this will suffice.

Footer

We'll basically do the same thing for the footer. Under  add:

<!-- Footer -->
@include('includes.footer')

Let's create the footer. In the includes folder make a new file footer.blade.php:

<footer class="bg-dark text-light text-center">
   <p>Copyright &copy; 2018 YourAppName</p>
</footer>

The outcome doesn't look great, even for an example, so let's style it a bit. In the _custom.scss file add these styles:

#app {
   min-height: 1000px
}

footer {
   padding: 20px 0 5px 0;
}

The first style just adds a bit of height. Since we don't have any content yet, the footer would jump to high. The other style just adds a bit of padding to the footer.

Dynamic Title and Description

You might remember that we have left the non-dynamic title and description to our layout. Now we're going to fix that. Instead of the meta description and the title tag add these lines in the default.blade.php file:

<meta name="description" content="@yield('description')">

<title>@yield('title') - YourAppName</title>

As you can see, we'll allow each of our pages to set the description. Also we're going to dynamically append to the title. All that's left to do is set these values in the pages.

Home:

{{-- Title --}}
@section('title', 'Home')

{{-- Description --}} 
@section('description', 'Hello, this is our brand new website!')

About:

{{-- Title --}}
@section('title', 'About')

{{-- Description --}} 
@section('description', 'Hello, this is a great place to get to know more about us!')

Services:

{{-- Title --}}
@section('title', 'Services')

{{-- Description --}} 
@section('description', 'Hello, this is where we tell you about all of the graet services we provide for you!')

Great, we have some dynamic content. Later when we start working with the database, we'll get these values from there.

Note - search engines have a limit on what they will display. For the title it's about 80 characters and for the meta description tag about 160. You can go over, it just won't display.

Dynamic Active Links

As you might have noticed, our navbar only has one active link - Home. That's because we've hard-coded it. Let's fix that now, so that our users have a truly dynamic experience. In the navbar.blade.php change the links to:

<li class="nav-item{{Request::is('/') ? ' active' : ''}}">
   <a class="nav-link" href="/">
      Home @if(Request::is('/')) @include('includes.sr_navbar') @endif
   </a>
</li>
<li class="nav-item{{Request::is('about') ? ' active' : ''}}">
   <a class="nav-link" href="/about">
      About @if(Request::is('about')) @include('includes.sr_navbar') @endif
   </a>
</li>
<li class="nav-item{{Request::is('services') ? ' active' : ''}}">
   <a class="nav-link" href="/services">
      Services @if(Request::is('services')) @include('includes.sr_navbar') @endif
   </a>
</li>

Ok, there's a lot going on here. The "Request::is", is asking about the current page. If it matches where we are, it adds the active class to the nav-item. But what's this include we're also getting if on current page? That's really the same thing as the active class, just for screen readers. We're being thorough and we'll make the sr_navbar.blade.php file to the includes folder:

{{-- Screen readers active link --}}
<span class="sr-only">(current)</span>

Now are links get designated as active, when we're on a specific page and they change color accordingly. If you'd like to change how the active links behave, you can do that in the _custom.scss file.

Dynamic Go Back Button

The goal of this part is to add a simple Go Back button. We'll what's the problem, you might ask? Well, our site is going to be very complex and we can't possibly predict where that back is. We'll make use of a very cool function - URL::previous(). As the name says, it point's to the previous URL. Layout seams like the best place to add this button, so we'll do it there, at the top of the container:

{{-- Dynamic Go Back Button --}}
<a href="{{ URL::previous() }}" class="btn btn-primary">
   Go Back
</a>

Now, no matter where you've been, you can always go back to the previous page. Note - this includes other websites, so if you don't like that, do not add it.

Push to GitHub

We've done our work for the day and it's time to update our repository. As always start by adding the chages:

git add *

Make a new commit:

git commit -m "Header, footer, dynamic links and tags"

Finally, push to GitHub:

git push

If you'd like to clone the repo for this project, you can do that here - Rastko Savic - Laravel Blog Tutorial

This was all for this chapter. Next, we'll introduce the database and create the posts table for our future Blog. See you then.

View App/Backend

Comments

No Comments yet. Be the first!

Currently working on a Laravel project

Check it out

Java Break - Declare and Initialize Variables - Java Core Part - VI

Declaring and initializing variable in Java. How to do it properly and avoid mistakes.

The sixth chapter...

Java