Introduction & Setup of FilamentPHP v3 - FilamentPHP for Beginners - Complete FilamentPHP Tutorial

what's up developer says Dory here and welcome back to a new video where we're going to start a mini series about filament PHP which is a larval package that allows you to quickly and easily build admin panels where you can then manage data and resources now one of the reasons that filament PHP got so popular is because of the stack it uses filament PHP has been completely built with a tall stack which stands for Tailwind CSS a utility for a CSS framework for quickly citing web apps alphine.js which is a lightweight JavaScript framework obviously it uses laravel which is a PHP web framework and finally it uses Livewire which is also a larval package which is useful when you want to build Dynamic web interfaces using server size rendering all these packages and Frameworks creates the tall stack and the tall stack is popular because it allows developers to quickly create modern dynamic web applications using familiar Technologies a while ago I created a larval Nova series which pretty much does the same as filament PHP unlike larval Nova which is a paid product filament PHP provides a similar solution at no cost the biggest difference between those stack wise well larva Nova uses larval qgis and in Eritrea for front ends other than that they both use Tailwind CSS and laravel now honestly I don't want to start a comparison between two admin panels both are amazing and deserve a complete course without mentioning their differences so this will basically be the last time larva novas mentioned one thing that I like about filament PHP is the fact that they have a free demo available if I navigate to the browser you will see that I have opensdamo.filamentphp.com right here you will see an awesome demo of a development PHP allows you to build so you might wonder what will we be doing well we're going to build pretty much the same admin panel with the same examples now quick note next to the demo they offer incredible documentation which you can find through the home page right here you can click on documentation in the navr get started and you can look up anything that you need take your time and pause the video for a moment go over the functionalities and features see how the documentation works if you want to and start a video when you're ready to start the installation process before you start with this tutorial I pretty much assume that you have created some kind of application before in larville so we're not going to spend too much time setting up a larval project setting up a database connection and so on since I store my demo projects in a workspace directory that I have stored on my desktop I simply need to install a larva project through composer or the larval installer tool so let's get started let's say composer create Dash project we're going to add the dash dash prefer Dash this option we're going to install laravel forward slash laravel and since this video is sponsored by hostinger I'm going to name my project hostinger Dash filament alright let's hit enter and let's create our Largo project the installation process has been done successfully we do need to change directories into our newly created project since filament PHP needs to be installed right inside of it so let's change directories through the CD command where we need to change directories into our hostinger Dash filament projects so let me write down clear all right at the moment of recording filament PHP just released the beta version of their version 3. a beta version is a pre-release version of software that is made available to users for testing purposes the reason why it's still in beta is because live fire version reads beta version got released and filament PHP depends on Livewire honestly I've tested it before and it seems as stable as it could be which is also one of the reasons why I just wanted to start this video series so the first thing that we need to do is updating our Livewire version to version 3 which we can do by saying composer require Live Wire forward slash Livewire where we then need to define the version so let's say double quotes carrot 3.0 at beta double quotes once we hit enter you'll see that it's installing version 3 all right now filament PHP needs to be installed through composer so let's perform the composer require command the package has been created by filament forward slash filament we're not done yet because we do need to add a column right here double quotes well a set of double quotes and inside of it we need to specify to composer which version we want to use and the version is once again carrot 3.0 which basically means that any version of filament PHP equal or greater than 3.0 Dash stable needs to be installed one more thing outside of our double quotes we're going to add the dash capital W flag which is used to thread warnings as errors which can help prevent potential issues during installation alright let's hit enter and this should install filament PHP for us now one way of checking whether this has worked correctly or not is performing the PHP Artisan commands and let me zoom out a little bit all right now filament PHP will create a couple Artisan commands for you and if we scroll up a little bit to the F section how rare is it right here you will see that filament PHP has added four new artists and commands that we could perform the first command is useful when you want to set up your assets the second command is for translations the search command is to install filament quick notes we have only added filament PHP as a composer package so far we have not installed anything yet and finally it has a command to upgrade your filament PHP version to the latest one now the most obvious in our case is basically to perform the install command so let's give it a try let's say PHP Artisan filament colon install and we're going to add a dash dash panels option to it now let's hit enter all right this has done a couple things for us as it has mentioned right here it has published the assets which are obviously needed to show the admin panel it has cleared the configuration cache the route cache it has compiled the views and it was upgraded in case it was needed now right now it's prompting us asking if we want to start the repo I'm currently not going to do that but pause the video and show some love to filament PHP for now I'm going to say no I want to see whether filament PHP has added new routes that we could access since we have successfully installed it right now so let's say PHP Artisan route column list all right you will notice that it has added three new routes for us well a couple more by three important routes we have the admin route right here which is a get request which should give you access to the dashboard it has an admin forward slash login route which is also a get request which will obviously show a login screen then we have the admin forward slash logout routes which is a post request to log out a user now there are multiple ways on how you could open your projects in the browser I'm simply going to use my preferred method which is through Largo valet so I need to say valet link add my password right here all right it has created a symbolic link so I can navigate to the browser and open a new tab and open the hostinger dash filaments.test route that I have created once we hit enter you will see that it gives you access to the default larva welcome screen now if we change our endpoints to one of the routes that filament PHP has generated for us let's say forward slash admin you will see that we have been redirected to the forward slash admin forward slash login endpoint and this is happening because we haven't logged in yet now we obviously don't have an account well we don't even have a database connection to store users so let's set up our database connection before I show you how we could create a user to access the dashboard because it does not support anything to register a user all right in phpstorm I'm going to open the dot EMV file in the root of our directory right here we need to change three environment variables the first environment variable is the DB underscore database which has been set equal to laravel or we should set it equal to a database name that we want to use so in our case let's say hostinger underscore filament then we need to change the DB underscore username my username is root so I don't need to change it and finally we need to change the DB underscore password which should be the password of the user roots and in my case this is dari1234 now Largo has added a pretty cool feature recently so let's navigate back to iterm and let's perform the PHP Artisan migrates commands even though we have not created our database yet once we hit enter you will see that Artisan prompted us with a message saying that the database hosting an underscore filament PHP does not exist on the MySQL connection would you like to create it let's say yes and as you can see it has created our database and it has a run our migrations now let's quickly perform the PHP Artisan command for a moment and let's scroll up to the filament section again right here you will see that it does not offer a command to create a user well it actually does but we're looking at the wrong commands I kind of lie to you since next to the filament calling commands it has created a set of commands under the make section right here I'm not going to cover these right now but we're going to use the make colon filament user Command right here so let's say PHP artisan make colon filament Dash user alright it has prompted us with a box asking us for a username so let's say code with Dory I need to add my email which is info codewordari.com and then my secret password which I won't share with you all right Artisan prompted us with a success message now with a user that we just created we should be able to log in on the login screen right here and honestly one thing I like about filament PHP is their incredible design so let's add our email so info at codeword.com and my password and I'm gonna take the remember me check box and I'm gonna sign in as you can see we're logged in into our admin panel which out of the box comes with a dashboard page with two simple widgets right here next to the dashboard page it offers a drop down in the top right corner and if we click on it you can see that we can switch between light mode and dark mode or basically the system team the less toggle light modes for a moment and my eyes started to hurt but it does look kind of nice now the endpoint at filament PHP uses by default is the forward slash admin endpoint as you can see right here which is completely fine by me but keep in mind that it is super easy to customize this filament PHP comes with its own service provider where you can adjust the endpoint let's navigate back to phpstorm let's open the app directory the providers directory where you can see that filament PHP has created a filament subdirectory and in here you will find an admin panel provider once we open it you'll find one pretty important function which is the panel function right here it does a lot and we will cover a lot of the things along the way you will see that both in the ID and path methods that are changed right here on the panel object a string of admin have been configured and if we change this to let's say dashboards and let's change it for the path as well navigate to the browser and refresh our forward slash admin endpoint you will see that we have been prompted with a 404 because the route does not exist anymore and if we replace admin with let's say dashboard you will see that we have been redirected to our admin panel again and honestly I find dashboard more suiting so I'll stick to a dashboard for now now before we wrap up the video I want to quickly show you one more thing we most likely won't be using it but it is important to be aware of filament PHP while larva in general allows you to publish configurations which basically means that you can copy configuration files from a package or the framework itself into your own applications config directory this allows you to customize the default behavior of the package or framework to better suit your specific needs now to publish a configuration we need to navigate to the CLI because Artisan needs to help us and let me perform a clear right here now to publish a configuration you would use the PHP Artisan vendor column publish command since there are so many configurations you can publish a Largo prompt you with a message where you can choose your configuration file if we scroll down a little bit with our error up and down you will see a complete list of configurations you can publish with filament right here now you could either click on a configuration right here and publish it or you can copy the name so let's say that we want to publish a tag with the name of filament convict so let me quit the terminal for a moment and right here we can use the PHP Artisan vendor column publish we're going to add an option of a Double Dash tag which basically represents the tag that you see right here so if you want to publish a provider you need to use the provider option which we will set equal to filament Dash convict now once we hit enter you will see that it prompted us with a message saying that it has copied the configuration file into config forward slash filament.php which is completely fine for now I want to wrap up this video where we talked about filament PHP we have installed it in a new larval project we have created a new user through your CLI and we have covered publishing configuration files now this was it for today's video if you enjoy the content and you want to see more please give this video a thumbs up and if you're new to this channel don't forget to hit that subscribe button

Channel: Code With Dary

Views: 15,083

Keywords: how to add admin panel in laravel, 10 create custom widgets - laravel filament tutorial, a winning combination for dynamic web apps in laravel filament, laravel filament packages dashboard, filament admin panel, introduction to laravel filament, how to setup filament laravel, how to build admin panels in laravel, filament for beginners, learn filament step by step, laravel filament admin panel, how to build admin panel in laravel, laravel for beginners step by step

Id: fOEpPhztORo

Length: 15min 9sec (909 seconds)

Published: Mon Aug 14 2023