In the last video, we set up the model structure and database structure of our app. In this video, we're going to finish with a fully functioning app. Now, that might sound absolutely insane. How can we do that in just a few minutes? Well, I'm going to show you, and now we're going to get into Filament. So, that's what this course is about. It's about using Filament to build applications fast. If we go to the Filament website, we can see all the information about Filament. What it is, is it's actually a series of packages. It's forms, tables, notifications, and then actions, info lists, and widgets are new to Filament 3, which launched earlier this year, and it does have a panel builder. So, you might think of a panel builder as like an admin panel,

which launched earlier this year, and it does have a panel builder. So, you might think of a panel builder as like an admin panel, but Filament is much more than an admin panel for a couple of reasons. Number one, all of these packages are individual packages. If you have a Livewire app, or if you have any app, and you just want to add Livewire, because you may not know this, but you can sprinkle Livewire into any app that uses Vue or React or anything else. So, you can sprinkle Livewire, and you can sprinkle the Filament packages into your app as well. And so, each one of these is a standalone package that could be used in any app, or we do have the panel builder. Now, the panel builder is not an admin panel, because in many cases, the panel is actually the app itself,

or we do have the panel builder. Now, the panel builder is not an admin panel, because in many cases, the panel is actually the app itself, the app that you're going to be delivering to your customers or to your company. So, we're going to show you the panel builder here in just a few minutes. So, anyways, let's scroll up and take a look at their documentation, and let's get Filament installed into our app, and then let's play with it. So, when we go to get started, we've got installation here. We're on the panel builder, which is what we want. So, we're going to go ahead and composer require right here. So, that just installed all of the Filament packages.

So, we're going to go ahead and compose a require right here. So, that just installed all of the Filament packages. It also installed Livewire and configured it all for us. You don't have to go to Livewire and do any of those installation steps. All that's already taken care of with just installing Filament. We do want to run this command to install the panels as well. So, we'll do that. All right, it is installed. Would you like to star? I have already done it, but I hope you do as well. So, we come back to the docs. Let's take a look. This will create a new Laravel service provider called AdminPanelProvider.

So, we come back to the docs. Let's take a look. This will create a new Laravel service provider called AdminPanelProvider. Let's go into our IDE and take a look at that. So, here we are in app/Providers, and then here's the AdminPanelProvider. And like I said, this is not actually an admin panel. This is going to be our app. So, I'm going to actually use phpStorm to refactor and rename this. And I'm just going to call it AppPanelProvider. And it's going to go find all the usages and replace those. If you're not using phpStorm, make sure you go do that.

And it's going to go find all the usages and replace those. If you're not using phpStorm, make sure you go do that. And so, instead of the ID of admin, we're going to call this an app. And the path is not going to be at admin. It's going to be at the root. So, the one thing we need to do is go into web.php. Instead of showing a welcome view, we're going to get rid of all of this. In fact, we're going to have an empty routes view for now. So, if we go into our browser now, and I'm going to pull up laraconf.test. And you can see here now I have a sign in page for the app that we just built. So, I do need to generate a User that I can use to log in here.

And you can see here now I have a sign in page for the app that we just built. So, I do need to generate a User that I can use to log in here. So, if we go back to the docs, you can see the next thing is there's a command you can use to generate that user. So, if we run this in our terminal, my name is Kevin, my email, and I'll set myself a nice easy password. So, if we go back to our app, and I'll log in. And so now you can see I'm actually logged in, and I have a nice looking dashboard. I actually don't love the colors that it comes standard with. There's a few things I don't like. Number one, I don't really love yellow as my primary color. The other thing is this gray is a little bit of a brown gray, and I like more of a like bluish gray.

Number one, I don't really love yellow as my primary color. The other thing is this gray is a little bit of a brown gray, and I like more of a like bluish gray. So, let's go into our IDE, back to the app/Providers panel. And so the primary color, we can change this to something like violet. Let's go back to our browser. So, now we've got violet here. Let's do indigo, just like Tailwind UI. And then, of course, for gray, I can override the standard gray. Let's use color. I like this slate gray.

