Laravel is the most popular PHP framework. People prefer this framework to build their web applications. While building a website with Laravel, you probably want a blog on your website. In general, Laravel is not a blogging platform like WordPress where you get all the backend stuff ready to manage your articles. Building the blog system from scratch is quite time-consuming work. Thanks to the Canvas package which makes Laravel developer’s life easy by providing a cool publishing platform for Laravel.
Using the Canvas package, we can easily build our blog in Laravel without investing a lot of time. Canvas already did hard work managing the blog’s backend stuff. All you need to do is just get the data and display it on the front end matching your design.
Having said that, let’s take a look at how to create a blog with Laravel using the Canvas package.
Create a Blog with Laravel using Canvas Package
In order to get started, you need to install the Canvas package through the command:
composer require austintoddj/canvas
After this, publish the assets and configuration file by running the next command.
php artisan canvas:install
This command will create a few tables in your database with the prefix ‘canvas_’. It also creates a dummy user whose credentials should change immediately. Visit the SITE_URL/canvas.login
URL, enter dummy credentials: email@example.com / password. Once logged in, change your email and password.
Next, create a symbolic link to ensure file uploads are publicly accessible using the Artisan command:
php artisan storage:link
Now you will find your images inside the public/storage
directory.
Inside the Canvas dashboard, you will see options for Posts, Users, Tags, Topics, etc. You can play with the system and get familiar with it. It’s very easy and self-explanatory.
Go to Posts and create a few articles. You can add it by clicking on 3 dots->New post.
When you are adding content, Canvas saves it automatically. You don’t need to save it explicitly. Again under the 3 dots, you will find a few options to add featured images and general information. Click on ‘General settings’, and it will open a pop-up where you can insert a summary, tags, etc. I’ll recommend that you sync your slug with the post title. For this, you have to click on the icon next to SLUG and it will generate a slug as per the post title.
If you want to see where all these posts are stored then navigate to your database. Check out the table canvas_posts
. This is the table that holds the record of posts. Using this table, we will display the posts on the front end.
Display Posts on Website
As we want to fetch records from the canvas_posts
table, we will require a Model for it. But we don’t need to create it separately. The Canvas package already created a model Post which you will find at vendor/austintoddj/canvas/src/Models/Post.php
.
I am going to show you how to display all posts in a listing and also a single post view. I am not adding any styling stuff as everyone has their own design. The user should adjust the styling matching to their website.
Create a PostController
using the command:
php artisan make:controller PostController
Define the routes for the listing and single post view.
Route::get('/blog', 'PostController@index');
Route::get('/post/{slug}', 'PostController@view');
Here for the listing page, I used the URL slug as ‘blog’. In the case of a single post, I passed ‘post/{slug}’. The {slug} will be the actual slug of a post. This slug will be used to fetch the records of a single post.
Write the below code in PostController.php
file.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Canvas\Models\Post;
class PostController extends Controller
{
public function index()
{
$posts = Post::all();
return view('blog', ['posts' => $posts]);
}
public function view(Request $request, $slug)
{
$post = Post::where('slug', $slug)->first();
return view('post', ['post' => $post]);
}
}
It’s time to create a view and insert code to it. You will require 2 Blade files: blog.blade.php
and post.blade.php
.
blog.blade.php
@if (count($posts) > 0)
@foreach ($posts as $post)
<div>
<h3>
<a href={{ url('post/'.$post->slug) }}>{{ $post->title }}</a>
</h3>
<p>{{ $post->summary }}</p>
</div>
@endforeach
@endif
post.blade.php
<div>
@if ($post->featured_image)
<img src="{{ asset($post->featured_image) }}" />
@endif
<h3>{{ $post->title }}</h3>
{!! $post->body !!}
</div>
Head over to the browser and run the URL SITE_URL/blog
. You will see a listing of posts you have added in Canvas. On click of any post title, you will redirect to the post detail page where you will see the post information.
I hope you understand how to create a blog with Laravel using a Canvas package. Please share your thoughts and suggestions in the comment section below.
Related Articles
- How to Create Honeypot for Battling Form Spam in Laravel
- Backup Laravel Application on Dropbox
- How to Upload file to S3 using Laravel Filesystem
If you liked this article, then please subscribe to our YouTube Channel for video tutorials.
Nice Tutorial. I use the Laravel framework because it provides multiple benefits like plug-and-play authentication; it allows users to access the resources securely. It makes an elegant, lightning-fast, easy to use, and intuitive interface. Thanks for this!!!
This is good post. Keep sharing more.
the post is very complete good good
Thanks for sharing this.
If we use angular or react native in front end ,then is canvas package support or not
Yes, it is supported. On the front end all you need to fetch content from database and display it.
Very thank you for this article.
in the last part, when we use:
url($data[‘post’][‘featured_image’])
if featured_image was null, we got an error.
better to use this:
$data[‘post’][‘featured_image’] ? url($data[‘post’][‘featured_image’]) : ”
Thank you for pointing out the issue. I have updated the article.