Getting Started With Laravel Nova

For my blog here at Paulund I use Laravel to run it. The reason why I use Laravel is because it's the framework I use at my day-to-day job and having my blog ran on Laravel means I can play with new skills that aid towards my day-to-day job.

For the admin area I will need pages for writing blog posts, managing categories and managing users, I did this by creating my own SPA admin area from VueJS. Recently there was a release of a new package into the Laravel communtity which meant I can make a switch from my own VueJS admin area and onto a new package called Laravel Nova to admin my blog.

What is Laravel Nova?

Nova is a framework built onto Laravel that allows you to quickly create admin area pages for your application.

This was first demo'd at Laracon US 2018 by Taylor Otwell where he presented how easy it was to use and how easy it is to build on to create your pages.

Laravel Nova Demo

Nova allows you to easily manage resources, create your own filters, create your own actions, full scout intregration for global content searches.

There's so much information about the detail of Nova on the documentation website you can learn more about it here.

Laravel Nova Documentation

In this post I'm going to go through what I had to do to start using Nova as my admin area.

Install Nova

To use Nova you first need to purchase a licence from the register page. Then you'll be able to download the latest version of the package.

As this is a premium package you won't be able to include from github via composer you'll need to configure composer to install it from a local path.

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

Then add laravel/nova to the require section of your composer.json.

"laravel/nova": "*"

Then run a composer update and Nova will be installed into your project.

To find out more information read the installation page on the nova documentation Laravel Nova Installation.

Paulund Nova Pages

The pages I need to create for my admin area are

  • Posts
  • Users
  • Categories
  • Tags

So let's go through all the steps I needed to do to use Nova as my admin area.

Blog Posts Page

To manage my blog posts in Nova I first need to create a new Nova Resource by running the command

php artisan nova:resource Post

This adds a new file to app/Nova/Post.php, now I need to customise this to work how I want it in the admin area.

By default Nova resources will just be shown in a table with the ID of the resource. On the Post table I want to be able to see the post title, post status and the published date. To do this I need to change the fields method on the 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')->sortable(),
        Text::make('slug')
            ->hideFromIndex(),
        Select::make('status')->options([
            '0' => 'Draft',
            '1' => 'Scheduled',
            '2' => 'Published',
        ])->displayUsingLabels(),
        //Select::make('category')->hideFromIndex(),
        Markdown::make('markdown')
                ->hideFromIndex(),
        DateTime::make('Published At', 'published_at'),
        Textarea::make('excerpt')
                ->hideFromIndex(),
        Boolean::make('Members Only', 'members_only')
                ->hideFromIndex()
    ];
}

This is the fields list that will define how the list of posts are displayed and the single post detail view and the edit screen for posts and the creation of new posts page.

As you can see the code is very easy to understand you can see that there's an ID field, then a text field thats called title, another text field for the slug etc. You can define which pages these fields are shown by using the method hideFromIndex will hide it from the index page, which lists all the posts.

With just the above code I'm now able to manage all the posts on my blog.

Post Status Filter

When I have ideas for a new blog post I tend to quickly log into the admin area and create a draft post with quick information so I can come back later and fill out the information on the post.

Therefore on my list of posts page I like to have a filter to just show all draft posts or show me all published posts etc. We can do this in Nova by creating a new filter used on the post resource.

To create a filter run the below command

php artisan nova:filter PostStatus

This adds a new file in App\Nova\Filters\PostStatus

Then in the apply method I need to change the status value.

<?php

namespace App\Nova\Filters;

use Illuminate\Http\Request;
use Laravel\Nova\Filters\Filter;

class PostStatus extends Filter
{
    /**
     * Apply the filter to the given query.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Illuminate\Database\Eloquent\Builder  $query
     * @param  mixed  $value
     * @return \Illuminate\Database\Eloquent\Builder
     */
    public function apply(Request $request, $query, $value)
    {
        return $query->where('status', $value);
    }

    /**
     * Get the filter's available options.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return array
     */
    public function options(Request $request)
    {
        return [
			'Draft' => '0',
            'Scheduled' => '1',
            'Published' => '2'
        ];
    }
}

Then we register this to work on the post resource by adding it to the filters function.

/**
 * Get the filters available for the resource.
 *
 * @param  \Illuminate\Http\Request  $request
 * @return array
 */
public function filters(Request $request)
{
    return [
        new PostStatus
    ];
}

Amount Of Posts Values

I like to see how many posts I made within a certain date range. You can do this in Nova by creating a new value card.

To create a new card you can run the command.

php artisan nova:value MonthlyPosts

This creates a new file in App\Nova\Metrics\MonthlyPosts.

<?php

namespace App\Nova\Metrics;

use App\Models\Post;
use Illuminate\Http\Request;
use Laravel\Nova\Metrics\Value;

class MonthlyPosts extends Value
{
    /**
     * Calculate the value of the metric.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return mixed
     */
    public function calculate(Request $request)
    {
        return $this->count($request, Post::class);
    }

    /**
     * Get the ranges available for the metric.
     *
     * @return array
     */
    public function ranges()
    {
        return [
            30 => '30 Days',
            60 => '60 Days',
            365 => '365 Days',
            'MTD' => 'Month To Date',
            'QTD' => 'Quarter To Date',
            'YTD' => 'Year To Date',
        ];
    }

    /**
     * Determine for how many minutes the metric should be cached.
     *
     * @return  \DateTimeInterface|\DateInterval|float|int
     */
    public function cacheFor()
    {
        return now()->addMinutes(60);
    }

    /**
     * Get the URI key for the metric.
     *
     * @return string
     */
    public function uriKey()
    {
        return 'monthly-posts';
    }
}

That's all the code you need to be able to manage blog posts in Nova.

Nova Packages

Nova makes it very easy to build onto of and customise how you want it to behave. Just after Nova was released a new website called Nova Packages was released where others can share the packages they've created.

Nova Packages

Some of the most popular packages you can download and use in your admin area are.

Summary

As you can see from the code above it's very easy to get Nova installed and setup to manage the content in your application. For this reason I've decided to use it to manage my blog posts and users here.

I plan on looking more into how you can customise Laravel nova by creating your own tools and resources, I will write new tutorials on how this can be done.

UpChecker

Reliable uptime monitoring and instant alerts for any website downtime.

  • Uptime Monitoring
  • Performance Monitoring
  • SSL Certificate Alerts
  • Domain Monitoring
  • DNS Checker
  • XML Sitemap Monitoring