Laravel CMS | N-08 | Creating a Basic Laravel Blog

Subscribe to my newsletter and never miss my upcoming articles

Video Tutorial

Overview

After Being Developing and Explaining the CMS for 7 tutorials, for now, it is time to start seeing our progress in a real world blog, grab the posts/categories from the database and Shows them into Containers (Also Doing a Filtering/Ordering on the Posts), alongside showing single posts content, using thumbnails, categories…

So in this tutorial we are going to put the Blog files in a separate folder than our CMS, but for more Advanced usage you may want to create separate application for handling the blog (Fetching the data from the database) which means two separate laravel apps, it is going to make your life easier when trying to debugging or upgrading your systems, to follow along make sure to watch/read the previous tutorials on the series, look somewhere else on the website!

Making The Blog

First things first, make a file for the main index page of the blog, let’s name it index.blade.php (Very Convenient!) try to organize the files in a subFolder (Blog/index.blade.php), Create a Controller for the Blog (BlogController) also set up the route for routing to the index method on the controller and render the view, this is actually was the basic setup we needed for the blog.

Now after making sure that everything is working fine, go to the BlogController, so for the index page of our blog we need to show the latest posts by fetching from the database, so just use the Post Model and get all posts from database ordered by created_at timestamp.

public function index()
{
    $posts = Post::orderBy('created_at', 'desc')->get();

    return view('blog.index')->with('posts', $posts);
}

no with a bit of styling on your index page, we are using Bootstrap Card Container for showing the available posts in an elegant way.

<!-- We put the navbar code in a separate file -->
    @include('inc.navbar')


<div class="col-md-8 col-md-offset-2">

    <h2 class="text-center"> Blog </h2>
    <br/>

    @if(count($posts) > 0)

    <!-- Loop Through Posts -->
    @foreach($posts as $post)

    <div class="card" style="width: 20rem;display:inline-block">
        <!--<img class="card-img-top" src="..." alt="Card image cap">-->
        <div class="card-block">
            <h4 class="card-title">{{ $post->title }}</h4>
            <p class="card-text">{{ $post->author }}</p>
            <p class="card-text">Post Content</p>
            <a href="{{ route('blog.show', ['id' => $post->id]) }}" class="btn btn-primary">Read More</a>
        </div>
    </div>

    @endforeach

    @else 
        <div class="alert alert-danger">No Posts Available</div>
    @endif

</div>

Take a look at your browser by going to the blog section, you should see all of your nice posts that are available in your database, you can also add new posts and refresh the page to take a quick look.

now the Read More buttons under the posts are non-functional, so on click, we need to redirect the user to a new page that shows the full post content (maybe with a thumbnail if you added the support for image uploading), therefore we are going to make a new file naming it show.blade.php, which handles displaying full content of the post. So we create a route for that but a bit different this time because we need to pass in the ID of the Posts we wanna its content on the page

// {id} ==> we are refrencing a GET Parameter here which is the ID of the Specified post we need to show
Route::get('/blog/{id}', 'BlogController@show')->name('blog.show');

No by going to the show method under the controller, add

public function show($id)
{
    //Show Single POST
    $post = Post::findOrFail($id);

    return view('blog.show')->with('post', $post);
}

make sure to create the page for the showing a single post, ours is very simple

<!-- Main Area -->
<div class="col-md-8 col-md-offset-2">

    <h3 class="text-center">{{ $post->title }}</h3>

    <small class="text-muted text-center">{{ $post->author }}</small>

    <p class="card-text">{{ $post->post }}</p>

</div>

the only thing left us to do is to redirect the user to the post page as soon as he clicks the Read More Button on the Post Card, so we need to add the route name under the href attribute of the Button

//So refrence the Route by passing it the ID of the Current Post 
{{ route('blog.show', ['id' => $post->id]) }}

after styling the single post page, that is all you need to do for the blog.

For the Other Things like displaying categories, SubCategories, and Authors it is going to be the same procedure when either fetching, adding, ordering data from the database.

Check out the Github Repository for the Full Source Code of the CMS / BLOG (basic!)

No Comments Yet