Let's use color. I like this slate gray. So, if I refresh, now you can see I've got a nice, it's that simple to change the look and feel of the FilamentPanelProvider. One other thing I want to show, which is kind of cool if you want to go really crazy with your UI, depends on, you know, who your client is. If you want to actually make the base of the app pretty colorful, you can change gray to a not gray color. There's nothing that says this string gray has to actually be a gray. So, let's say we did like pink, and let's go take a look at what we have here. That's pretty wild. So, I don't want to do this, but if you want to, go ahead and play with it. Let's bring that back to slate like it was.

So, I don't want to do this, but if you want to, go ahead and play with it. Let's bring that back to slate like it was. And if we take a look at the rest of this, there's a bunch of stuff that we're not going to get into right now, but you can see we're still getting a lot of the middleware that you get standard with Laravel. We have authentication. So, now what we want to do is actually build out some of the resources to interact with the models that we created. Let's go back to the filament docs, and this is important using other filament packages. We are, when you install filament with a panel builder, you get every package automatically included. There are no other installation steps. So, we are basically done. We're not worried about deploying to production right now.

So, we are basically done. We're not worried about deploying to production right now. We don't need to configure any translations. We're done. Filament is installed. Livewire is installed. Alpine is on the front end. So, if we use any Alpine JS, it's already there as well. So, now instead of getting started, what we're going to do is jump into the getting started docs here for the resources, and we can create a resource with this command. And what it will do is create the resource and some pages.

So, now instead of getting started, what we're going to do is jump into the getting started docs here for the resources, and we can create a resource with this command. And what it will do is create the resource and some pages. And what I want to do is scroll down a little bit further and look at this --generate flag. This is so amazing. So, let me show you what happens when I run this command with the --generate flag in my terminal. So, I'm going to php artisan make:filament-resource instead of customer, we're going to do conference, and I'm going to use that --generate flag. So, before I even go into phpStorm and take a look at what happened, let's go take a look at the browser. So, if I refresh my app here, I can now see I have a link on the sidebar that goes to conferences. And when I click here, okay, now I have a page that lists conferences.

So, if I refresh my app here, I can now see I have a link on the sidebar that goes to conferences. And when I click here, okay, now I have a page that lists conferences. I don't have any here, but there's a button for a new conference. Let's click here. And all of the fields that I have in my migration that I defined for my model, they're here as well. So, if we are creating Larikon US 2024, this is the best one yet. Let's say it starts. I have a date picker. This is a native browser date picker. And I can also just click in here and type.

This is a native browser date picker. And I can also just click in here and type. So, let's say it starts at 9 a.m., and let's go to June 7th, 2024, and this will end at, I don't know, 6 p.m. The status is a string. Let's just put draft in here. The region here is US. And for a venue, I don't have anything to select from here, but I can create it. And now that I've created it, let's go back to our conferences, and I have a table. I have a data table with all the information that we had here. I can click here to edit, and if I want to change this to USA and save the changes, I get a notification here that tells me it was saved.

I have a data table with all the information that we had here. I can click here to edit, and if I want to change this to USA and save the changes, I get a notification here that tells me it was saved. I can go back, and I can see the name change reflected here. And this is amazing. We just ran a command. We had a database schema, and we ran a command, and we have all this functionality. If you click here, we can actually add some columns that aren't showing right now, created_at and updated_at. They're here. You can see some of them are sortable. If we were to click here, we could sort.

You can see some of them are sortable. If we were to click here, we could sort. Obviously, we only have one record, so we can't do that yet. But this is amazing. We ran a command. We haven't even touched the code, and we have this working. So let's do the same thing for the other three resources we have. So let's go into our terminal again, and we'll do this for, what did we have? We had speaker. Let's do talk.

We had speaker. Let's do talk. And venue was the other one. So venue. Okay, so now we're back into our browser. And we've got speakers, talks, and venues here as well. And so this is another crazy thing. Let's go add a venue. So we'll go to a venue. Here we had, you know, great venue in St. Louis.

