Laravel Filament Full Tutorial | Laravel Filament Tutorial

hello friends so i'm going to start a mini series i'm going to create a simple blog with laravel and filament php so if you go to the filament php documentation you go and read about that here i have a created this blog post only the back end not the front end so if i go in the admin area it is the dashboard and let's we have categories here we have posts and tags let's go in the categories here now i have all the categories i displayed in the table and we have only the id name and the slack here i have added the search we can search by name so let's search for vue.js oh sorry view js okay and we can go here and edit this uh category down there i have displayed all the posts this category has and we can edit this post on the fly we are in the admin categories you can see here edit but we can edit the post belongs to this category and also we can delete the pause here now let's leave it for now let's go in the pose and here also i have added some widgets for pause this is all the pause and we have only three posts now here is a hard coded data but you can add what you want here we have the pos table i displayed the id title slug is published and the thumbnail and for thumbnail i have for the images upload i have installed the plugins here in the filament you can see we have many plugins and i have installed this one the spotif media library by filament and now we can upload images for the post we can create we can edit and we can delete posts so let's click here here we can update the post we can change the image and also i have displayed all the tags belong to this post and we can edit the tag we can add more tags so let's say here and we can search our name here we have eloquent let's click attach okay and now we attach the post we have this information here we can detach but we cannot delete the tags because in the post tag pivot table i have not added the on cascade delete on the lead cascade okay we have also the global search and we can search for categories names post titles all or tags name so if i search for vue.js you can see we have vue.js inside the categories and also inside the post and if i click we go to the post view.js post and edit and also if we go in the pause here we have the same thing the table the search by name we can create a new tag we can edit a tag and here in the edit also i have displayed all the posts belongs to this tag and we can edit this post but we cannot delete the pause is going to be deleted only here and in the categories we can delete the post now in the post also i have added the filter so we can filter by published so here we displayed only the published posts or unpublished we displayed only the unpublished and also we can filter by category so let's say all the posts with laravel category and we have that one or view gs or the thailand css okay friends that's it what we are going to build with filament and laravel php hope you enjoy and see you in the next one if you like like the video and subscribe for my to my channel for more content like this thank you very much friends hello friends welcome i'm going to create a simple blog with laravel and filament.php first i'm going to setup the laravel project so in my terminal i'm going to say laravel new i'm going to name it blog okay next thing let's navigate in the element.php.com go to the documentation and we need to run the composer require filament filament to install the filament and also let's create the database so i'm going to say new here i'm going to name it blog because we created the blog project so city in the blog and by default laravel is going to give it a blog as a database name so let's open this one okay now i'm going to open this with a vs code okay and here in the dot env file in the database we can see the name is block okay now let's run the command here so copy and paste it filament next thing we need to run the php artisan migrate so artisan migrate okay let's clear this up and now let's create the filament user php artisan make filament dash user so copy that come here and paste that in sorry again hit enter give it the name i'm going to name it admin i'm going to give it the admin at admin.com email and password as password let's say no for now clear this up and now let's open this project in the blog dot test slash admin slash login okay give it the credentials admin at admin.com and the password and here we are in the admin area now what we need for the block i'm going to create as simple as it is so i'm going to add categories pause and tags so for that we need to create some models artisan make model first i'm going to say category give it dash m for migration the same thing for post and tag okay post and tag good now let's uh create also the pivot table for post and tags because it's going to have many-to-many relationship so artisan make migration and i'm going to say create post tag table okay now that's it about this video i'm going to create an in the next video i'm going to add the relationship between the models and also populate the posts okay so see you in the next video if you like a content like this please subscribe to my channel and like the video see you the next one friends all the best hello friends welcome in this video i'm going to populate the tables and also create a relationship methods so first let's go in the vs code and open the database migrations and here i'm going to open the categories and what we need for the category we need the name so and we can add also the description but i'm going to add only the name so other sign table string and add the name also i'm going to add the slug so do the same table string or slug and now the slug is going to be unique okay save this and open the posts now here we need to add the category id so let's add first the category id i'm going to say origin id category id add the constraint and on delete i'm going to say cascade okay after that let's add the table string for the title dollar sign table string for the slug and here also the slug is going to be unique what we need other we need the content so that assign table text for the content and i'm going to add also the boolean is published or not so let's say boolean is published and by default it's going to be polls so default polls save this and open next table which is tags for tags we need also the same we had for the category so we need to assign table string name and let's copy this duplicate change the name to be flag and also here the slug is going to be unique let's say this one close and let's open now the post tag pivot table and here i'm going to remove the table id and table timestamp i'm going to add only the origin id for post id is going to be constrained and let's copy duplicate and change the post id to be tag id okay save it close this one and let's open the terminal and run artisan migrate okay very good now let's open the controllers and make the relationship methods uh sorry not controllers but models open first the category model and here i'm going to say first i'm going to create the protected dollar sign billable and we need the name and slack for the category okay after let's create the public method for uh pose now the category is going to has many posts and let's return dollar sign with as many post class okay save this one and open the post model also here let's first create the protected dollar sign fillable which is going to be the category id the title the slug what we need we have also the content and the is published or not okay now let's create the method for category is going to be singular and we are going to return dollar sign of this now this post is going to belong to the category so belong to category class okay also we need to create the relationship method for tags so let's say public function tags and here we need the return dollar sign this belongs to many to many and add the tag class save this close and open now the tag model the same protected dollar sign fillable which is going to be an array with a name and slack now let's say public function posts and here we are going to return dollar sign list now this stack belong to many posts okay now we have the relationship if we go in the browser let's open the element.php and go the documentation in the resources i'm going to create a resource for the category post and tags so we need to run the php artisan make filament dash resource and give it the name so let's copy this go to the terminal and paste that in first let's create the category resource okay next let's create the post resource and also the tag resource okay now if i come here and refresh we can see we have categories posts and tags right now everything here we have no records records found because we don't have any tags but also we don't specify how what we can display here the same thing for posts and categories for that we are going to work in the next video so see you there hello friends welcome so here we are in the categories right now we don't have any records but also we don't have the table so we have only the imagination here we don't have a column for id or for the name and so on and of course if we go here in the new category here we have only the buttons for create or create and create another and cancel but we need form here to create a new category and for category we need the name and the slack so now let's work with a category here create a form and also create a table let's go in the filament php documentation and here for form builder okay and here we have text input getting started text input and we have text input make and here we have the name which is name so let's copy this one and go in the vs code inside the app filament category resource here we have a form schema and let's add that text input make name we need to import the input so import the class and with that if i save let's go in the browser and refresh so here in the new category we have the name let's make this to be required if i save and refresh now we can see we have this red asterisk which means we're going to be required and if i say create yeah okay next thing we need the slack and if i come here and i'm going to search for the slug so in the search i'm going to say plug and here we have an example for the slack text input make and we have this reactive and after start state updated we create a closure and set the slug to this sdr slack state so we set the slug here the this title so this is the state of this title and say str which is laravel and called the static slack method so let's copy this and i'm going to add in our text make name and add that one now we need to import the closure and also the str illuminate support str and i'm going to add also the slack so let's copy this text make name and after this required i'm going to add that one and i'm going to say also required and change the name to b block let's save it so here we added the text input make name and we call the reactive and outer state update set slug so i'm going to set this one to str slug the state which state is this one okay now if we go and refresh here we have a slug which is required and if i type here laravel we have laravel here if i type laravel filament you can see also the slug is laravel dash filament okay next thing i want to have a card here because i don't like that so if i come here and let's cut this one and say card filament form components card make and call here the schema and paste that in let's save it refresh and yeah now we have this nice card if i say now laravel and here we have laravel let's say create and we created that and we are now in the edit page you can see categories to edit if we navigate here we don't show the category because we don't have the table so let's go here again and let's go in the table builder and here we have columns so let's go in the text column because we are going to use text column for the name and for the clock so if this is very easy just say text column make and give it the name and also is we have this limit if we if the column is longer than 50 characters so let's copy this one and inside the table i'm going to add this one just change the description to be name or i'm going to first say id okay and this is not going to be limit but i'm going to add another one for the name and another one or the slack so let's say also the slog here and let's import the text column and if i save and let's go in the browser and refresh you can see now we have the id which is 2 name laravel and slack and if i click here we go to the edit page now we can make this sortable so if you go here so we can change the label and also make sortable just by adding this one so let's go in the name and i'm going to make sortable and also the id so let's save it come here refresh and now if i go and create a new category i'm going to say view js let's create and let's go back now we have laravel vue.js if i click here we have the third table okay now if you like this create and stay and go to the edit page okay if you don't like you can customize that customize that so if you go in the admin resources and creating records so here we can copy this customizing from form redirects and let's go in the category resource create category and paste that in let's save it now if you go and create a new category here so let's say kylowind css and i decreed that now we redirected to the admin categories so to the index page okay friends i hope you understand and hope you like the video if you like a content like this subscribe to my channel and like the video and see you in the next video in the next one we are going to work with the posts and tags and also when we go and edit here i'm going to display the post this category has down there okay so see you in the next video thank you very much hello friends welcome so in the previous video we worked with categories we can create and we display all the categories here also we can edit and let's delete here good now let's work with both for post we need the category id so we need to belong to relationship we need the title the of the content and is published and also i'm going to upload images for this purpose so to upload images i'm going to install the spotty media library and if you go to the filament logins here let's uh filter by name spotty and i'm going to use this spot image library by filament visit the site and let's install composer require go to the terminal paste that in hit enter next copy this one you need to publish the migration so copy this and paste that in and we need to run the php artisan migrate so artisan migrate okay now we have the media table in our database good now we need to prepare our model so if we click here and open the spotty documentation for laravel media library we need to add implements as media in the in our model and also use interacts with media so let's open the post model and let's do the same thing implements as media so implements as media and also interacts with media interacts with media okay let's save it close this one and that's it let's close also this page now let's go in the form components and the table columns so let's go first for form components and we need this spot the media library file upload or we can use also the collection if you have learned how we can use the spati media library i have a full tutorial in this channel so let's go in the filament post resource and here we need to create our form we need to add our fields so i'm going to open first category resource and i'm going to copy what we have in our form here so card make schema i'm going to copy also the card and paste it in the post resource we we need to import the card so filament forms components card also text input the sdr and also the closure if you don't have now here we have a text input make title and the slack is okay we need the if you call here the documentation and go to the form builder we we need a select for the relationship belongs to so here we have make status make author id but we need belong to select and let's use this one i'm going to copy this and i'm going to add in the first place this one import belong to select and we need not auto id but category id relation is category and yeah we need the name for the category next we need a content so i'm going to use rich text editor so let's go and see what we have in the field rich editor here let's copy this one and add it import rich editor and the last one i'm going to use we need to use a check box or toggle what you want so if you want toggle here is i'm going to use this one or use the check box now let's add that toggle here import and say not it is admin but is published save it now we need to add the product that costs so let's copy and open the post model and paste that in protected casts and not is admin but i'm going to say is published okay now if i come here and refresh let's go to the new post here is our form the category id title slack content and is published which is toggled let's create one post for the laravel and i'm going to say laravel post add something here say published and let's say create and the post created and we are in the edit now let's go and create one more i'm going to say italian css file in css post i'm going to say okay let's add something here published and let's say create now let's display the id and what we can display other so i want to display the id the title the slack maybe and is published or not so we need to go in the table builder columns first for text column i'm going to copy what we have in the category resource here let's copy this and paste it here down there in the columns let's display the id and make it sortable import the text column also the title uh this lock and i'm going to display also the is published to see if that is published or not so the display that is published i'm going to say boolean column here and let's copy that one and paste it here import the boolean column and not is featured but is published save it let's go and see now what we have in the post yeah here we have the id the title the slack and is published is uh green now if i click here and make this unpublished save go back we can see is red very good now if you want to display also the image let's go here to the spot image library and go to the table columns and here we can display that so copy and paste it here import the spotty media library make this not avatar but i'm going to say thumbnail save and now when we're creating i'm going to add with collection so let's copy and let's add before the reach editor paste that in import and say make not avatar but make thumbnail the collection is going to be posts save go the browser and if i refresh here we have thumbnail but we don't have for this shoe let's go and create new post and now we have this thumbnail here so let's select the viewjs i'm going to say vue.js post choose a file and i'm going to choose vue.js here let's add something let's make this published and create now if i go here and what we why we don't see that pause thumbnail thumbnail and we need the collection the b pose okay save it refresh and now we see the view js let's go and add also order a valentine css so here we have the browser add the level png open make publish and you see here okay the next one is for thailand css edit add file i have here styling css open uploading now save go back to the post and here it is have all the posts with images very good now let's work with tags because it's the same as the categories and let's go in the category let's copy it copy this go to the tag resource and paste it down there i think i don't have copy that so copy and paste it why again for last time copy and paste it here okay let's import we need id name and slack okay save it now let's copy also the card because the same is we need the name and the slack that go to the tag resource paste that in hit save we need to import the card okay we need to import the text input we need to import the closure and the sdr okay let's save it and let's see now go to the tags we don't have any tags let's create one uh laravel i'm going to say just a table let's say eloquent component now let's go to tags and we see why we see only one ah because we updated i forgot the same thing i'm going to go in the category resources and in the create let's copy this one because i forget we are in the edit mode go now to the tag resources and create tag paste that in so we are going to modify to return direct to the index page and go and create new tag so table create now we are back create new tag hello client and here we are okay friends so now we have the resources for tags posts and categories hope you understand and hope you like if you like like the video subscribe to my channel and see you in the next one all the best friends thank you very much hello friends welcome in the previous video we worked with the posts and tags and in the post also we added the images so we can upload thumbnails in this video i'm going to use to work with the relationship so here in the categories when we go to edit this one for example i want to display all the posts belong to this category and if you go in the pillarman php documentation in the outliner area go down to the resources here we have this relation managers and we can create a relation manager php artisan make filament and variation for example as many as many throw belong to many more many and more too many or more project for the category we need the same thing we have here php artisan make filament has many category resource because we are going to add this relationship in the category resource the relationship method is pause and i want to display the title so let's copy this one is exact the same for our project open the terminal and paste that in enter now successfully created the pos relation manager and make sure to register the variation in the category resource get relations so we need to register this one in the category resource get relations let's go there app element category here we have the get relation now let's add this post relation manager here so just say compose relation manager class and make sure you import this one so if i save come here and validation managers post relation manager okay now if i open this post relation manager so in the category resource here we have the relation manager here and let's open the pos relation manager here we have a form and a table so let's go in the category resource here and let's copy this for the title or let's copy all of them so copy better let's go here in the post and i'm going to copy all of them paste in the post relation table say we need to import now i'm going to import all okay and for the form let's go again in the post resource and do the same thing so i'm going to copy the card and paste it here save it we need to import the card or filament forms component that belong to text input closure str sorry this one spotty media library rich texts editor and the toggle very good now let's save it and let's see what we have so open the browser refresh this and now we can see we have the post the same thing table we have in here now if you want don't want for example to show the slug or the id or the thumbnail you can remove from this post relation manager so let's remove for example the thumbnail and the slug save it come here refresh now we have only the title and is published we have the ability to edit here in the model and create a new one also in the model so let's select laravel and second with a second laravel post add a thumbnail type something here make publish click create and this created and now we have this second laravel post immediately here also if we go in the pose we have that one right here okay now the same thing if you go to the view js we display all the ujs posts and in the tiling css we display them let's go to the post and here when we edit we have the category here i want to display all the tags belongs to this post so now posts and tags as the same belong to many relationship so let's copy this and open the terminal and paste that in now here we need to make some changes first i want to change the resource to be post resource i'm going to create that for post resource the relationship is tags and we need to display the name okay enter and because we are here let's create also the tag resource and the relationship is pause posts we need to display the title hit enter okay let's open the vs code close this one and let's go in the post resource here when we have this get relation let's register the tag so what was that post resource we have this relation manager tax relation so tax relation manager okay save this and now close this one open this tax relation manager and for tag in the schema we need the name and the so let's open here this one for week and add it in the tax relation manager paste that in the same thing for the form copy here what we have and paste it in the manager we don't need filters so i'm going to remove this so okay import now the card import the text input import the closure import the sdr and the text column okay if i save now and let's go in the browser refresh and we can see now we don't have any tags so this uh edit post let's see in the tags yeah we have tags let's go and i'm going to attach a tag here let's here attach tag and i'm going to say table here we have attach this one and we have displayed the id name and the slack let's add one more a component i'm going to say just for to have here very good now we can edit this in on the model so let's say table updated save we have table updated here if we go in the tags we have table updated okay now this is how we can attach we can detach the tag so let's touch this confirm okay now for delete we we don't have add the postdoc id on the foraging key so we can delete only if we go here to the tax good now let's we have for the post the same thing for categories let's do the same for the tags let's display here all the posts belong to this stock close this one close also this one and in the post resource we have in the tag resource we have this relation manager and pos relation in this one i'm going to copy what we have in the post resource so copy and add in both relation now here you can what you want i want you don't want i'm going to leave it as it is also for the form i'm going to copy what we have here sorry copy and paste it here we need to import our card we need to import the below dot text input closure str import the spotty media library file upload reach editor and the toggle they close this one and now we need to register this post relation in that alg resource get relations and register that one so pause relation manager class hit save close this one open and if i refresh for the eloquent we don't have if we click in the table in the component we have these posts here we can edit this post so let's say laravel post updated click update click save and we have post updated if you go we can see laravel posts updated very good let's go again and let's create one more so we can select a new post okay if i click delete confirm or we cannot delete that so we just can show and edit the posts the same thing both for tags but if we come here in the category and here if i click delete this one so second laravel post confirm we can delete that because in the posts so if i open the database migration and in the pos table here we have the version id category id constraint and undelete cascade so we can delete that one but for the post tag we don't add on delete cascade okay hope you understand friends and hope you like it that's it about this video how to add relation manager or post tags and categories like the video subscribe to my channel for more content like this and see you in the next one friends all the best hello friends welcome in this video i'm going to add filters to the table and also make here i'm going to make this title searchable in the tags i'm going to make the name searchable and also in the categories i'm going to make the name searchable so first let's go here the vs code filament and in the category resource when we have the name text column make name we add limit and sortable also we can say here make this searchable save it and if we navigate here and refresh we have the search and let's search for laravel we have only the laramie okay now let's go to the tags and do the same thing close this one open tags and here is that in searchable save it close come here and refresh and we have search let's search for only the component okay let's go to the post and here also i'm going to make the title so in the post resource table text called make title make also this one searchable save it come here and refresh and we have the search here so let's search for laravel as well here and we have only the laravel good now let's add filters here so if we go in the filament documentation go to the table builder and here we have filters getting started and here we have an example so filter make is featured and query query where is featured true so let's copy this one and paste in the table here we have filters an array let's register this one we need to import the filter so element tables filters and filter also the builder eloquent builder and we are okay now instead of is featured i'm going to say here published and query where is published true if i save and let's go in the browser and see refresh now we have this icon here click and we see the published if i click this one we're close no column is published okay this mean like this refresh again and click now we have only the published posts okay reset and close now we can do the same thing for unpublished let's copy and paste that in and say here unpublished query where is published is going to be post hit save come here and refresh and now if i click unpublished we have only on unpublished posts displayed here okay next thing i'm going to show you is so you can go here in the filament php documentation and make what you want or read the documentation but i want this relationship select features filters here we have select filter make author and the relationship is out or here but in our case we i want to make for category so let's copy this come here and register also this one we need to import the select filter and make category relationship now is category so we in the post we have category relationship okay and we need the name save so in the post we have this relationship category go to the browser and refresh ok if i click here we have published and unpublished and also we have category here right now we have all selected but if i want only the posts with laravel category click here and we have only that if i click taloon css okay if i click view gs only the view gs post now if i click laravel and laravel has is unpublished so if i click here we don't have any records if i click unpublished and laravel we have that okay and we can reset filters and reset all back okay friends that's it about this video i hope you and understand and hope you like it if you like like the video and subscribe to my channel for more content like this all the best and see you in the next one thank you very much hello friends welcome now the last thing i want to add to this project is the global search here to search for the name or categories uh title for posts and name for tags and the next one is that widgets here for the plus so let's add first global search let's go in the filament documentation and in the admin panel resources here we have the global stores and to enable the global search on your model you must set a title attribute for your resource so let's copy this code here and inside the app filament category resource here i'm going to add that one but for category we don't have title we have name and with that if i save and go here refresh here is the global search in the categories now we have the name for laravel vue.js or tiling.css and let's search for vue.js for example and here we have the categories vue.js click here and we navigate in the categories slash pgs slash edit let's do the same thing for posts and tags so let's close this and open posts resource and the same thing i'm going to add it here save close this one open the tag resource and paste it here now for tag also we need to change this the name save close this one and the refresh now here we have categories for vue.js if i go in the pose also we have the title of the pose with udf so let's search for view js here and you can see we have wgs for in the categories and also in the pause let's click in the pause and we navigate in the pause view js edit very good now let's add a widgets here for the pause and if we go in the resources down there we have widgets also you can use an x existing dashboard widget and here we have some documentation in the dashboard let's go to the stats because i'm going to create a stats widgets and we need to run this php artisan make filament dash widgets the name and daft stats dash overview so copy that and let's open the terminal here and paste that in as it is hit enter optional is the resource let's add post resource because i want for the post resource this one and now make sure to register the widget in the post resource get widgets so in the post resource here we need to register that and the function is get widgets but we don't have that and let's create so function get widgets okay and i think it's going to return an array here as well okay and let's now register this we just if i go in the post resource here we have widgets and the name of the widget is stats overview okay and let's say here return an array and let's add paths overview class okay save it now and then again in the get header widgets or get footer widgets of any post resource page so post resource pages are here and i'm going to add in the list post and also in here we need to create a get header widgets or get folder widgets i'm going to create the get header widgets and also if you go here so in the description you go to the get started now here oh wait a minute so in the resources widgets yeah here is the example for get widgets what we created in here and this is going to be static function not a public function like this okay public static function get widgets return an array and we added that exactly okay next one in the list customers in our case in the list pose we need to create this a protected get header widget as we have here and then again get header widgets okay so let's add that one here but just change this one to be stat overview class save it and let's go and see now in the pause refresh and you can see it's going to down there but we don't have anything because in the widgets stats overview get cards and return an empty array so we need to create that one we need to create some cards let's go in the dashboards getting started our stats here and here we have an example for get cards and let's copy this one and paste it here if i save let's navigate here refresh and here we have the widgets very good okay so let's add here i'm going to say all posts and display the count of all posts i'm going to say post import that and say all if i save come here and refresh it is three now here you can add for example the how many published post and unpublished posts you can add what you want also here you can say you can add a description a description icon and also the color so let's copy this and let's add here for example if i save go to the browser and refresh and you can see we have this increase which is a success color if i change the b danger save and refresh is in the red color okay you can play around with widgets that's it about this video i hope you enjoy and and see you in the next video friends all the best

Channel: Code With Tony

Views: 40,125

Keywords: laravel, vuejs, livewire, laravel 8, laravel 9, laravel crud, laravel 8 tutorial, laravel 9 tutorial, laravel filament, laravel filament tutorial, laravel blog, laravel blog tutorial, laravel for beginners 2022, laravel for beginners, laravel for backend, laravel filament admin, laravel admin panel, laravel spatie media library, laravel full, laravel full course, laravel full tutorial, laravel filament demo, laravel filament relationship, filament laravel tutorial

Id: yQFA-0RbjO0

Length: 71min 15sec (4275 seconds)

Published: Fri Jun 24 2022