Site Loader
Join Kwetu Hub

Welcome to this lesson, great to have you on board. My name is Henry and I am excited to continue with this tutorial series where we are building blog application using Laravel 5.5 and PHP 7.0.0. We are at the fourth section, creating our posts page using bootstrap 4. In our previous sections, we implemented a basic set up of our blog structure in Laravel and hopefully by now you fill comfortable in Laravel file structure , in this lesson we are going to create our homepage for this application using dummy data.

In this lesson, I want to start by working on our post page where our posts from the database will be displayed. For now, we will just output dummy posts. So lets start by opening our project on text-editor, in our previous lesson we created index.blade.php in our post folder. This page will hold the list of posts in our blog application. However, I also want to have a navigation bar where we might have the bland name of the project and where users can navigate to dashboard to create posts.

I will create navigation bar inside my partials folder, in the partials folder, create a file called header.blade.php Here is how your file structure should look like:

In this project, we are using bootstrap 4 as our front-end framework. Now make sure that your header.blade.php has the following code:

<nav class="navbar navbar-expand-lg navbar-light bg-light rounded">
    <a class="navbar-brand" href="#">Henry-Lab</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample09" aria-controls="navbarsExample09" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarsExample09">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Dashboard <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle"  id="dropdown09" data-toggle="dropdown"
                   aria-haspopup="true" aria-expanded="false">User Account</a>
                <div class="dropdown-menu" aria-labelledby="dropdown09">
                    <a class="dropdown-item" href="#">Sign in</a>
                    <a class="dropdown-item" href="#">Sign out</a>
                    <a class="dropdown-item" href="#">Sign up</a>
                </div>
            </li>
        </ul>
    </div>
</nav>

The code in the header.blade.php file is just a bootstrap 4 navigation bar. On line 2, we have the brand of our project which floats on the left. On line 10, we have dashboard link that logged in use will use later in this tutorial. From line 12-20, we are going to have a drop down links for user to login, logout or sign up.

In order to use header.blade.php file we need to implement it. To implement this file, open master.blade.php located in layouts folder. Make sure that master.blade.php has the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>@yield('title')</title>
    <link rel="stylesheet" href="{{ URL::to('css/bootstrap.min.css') }}">
    @yield('styles')
</head>
<body>
@include('partials.header')
@yield('content')

<script type="text/javascript" src="{{ URL::to('js/jquery.min.js') }}"></script>
<script type="text/javascript" src="{{ URL::to('js/bootstrap.min.js') }}"></script>
@yield('scripts')
</body>
</html>

On line 10, we are using blade command @include(‘partials.header’) which tells blade where the file to include is located. To test whether our navigation bar is working, run the development server using the following command: php artisan serve Here is the output of my terminal:

Our terminal shows that our server is up and running. On your browser, navigate to http://localhost:8000/ and you should see the following output:

You can see our bootstrap header is working, so with the header in place. Now let’s work on blog post page itself and I think of having a right sidebar where we will show something like our latest blog posts. On the left side, we will have our actual posts in summary form. Our post will include a title, author, a short description and link to read a full blog post.

In order to achieve this arrangement, we will use bootstrap to get us going and if you are not aware of how bootstrap work it’s definitely worth checking out it’s documentation. To structure our blog post page, open index.blade.php file located in post folder in views. Make sure that index.blade.php has the following code:

@extends('layouts.master')

@section('title')
    Welcome Laravel Blog Tutorial
@endsection

@section('content')
    <main role="main" class="container"  style="margin-top: 5px">

        <div class="row">

            <div class="col-sm-8 blog-main">

                <div class="blog-post">
                    <h2 class="blog-post-title">Posts One</h2>
                    <p class="blog-post-meta"><small><i>December 23, 2013 by <a href="#">Jeremy</a></i></small></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... <a href="" class="btn btn-primary btn-sm">Learn more</a> </p>
                    </blockquote>
                </div><!-- /.blog-post -->

                <div class="blog-post">
                    <h2 class="blog-post-title">Post Two</h2>
                    <p class="blog-post-meta"><small><i>December 14, 2013 by <a href="#">Evans</a></i></small></p>

                    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
                        Aenean lacinia bibendum nulla sed consectetur. Etiam porta
                        euismod. Fusce dapibus... <a href="" class="btn btn-primary btn-sm">Learn more</a> </p>
                </div><!-- /.blog-post -->

                <nav class="blog-pagination">
                    <a class="btn btn-outline-primary" href="#">Older</a>
                    <a class="btn btn-outline-secondary disabled" href="#">Newer</a>
                </nav>

            </div><!-- /.blog-main -->

            <aside class="col-sm-3 ml-sm-auto blog-sidebar">
                <div class="sidebar-module">
                    <h4>Latest Posts</h4>
                    <ol class="list-unstyled">
                        <li><a href="#">March 2017</a></li>
                        <li><a href="#">February 2017</a></li>
                        <li><a href="#">January 2017</a></li>
                        <li><a href="#">December 2013</a></li>
                        <li><a href="#">November 2013</a></li>
                        <li><a href="#">October 2013</a></li>
                        <li><a href="#">September 2013</a></li>
                        <li><a href="#">August 2013</a></li>
                        <li><a href="#">July 2013</a></li>
                        <li><a href="#">June 2013</a></li>
                        <li><a href="#">May 2013</a></li>
                        <li><a href="#">April 2013</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>
                        <li><a href="#">Facebook</a></li>
                    </ol>
                </div>
            </aside><!-- /.blog-sidebar -->

        </div><!-- /.row -->

    </main><!-- /.container -->
@endsection

Let’s have a quick breakdown of the code our index.blade.php:

  • From line 10-70: We have a bootstrap row.

  • From line 12 – 40: We have our blog post section which is a column of 8

  • From line 42 – 68: We have our side bar where will show our latest post.

  • From line 35 – 38: We will have pagination of blog post

NB: To have a better understanding of bootstrap grid system, visit bootstrap documentation.

Now, run your Laravel development server and navigate to http://localhost:8000/ and you should see the following output:

Now we have a quick decent working prototype of our blog application in Laravel 5.5.

Goals achieved in this lesson

  • We have learnt how to work with bootstrap navbar.

  • We have learnt how to include file in Laravel.

  • We have created working prototype.

With that we conclude our fourth lesson, to get the code visit building a blog application using laravel. See you in lesson 5.

Post Author: academy

School of {Code}

One Reply to “Lesson 4: Bootstrap and Posts Page Index in Our Blog Application in Laravel 5.5 Blog Project”

Leave a Reply

Your email address will not be published. Required fields are marked *

Kwetu Hub Archives

Categories