Okay created a Hello World! Let’s see Laravel Template engine the Blade !!!
Blade is a very simple, yet powerful templating engine (if you ever see C#/.NET Razor parser then will familiar for you), the files naming convention is my_view_name.blade.php and stored in Laravels view folder.
The official documentation show us some example and here a list of available Blade commands.
Now create a Basic Nav / Body / Aside / Footer page with some links and Named Routes styled Bootstrap 3.2 🙂
But first we need to found where are the Views in Laravel 5.0!
laravel_folder/resources/views
Let’s start: we need some test page and data, so make some links
Home | Gallery | About Us | Contact Us
Make the Routes to our links, nothing fancy a simple Closure and return the views, oh and a small thing NAME YOUR ROUTES!! Trust me it will help your job a lot 🙂
// app/Http/routes.php
get( '/' , ['as' => 'home' ,
function() {
return view( 'home' );
}] );
get( '/gallery' , ['as' => 'gallery' ,
function() {
return view( 'gallery' );
}] );
get( '/about-us' , ['as' => 'about' ,
function() {
return view( 'about' );
}] );
get( '/contact-us' , ['as' => 'contact' ,
function() {
return view( 'contact' );
}] );
Next make the our base/master layout! Create a folder in views name it layouts and a file base.blase.php:
<!doctype html>
<html lang="en">
<head>
<meta http-equiv='content-type' content='text/html; charset=UTF-8' />
<title>Laravel Test page</title>
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
@section('head')
<link type="text/css" rel="stylesheet" href="{{ asset('css/style.css') }}" />
@show
</head>
<body class="container">
<nav class="navbar navbar-default" role="navigation">
<ul class="nav navbar-nav">
<li><a href="{{ route('home') }}">Home</a></li>
<li><a href="{{ route('gallery') }}">Gallery</a></li>
<li><a href="{{ route('about') }}">About Us</a></li>
<li><a href="{{ route('contact') }}">Contact Us</a></li>
</ul>
</nav>
@yield('body')
@section('aside')
<aside class="panel panel-default col-md-3">
aside content
</aside>
@show
@section('footer')
<footer class="col-md-12">
<hr/>
Footer
<hr/>
</footer>
@show
</body>
</html>
As you see have some strange thing in this. First what the hell is in head selection:
{{ asset('css/style.css') }}
Well asset is a helper for app(‘html’)->linkAsset, it is generate a full url to our public folder. Oh and Bootstrap body margin is 0 so I add a little boost to 10 my custom style.css.
Why add this in a section? In this way when need easy to replace or append a style or JavaScripts:
@section('head')
@parent
// something to append
@stop
Named Routes in links just route(‘my_route_name’) and make the url 🙂
@yield(‘body’) here comes the page specific content.
@section aside & footer block around the html block, ability to delete / replace them in child Blade (in gallery just see bellow)
We have the routes and a base template with menu. Create the route specific content in the view folder:
about.blade.php contact.blade.php gallery.blade.php home.blade.php
home.blade.php is:
@extends('layouts.base')
@section('body')
<section class="col-md-9">
<h1>Home</h1>
<p>some basic info</p>
</section>
@stop
As you see we extend the layouts/base(.blade.php) template and add our home body content, the about and contact blade are the same for now. (contact will contain a send feedback form in my next post)
The gallery.blade.php twisted a little, overwrite the aside section, and body section set to full width. To see pictures don’t need sidebar, also if you like append load some script to the gallery to head.
@extends('layouts.base')
@section('body')
<section class="col-md-12">
<h1>Gallery</h1>
<p>Some Pictures</p>
</section>
@stop
@section('aside')
@overwrite
In my next post add a form to contact view and make a controller to handle it 🙂
Laravel Coder 