Laravel Nova Overview

what's up guys Andre here and today I'd like to take a look at some of the features of laravel Nova so if you're not familiar with Nova it's a beautifully designed admin panel for laravel it's the latest product in the laravel ecosystem that Taylor announced about a month ago at lyric on us I'll link to a video of Taylor launching it below he gives a great overview of most of its features so Nova was officially released about a week ago so let's go ahead and take a look at some of its features ourselves now to demo the features of an admin panel we're going to need an application that already exists and that already has features models and relationships so for that I'm gonna be using my laravel ecommerce application which I have an entire series on if you're interested so here it is here and the way I built it out was I initially just built out the core features the core features were being able to purchase a physical product and have that go through the Striped and I didn't really have an admin panel so whenever I needed to like say I had a product I would just go directly into sequel Pro and add it to the database manually so after about 10 videos I added laravel Voyager which is another admin panel for laravel so I've reverted back to the point before I added Voyager so we can go ahead and give Nova a shot so I've done some work beforehand because when I reverted back it went back to a level 5 point 5 application so I upgraded to level five point six because Nova requires at least five point six so I also implemented other features after this point and I didn't reimplemented here but I did add the models and the relationships for them so for example I didn't add users until later on but I do have a users table here with some C data and the same for orders so let me just give you a quick demo of the app as you expect it's an e-commerce application and there's products here and you can also go into the shop page there's products here and these are the main models we'll be looking at so products and categories and I'll show you the relationships as we go along but products and categories are a many-to-many relationship so there's a pivot table involved and as you expect you just click on one you can add it to a cart you can proceed to checkout again there's no users yet but I do have a user model because I added that much later on in the series and then you can fill this out and this talks the stripe and then stripe accepts the charge and I sort of view stripe as a back-end admin as well like I just saved the data in there there's also coupons which you can get a discount on your order on and yeah that's the basic application which will be adding ANOVA to so let's go ahead and install ANOVA so if we go into the docs so if you scroll down it says here after you purchased a license you can download it from the releases section and it says to unzip into a ANOVA directory so here's the releases section there's actually a version just released today which we'll be using and here's the Nova folder so when I make this code available I'm obviously not gonna include this Nova folder because it is a paid product so I'm gonna get ignore that but you can have the application code that we'll be writing here I'm gonna paste this into the root of our application and that's the first step okay now it says to add this repositories key into our composer JSON let's go ahead and do that a little composure and add that to the bottom here split here okay just indent that okay what's next now it says to add laravel Nova to the required sections let's grab that require so let's put it right here okay what's next okay now you can compose or update but there's one more thing that I have to do to get it to work and it sort of mentions it here but minimum stability and the prefer stable so I'm just gonna paste these two lines of code into the composer JSON and this should get it working so now I'm gonna do a composer update yes and that should install it so poser update okay that was successful and there are a few commands that we have to run so PHP artisan Nova install and that just publishes some assets and a some other files like a service provider and then we have to migrate and Nova is mostly code driven but I believe it needs one table for actions so let's go ahead and do that migrate cool so now so it says verify that Nova service provider is in your providers array so it's gonna config up and look for Nova's service so there it is cool okay I didn't change the user here so that should be fine okay so now here this is for authorization and who gets access to Nova it says that if you're on local any user in your database can access it so we are developing locally so if we did this correctly we should be able to go to slash Nova and there's your login I believe I have a user for myself and we should be able to login let's try that and there is the backend okay so the first thing I'd like to take a look at is resources so resources correspond to your models and allow you to perform crud actions on your models so as you can see there is a default users one here so if I click on that here are all the users in my application like I said I have seed data here so that's why there's data so let's go ahead and add our own resource which like I said earlier we'll be looking at products so let me open this side again err well and as you expect obviously products these products are stored in a products table so let's go ahead and add a resource for that so if you go into the docs here are the basics for defining resources so we can use this CLI tool and we can do PHP artisan Nova resource and give it the model name so it's going to that in our case it is product so let's go ahead and there is a new folder that's created so within app there's a nova namespace and there is that product resource we just created and here is where the product lives which is correct and without any other config that should show up in our admit rearranges okay so refresh this there should be products here so that's pretty straightforward and I click on products and by default it only shows the ID so to add fields here let's go back into our code and there is a field array right here and so as you can see the ID is right there so to add more we can just add some built-in Nova fields here so the most common being text so the text make and then we give it the database column name so you can give it sort of this snake case if you want or you can just give it the database column name so in our case let me actually open sequel pro so we can compare against the database so my database is laravel ecommerce Nova and products is right here so as you can see it's kind of small but name is one of the columns so we'll just stick to the database name and we have to import that and we just look for the novo and cool and then that should add it there you go there's a name so to make it suitable right now you can see there's no arrows here so you can't sort it and depending on your app you want to be able to sort to certain fields so we can just chain on a sortable method that makes it sort of all come back here refresh now we can sort it as you can see as we sort we have the URL change and this can easily be copy and paste it and give it to someone else and then they would be in the same state as your application here which is really nice and also this is built out as an SP a using view which makes it really snappy and a really nice user experience but you obviously have to be familiar with view it's also built with tailwind CSS which if you watch any of my other videos I really enjoy so what else so pagination I believe the default is 25 if you want to change that let's click on this filter and you can change it here searching so there's two types of search there's search within the active resource so we can just search for something here and it's not showing because we have to define what fields we want to be searchable so if we go back into our code so right now it's only searching by ID so if I just put in a number then it finds it but if you want obviously we want the name to be searchable so if you just go back here and there is a search array here and we can give it the database column and now that should be searchable let me just refresh that sorry now it should be searchable my name and there you go something else TV there you go cool there's also global search which allows you to search across all your resources so if I go here and search for TV then there is the IDs and again we have to change that so it shows up the correct column name so to do that let's go back into our code and just change this title property so it says again the in database column and now the global search should show the name so TV and there we go and if we had more resources it would search across that as well but I only have one right now so I mean I have users too but there's no common search for that so so let me just show you one quick thing about search if you want like sort of another line underneath to serve as a subtitle we can actually do that so back into our code let's just add a subtitle field which is gonna paste in here and the details field is in the database and that's what I'm defining as the subtitles it just has information about the product so now if I search a client's did I not save I did not save try it again so TV there you go there are the details as a second line cool ok let's keep adding some fields in here let's go back at our code and I'm gonna add more here so another field I have let me show you is slug details price so to add a few of these let me just paste in the slug sorry then we remove the rules for them for now I'm gonna get to that in a second so if slug in details are just the same as name they're just text fields let make sure I put a comma here see how that looks okay cool so if you're going to here you can see all the types of fields so here so next one I wanna take a look at is currency so let's go ahead and do this so go back to my code currency what is the field name in my database it is price let me stick with price she let me lowercase this again you can use uppercase or lowercase but I'll stick with the database name and we want this to be sortable okay let me save that and let's see if price shows I have to import that as you can see there's the error there and since it's a SP a there's no full page error it just comes back as Ajax which doesn't crash your app which is really nice so let's import this say that refreshes okay so there is price but it's in cents so we want that to be dollars so how do we do that so we can actually do something like this and give it a price sort of sorry a computed property and in here we can do whatever we want in our case we want to divide by 800 so let's go ahead and go back to our code let me just comment this out and I'm gonna paste in the same thing but with a computed property and in our case we just want to divide by 100 sorry this is from my finished product or project already we'll get to those in a sec back here and that works but he's sort of I don't think we can sort with computer properties so like if I do sortable here it still won't work or will it no it doesn't see and we definitely want to sort by price that seems to be a common thing that we'd want to do for our products table so I didn't just get rid of this search here so is there another way we can sort of make this sortable and have this computed property so if we go into customization here we can use this resolve using function which sort of functions as a computer property so let's see if we can make use of that I'm just gonna paste some code in here and we'll comment this out again and we'll use that new resolve using function so I'm back to using text because it doesn't seem to work with currency and we're using the price here and we're passing in a closure and I am adding the dollar sign and dividing by 100 and I'm making a sortable so let's see if this works and it does and sorting works so that's great we we sorted that out okay let's continue there's something I want to do with price in a second but I want to show you something else which will lead into that so let's look at another field here so another field is description but generally speaking the description is longer form text and we don't want that to display on the index page so let's go ahead and add a new field here for there's a text area which is longer form text in the text area make description and I'm not sure if I think sorry I forgot a comma but I think Nova is smart enough to not add text areas to the index let's see text area not found import that say that yes so it is smart enough so let me show you what I mean if I go into so there's other views here there is the view page and there's an edit page so the text area should show in there and it does right here description and same for edit so I hope you understand what I'm trying to get at here there are some fields that you don't want to show on the index but you do want to show on these other two fields or just one of them if you want but laravel Nova is smart enough to hide this on the index by default so if you want to be explicit about it you can call hide from index here and that's not going to change anything but it's more explicit okay let's take a look it should be the same but the thing I want to show you with price is so this is fine that's showing the correct one in the view page but if you want to edit it you can edit it from here this is showing as dollars and if we submit this then the database data is going to be screwed up because it's not in the correct format of cents so let me see what happens here update product there you go I see an error here so when we're editing we still have to change it back to cents so how do we do that so to do that we can make another field here that only shows on the details page so let's go ahead and make let's put it right after price actually right here so we'll do number make price so now there's two prices but this one is only gonna show on forms so only on forms and that should override sorry I always forget the comma okay I have to import that I always forget to import as well so now it's incense here actually there's two now we don't want this one to show so for this first price we can specify that only on index so we can do somewhere here only on index and now there should only be one here and now we can update the price accordingly so if I change this to 980 108 that should work cool so I still haven't figured out a way like I'd like to be able to enter this in dollars so I didn't look into it too much but it'd be nice if there was a way such that I could update this using dollars instead of cents okay now let's take a look at validation so for example I think details is required let me just cut this out if we try to update it and side note these two buttons are a small detail but it's really nice so what update product does is it updates it and then it goes to the view page but sometimes you want to stay on this page so that's what this button is for nice really small detail there so let me try to update this okay so I guess details can be empty it's log for sure can be empty so there you go so again because it's a s.p.a the backend error comes in as Ajax which is nice but if you wanted nicer error messages we can definitely make use of some front-end validation here so let me put that back and let's go back into our code and to add validation all we have to do is add a new method here rules and we can just use the laravel validation rules in here so I'm not gonna go into into details that's gonna make them required and we can do the same for these ones what else and here let me just paste that in and that should now have validation so now if I try to remove this there you go slug field is required cool okay now let's take a look at panels so panels just separate the fields here for example there can be too many in one and it can look a bit cramped so let me show you how to add panels like a door code so after this description let's make a new panel here let's call it visibility and let's call a method there is a bility fields it's not forgot a comma and I'm just gonna paste some code in to save time but all this is doing is it's adding more fields for this specific panel so I'm adding two new fields featured and quantity which are right here so featured is a boolean and quantity is a number let me import boolean okay see if that works that should that should just provide some separation here I have a syntax error new panel comma again I'm always forgetting the commas panel have to import okay see now you see two panels here cool so if you're curious as to what feature does it just I think on the main page these products are featured so just a random featured product is shown here and then on the shop page before you select a category then these ones are featured products so we can toggle that on and off now since we have this so if you added it so let's go ahead and take a look at the dashboard sorry in the dashboard the products so you can see it here too it's red or green so appliance 5 should be here somewhere appliance 5 here there it is right there but if I take that off just uncheck that update that's not featured and that should be gone awesome so another thing that I didn't really have much time to look at and we probably won't be looking at here but I'll mention it is the images so in my series I eventually added images using Voyager because it has a media manager and allows you to upload files so there's no media measure in Nova yet but there is an upload field so if you're going to feel types or there's an image field at least or if there's file in your images maybe we'll take a look at that in future videos but right now the implementation is pretty basic it's just taking this log of the image and it just looks for a file with that name so for example there should be a file name TV - for I think it's jpg so yeah maybe we'll take a look at images in the future and I think I just got to show ya well this is pretty intuitive but obviously you can now I had products here so Fisher yes and let's give it ten you can create it and I would add it but like I said this will show up here but there'll be no image for it so it should be somewhere here and there it is there okay now let's take a look at filters so filters allow you to filter your resources here so it will show up in this icon here so for example if I want to just show the featured products so sort of a way of doing that is you can just sort and then just look at it that would be okay but a better way would be to use filters so let's go ahead and go to the docks and for filters here so here the finding filters so we can do this which we are saying Nova filter and I'm gonna make one called featured product actually let's name it product featured there so we can like sort of namespace all our like our sort of product filters so product featured and that is going to create a file in here product featured and we can specify the query here and the options here so let's go back into our code and so we want a query where all we're doing is filtering featured based on the value so it's just a boolean value so we can specify the two types here so this will be what displays in our admin panel and this is the actual value in the database we can put 0 or 1 but we can also put your false and the next one is not featured and this one is false and to register filters we can just go into our resource and do this so what's going to product here and filter is right here just gonna do new filters and in the product feature and let me import that cool and if we did that right then just click on this it should show up here let me just hard refresh there it is and if you do featured it will only show our featured products and we can do not featured and it will show the rest so you wanna know how many there are just click on this and you'll see how many there are 13 and not featured 72 go ok let's quickly do one more filter and what I want to do is sort of have a low stock and a in stock indicator so if it's less than sort of a threshold let's say 5 then I want that to be considered low stock or how would be go about doing that let's make another filter here let's call it product quantity or product in stock or something like that I'll just name it this and back to our code it's got a product quantity and in our other filter we just did an equals comparison here but now we want and inequality so how we're gonna do that it's specified the values first here so like I said I want low stock and that's gonna be a certain number so like less than a certain number so it's just hard code that in for now and then I want another one for in stock and that's going to be sort of like one plus that number so it looks like we need a variable to hold the threshold let's go ahead and make one up here just put it as an instance variable so protected threshold equals say five and now we can just use that variable instead so this threshold and I can use this and add one to it and in here now we can just do a conditional so if so if the value which is are they going to be in our case five or six so if that is equal to the threshold so this threshold then we want our query to be let me just put this in here query where quantity is less than or equal to the value and then now we can have an else clause and that just does the opposite of that and should be greater than or equal to and that should do it you can also use a ternary if you like but I'm okay with this syntax here and then let's see if this works I want to register it so back to here product quantity so a new filter is product quantity import that okay see if that works it's hard refresh this let me just go back here hard refresh so there it is so in slow stock should be it should result in nothing because yeah but in stock should do that so let's change a few of them let's change this one to less than five say four and then it's change another one say a three okay so let's try this again no stock there you go and in stock awesome you can also combine the filters so save it for example we want it featured products that are in stock then this would reflect that and featured products that are low stock cool okay now let's take a look at relationships so may just clear this filter here so just click on that empty slot there and as I said before products and categories have a many-to-many relationship so if you look at our model here there is a belongs to many here you feel that category is it belongs to many there so they also have a pivot table so it should be called category product and there it is so what we want to have happen is as we take a look at one of the products we want to see what category they belong to as well so down here we'd like to see the relationship that this shares with a category so how do we do that first of all we have to specify the resource for the category so let's do that first so let's do resource category okay and that should out of here eight categories and let's just add a name field here so category here and it's just add a text to text make and which import that Nova and sorry they should be name and see if that shows that cool so how do we add this relationship so right here that I said we want this to show the categories that this product belongs to so if we go into the docks and the four relationships right here just look for it supports all the relationships in laravel and in our case it's a belongs to many so all we have to do is add this to our fields array and specify the relationship so this goes in here so in our product right here at the end of our fields or wherever you want to show up so I want to show up after the panel so belongs to many and in our case its categories and let's import that okay save that back here hard refresh and there it is right there so appliance nine belongs to obviously appliances and if you wanted to add another category to this product they just do attach category I'll choose one and right now it's displaying just the IDS because we have to specify a name in the category so we'll just give it in name here let's go back here refresh there you go you get the name showing up and let's give it a laptop category attached and now you can see appliance 9 is an appliance and a laptop so if you want to hear what two laptops should be at the end and there it is and obviously it's an appliance as well right there cool ok so I've gone ahead and added orders as a resource because orders are an important part of our application and there are two types of relationships that are related to orders so there's a relationship between orders and products and that is also a many-to-many relationship so here I am in my orders index if I click on one of them hopefully this one has products it does so you see that this order has a total again these values are just fake they don't add up but they would in the real application so this order has five products associated with it and this right here is not working at least for me at the moment and seems like other people are having this issue so this is the pivot table so the pivot table has one extra field on it which stores the quantity of that product so an order product there is a quantity item and this will just show how many products for this item were ordered for this particular order and the other relationship is between orders and users so a user has many orders so in this case we want to be able to drill down into one user and see their particular orders so hopefully this user has orders and they do so this particular user has three orders and here are their IDs and all their information and you can drill down into that specific order and then see the products so yeah the relationships are really nice to work with and pretty simple to use okay now let's take a look at metrics so it's going to the docs and go into metrics where's metrics right here so defining metrics so with any admin panel you definitely want metrics or stats on to what's going on in your application so metrics allows you to do that easily so let's go ahead and take this example here for new users okay let's go ahead and go to the CLI type that in and that will make a new file called new users in metrics and here we want to count a particular table here in our case it's user let's import that and this would be the normal user and you're not limited to just counting there are a whole bunch of different operations for stats average some max min so whatever you need for your stats there is a method for it and the range is here whatever ranges you want if you can add I want to see the current daily users so like number of users that register today so we can add a new one here for one and just say one day and then we can register the metric so you can add metrics to either the resource page so whatever a resource is related to your metric you can put it like up here or you can put it on your dashboard so when you first log in you see that certain metric so for example if I wanted to add it to the users we can just add it to this cards function and it's just copy and go to our user resource right here and it's just paste that in and it's import that I will have to import it cuz it's namespaced okay and then that should show it very fresh users per day now found it's called new users so there it is and you can change the range and you can see the new users for this date range if you want to add it to the dashboard page you can go into your Nova's service provider and add it there so I'm gonna copy this you can put on both two if you like so we'll just leave this here I'm going to Nova's service provider will go in two cards here and this help one is the default sort of view for the dashboard so that cards is this stuff here we can remove that if you like and just add that now we need to import it cool and now that metric should show up here cool and if you want to change the width you can so I think there are a few sizes default is one third you can do yeah just call a method on it and give it to me with switch to this and then with let's give it a half and that should be half the screen and it is cool okay let's make another one what other information would be important to us I would say probably the new orders so gonna see how many orders are for the current day so it's pretty much the same as new users so let's go ahead and do this new orders and just import order let's import that app order let's add one day here and one day and it's going to our service provider and let's do new orders and that's a good with and that should work new orders okay and there's our new orders for the day and we can change the range and that updates accordingly cool so one more similar to new orders we want the revenue for the day so let's make a new one let's call it revenue and let's go into that revenue and instead of counting we are going to sum the order so that's important that and we want to specify the column we want to sum and in our case it's billing total and again we want one day here hopefully in the future this is default because one day seems to be a metric people would want to see and it's let's put it on the main screen again over service provider revenue one-third import that save and let's see if that shows up cool so that's correct but this is incense and I can't figure out a way to change that to dollars at least for now you go into the docks you can manually build results here if you use this syntax but you lose that sort of date range so yeah maybe I'm just missing something I don't know but but seems like other people are having the same issue and there are some issues raised on the github repo okay let's take a look at one more metric and those ones were just value metrics but there's also trend metrics and this just displays values over time using a line chart so let's go ahead and do the same thing for users per day or you can do the same for revenue per day but we'll stick to this example here and just do that and then we just want do this in users per day so it should be a users per day do that import this and then we can keep the ranges and then we start to say that another one here users per day import save back here so now we have a nice line chart and if you hover over it you can see the value for that particular day so these ones in particular are probably a good idea to make it larger especially if the date range is larger here so there you go there's also partition metrics which is a pie chart but we won't take a look at that here okay so the last thing I want to take a look at is tools so what if you needed some additional functionality that is not provided by Nova so Nova allows you to build custom tools so you can register it in the side bar or in the resource and you can do whatever you want using view and tailwind and your own back-end so let's go ahead and make a tool it's not going to do anything but I'll just show you how to add something in the side bar and how you can make use of that so let's use this function here sorry this command and let's go into here I'm gonna clear this and let's name it name it my user name and then I'm gonna name it some tool and say yes to this because we need to install everything for it to work correctly okay so that's done if we look in our editor here there is a whole new folder specific to that tool alone so it's outside of this it's in Nova components and whatever you named it so as you can see it has its own package.json its own composer JSON its own dependencies so it sort of lives on its own and it makes it easy to distribute as a package so if we go into our admin here refresh sorry I think we have to register it first yeah I have to register it here so right in novice service provider again there's a tools function and we can register it in there so the service provider tools just register it inside your Rea here in our case it's called some tool I'm gonna import that okay and now in our admin and there it is right there so if we click on it this is the default that you get and again if you look in there it has its own set of files which you can do whatever you need to with so for example if we go into resources j/s components tool that view this is where this is defined so back to here some tool changed and we have two NPM to compile it so it's going to know the components some tool and then we can do NPM run watch okay so now that should have compiled and this should change here there you go so it has its own view components is using tailwind so you can do whatever you want here you can even communicate with the backend and it will also has its own set of routes which you can make use over so let's go ahead and make something very simple where we just grab some data from the back end using Axios so right here says we're in the black hole that just put any variable in here let's just call it from server and it's make a data property here and it's returned from server is hello from server obviously that's not from the server but we'll taste that with an actually let's call any second okay so let's make this empty and that's changes to a created hook and let's call Axios from within here so Axios was already available to us actually let me just stop this out for a sec and if you look in here there are routes and here is one stubbed out and it's just a slash endpoint and you can do whatever you want in here so I'm just gonna return [Music] hello from server and let's try to get this data in from our front-end tool here so what is the end point so if you go into here and if you do PHP or this in route list and if we grep some tool or just tool you'll see the route here so the end point is Nova vendor the name of your tool and the name of your route squared and grab that so that is the end point and then over here we can just assign our variable - response dot data and now if we did that correctly they should grab the data from the back end and show it in here so we're in a black hole hello from server with exclamation points so let's see if that works there we go just grabbing this information from our back-end endpoint so I hope that demonstrates that you can do whatever you want in this tool so you're not limited to the sidebar some tools make sense if they are in their resource so let's go ahead and take a look at how we can do that so a resource tools is what that's called and we're gonna use the example here because actually makes sense for application so here's what we're trying a bit to build for this tool so we have orders and our orders communicate with stripe so in here it'd be nice to see the stripe details so right now these details are just whatever is in our database which should should be in sync with stripe but be nice to the show the actual stripe data from the stripe back-end so that's where a tool would come in handy so let's go ahead and stop this okay I am going to it should be my name space stripe inspector okay and again just say yes to these questions okay that's done let's take a look at the docs here so to register it go into the resource you want it registered with in our case orders and just do this and so let's go into orders so ANOVA order and then we want it right after this it's a stripe inspector make let's import that okay let's take a look at it first so right here it's the same structure as the other tool so resources Jas components tool and yeah we can just do this stripe inspector with stripe whatever and yeah you can do the same thing here you can call the stripe API and let's see if that shows up in our orders resource so let me just go back here she let me refresh okay and if we go into one and there it is right there so again just do you want in here how come it's not oh I didn't NPM have to compile those assets so stripe inspector and NPM run watch okay so if i refresh this it should have that new text that I put in there cool so your tools are very powerful and very extensible and there are already some tools out there that the community has built so there you have it guys we've taken a look at some of the main features of laravel Nova and implemented them into our e-commerce application I'm really enjoying the experience and the ease of use of everything and I can really appreciate how well thought out all the details are it's also very easily extendable and I can see a lot of quality packages being released by the community in the future please like comment and subscribe if you haven't already done so thanks for watching guys see you in the next one okay thanks bye [Music]

Channel: Andre Madarang

Views: 69,457

Keywords: laravel nova, nova laravel, laravel nova vs voyager, laravel voyager, laravel, laravel admin, admin laravel, nova vs voyager, laravel nova overview, laravel nova demo, laravel nova tutorial, andre madarang, drehimself, laravel nova vue, vue laravel nova, laravel backpack, laravel nova tailwind, laravel admin panel

Id: aOAN41eAbLs

Length: 59min 27sec (3567 seconds)

Published: Wed Aug 29 2018