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.
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:
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.
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:
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:
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.
You can also have fields(), filters() and actions() methods on your Lens class, just like on resources.
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:
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:
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:
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.
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.
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”.
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
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:
- Project name: web-app
- Project description: blog using Nuxt.js
- Use a custom server framework: none (because we use Laravel as the server)
- Use a custom UI framework: bootstrap (because it’s popular, easy to use)
- Choose rendering mode: Single Page App
- Use axios module: yes (we will use axios to call API)
- Use eslint: yes
- Use prettier: no
- Author name: Huy Hoang
- Choose a package manager: yarn
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!
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!
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:
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:
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:
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:
Example: I create a file named example.vue
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.
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!