Blade is the templating engine Laravel uses to render it’s pages. And trust me Blade is very powerful and lets you do some really neat stuff. Usually we want our pages to have a consistent look and that means that the core of the layout should stay mostly the same. With blade we can solve this pretty easily, since it allows us to use template inheritance. For our demo application we will create a so called page layout that will define some core parts of our layout.
Lets create a folder called “layouts” under the “views” folder and inside lets create our blade template called app.blade.php Lets fill it out with the basic HTML structure. Inside the head we fill out all the necesarry meta tags and includes like stylesheets and scripts — for example bootstrap. And now we come to the body tag. Blade has a very neat feature with its @yield(‘SECTION_NAME’) directive.
So lets put @yield(‘content’) and @yield(‘scripts’) inside the body tag. You can any html you want to make it even better. But lets focus on the blade features. So your app.blade.php should look something like this:
Now lets jump to our welcome.blade.php and lets take advantage of the blade features. Lets extend our template with the layout:
@extends(‘layouts.app’)
As you can notice we can specifiy our layout by just typing folde.name in our case ‘layouts.app’. Ok, so our template is read to use the layout.
Lets define sections with the same name as we defined the yield’s in out layout. So what does this do? Exactly as the word “yield” means, it’s keeping thing in place. So whatever we put inside each section here will be rendered in the corresponding place on the final render. And my favorite part of it is the “scripts” section where we can write page specific javascript and even add includes that we need only on specific pages as opposed to dragging all the includes in the main layout as so many developers tend to do. And that’s wrong on so many levels, even though it works.
So by now your welcome template should look something like this:
Now everything is nicely setup and ready for the next steps. Just like I made the layouts folder to keep my layout template inside, I have a habbit to keep a folder for each model and keep the views inside for all the necessary views like index, create, update, delete, etc. But we will see that when we actually need them in later episodes.
But just before the end lets have a look how to prepare our project to compile SASS.
Again as with many other topics, i would says its up to debate which is the best, but personally I have decided to use SASS.
Laravel already comes with the package json and is basically already prepared to just be used. So all we have to do is type “npm install” into the terminal wait till its finished and then just “npm run watch” to run the watcher and compile our SASS files which by default are under resources/sass. If you want to try something different, checkout Laravel’s documentation, it’s pretty straightforward and you should get used to quickly open up the documentation and get the necessary information, which we will do a lot in this series.
Till the next episode prepare all your views to use the layout and add your desired libraries like bootstrap and or custom css and html structure to make the app really neat.
Comming up:
In the next episode we will have a look how to actually connect to the database and create our first table and popualte it with data.
Till then, have a happy Laravel developing!