So we'll go to a venue. Here we had, you know, great venue in St. Louis. That's where I live. So let's say St. Louis, Missouri. It's in the USA. We'll create that one. Let's actually add one more venue, just for good measure. So we'll add another one. Okay, so now if we look back at our table, we have two venues here to choose from. Let's go to our conferences.

Okay, so now if we look back at our table, we have two venues here to choose from. Let's go to our conferences. Let's edit this one. Let's say we've done all our validation. We've decided we like St. Louis. That's where we want to do our next Laricon. And they're populating in here. So we're actually getting all of the options from the Venue model that populate into the select. And so I can click it and save it. And if we go into our database, and so now if we go into our Conference,

And so I can click it and save it. And if we go into our database, and so now if we go into our conference, we can see that we do have a venue here, and it's associated, the idea of that venue I created is associated here. So we've just run a few commands. This is not some low code or no code. This is Laravel. This is a standard Laravel app. Anything you want to do in Laravel, you can do inside of Filament. But we did it just running a few commands, and we have a functioning application.

Anything you want to do in Laravel, you can do inside of Filament. But we did it just running a few commands, and we have a functioning application. You know, this series is all about rapid application development, rapid Laravel. We've already built an app. We're a few minutes into video two, and the app is built. There's a lot we need to do to make it better, but this is just incredible. So let's actually open up phpStorm and take a look at what these resources look like. So let's go to our conference resource. And so you can see here, we define what the model is that we're looking at. We have a navigation icon.

And so you can see here, we define what the model is that we're looking at. We have a navigation icon. So we could change this to any heroicon we want. We'll do that later. You can see we've got a couple of methods here. So I'm going to minimize these and look at them one by one. So we're going to start at the bottom. This is, like I said, our routes, our web.php file is empty. We're actually defining routes within the context of these resources. When we go to our browser and we click on this link for conferences, this is the list.

We're actually defining routes within the context of these resources. When we go to our browser and we click on this link for conferences, this is the list. This is listing all our conferences. So you can see the index here is the list conferences page. And so we can go to this class, which is defined right here in our app/Filament/Resources. We've got the ConferenceResource with all of the pages. So we have the list conference here. We can add more here, but right now it's just good to understand that this is the page, the class that represents the page that we're on, and it inherits a lot of stuff from the parent. So you can see we don't define the table columns here in the list conferences class.

the class that represents the page that we're on, and it inherits a lot of stuff from the parent. So you can see we don't define the table columns here in the ListConferences class. We actually have those defined here. So let's look at the table now. The columns are defined here where we have the name, description, startDate, etc. So all of this was defined inside the parent level resource. And then the ListResources page just has a little bit more context. Now, same thing for create and edit. So we go into CreateConference. This is an even more simple class.

So we go into CreateConference. This is an even more simple class. The CreateConference obviously needs a form. And we define that back up here in the form method on the resource. So you can see we've got what types of inputs we have. We'll get into what all those inputs are later. And we can add and remove different form inputs and change the types. So this is where we would define all that. This also applies both to the edit and the create. So we're only defining the form once here at the resource level, and then it applies to edit and create.

This also applies both to the edit and the create. So we're only defining the form once here at the resource level, and then it applies to edit and create. Now, lastly, we've got this method for getRelations. And these are not the only four methods that we can do in a Filament resource. We'll get into more of those details later. But this is just your high-level overview. We're not using the relations right now. And then again, these are the three pages we have. So you can also see that we have the same things created for the Speaker resource, Talk, and Menu. We've already seen how this gives us a great starting point.

So you can also see that we have the same things created for the Speaker resource, Talk, and Menu. We've already seen how this gives us a great starting point. Now, if we go back to the browser and we look at some of these forms that we have. Now, these forms aren't pretty. They are functional. They're not that pretty. There may be some different things we want to do. Maybe this could be a select picker or a combo box. This should really be a drop-down. So there's a lot we need to do, but this is an amazing starting point.

This should really be a drop-down. So there's a lot we need to do, but this is an amazing starting point. So even though this is functional, there's no way I would give this to Taylor Outwell and say, hey, I built you an app. Here, it's ready for you. There's so much we need to do. So let's dig into that in the next videos, and let's make these forms a little bit better.