Build an admin panel in Laravel with Filament with Dan Harrin

hey there everyone my name is Calvin and I'm JavaScript engineer and devil at trouble today I'm going to be having a guest teach us how to build an admin panel in Louisville with filament so let's meet our guests his name is Dan how you doing Dan I'm doing great how are you I'm awesome first of all thank you for your time to come teach me I have to build an admin panel in lava with filament and of course our brother our audience so before we get started let's meet who Dan Haren is so who you are what you've been doing what you currently do and why you're teaching us building an admin panel will have a filament so I work as a software engineer for a company called stagent and we build booking software for artists and booking agencies in the music music industry and primarily we work with the tool stack and that is uh the tech that filament has built on and I'm in the core maintainer team of filament and um yeah it's it's built on the tool stack it's an admin panel um that's built of several different components so it's like a form Builder and a table Builder and a notifications package and they combine together to build admin panels um and today we'll be building an admin panel um using filament and this is a good guide for anyone who hasn't used film before I'm going to be running through the key concepts of filament um and how it interacts with your laravel models and migrations nice so you measures the tall stack can you just go into it a little bit like what is the tall stack and why did you build filament for the 12 stack so the tool stack is an acronym so it stands for a Tailwind Alpine laravel and live wire uh laravel also is obviously our PHP framework Livewire is a layer on top of laravel and that allows us to build Dynamic interfaces with laravel and blade okay um alpine.js is a small JavaScript library that we use to power drop downs and form components and stuff and Tailwind is a CSS framework that we use to style everything in our app in panel and all of the separate packages as well and I really enjoy the tool stack because I feel like I'm the most productive as a laravel developer when I'm working in in tool but um that is exactly why uh filament exists because a lot of people who enjoy the tool stack are looking for uh products that use the tool stack one that we can be familiar with when we work with that stack and yeah essentially allows us to be very productive so that's why filament exists and that's why it's on the tool stack nice so essentially filament is sort of like a should I say for the lack of a better term a metal framework for the tour stack well okay yeah exactly yeah it's a meta framework I'd I'd say it's a meta framework built on the tool stack and it's a framework for building apps in LA in laravel it doesn't just need to be admin panels it can be um any app okay well primarily crud based um but obviously you can put any custom content within your filament app as well um and in version three which is coming up in a few months um you'll be able to actually install multiple apps within laravel so you might have an admin panel that's then completely separate from your user facing app and you can basically run an entire SAS just based on filament with two separate areas um and no uh basically complete separation of all of your code between those two areas yeah that's that's very interesting because I feel it's going to make you move faster since you already have all the components to build these sort of applications so it's cool I think as we get going you'll see how fast it is to build an interface that might have taken you uh a few hours at least to be able to set up all of the build process and the form components and style them and make them all work together so yeah it really is a Time Saver of course yeah I think so should we dive right into it so photo so we are building an admin panel right so what is the admin panel for so like do you have a project we're building yeah so um I was thinking about projects and I thought of one that I haven't seen done before in tutorials which is a um and having panel that could be used uh to run like a vet practice so animals come in uh you can record patients and their owners and then you can record What treatments and animals had at the practice so that's kind of three layers of relationships and it'll be interesting to see how we deal with each of those layers um to basically create the best ux possible for the person using the system no it sounds like fun I'm definitely going to enjoy this workflow so yeah should I share your screen now let's get right into it oh let's do it yeah that's your screen here we are so we're gonna start with um three models of migration so we need an owner we need a patient and we need a treatment and an owner can have many patients because it can have many pets um and a pet can have many treatments so let's make three models and three migrations so PHP arts and make model owner okay and make a migration yeah so I guess you have the project set up originally so I think it's just a normal driving position okay I just installed laravel so you have to watch me do that um I haven't installed filament yet so you'll see the filament perfect installation process um owner and we need patient patients and we need a treatment okay that's us first Define these migrations so that we know exactly how the database is going to look for this um I always think there's a very nice place to start um owners I think just basic contact information is probably useful so email name phone number uh name uh we can say the email and the oh Pilot's gonna predict what I'm gonna do what I'm doing here and then the patience so we need probably a date of birth for the patients and we need the patient's name um we need to record what type of animal they are so potentially like a cat and a dog or a rabbit or whatever so a type just use it as a string for now um and we need to connect them to an owner so let's use a foreign ID you know owners and let's delete patients when their owner is deleted no okay cool and now treatments treatments probably just need a description which is like gonna be short text yeah foreign notes about the treatment maybe what went on during the treatment and this can be optional and we can store patient and we probably need like a price so we can store money in our database as well and handle that in the open Panel so I usually use an unsigned integer for costs and currency and then I use a cast on the model to be able to then uh transform a small value into an integer and back just because it makes um using an integer as regarded as better practice than in the development Community yeah that's our setup are models so I think first thing we should do is unguard them all um filament has its own protections with regards to um fillable guarded Mass assignment um errors and essentially we don't need them to be guarded when we're just using filament so let's just unguard them okay and let's just quick this up the relationships as well so the owner this is gonna have many patients [Music] okay patient is going to have one owner [Music] and it's also going to have any treatments okay treatment just has one patient foreign let's just get autocomplete now let's create a resource for our patients so a resource is essentially a collection of pages that we'll use to manage a model so a resource is made up usually of a list page a create page and an edit page yeah so in this case it'll be a patient resource we're going to have a page to list all the patients we're gonna have a page to create a patient I'm going to have a page to edit a patient and everything in our admin panel today will be done on those three pages so you'll be able to manage the treatments and the owners from those three pages obviously you could then go on and add a treatment resource or an owner resource and manage that but I don't think that's necessary today um for demonstration purposes yeah let's make a resource for patients so PHP artisan make filament resource station I didn't install filament yeah yes you did not this is fulfillment yeah let's do that composer require filament filament okay and that installs everything um we're going to want to migrate a database so that we can add a user and let's make a user for our database so PHP arson make filament user is all this is doing is it's just replacing what you would normally do in Breeze I mean you could do it in Breeze but we don't need Breeze or jet stream here so I'm just going to make one through the command line okay foreign model and we can log into our event panel you can access filament using the slash admin root filament login and here's filament uh this is a dashboard that you see you can remove these widgets and add your own charts and stats about the app in panel um and our patients table is here it doesn't have any content in it at the moment we don't have any columns to find or anything like that so let's start by creating the new patient page because to be able to see patients in this list we need a patient anyway so it seems sensible place to start this is the page pages are heading and some buttons and inside here we're going to add a form and to do that you just add a form to your resource because the form is then shared between the edit and the create sections okay so our patient resource see our form here forms are made up of form components and form components can be nested within each other so you can have like a text input and a select and then maybe you might have a a card and it groups all filled into that card and then you have a few other fields within that card and this can basically be a deeply nested structure of form components that are then rendered on the front end I'll show you what I mean by first adding a text input for the name of the patient okay let's check it out we are patient's name we can put it in there and submit it cool let's continue we can add validation rules so in in laravel normally you'd want to um do this within a controller but all we need to do is just use a water copilot is going to be turned off it is not been very helpful max length of 255 and this is our validation and if we filed this Foundation it'll tell us I'll fill our name or if we fill it more than 255 characters we can add a second field so ILS can be different types so this is a text input but we could have then a select to then select the type of the patient and the select has options just like an HTML and it's an array key value array the keys are what gets stored in the database and the values are the labels that get output on the content yeah so that's a cat dog rabbit do you have any others all right um doc fish you know fish yeah that's other side of fish yeah I mean I don't know what they're gonna do for a fishing effect let's see maybe the fish is gonna have some very fiddly surgery yeah uh all right let's see what this select looks like then so we've got our cat dog rabbit fish we can select one we could add the name of the patient yeah I think we probably want to replace the fish with the hamster or something all right yeah that's still family surgery but uh yeah at least it's not it's not in water yeah yeah okay um that's gone to uh the next one so uh we need a date of birth pickup okay so let's use a date picker oh another component date of birth is also required and it can't be um later than today because pets cop people in the future so max date now um yeah okay that makes sense wow and now we can select a type um I like this actual code uh the last I think maybe it's one of the last things we need to basically select to select the owner so we don't have any owners now but I'll tell you what exactly we're going to do with that in a minute okay so the owner ID is our column on the database and we're going to link this to a relationship and filament is able to detect the type of the relationship and then fetch all of the owners from the relationship without us having to tell her tell it manually what the options are wow um owner name so the owner is the name of the relationship and the name is the column on the related table that we want to display within the select so in this case it's the owner's name and this is also required yeah show you what this looks like basically it's a select with no options because there's no owners yet you can make this search so this means that for long data sets uh you're not loading all of them into the HTML at once you know the first 50 in or you can just load them in when you're typing um and we do that with searchable and then if we want to load in the first 50 then we just do preload and preload we'll plus 50 and populate them now this is where we're going to first meet our nested form components so I mentioned that you could Nest Funk remotes within like a card uh it's like a layout thing or maybe like a grid you can also Nest phone components within a select and those form components can be used to create new options for that select so we can essentially create owners by clicking a button on the select and then creating an owner from there and because we have access to the relationship defined we know exactly where to save the owner where to attach it to so let's add a form within the select and that's using the create option form this is just another array with form components we can copy the name copy the email let's override the label for this because I want it to be called email address yeah make it required and max length 255 and it needs to be an email address this changes the input type on a mobile keyboard as well as ads backend validation and front-end validation let's also add a phone number field again it's a text input we want this to be phone number don't read the max length because we have a special validation rule for telephone numbers right ensures they aren't over 16 or so characters anyway and that's the tell and this will also change the format of the keyboard on mobile as well wow handy now you see we have this form within our select and I'll show you what this looks like um we have now A Plus button next to our select we click on it and we can create a new owner from here so I'm going to be an owner wow that's really handy and then we create the owner and it's automatically selected within our select template we can then create another owner Maybe Taylor owns a pet no okay he has a dog [Music] I'll trailer select is the owner and we can select between Gan and Taylor as our owner obviously then you could go on and make an owner resource if you wanted to to then manage all the owners and delete the owners and manage the patients for the owners and everything but let's leave it like this for now that is it for this form that's pretty simple let's create a patient um have a dog at home called Bella and she was I we don't actually know when she was born but she was probably born around uh 2010. wow um so let's create one so that's successfully created um and we now have a patient in our database and we've been taken all the way to the edit page this is where you'll then be able to manage the treatments for the patient but before we go into that we're going to set up the table for patients okay we want four text columns in our table columns this are quite similar to form components so you have an object for each column and they get added to this columns array let's add four tag S one for the name type the date of birth not for one for the owner's name and to do that we just need to use dot syntax I cannot spell owner okay oh nice see it's just a bit will automatically eager load the owners into our table so that we don't use um n plus one uh queries or anything and let's see what this looks like we can see the name the type debt birth and the owner name [Music] we can also make these columns searchable and all you do for that is you just add searchable to the columns as a method like you don't want a form component or to make the let's see what the search will look like first here so you can search Bella or not and Dan also works Alex also sort by the date of birth because you want to find the oldest patients in the system or the youngest patients so let's sort here so just make it sortable what this does is it adds super functionality so if we have more than one patient then we'd be able to see them move in the list by clicking this column we can also add a filter to filter the different types of patients within our table so let's add a another patient so Barney this is my old cat he was born 1997 or something um and I also own that we now see on our table we've got two um and let's add a filter so that we can filter only dogs or only cats or only fish what was it hamsters that was a rabbits and hamsters so to add a filter to our table we add it to the filters array and this is just gonna be a filter object make it and we're going to put the name of the column within our that's what we're going to call it show you what a filter looks like by default in filament it's a it's a checkbox we can replace this by providing our own form to this filter and we can render whatever form component we want within this filter and then do as we wish with that data that we get from the form however filament does have a select filter and this is just a shortcut for gluing exactly that so we can just pass options like we did to select and just copy them and this will allow us to filter through the types and it should reflect on our data without us having to do anything to the eloquent query oh nice wow so let's just get dogs just get cats we can even remove the filter by clicking this little cross button that's that so we now have our table pretty much set up we could go into more depth filtering by owner filtering by date of birth with a date range maybe we'll do that later but for now this is fine so we now have our table and our form and we now want to be able to manage treatments for this patient so I think the best interface for this would be adding a table below the patient form that then allows you to add edit delete treatments without leaving the page because I think that would be the most efficient forever's using the system maybe they need to add multiple treatments and don't have to keep on going back and forth between different pages maybe they have the owner on the phone and they want to quickly look up What treatments their pet has had so yeah let's add a table below here and to do that in filament we have to create what's called a relation manager a relation manager is a component that is um essentially a table that you would then attach to a resource and the relation manager is like a little sub resource within this resource okay so let's um go back and we're going to use the filament make relation manager hunt I'll show you exactly what this does so first it asks you for the resource so in this case it's going to be the owner resource no not the only the patient resource distribution resource and this is where the relation manager is going to be put we want to find a relationship so in this case it's going to be treatments and finally we want the title attribute which is going to be the name of the column that we use to identify treatments from one another so in this case it's going to be our treatment description okay it now says make sure to register the relation in patient resource get relations so if we look in our app filament directory resources we see our patient resource let's open that we also see our patient resource directory and this contains our page our pages and also our new relation manager let's register the relation manager for this patient by adding it in to this get relations all right a resource this is not being registered and if we go back to the browser we can see that our treatments are below the patients patient uh form we can now make a new treatment when there are treatments we can then edit add delete bulk delete them attach them to different patients uh and everything so let's go back to our code full screen this hey firstly um let's look at what we have because we already have a text input that filaments added for us um this opens in a modal I think this needs to be full width so let's change the width of this by adding a column span and passing in full and essentially all of our form commits by default we're in a are in a two column grid so all this is doing is it's telling us that this needs to span the full width of the grid we could also do two but I think full is more descriptive of what it does yeah let's now add a notes field so we're going to introduce a new form component which is the text area very similar to HTML and it's going to be on notes X length is going to be 655 35 which is the default MySQL text length and we're also going to make this span for finally let's add our price column so our price is going to be using a text input it can be numeric text input which changes the column allow on mobile and also validates and we want the max value of this to be um 4 2 9 4 9 6 7 2 .95 this is the maximum unsigned integer value that you can store in a migration let's have a look at what the price field looks like because I think we need to then add the prefix for the currency symbol uh yeah so that's what the price input looks like let's add a dollar sign before the price um three things and now let's create a new cast for this because obviously this is going to be stored in a decimal but we want on the model for it to be stored um and an integer so an eloquent cost can be made with PHP art lesson make cost and we're going to call it the Money cast because we can then reuse it any cost we're going to transform the integer stored in the database into a float inside this method so we're going to return a value divided by a hundred um we probably also want to cast this to a float so use float valve for that um we also want to round this so that it's stored in two decimal places so around and let's add a Precision of two this is going to return a float I would do the same but the inverse we want to make the value Times by a hundred but we also want to cast this to a float as well and round it and of course this is the cast that's now going to do those calculations for us we don't have to worry about it at all so let's add this cast to the treatment model our class array price column and money cost okay now we need to add the table to list treatments in because obviously we have I only have a description here but we can also add the price so table column text column again price it should be sortable and also we have a method to format prices by it with like a dollar sign and the correct routing and everything and that's money and we pass in the name of the currency which is USD in this case and we also because we're storing it in the database um we want to convert it as well this just tells filament that we've already done the casting ourselves filament doesn't need to intervene with that so pass that in nice now we can add new treatment 500. that's on our table we go back we can then edit the treatment update the price for example that's back add notes wow save it gun delete maybe add uh description we can even bulk delete all of these treatments at once we'll just delete select it and yeah you can then manage treatments without leaving the page um the last thing we might want to do is add the date of when the treatment happened to this table that might be useful so let's add another text column print it out and we have a special date time method to format this oh so yeah that's now formatted that's probably the same with the patient birthday as well [Music] patient resource their birth should be nice first thing I want to go through which is kind of the last pillar of filament development is widgets widgets are um components that you can add to your dashboard they can display stats charts whatever you can also add them to other Pages they don't have to be on the dashboard but most people would add them to a dashboard and it's like a good overview of what the records in your system do yeah so let's add some stats about our patients so maybe count the number of the different patients PHP arts and make filament widget we're gonna put the name of this as the patient type overview um we go on a resource because it's just gonna be displayed on the dashboard instead not on a specific resource um let's come in and we see that a new widget class has been created here um this is essentially free reign uh you could go into this view so it's the patient type overview and just add any content you want here and it'll be displayed in your dashboard this is a live work component um so you could add interactive stats here if you wanted but what we want to do is we want to use one of our pre-built widgets you don't have to build a chart or status cards yourself we include that for you so let's use that instead of a custom widget so instead of make filament widget we also use the stats overview back it's our patient type overview again and you'll see here A View wasn't created because filament handles the view for you and this time instead of A View Property we have this get cards method and instead of extending our blank widget we extend the stats overview widget right class let's know our cards so we can have a card for each patient type so a card your cats first and we're gonna count the number of cats so patient query rather type is a cat and we're going to count the number of counts see what that looks like now so that we've got a number of cuts wow that's our dogs and rabbits foreign count you can add little mini charts to these widgets so on our filament demo we do have um charts Within These and you can add little subtext and headings and stuff but in this demo we don't need that we will create a new chart though below this and we're going to have like treatments over time for example yeah let's add a new widget this time it's not gonna be a stats overview it's going to be a chart widget and it's going to be called uh treatments chart and I think this should be a line chart yeah sorry I'll show you what this creates is this a new type of widget there's no cards in this widget we just have this data and the heading for the chart so we're going to call this chart um treatments and to calculate the data we're going to use a package external package from flow frame called laravel Trend but you could do these calculations yourself if you want this is just an easy way to do it so composer require flow frame no let's say parallel trend this is what we recommend within the filament docs as well so you can refer back to that to create new trend with this package you first your trend plus and you pass in your model plus does all the calculations for you we're going to get the number of treatments between start with now a year ago today I'm going to end with today [Music] and then we're going to do per month so we're going to group opportunities per month and then we're going to count the number of treatments this is going to be stored in the data and I'll show you what this does this will give us an array of these Trend values and it basically tell us each month so 11 November 2021 there were no treatments if we look here we have got a treatment in our database for November 2022. let's transform this into our chart data we use chart JS for rendering charts so this chart data is in exactly the same format as chart.js with that you need data sets this is basically our different lines on our line graph each data set is one line for our first data set we're just going to pass in the name of the data set which is going to be treatments maybe you want to track treatments over time patients over time they would be different data sets our data for these treatments are data and we need to map for these Trend values as you saw that these are Trend value objects not integers Trend value I'm going to map these to their aggregates aggregate property finally we want to label the x-axis so we're going to pass in the labels here at them this is the date from here so I'm just going to display that on the x-axis yeah as you can see we've now got a chart each month and how many treatments we got in that month um if we added treatments before months that would just go on the chart and that is essentially um the little demo I'm going to give today yeah this is going to be converted into a blog post and it will be available in our documentation as one of the first things you see when you um first use filament and that will be released when we release filament version three uh in a few months nice like we just built a really robust admin panel in less than an hour that's Magic really yeah yeah it is a real Time Saver um all turned out and uh a lot of different features and how we've managed to use it off cover a lot of areas of our framework and under yeah yeah sure you you actually covered a bunch I love the forms handling it's brilliant that's that was amazing and um where you added like um for the owner the little plus button right there that could easily make it create a forms that was just like wow like I can't imagine having to build all this from scratch that's not an hour job plus like a month so more really like no like thinking about it like just handling the styling alone with the quotes of styling responsiveness I know the JavaScript the model that's a lot of work you're saving and that's exactly why filament exists and and why all of our team works so hard on this because we all have a vision that we shouldn't have to rebuild the same UI between projects every every project basically has forms every product has data tables every project has modals and notifications and having to build that several times potentially several times a year for different apps is a waste of time yes and it allows you to abstract that away and you can use these forms and the tables and everything in your own app you don't have to be constrained to the admin panel these were all built outside the album panel and the admin panel is just using them yeah we have detailed instructions on our website about how you can add forms to any Live Wire component that you have in your app you'd have to use your admin panel um this is just a way to group all of the products together and build apps very quickly without to worry about the layout or anything So yeah thank you so just one quick question at the bottom of my mind is yeah UI customizations for like the basic one how how do you like Sim this to like your brand for example sure so um we have I'll show you what we have available okay in our Docs um in the appearance section first thing is changing the brand logo so this is basically um overriding a larval view replacing it with your own logo and that will be displayed yeah um you can also enable dark mode um and you can make the sidebar collapsible and stuff with the gossiping to your brand we recommend that you use CSS classes so if you look if you look at the filament HTML you'll see that we have many filament classes so filament forms component container filament where's this one this one should be filament forms text input yeah I think should be um and essentially you can then Target all the text inputs within that with your own CSS and override any rounding or fonts or anything you can also build a theme so building a theme is allowing you to Define your in your own Tailwind configuration oh yeah to change the primary color for example to be blue instead of yellow if we change slightly tweak the colors of notifications and errors um you can add um basically anything to your theme and in version three this is going to be even easier you won't have to use the Tailwind configuration to to change the font you won't have to use a Tailwind configuration to change the primary color that will all be done from within PHP wow and that is one of our major things in V3 is the UI will be very customizable um without having to touch CSS yeah addition we are exploring the idea of um providing many different themes that then users can install into their apps so without having to build it themselves they could install a theme makes everything square or um a theme that follows Tailwind UI or other UI component packages and then they can use that and then to style it to their own needs without having to do CSS at all and that reiterates that you don't have to leave PHP to use filament um that would all be handled by us that is still in consideration within our team um it's going to be probably an official product um and maybe it'll be ready for when we start releasing V3 maybe it'll come a bit later but that's one of our main goals awesome that's that's amazing yeah so um so I believe there's no special thing that has to be done in order to deploy these projects you could just deploy like any other level projects right yeah it yep it's essentially just a larva project um yeah I mean it works out of the box on Forge uh Vapor um the common platforms um obviously I don't know what people's nginx configurations are like but if you follow the layer of our recommendations then it works with that it also works for things like um octane so you can you can use octane with this as well yeah awesome thank you so yeah I think we're good at time and you really covered everything um thank you so much Dan for your time like and yeah and you are great with the explanation of each code and what it does it was just perfect I believe anyone watching this because I myself I believe I understand everything based on your explanation and they were top-notch so yeah before you go do you have anything like to plug or to say you know for coming here you have the ability to plug anything at all for being our guest today teaching us well I'm not selling anything at the moment yeah yeah you can keep up to date with filament um on GitHub we have a Twitter account it's at filamentphp um I also do more personal news about filaments so maybe I'm working a new feature I'll share it on my Twitter which is at Dan J Herron um and yeah find us on Discord as well we have a very active community on Discord so if you have any questions uh the URL is filamentphp.com Discord and that will invite you to our Discord um Community we have uh two thousand or three thousand members there so someone will be able to help you if you do get stuck um and yeah no question is too silly yeah sure thing thank you sir definitely going to add all those in full in the description below in the video and yeah thank you so much for your time thank you thanks have me on

Channel: Treblle

Views: 15,675

Keywords: laravel, api, development, filamentphp, filament, laravel tutorial, getting started with filament, build an admin panel in laravel

Id: ni9LVSfkCd4

Length: 52min 11sec (3131 seconds)

Published: Wed Nov 30 2022