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



RastcodeS Logo
Go Back

Laravel Blade Layout - How I made this app Part IV


Laravel PHP



Written by Rastko

date - 28/Aug/18 | views - 395

Laravel Blade Layout - How I made this app Part IV

     An introduction to Blade templating language. Using Blade layouts, appends. Making a navigation bar and a sidebar.

     This is actually the fourth article in a How I made this App series, where we build a Laravel application from scratch. If you'd like to read the previous chapters, you can check the links below.

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 and Blade

 

     If you're using Laravel to build your web app, chances are you're going to have some dynamic data. In order to present it, you're going to need some templating capabilities. You might be willing to go into many available JavaScript front-end frameworks, and while that's cool, it's my opinion that you shouldn't extend yourself too much. Honestly, building your own React ecosystem for a blogging app is an overkill. Vue.js is a bit simpler and comes with Laravel, but for now we'll just stick to pure Blade, as it gives us enough tools to create a dynamic website. On the other hand, you might be wondering, why not just use pure PHP? You can do that, but spaghetti code will be giving you headaches. One way or another, Blade is really easy to learn, so there's no excuse not to.

 

Blade Layout

 

     So, if you've been following along, you have 3, not really dynamic pages in your app. That's home, about and services. Now we don't really have a way to move around in our app, mainly because we haven't created a navigation. In regular HTML, we'd copy-paste the navbar markup, and that's not cool. In pure PHP, we'd include the header and the navbar in a header "include" and then we'd do the same for footer. That's much better, but we have a more elegant solution with Blade.

     To start off, let's make a new folder in our views directory and call it layouts. Now, you might be wandering why have I named this folder layouts, instead of just layout. That's because, we're later going to make another layout for the admin part of our website. Inside this folder, let's make a new file - default.blade.php. We'll add some expected markup:

{{-- 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 -->

</head>

<body>
	<div id="app">

		<!-- Navbar -->
		
		<!-- Hero -->

		<div class="container">

			<div class="row">

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

					<!-- Main Content -->

				</div>

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

					<!-- Sidebar -->

				</div>

			</div>

		</div>

	</div>

	<!-- Footer -->

	<!-- Scripts -->
	
</body>

</html>

 

     Ok, as you can see this is just a shell, which will help us complete this in a step by step manner. Just a quick recap - We have to add or styles at the top, our scripts at the bottom, We'll place all of our content inside the "app" div. On the top will have a navbar and a hero, and then inside the container underneath, will add our main content area and a sidebar. Under all of this, but above the scripts, we'll add the footer. Also, if you have a good eye, you'll notice, I've distinctly stated that the title and the meta - description are non dynamic. Oh, don't you worry, we'll even make that dynamic.

 

Styles and Scripts

 

     To finally get our CSS and JavaScript capabilities working, we'll add this under <!-- Styles -->:

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

 

     It looks like a regular css import, except for the asset function. It's a helpful little thing, that gets us into the public folder, wherever it may be. It's actually configurable, but we'll get to that later. Similarly to the styles, we'll add this under <!-- Scripts -->:

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

 

     These are of course our compiled resources. Now we just need a way to dynamically place the content of our pages. Under <!-- Main Content --> we'll just add this:

@yield('content')

 

     Yield denotes a space, where we can place our content. What you put inside brackets is entirely up you, it just needs to match between the layout and the pages that extend it. So how do we extend it? Let's figure that out with our home.blade.php file:

@extends('layouts.default')

{{-- Home Page --}}

@section('content')

<br>
<h2>Home</h2>
<p>Hello, this is our brand new website!</p>

@endsection

 

     It's pretty obvious what we are doing. First, we say that this page extends the default layout. And then we populate the content with the help of the @section, the Blade provides. Just note, you need to close it with the @endsection as you wold with any tag. If you refresh your home page now, you'll see that Bootstrap has finally kicked in. You can do this for the other two pages we have.

     About:

@extends('layouts.default')

{{-- About Page --}}

@section('content')

<br>
<h2>About Us</h2>
<p>Hello, this is a great place to get to know more about us!</p>

@endsection

 

     Services:

@extends('layouts.default')

{{-- Services Page --}}

@section('content')

<br>
<h2>Our Services</h2>
<p>Hello, this is where we tell you about all of the graet services we provide for you!</p>

@endsection

 

Navigation

 

     Now that our pages have extended the default layout, it's going to be much easier to add a navbar. We already have a space for it, in the layout file:

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

 

     The @include is much simpler than the @yield. It just adds whatever you place in the brackets. Now, if you reload any of the pages, you're going to get a nasty error, which says that there's no such thing as a includes.navbar. We haven't created it yet, so let's do it. In the views folder make another directory named includes and inside it a new file - navbar.blade.php:

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
	<a class="navbar-brand" href="#">YourAppName</a>
	<button class="navbar-toggler" type="button" 
		data-toggle="collapse" data-target="#navbarsExampleDefault" 
		aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
		
	  <span class="navbar-toggler-icon"></span>
	</button>

	<div class="collapse navbar-collapse" id="navbarsExampleDefault">
	  <ul class="navbar-nav mr-auto">
		 <li class="nav-item active">
			<a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
		 </li>
		 <li class="nav-item">
			<a class="nav-link" href="/about">About</a>
		 </li>
		 <li class="nav-item">
			<a class="nav-link" href="/services">Services</a>
		 </li>
	  </ul>
	</div>
 </nav>

 

     As you can see, this is just some basic Bootstrap markup for a navbar, but we've also included our actual links. If you now refresh, you'll see we have a full navigation working. You might notice the active link that is only on the first one. We'll make those dynamic later.

Navbar

 

Appendable Sidebar

 

     We have a place for a sidebar and we can easily add it just as we've done with the navbar, but we're actually going to do something a bit different here. Say you want most of your sidebar to be exactly the same on every page, but maybe have a bit extra on the top, that's going to be different, or only appear on certain pages. We can accomplish this a bit differently than the regular @include. Under <!-- Sidebar --> add:

@section('sidebar')
	@include('includes.sidebar')
	@show

 

     This is kind of a reverse section, we're designating it's going to be a sidebar, than we include a sidebar, like we would anyway. The extra is this @show tag that will let us append content onto a sidebar.

     First, let's make the simplest possible sidebar, that is later going to have some dynamic content. In the includes folder create a new file - sidebar.blade.php:

{{-- Main Sidebar --}}
<br>
<div class="card card-body">
	<h3>This is a sidebar</h3>
</div>

 

Sidebar

 

     That's all that we're going to put inside it for now and if you refresh your pages, you can see that it appears just as is, but we want more. Go to any of our pages, I'll go to home and under the @endsection add:

@section('sidebar')
	<div class="card card-body shadow">
		<a href="#" class="btn btn-primary">Super Special Sale Here</a>
	</div>
	@parent
@endsection

 

     Now we have a special call to action button added to the sidebar, but only on our home page. That's great.

Append to Sidebar

 

     That's all for this part of building an application in Laravel. Next, we'll finish up our layout design before we start working with the database. Stay tuned.


View App/Backend
Login to comment

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
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


Recents


Popular