Laravel Nova overview

Sometimes you need a simple admin panel to download reports, send emails, search data, review graphs, or safely make database changes. If you have a Laravel web-app or website that needs light content management or light customer relationship management, Nova – the simple Admin Panel Content Management System is a great solution for you.

What is Laravel Nova?

Laravel Nova is the admin panel for Laravel that was first introduced at Laracon Us 2018 by Taylor Otwell. It’s beautiful and easy to work with. Nova allows you to easily manage resources, create your own filters or actions, and many things cool stuff.

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

Although Nova is not free. A license for a solo developer with annual revenue less than $20k is $99/site, and a pro license is $199/site. Head over to nova.laravel.com to register and purchase a license.

Laravel Nova Admin Page

How does Laravel Nova work?

Nova is a package you pull in with Composer that makes it easy to attach “Resources” to your Eloquent models. Imagine you have a list of users in your users table with a User Eloquent model, you’re now going to create a User Resource class which attaches to your model. The moment you create a Resource, it’s registered into Nova and gets added as one of the editable chunks of the admin panel.

Each resource will available in the left sidebar. By default, every resource gets basic CRUD treatment (as above example): list users, create user, edit or delete user.

Defining a Resource in Laravel Nova

Each resource has a list page, a detail page, and an edit/create page. Here’s a sample detail page:

Edit or Define a Resource in Laravel Nova

Work with fields

Each resource contains a fields method. Nova ship with a variety of fields out of the box, including fields for text Inputs, Booleans, Dates, File Upload and more.

Work with fields

Actions and Filters

Actions in Nova

Nova actions allow you to perform custom tasks on one or more Eloquent models. For example, you might write an action that sends an email to a user containing account data they have requested. Or, you might write an action to transfer a group of records to another user.

Once an action has been attached to a resource definition, you may initiate it from the resource’s index or detail screens:

Actions in Nova Eloquent models

Filters in Nova

Filters are similar to actions, they’ll show up in a dropdown on the index page and let you show “only items that match this filter”. Just like this:

Filters

Lense

While similar to filters, Laravel Nova lense allows you to fully customize the underlying resource Eloquent query. For example, you may have a list of user and want to sorted by their revenue. To do that, you have to join to additional tables and perform aggregate functions within the query. If it sound complicated, fear not – Nova lense got your back.

Laravel Nova lense

You can also have fields(), filters() and actions() methods on your Lens class, just like on resources.

Metrics

Value Metrics

Value metrics display a single value and, if desired, it change compared to a previous time interval. For example, a value metric might display the total number of users created in the last thirty days compared with the previous thirty days:

Value Metrics

Trend Metrics

Trend metrics display values over time via a line chart. For example, a trend metric might display the number of new users created per day over the previous thirty days:

Nova Trend Metrics

Partition Metrics

Partition metrics displays a pie chart of values. For example, partition metric might display the total number of users for each billing plan offered by your web-app:

Partition Metrics

Search in Nova

All Resources can be searched from their list pages. You can set the globallySearchable property to true either on your base Nova Resource or just on individual Resources, and Nova will show a global search box up in the top nav-bar. Type in there anything you want to search then you will get the results across all of the globally searchable Resources.

Search in Nova

Summary

As you can see, Laravel Nova is very easy to setup and manage the content in your application. I think in the future, Nova will have the kind of impact on Laravel development that Laravel had on PHP web development.

Huy Le

In the last post, I introduced the concepts of Vue.js. Today, we start to code and set up a project. First, we create a root folder named “vblog”.

  1. Backend

We use Laravel (here I use the latest version is 5.7)

In the root folder, run command to create a project with “server” is the project name:

Laravel new server (noted: you have to install the Laravel installer first, the document here )

Now we have the folder structure below:

 

Then in Laravel project, we install some new packages to support API:

Run command: composer require barryvdh/laravel-cors

 

That’s enough for the server now, we will use it later

Now we go to set up the frontend (Vue.js) using Nuxt framework

  1. Frontend

In the vblog folder, we create a Nuxt project named “web-app” using yarn

 

While creating, it will ask you some questions.

Here I choose below answers:

Now we have the code folder structure like this:

 

Then in Nuxt project, we install some packages: jquery, node-sass, sass-loader, vue-notification, @nuxtjs/dotenv

Noted: jquery is not suggested using in Vue. But some package required it, so we still need to install jquery. But we will not use jquery in our code.

Now we try to run the project in a web browser.

Start server by running the command: yarn run dev then open URL http://localhost:3000/  in Chrome

We’ve finished setting up the project with Laravel as backend and Nuxt.js as frontend.

In the next post, we will build our web layout and custom the loading effect automation whenever URL router change, and add custom notification. Stay tuned!

Huy Hoang                  

 

In the last post, I’d introduced what Vue is. We can get started with coding right now, but why I write this post, it’s also just theory?

Ok, ok, calm down. In this series, I want to discuss Laravel and Vue.js (we will use Nuxt – a Vue framework). So, before we start, we will research important concepts that we need to know.

Let’s get started!

  1. Template

By default, Vue will use an HTML file for its template. An included script will declare an instance of Vue and use the el property in the configuration object to tell Vue where in the template the app will be mounted. And we can bind data to our template by creating it as a data property and using the mustache syntax to print it in the page:

 

  1. Directives

Similar to Angular, we can add functionality to our templates by using directives. These are special properties we add to HTML tags starting with the v- prefix.

Example: We have an array of data. We can render this data to the page as sequential HTML elements by using the v-for directive:

  1. Components

Components extend basic HTML elements and allow you to create your own reusable custom elements. But probably the main reason to use components is that it makes it easier to architect a larger application. Functionality can be broken into reuseable, self-contained components.

Example: Here I’ve created a custom element, grocery-item, which renders as a li. The text child of that node is sourced from a custom HTML property, title, which is accessible from within the component code:

  1. Reactivity

A key feature of Vue’s design is its reactivity system. When you modify data, the view automatically updates to reflect that change.

Example: If we create a function that pushes another item to our array of grocery items after the page has already been rendered, the page will automatically re-render to reflect that change:

  1. Single-file component

A drawback of using components is that you need to write your template in a JavaScript string outside of your main HTML file. There are ways to write template definitions in your HTML file, but then you have an awkward separation between markup and logic. A convenient solution to this is single-file components. These files have the .vue extension and encapsulate the component template, JavaScript configuration, and style all in a single file. Web browser can’t read these files, so they need to be first processed by a build tool such as Webpack.

Example: I create a file named example.vue

  1. Vue Router

Vue Router allows you to map different states of your SPA to different URLs, giving you virtual pages. For example, twentyci.asia/ might be the front page of a blog and have a component hierarchy like this:

Whereas twentyci.asia/post/1 might be an individual post from the blog and look like this:

 

Changing from one page to the other doesn’t require a reload of the page, just swapping the middle component to reflect the state of the URL, which is exactly what Vue Router does.

 

  1. Vuex

Vuex provides a powerful way to manage the data of an application as the complexity of the UI increases, by centralizing the application’s data into a single store. We will talk more about Vuex during coding.

 

There are more concepts but we will talk about them while coding each part. In the next post, we will set up our base project and make some configurations. Thanks for reading. See you!

Huy Hoang