How to Create a Blog with Laravel 5+ Part 1 (File Structure & Templating)
In this tutorial, I wouldn’t explain the basic of Laravel, Server Requirements, Installation and Configuration (Composer and Node.js), so I assume you already done those things.
It’s a no doubt that Laravel PHP Framework is the top, if not, then one of the top’s PHP Framework to date, so here I decided to write a complete tutorial on how to build a blog with Laravel version 5.4.28 to be specific, and since it’s gonna be a long article, I’ll put it on parts, from templating, database design, CRUD pages, categories and posts to image upload.
To those who just started using Laravel you may refer to Laravel Documentation guide.
Blade
Blade is the simple, yet powerful templating engine provided with Laravel. Unlike other popular PHP templating engines, Blade does not restrict you from using plain PHP code in your views. All Blade views are compiled into plain PHP code and cached until they are modified, meaning Blade adds essentially zero overhead to your application.
There is also another PHP templating engine called Twig, which also works best on Laravel, actually there are few out there but you need to register them first just like Twig in order to work seamlessly on Laravel, unlike Blade it’s built-in right on the Laravel Framework.
Both Blade and Twig provide the most important features; template inheritance, sections, escaping output and clean syntax.
Partials
This is not another templating engine as you might guess, they say there are different ways to cook eggs and does the developer way of coding, I prefer using partials on my work to structure and organize my files.
If you’re familiar with WordPress CMS we may refer Partials as template-parts where you can simply call files when you need to.
I personally use Partials to store my _header, _footer and the rest like _js.
Let’s get started.
On a fresh Laravel installation below is how it looks, welcome.blade.php does contain HTML codes in one single documents. The title, Header, Navigation, Content, and Footer section or you may open yours on your end.
resources
|-- assets
|-- lang
|-- views
|---- welcome.blade.php
For front-end development we mostly touch most of the time under resources/views and routes directory.
Here, I’ve already added two partials file for _footer and _header, and rename welcome.blade.php to main.blade.php.
resources
|-- assets
|-- lang
|-- views
|---- partials
|------ _footer.blade.php
|------ _header.blade.php
|---- main.blade.php
After adding two partials, it’s ideal if we also move the HTML tags to each specific partial file, header to _header and footer to _footer and remain content as it is.
See below of how I made it.
_header.blade.php
<!doctype html>
<html lang="{{ config('app.locale') }}">
<head>
<!--// meta-->
<title>{{ config('app.name') }} @yield('title')</title>
<!-- // styles -->
@yield('stylesheet')
</head>
<body>
<div class="flex-center position-ref full-height">
main.blade.php
@include('partials._header')
<div class="content">
@yield('content')
// sidebar ...
</div>
@include('partials._footer')
_footer.blade.php
</div>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
@yield('javascripts')
</body>
</html>
Confuse, lost?
I know for sure you’ve been asking yourself, what the heck are these @include and @yield.
- @include
- The
@includeblade tag simply tell the engine to import another specific file. - @yield
- The
@yielddirective does the same thing with@includeonly in different ways, imagine that you define a container and later wanted to fill that container with content, that is how@yieldwork it acts like a container where you can fill content to it later or from child-blade files.
Take a deep breath… and continue
So now that we already have two partials added and rename welcome.blade.php we also have to change the routes to reflect with the new name.
Our routes will look like this now.
Route::get('/', function () {
return view('main'); // main, is the new name, excluding the file extension
});
In Laravel 5.4+ routes is now located at the root directory of your Laravel installation, just click web.php
What is PHP Frameworks “Routing”
Routing is the process of taking a URI endpoint (that part of the URI which comes after the base URL) and decomposing it into parameters to determine which module, controller, and action of that controller should receive the request.
Let’s take this for example
Route::get('/', function () {
echo 'We are in front-page';
});
Route::get('about, function () {
echo 'We are in about page';
});
Route::get(contact, function () {
echo 'We are in contact page';
});
Above is just an example, of course, we shouldn’t directly display things in routes as display should only be added at view, this is just to illustrate how routes works.
Finishing, hooray…
We’re almost there, but at this stage, our Blog still don’t have Menu, Main content, and Sidebar, let’s add static content and we’re good to go.
Bootstrap
We’ll be using Bootstrap as our front-end framework, Laravel by default or upon installation included Bootstrap CSS and JS file so what we need is simply call those file.
public
In Laravel, browser only sees file that are added under public directory and it’s where we also store and add our CSS and JS files.
public
|-- css
|---- app.css
|---- blog.css
|---- ie10-viewport-bug-workaround.css
|-- js
|---- app.js
|---- ie10-viewport-bug-workaround.js
...
Updated partials
Our partials file will look like this now.
resources
|-- views
|---- partials
|------ _footer.blade.php
|------ _header.blade.php
|------ _sidebar.blade.php
|-- main.blade.php
_header.blade.php
<!doctype html>
<html lang="{{ config('app.locale') }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ config('app.name') }} @yield('title')</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="{{ asset('css/app.css') }}" />
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link rel="stylesheet" href="{{ asset('css/ie10-viewport-bug-workaround.css') }}" />
<!-- Custom styles for this template -->
<link rel="stylesheet" href="{{ asset('css/blog.css') }}" />
@yield('stylesheet')
</head>
<body>
<div class="blog-masthead">
<div class="container">
<nav class="blog-nav">
<a class="blog-nav-item active" href="#">Home</a>
<a class="blog-nav-item" href="#">Show Case</a>
...
</nav>
</div>
</div>
main.blade.php
@include('partials._header')
<div class="container">
<div class="blog-header">
<h1 class="blog-title">The Bootstrap Blog</h1>
<p class="lead blog-description">The official example template of creating a blog with Bootstrap.</p>
</div>
<div class="row">
<div class="col-sm-8 blog-main">
<div class="blog-post">
<h2 class="blog-post-title">Another blog post</h2>
<p class="blog-post-meta">December 23, 2013 by <a href="#">Jacob</a></p>
<p>Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p>
<blockquote>
<p>Curabitur blandit tempus porttitor. <strong>Nullam quis risus eget urna mollis</strong> ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</blockquote>
<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
</div><!-- /.blog-post -->
...
@yield('content')
<nav>
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</nav>
</div><!-- /.blog-main -->
<!--Sidebar-->
@include('partials._sidebar')
</div><!-- /.row -->
</div><!-- /.container -->
@include('partials._footer')
_sidebar.blade.php
<div class="col-sm-3 col-sm-offset-1 blog-sidebar">
<div class="sidebar-module sidebar-module-inset">
<h4>About</h4>
<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
</div>
<div class="sidebar-module">
<h4>Archives</h4>
<ol class="list-unstyled">
<li><a href="#">March 2014</a></li>
<li><a href="#">February 2014</a></li>
...
</ol>
</div>
<div class="sidebar-module">
<h4>Elsewhere</h4>
<ol class="list-unstyled">
<li><a href="#">GitHub</a></li>
<li><a href="#">Twitter</a></li>
...
</ol>
</div>
</div><!-- /.blog-sidebar -->
_footer.blade.php
<footer class="blog-footer">
<p>Blog template built for <a href="http://getbootstrap.com">Bootstrap</a>
<p>
<a href="#">Back to top</a>
</p>
</footer>
<!-- Placed at the end of the document so the pages load faster -->
<link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
<!-- Bootstrap core JavaScript
================================================== -->
<script src="{{ asset('js/app.js') }}"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="{{ asset('js/ie10-viewport-bug-workaround.js') }}"></script>
@yield('javascripts')
</body>
</html>
That’s it, see ya in the next part, happy coding ^_^