Laravel Nova: The Perfect Admin Panel For Your Laravel Apps

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.

In the Laravel Tutorial For Beginners, we talked about a free, open-source admin panel for Laravel applications called Voyager, and together, we created a simple blogging system with it. However, the problem with open-source projects is that you could lose the community’s support anytime, and it is not as secure as commercial panels.

In this article, we’ll talk about a new Laravel administration panel, Laravel Nova. It is the official admin panel for Laravel apps, created by the same team that developed the Laravel framework.

Nova is developed based on Vue.js and Tailwind. Not only it looks a lot nicer than Voyager, it is also highly customizable and very powerful.

The official website has a list of all features included in the Laravel Nova. Check it out if you are interested. In this article, we’ll focus on how to install Nova and how to integrate it with your Laravel app.

Create A New Laravel Project

First, create a new empty PHP project in PhpStorm, and then install Laravel for our project. Open “Terminal”, it should go to the root directory of the project. Run the following commands.

Download the Laravel installer:

composer global require laravel/installer

Create a new Laravel app:

laravel new

This process will take a few minutes to complete.

Download Laravel Installer
Create A New App

Download Laravel Nova

First you need to register a new account and purchase a license. The solo license is $99 per project, and it includes all features of Laravel Nova. This part should be pretty straightforward.

After that, go to the “Releases” page, and download the latest version.

Install Laravel Nova

Unpress the file you just downloaded, you should get a folder named something like laravel-nova-fd55xxxxxxxxxxxxxxxxxxc5b5. Rename it nova, and put it in the root directory of our project like this:

Once you are done, we need to update the composer.json file. Add the following configuration:

"repositories": [
    {
        "type": "path",
        "url": "./nova"
    }
],

Now, in the require section, add laravel/nova like this:

"require": {
    "php": "^7.2.5",
    "fideloper/proxy": "^4.2",
    "laravel/framework": "^7.0",
    "laravel/nova": "*"
},

After the composer.json file has been updated, run the update command in the terminal.

composer update

Finally, run the nova:install and migrate Artisan commands. The nova:install command will install Nova’s service provider and public assets within your application:

php artisan nova:install

php artisan migrate

After that, we need to check if the Nova service provider has been registered. Open config/app.php and scroll down to the App Service Provider section. If you don’t see NovaServiceProvider, add the following code:

App\Providers\NovaServiceProvider::class,

Open the browser and go to http://localhost/nova. You should see the login page.

Create A New User

However, we still need a new user account to log in. We can add one using the nova:user artisan command:

php artisan nova:user

You will be prompt to input you name, email, and password. After that, you should be able to log in with the account.

Define Resources

Now, we need to integrate Nova with our Laravel application by defining “Resources”. Here, I’ll use the same blogging system that we created in the Laravel Tutorial For Beginners as an example.

In Laravel Nova, each “resource” corresponds to a Eloquent model in our blog app. By default, Nova resources are stored in the app/Nova directory of our application. You may generate a new resource using the nova:resource Artisan command:

php artisan nova:resource Post

The resource this command generated corresponds to the Post model of our blog application. For now, we only care about $title, $search, and fields().

$title defines the value that should be used when the resource is being displayed. For example, when you try to search for a post in Nova, you would want the “title” of the post to be displayed, instead of just an id.

As for $search, we would want to search by title, meta title, or content. Add the following code in the resource:

    /**
     * The single value that should be used to represent the resource when being displayed.
     *
     * @var string
     */
    public static $title = 'title';

    /**
     * The columns that should be searched.
     *
     * @var array
     */
    public static $search = [
        'title', 'content',
    ];

And for the last part, fields(), we need to talk about it in detail.

Define Fields and Relationships

Let’s first look at the model we created:

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    protected $fillable = [
        "title",
        'content',
        'slug',
        'featured_image',
        'is_featured',
        'is_published'
    ];

    public function tags()
    {
        return $this->belongsToMany('App\Tag');
    }

    public function category()
    {
        return $this->belongsTo('App\Category');
    }

    public function user()
    {
        return $this->belongsTo('App\User');
    }
}

We need to create a field for every column and every relationship defined in this model. Nova ships with a variety of fields out of the box, including fields for text inputs, booleans, dates, file uploads, Markdown, and more.

use Illuminate\Http\Request;
use Laravel\Nova\Fields\ID;
use Laravel\Nova\Http\Requests\NovaRequest;
use Laravel\Nova\Fields\Text;
use Laravel\Nova\Fields\Trix;
use Laravel\Nova\Fields\Image;
use Laravel\Nova\Fields\Boolean;
use Laravel\Nova\Fields\BelongsTo;
use Laravel\Nova\Fields\BelongsToMany;

class Tool extends Resource
{
    /**
     * Get the fields displayed by the resource.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return array
     */
    public function fields(Request $request)
    {
        return [
            ID::make()->sortable(),
            Text::make('Title'),
            Trix::make('Content'),
            Text::make('Slug'),
            Image::make('Featured Image')->disk('public')->path('posts'),
            Boolean::make('Is Featured'),
            Boolean::make('Is Published'),
            
            //Define Relations
            BelongsTo::make('Category'),
            BelongsToMany::make('Tags'),
            BelongsTo::make('User'),
        ];
    }

Text is a simple text box like this:

Trix is a rich text editor, it allows you to write neatly formatted contents for your web applications:

As for Image, it creates an upload button, and in this example, after you upload a picture, it will create a new posts folder in the public directory and put the image there.

Of course, this is only the basic use of Laravel Nova. Besides resources, Nova also ships with metrics, filters, and tons of other functions. You can read the official documentation if you are interested.

https://nova.laravel.com/docs/3.0/installation.html

Leave a Reply

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