Laravel Admin Panel Full Tutorial | Spatie Roles and Permissions

hello my friends welcome again in this video i'm going to start a new series with laravel and we are going to create a laravel admin pendant with the help of a spotted package called laravel permission and as 9 000 stars in the github repository is used by 23.7 k and 10 million downloads okay it's very good package and you can go to the github or docs.spotif.b and here you have the version 4 introduction the documentation okay for that i'm going to install new laravel uh i'm going to create new laravel application and if you go to the parallel documentation like here is how you can install you can install with a docker you need to have a docker desktop here and just run this command and give you the name here or in my case i have [Music] the valet and i'm going to it's and i have installed the level installer so just level new and give it a name i have i am in the directory where i want to install the application and i'm going to call it laravel new [Music] lara admin the name and hit enter and it's going to create a new laravel application for us okay the application is ready so cd in the admin and here we are and first of think i'm going to install the package from laravel and here we have to stop the breeze or jet stream but agrees it's more and just composer require go there around this and php artisan [Music] press install after that okay now we need to run the npm install and npm run there okay you can install the breeze with the inertia if you want and so and go here i'm going to installation laravel uh copy this one go to the terminal and i'm going to zoom maybe you don't see is here around this one composer requires party level permission okay after that you need to resist optional that inside the providers this one oh it's inside there [Music] okay so inside the config app php as this one and i'm going to add the php config php and inside the providers here we have the providers and i'm going to add it here okay and you can sorry render publish that okay and after that we need to run the php artisan optimize clear okay okay install the level pack level permission package and go to the basic usage and i'm going to open the table plus to create new database for this application okay create this [Music] the mean and hit enter yeah i'll open the env file here and now the name yeah the name is so i'm okay and use this package we need that this has roles in the user class and go here and open the the user model okay and add here use or just not here as roles [Music] and import the as role trade here okay and we are done now we can use this package and this is how can create the package i wrote create the name name and give it the name of the package so first i'm going to run the artisan migrate why is there admin i think we have created this and now i rename this because okay i'm going to create another one admin and now if you go here and run the migrate yeah and open this ldar admin close this one and we have users here roles role has permission permissions model has roles mobile has permission and all of that because we installed the permission package and you go to the permission table create the mission table you see here we have a the schema for create the permission table another one for create the roles uh model has the role permission model type sorry model has roles and role has permission okay and now to create the first role i'm going to open the tinker here or we can create with the artisan command like this and give it the name and i'm going to create one for admin another one for uh user basic one another one for the writer and i think we are okay what we can have our admin user writer and maybe another one for the editor and if we go here now inside the roles yeah we have admin user writer and editor okay and i think uh for this video we are done we set up the application if you thought of the letter admin dot test here here is our application we can register and after we register we can log in but for this video we are okay so see you in the next video if you like this like and subscribe my channel thank you very much and see you soon hello my friends welcome again this is the part 2 to create learn val admin panel with a spotty permission table package and in this video i'm going to add the dark mode to our application here is the our application and if we go to the register page we have the cart and the logo and i'm going to change the log as well and edit the dark mode here and if you go to the login page yeah we have this one and here we forgot to password okay so if you go to typingcs.com and search for the dark mode here and he explained how to add dark mode so if you go to the titan config js and add the dark mode to media now whenever dark mode is enabled in the user operating system the dark class will take effect for near my case i'm going to add a dark mode with manual token manually and add this in the target config.js so if i go to the php store now and add thailand config.js submit and add this here and of course we need that turn on the npm around that okay and now we need to add as well dark glass dark in the html copy this and search for the quest a bleed and we need to add it here okay now here when we go to the register page for example go here to the register page register and this is called with the relevant breeze package you can change everything here so here we have the logo and i'm going to change this with an image and the source is inside the asset images and logo png in my case and i'm going to add the class with width 14 and 8 the same thing and around that okay and if we go here and refresh yeah now we have the logo here of course now if we see here we have a quest layout of course and we have this out card component it's coming with a breeze package so if i search for the out card and here we have bg gray [Music] 100 i'm going to change this when we have a dark mode enabled so vg gray 800 and here as well when you have the dark mode i'm going to add vg grey to 700 and if you go here and refresh now of course we have dark mode but we lost not lost but we have the same color in the labels and for that we need so we have x label we have component and i'm going to search for that [Music] okay and here we have a text gray 700 but if we have a dark mode i'm going to change this to text gray 200 maybe okay come here refresh and of course yeah now the text i'm going to change this as well so close this and scroll down here we have the text gray 600 and when we have a dark mode i'm going to add the text a great 200 as well and when we have dark on hover i'm going to change text that'll be 500 and refresh again of course now let me over it yet we can change this as well but i for me is okay and i'm going to in the login page now so close this one and go to the login page sorry locking blade okay and zombie this i'm going to do the same thing here add the image with source in the asset image and logo png okay and i think now here we have the same thing we had before i'm going to change when we have a dark motto text degree 200 or maybe 300 and dark over text grade 600 and go here and go to the login page and yeah i forget that oh it's here plus with 14 and age 14 and around it [Music] refresh okay and we have this remember me but it's not seen so there is a remember me is here so if i add dark text gray 300 here and now yeah we have this remember me and when we go to the forgot password we have this message but it's not seen so if i go to the forgot password delete and of course i'm going to change the logo here with the image source asset and image logo png and without the glass as well glass and width 14 and age 14 and rounded okay and now we have this text gray 600 here i'm going to change this we have a direct mode of text gray 300 and come here refresh and yeah here it is and of course now i'm going to add the github repository so here i am in the github login as data builder and create new editor here and laravel admin panel example okay and create this one and now you can run this okay git init and okay after that you can add the git add readme and git add all okay and git commit first commit for example okay branch to create the branch here and we need a git remote and after that just under keep push so the origin main and we are done clear listen and refresh and here it is our application okay and we are done now with this video if you like please like the video subscribe to my channel and see you in the next one thank you very much hello my friends welcome again in this video i'm going to add the sidenav in the dashboard so here is our application and i have registered as a test user test.test and add the password here okay here is our dashboard and i want to change this little bit and i have find this uh in alpine toolbox because we have alpine in our application if you go to application here and search for js inside the resources and i'm going to remove this [Music] and you see we have alpine js here okay and in in the alpine toolbox go for the internal direction and we have this navbar drop down click here and we have we have a navbar and sidebar so i'm going to choose this one and copy this okay i'm going to copy with our body come here and what the software up layouts inside the layouts upload yeah here and i'm going to add it remove and change with this one okay and if i go now to the dashboard to see what we have yeah here it is we have a knife side knob here and is uh white so if i want to add the dark as well and coming here in the html add glass dark okay and now we can see we have a dark mode here but we need that only the dark so if i select all the dark mode okay and change to only dark come here refresh and now we have a dark mode if you don't like dark mode you can change this to white okay and come here refresh sorry refresh and now we have white but i like dark or we can [Music] make this with a toggle and change this up but i'm going to leave it as it is now i want the dark mode okay now here if you go down there and we have enough bar here okay here we have a button when we click okay and if i add the h1 here [Music] welcome for example just to see where we are and the refresh and here we are here but this text is a dark mode and if i change this if we have a dark change the text to be gray 100 and come here refresh and now we have the welcome here okay uh i want to add what we had here so remove for now just a second another heading and the mine copy here and remove this body now add it here [Music] okay so if i refresh and we have this kind of thing because uh sorry i want that first a div with class of window full and maybe margin two or just window fold i'm going to leave and add it here this one so if i refresh okay yeah [Music] but we have a bg white and if we have a dark mode here i'm going to change to bg gray 800 and max width i'm going to remove this just margin left 4 come here refresh and yes of course we have this but i'm going to change the list on 900 refresh and now we have a dart board here maybe so 700 i want to make a change so look something different yeah now it's more better and if i go to the dashboard so search for the dashboard plate we have a header here and we have a text with a text gray 800 i'm going to change this if we have a bg if we have a dark mode so if we have a dark mode i'm going to change the text color to gray 200 and refresh okay now is more nice for me and i'm going to change this one as well so in our update we just add the slot here and this slot is this one so we have slot name header header for this and the mine slot is down there and we have the max width of 7xl remove this and add margin left the same thing before okay and we have vg white here and down there select both and add when we have dark mode add the bg gray 800 just to see what we have yeah something like that i think it's okay okay but i don't want the border here i'm going to remove the border all right yeah here it is and underdone the this at px.2 [Music] replace yeah i think it now is more beautiful you can do what you want but for me it's okay and [Music] what we can do we can see on the chain see if we haven't yeah it's responsive and we have a drop down here okay and i think we are good for this video if you like please subscribe and like to my like this video and share with your friends it's going to help me to do more videos like this and see you in the next one thank you very much and all the best hello my friends welcome again we are in the part 4 now to create laravel admin panel here is our application in my database i don't have anything i have made artisan migrate flash so here i'm going to register a new user and i'm going to register as a test okay add the password here register user and here is our dashboard i'm going to add a new link down there to logout and change the name here so if i go to the code here we are and if i search for the app in the layouts okay first i'm going to change the name and copy the first link here and add it down there but first we need to add the form form with method post and action is going to be the route to log out okay and we need to add the csrf token csrf token here and now i'm going to pass the link okay change the logout here and if i save come here refresh yeah here is the link the add the route to log out here road logout and i'm going to add on click event dot prevent default and this dot closest sorry closest form dot submit and save refresh here and if i click now to log out yeah we are log out and go login again login as a test okay now i will i want to add uh to create a post table and post migration and model and create some fake posts and display here and after that the user who is logging as a admin can create a post can edit can publish a post the user who is logging as a writer can write a post the other one who is login as a publisher can publish a post the user who is logging as a user can only view the pos okay so if i go to the terminal and artisan make model post and dash m for the migration and search for the post here post migration okay here we are i'm going to add only the title uh table string title save and i'm going to add the to make a factory for the post and php artisan make factory post factory and give it the model post okay hit enter come here and search for the post factory okay post factory here and we need to add only the title and this faker sentence of five save and now in the database cedar we need to add this up models post factory to create a 10 post save and close this one go to the terminal and run the artisan migrate director seed okay come here refresh and we have a 10 posts here cool now i want display here and for that i have prepared this table you can find in the playtalentcss.com and this link okay copy this one open the dashboard and i'm going to add it here we need to indent a little bit this save and refresh our dashboard here is always look i want to add a margin of uh six maybe and we have a bg white here but in the dark mode i want a bg top grade 700 and save come here refresh and here is how it's look okay for me now just we need to display the pause and if i come here and make a for each okay for each app models post all as a post and we don't need the image and active we only need the title the id move this up here and add the id here post id and add the post title okay if i save and come here to see what we have refresh yeah hit what is we don't need this uh image and status up here remove refresh again now now it's okay now i want to when the user is a admin he can uh edit this post he can publish and he can create a new post i'm going to add a new button here so if i go over here i'm going to add a div with class window with the full sorry and href with a glass 2 and padding 2 npg green 400 rounded around at large okay and create post save come here refresh and is here but maybe cut from here and pass it down up there save come here refresh okay i'm going to add a margin of to save refresh yeah for this video we are done and if you like please subscribe and like this video and see you in the next one thank you very much all the best hello my friends welcome again we are in the part 5 now to create a level admin panel here is our dashboard i have login and we can log out here here in the table i have displayed the post we have and i add this button to go and create a new pocket in your post we have i'm going to add button here to edit and publish a post so if i go to the dashboard in the or code here we have edit and delete i'm going to add a link here and with class of margin 2 and padding 2 bg green 400 and rounded okay it's going to be edit copy and paste this and add the publish here save come here refresh yeah we have a button for a link for edit and publish a post and here i want to add them to remove this and add only around it okay refresh yeah now i want to show this uh buttons here and here when the user has the right routes okay so we don't have any roles for now so if we go to the rows here yeah i'm going to create now and you can go to the level permissions party website and this is the basic usage you can i'm going to create using the artisan commands and copy this one i have prepared some notes here so i'm going to create a role for admin writer editor and publisher user ok go to the terminal and php artisan permission create a role and give it the name in my case admin one another one for the writer another one for the editor another one for the publisher okay another one for the user okay now if we go to the table plus and refresh yeah we have the rows i want to create a permission as well so go here copy this one and i want to create the permission to write post edit pause and publish post okay and right post edit post ok and publish post clear you can can create a form here but for a quick to be more quick because you can create a form and after that we can create a role wrote create name and give you the name or permission create but for now just i'm going to create with the artisan comma and here if i go now to the uh dashboard first i'm going to this show you with blade directives and we can use can and add the permission or if of the user can and these are these are blade directives or with their own so if role is brighter else and so on so i'm going to use this road and here i want to show this only if the role of the user with their old writer and and the role okay and if i say come here refresh we don't see that because we are logging as a test user and we don't have any role for now i'm going to create a new user and register a new user and this is going to be a writer okay and i'm going to add name writer and write test com add password okay and now we need to give the permission as a writer to this user and we can give a permission so the user assign a role and all right for example if i go table plus and means the user if i refresh we have a user with idf2 and is a writer i'm going to open the tinker here okay and i'm going to create i assign the user to the app models user find the user with idf2 yeah and now user assign role and we're all writer okay yeah now if i go and refresh the page here yeah we can see the post here i'm going to create a new want to log out here and create new user as admin new for the editor and publisher and the test user we have so i want to leave it just another for the admin editor and publisher okay this is going to be admin and admin test.com add the password okay register this and now the admin can see this post because it's admin and if you go here in the blade directives robots so here we have a has any role and has any role for example writer and admin okay is the same what i did so if i go to the code and add it here type admin save this and refresh now yeah we need to add s and roll okay copy this one and save refresh oh yeah because we the user has not we are not assigned the user as a admin sorry for that so i'm going to find the user with id of three this is admin yeah and i'm going to assign a role admin now sorry for that okay yeah now the user is admin and if you come here refresh yeah he now can create a post see the button and what i said i want to create another user for the editor and publisher okay this is going to be editor and add the password here okay the editor now we can [Music] can see edit but not the publish and not the create button and but first i need to give the permission to this user and if a refresh now the user editor has the idf 4 and find the user with idea 4 and give it the permission editor here and now if i go to the code here and we can show this if the user has a role editor and the role here and save okay refresh but i want to hide this publish button so this is going to be if the user has a role as a publisher and and the role here yeah save come here refresh and now the user as editor can see only the edit and i'm going to add the username here so the cvr editor so if i go to the layout up layout and here i'm going to add the username out user name yeah we need this i have saved my refresh yeah now here is editor and you can edit and one more like logout i need to register one more user and this is the publisher user okay he is the publisher and publish test.com and add the password okay he is publisher and he can see only the publish button here but we need to give the role and we find the user with idea five his publisher yeah and give it the role as a publisher okay and now if i refresh yeah he can see the publish button if i log out and log in as a admin you can see only the clipboard but i want to see an edit and publish post so if i go to the code and here you can sorry you're not here in the dashboard we have roll editor and give it the pipe and admin and the same thing here save this and come here refresh yeah we need to add as any load okay has any role and the same thing here has any has any role and same thing here refresh now yeah now he can see all the button because he is happening okay this is for this video if you like this subscribe and like the video and see you in the next one thank you very much hello my friends welcome again we are in the part 6 now and in this video i want to work with the permissions so if i log in as a admin okay here is our dashboard now i am admin and i can see this button here and also that didn't publish okay but for example if i login as as a writer and the password and he can create a post but i want to give a permission to him to also publish post and if you go to the spotty basic usage and here is how we can give permission to the role so we grab the role and give permission to make to end the permission fast also okay and we are i'm going to work with a tinker and first i need to have the role and after that give permission okay so i said the writer can publish post also okay and i'm going to grab the roll first so and we need to go to the spotty package and permission models role where where name is [Music] all righter give it the first one road yeah and what is uh yeah is the name here writer okay now we have the role and i want to give permission to this road give permission to and if i open the table plus what permission we have the admin and we have permission to write edit and publish post so i want to give a permission to publish a post and okay now this role has the permission to publish a post and if i go to the table plus and roll has permission here the role with id 2 have permission with id 3 sort of role with id 2 writer has permission 3 publish post ok and now in the bleed directives we can use the can and add the permission okay so i'm going to open the dive board here and can publish so i'm not going to add has any role anymore but just can and add the permission and the permission is published post okay if i save and refresh here yeah he can publish post as well okay now if i log out as a and login as admin if i go admin and add the password now the admin only can see the edit and create post but not the publish post because the admin don't have the right permissions and i'm going to do this now so first give the role with the name admin and add the permission to yeah sorry publish post okay and now if i come here and refresh yeah now the admin can publish both and i did see this edit and create post okay if i uh now onto logout and loginas editor okay he can only edit the post good and i want to give a permission to add it post to him so first give find the editor yeah and give the role the permission to edit the post yeah and in the here we can add the can and the road to edit post add this here and save the come here refresh yeah he can edit the post as well and i'm gonna look out and login as admin and now we need to add the same thing here for the admin so he can edit post as well and find the role with name admin okay and give it the permission to edit post and now come coming refresh yeah he has the permission to edit and publish post okay you can add the permission to create post and add this with a permission as well or you can leave it with a role so here we can add the permission and for example we can can and create post save and if i want to see now all right sorry you can write the post and now we need to give the right post as well alright post and refresh yeah you can create post okay but now if i log logout and login as a overwriter and add the password here login now the writer has the publish but not the button here because you don't have the the permission and if you go to the table plus refresh now the level with id2 roll has permission so what i do to have only one permission with a role within it you have permission with id3 so we only publish post and i want to give it a permission to write a post as well so first find the role with name writer and give it mission to write post okay come here refresh now and yeah you can write and publish log out login as admin and admin can create edit and publish okay logout login as a editor yeah editor can only edit we can give a permission to publish report if you want if we want safari if you go here and find the editor and now we want to give the permission to publish a post to this one publish yeah and refresh now that dark and edit and publish post okay log out login again and i'm going to login publish publisher and now the publisher don't have any a public publisher so the role is id4 roll with id4 don't have any roles yet and we need to find that role that his name publisher yeah and give it a permission to publish post okay refresh and he can publish post of course if we log in as a user as test so test it don't have any role and permission you just can see the boss and you can do anything you want but uh i just do it just for quick examples how to show you and and i hope enjoy this video and see you in the next one if you want please like and subscribe to my channel thank you hello my friends welcome again we are in the part 7 now to create the laravel admin panel and this is going to be the last one in this video i'm going to work with a laravel middleware so i'm going to protect the rods with a middleware with permission and roles okay so here we are in the application i'm going to login i'm going to login as admin yeah and we have the button here to create a post and edit and publish but for now we click and we stay here i'm going to create a controller artisan make controller post controller resource okay and if i go to the code and open the post controller here in the create method i'm going to return a string create post page is here okay and in the edit i'm going to return string as well here edit the post with id and continue the id here at the id okay save this one and open the web roads here and i'm going to add road get and post create the method is post controller and make sure you import that the controller is post controller the method is create and the name is going to be pos dot create okay copy this and create another one and this is going to be the edit pause so here the post and edit okay and method is going to be edit and name post edit save this one and open the dashboard now and here we have the create link here and i'm going to add the route to create post road posts create yeah and when we have the edit link i'm going to add the road to edit okay road post edit and we need to add the post id here okay save and go to the application refresh when we click now here we go to the create post create okay and if i click here here i did the post with id now one and with id2 okay now i want to protect the the slots because now i am admin if i log out and login as a test user he don't have any role any permission but he can visit the roads by writing here for example the posts create yeah you can create post now if i go to the web world but first let me explain you we need to add the in the level permission package in the spotty.b documentation you have in the basic usage you have this using a middleware and need we need to add this in the road middleware in kernel php i have done this so if i open that kernel php and add role permission enroll or permission here okay after that if i want a middleware now and for example is going to be real admin save refresh now yeah user does not have the right rows because the user is test okay log out login again and login as admin now you create post yeah he can create a post okay log out and login as a writer and if i click pause now yeah user does not have the right roles but in our rows we have writer he can write the posts so to do this if you go to the documentation and see what we have so roll middleware and give it the role for permission or role and permission in the middleware or role or permission so if is user super admin or has the permission edit articles okay but if you want for in our case we need this one road to give one for admin and one for the writer and here we going to do this add writer here and save come here refresh and now yeah we have right rows okay but if we are brighter and if i want to edit we can not see in here the button but if i go to the post and one edit here we can edit the post yeah okay i want to protect as well the edit and in the web php here i'm going to add the middleware and it's going to be with the role editor and we need the role as admin as well so admin editor okay so now if i refresh yeah we don't have the right roles because we are logging as a writer log out and login as editor and yeah now if i edit here yeah we are edit the post okay we can work with the permissions sorry so if i want the permission here and remove this and add permission and the permission is uh we can write post we go to the table plus and inside the permissions we have yeah right post only the user with that permission can add can go there so if i go to the postgre sorry post create user does not have the right permission now okay okay now we'll go to the permissions right post is the id one and rose is admin with id1 and right away b2 roll has permission roll with id1 which admin have the permission one and with id you have the permission one so rows with the admin and writer has the permission okay go back and if i oh sorry if i log in as a writer and go and create post yeah we can create and of course if i log in as a admin because we have the permission and this is how the middleware work with the laravel permission package is very useful package you can do everything you want okay this is for this video for this series i hope you enjoy and if you like like the video subscribe to my channel share with your friends and see you in the next one thank you very much

Channel: Laraveller

Views: 14,514

Keywords: laravel, vuejs, livewire, laravel 8, laravel 9, laravel crud, laravel 8 tutorial, laravel 9 tutorial, laravel permissions, spatie laravel permission package tutorial, laravel admin panel, laravel admin dashboard, laravel admin panel tutorial, laravel 8 admin panel with roles and permissions, laravel 8 admin panel tutorial, laravel admin create roles, laravel admin create permission, roles, laravel admin panel full tutorial, laravel 8 admin, laravel 8 admin dashboard

Id: aOK0lNMcKlY

Length: 84min 10sec (5050 seconds)

Published: Sun Apr 11 2021