Laravel Tutorial #9: Wrap Things Up

Please note that this post may contain affiliate links, and for every purchase you make, at no extra cost to you, a commission fee will be rewarded to me.

You can download the source code of this tutorial here.

In this post, we’ll create some optional features for our website. If you are not interested, just skip this post and go to the final deployment section of this tutorial.

Pagination

When we add more and more posts in our blog, creating a paginator might be a good idea, since we don’t want to have too many posts on one page.

First, we need to add some codes in our controllers, IndexController for example:

$posts = Post::where('is_published',true)->orderBy('id','desc')->paginate(5);

Notice the last method, instead of get(), we have paginate(5). It means we will have 5 posts for every page. Of course, you can change that number to whatever you like.

And now we need to tell Laravel where to add that paginator. Go to resources/views/widgets/blog-masonry.blade.php

<!-- Pagination -->
<ul class="pagination justify-content-center mb-4">
    {{$posts->links()}}
</ul>

Refresh the page, and you should see this at the bottom.

Do the same thing for all the pages that need a paginator.

If the result is not styled, try specify the framework like this:

{{$posts->links("pagination::bootstrap-4")}}

The idea is to get the posts with the same tags.

app/Http/Controllers/PostController.php

//related posts
$related_posts = Post::query()->where('is_published',true)->whereHas('tags', function ($q) use ($post) {
    return $q->whereIn('name', $post->tags->pluck('name'));
})
    ->where('id', '!=', $post->id)->take(3)->get();

Line 3, $post->tags->pluck('name') returns an array with all the tags of the post.

Line 5, where('id', '!=', $post->id) makes sure the same post will not be included.

Remember to return the $related_posts.

Now add the “related posts” section in the view:

<!-- Related Posts -->

<h3>Related Posts</h3>

<div class="row">
    @foreach($related_posts as $post)
    <div class="col-md-4">
        <div class="card mb-4 box-shadow">
            <img class="card-img-top" src="{{\Illuminate\Support\Facades\Storage::url($post['featured_image'])}}" alt="Card image cap">
            <div class="card-body">
                <p class="card-text">{{\Illuminate\Support\Str::limit(strip_tags($post['content']), 100, '...')}}</p>
                <div class="d-flex justify-content-between align-items-center">
                    <div class="btn-group">
                        <a href="/post/{{$post['slug']}}" class="btn btn-sm btn-outline-secondary">Read More →</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endforeach
</div>

If you are tired of coding, there is always an easy way by using AddThis. They have related posts, share buttons, subscription forms and lots of other tools you may find useful.

Comments

First, register a Disqus account.

Create a new site.

Follow the instructions and put the code into the right place, and Disqus will take care of the rest.

Please comment below if you think there are some other features you want to add. I will put them here as soon as possible.

Tags:

Leave a Reply

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