Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Lessons:9Length:41 minutes
  • Overview
  • Transcript

2.1 Blade Website Templates

A crucial part of any website is its template—or “layout”, as it’s sometimes called. Your website needs to look good, right? And you’ll want to use the same template for each page without having to duplicate code. In this lesson, I’ll show you how to create a website template using Laravel’s Blade engine.

Related Links

2.1 Blade Website Templates

We've got our base Laravel installation and we've got it opened in our editor ready to go. So we're now ready to begin working on our website. The first thing that we're going to do is to prepare our website's template. A template is basically a view file that's going to be used on every single page. So, all of our pages will extend from this template and the content is going to be injected into the template. For complex websites, we might have several templates, one for our main website and another for some sort of backend. Nearly all dynamic websites use some sort of template and some sort of templating system to do this. In our case we're going to be using Laravel's templating engine, which is called Blade. Blade is a simple templating system. But it is also quite flexible and provides a lot of handy functionality to make developing templates and views a breeze. Instead of using things like raw PHP we can have views. We can use some of the nifty helpers to wrap code in conditionals or to display variables so let's get started on our template. What we're going to need to do is to create a new template file which we'll create in our resources/views folder. This views folder is where we're going to be storing all of our views. So you'll be visiting it quite a frequently as you develop a website or an application. So let's create a new file in here and we'll call it template.blade.php. Now the extension is very important as that is what Laravel will use to determine what compiler it needs to use. In this case, it's going to see the blade.php extension and it will know that it needs to use the blade compiler for this particular view. So now we've got our empty template file. And instead of whipping up a brand new template within this course I'm simply going to use one that I've prepared earlier. These files are all available in the courses code repository. So if you're following along make sure you pause now and grab the necessary files from the template directory. I'm going to be taking the contents of the template.html file. And I'm going to paste them into our newly created template.blade.php file. This template is essentially the bare bootstrap starter template and is very easy to use as a platform for development. Now if you're feeling creative feel free to make your own custom template. Just make sure you've got a spot for some navigation and a spot for some content. So now that I've got my template, I'm going to need some CSS to actually style it. So I'm going to take the app.css file and paste it into the public/css folder. And this is going to overwrite the existing app.cssfile that's already in that folder. It's worth noting that everything that we want to be publically available needs to live within this public folder. Everything else is considered to be outside of the document route so it won't be reachable through a web browser. Right so now that we've copied across the relevant files, let's just quickly look through this template. There shouldn't really be anything new here. It's all fairly standard stuff. You can see that we've got a header with our navigation and down a little bit further is the spot for some content. One thing that you may notice is that in the head of the document we're using the asset helper function to link up our app.css file. And this is just a handy way of making Laravel generate an absolute path to the file. So how about we wire up a route so that we can see what this looks like. If we open up the routes/web.php file, this is where we'll be defining all of our web-based routes. In the existing route, let's simply swap out the welcome view with our template view. We don't need to provide any extension here as Laravel will automatically find it within our views folder. We can now switch over to our web browser and we'll reload the page to see our template. Now, this is starting to come together quite nicely. So, we're going to pull this lesson out here, as we've now got the beginnings of our template implemented. Next, we'll start putting together our study pages, and we'll look at how we can utilize Blade, to extend from this template.

Back to the top
Continue watching with Elements