Laravel Jetstream: Add CRUD with User Roles

hello guys today i want to show you how to create some functionality some mini demo project on top of laravel jet stream and i've been asked quite a lot on this channel in the comments to create something on jetstream like how to create rows how to create some blog system or something like that and i see a general problem with jet stream as a software it's good but the way it was launched i didn't like it i even had a twitter argument with taylor about that so the way it was launched and positioned confused people so now as a result of that people are afraid of jet stream either they're afraid because it has live wire inertia and fortify and stuff inside so it's hard to learn it seems or people who try to install jetstream are lost what to do next how to add more features so in this video i will show you that you can use jetstream without any of those shiny new stuff that you can code in old laravel way after installing jet stream and here's the demo project for you so i'm not sure if you've seen the jet stream dashboard but this is how it looks and on top of that we will add two menu items crud to manage tasks and cred to manage users and also add roles and permissions so administrator role would access users management and simple user would access only the tasks so it's a simple crud of adding the user you can assign the role you can create and it's all based on laravel jet stream under the hood so i will try to recreate that project it won't be strictly live coding some parts will be copy pasted but i will show you the main logic how to add functionality on top of jet stream so we start by creating a totally fresh laravel project with laravel new and project name i have a folder project four dash dash jet and that will install laravel jet stream with new project which stack do you prefer we will choose livewire but that live wire will be used only for gesturing stuff for the profile but new functionality won't use any of those too but let's choose livewire do you need teams functionality no in this demo and then the installation begins so laravel new installation with composer install then it will install jet stream stuff so it takes like a minute or two so as you can see here composer installer finished for laravel and now laravel gesturing has been installed and there was a third step i wanted to show you so inside of jet stream we chose live wire so it installs laravel sanctum and live wire as a third step and as a side note it's pretty interesting to analyze the installation process so i will link in the description of this video the link to the part of the code in gesturing which does all of that magic so updates composer file and reruns composer update or composer install is pretty interesting so now what we need to do is run npm installing npm run dev and of course i need to run that on that project for not in that folder like this okay and it's done npm run dev now according to official laravel documentation we need to run the migrations and i will run migrations with refresh of my database so my great fresh seed because i had older database in that folder and final thing we will do is publish the components so below at the documentation there are views pages and if you want to publish them to resources folder there is one thing you need to run so vendor publish gesturing views like this and that's it we can run project for that test the domain that i've prepared it's default laravel page but if we click register it's just stream design and we can register i use fake filler chrome extension we register and we're in so we've installed just stream successfully now let's try to create a new menu item here alongside the dashboard so let's find out where menu items are in jet stream to do that i will kind of teach you to navigate laravel code because i see it's quite a big struggle for especially junior developers how to find some parts of the code if it's fragmented over like five different files and folders and structure so i start with the routes we see the dashboard here right so let's open routes web in here and we see the dashboard here it just returns the view nothing else so we click on the view by the way i have a plugin installed called laravel idea that helps me to navigate in phpstorm makes quite a lot of things clickable which aren't clickable by default so in the blade file we have a thing called blade component so x something x app layout x slot x jet welcome if you are not familiar with blade components i have a separate video on that and i will link that in the description below x app layout is actually under the hood app layout component inside of the vendor so that is not accessible publicly it's in vendor jet stream components app layout it still views the blade so renders the blade we click on layouts app and layouts app is public so resources views layouts app blade and it's based on tailwind so basically to navigate jet stream you need to know two things blade components and tailwind css you may need to know or understand some live wire or inertia stuff but you don't have to customize that necessarily so in here in ablate we have live wire and you probably need to know what live wire component is behind this so this is not clickable so i need to find that in all the project or i need to know that actual component name is camel case of the same blade so navigation drop down so i search for navigation drop down and i find the live wire component also from the vendor which renders navigation drop down and that navigation drop-down is public so did you see the pattern the live wire components are not public they are core of jet stream but visual stuff resources views are public and you can customize them and this is exactly what we will do so we finally landed at resources views navigation drop down which actually contains that menu so you may skip all that tracing off the files and folders and that's the only thing you need to know that the menu is in navigation dropdown and here's the dashboard link and let's just copy that xjet nav link is a blade component for that so let's call it tasks route tasks index and i don't think we need to change anything else oh we do need so tasks index active or inactive menu item and let's create that route in fact let's create a controller and the route so php artisan make controller task controller dash dash resource because it will be a crud of tasks and then inside of the web file we do route resource tasks task controller class like this and later we will add middleware for rows and permissions inside of the task controller it's index method which will be the destination of that link so let's try it out let's refresh the page and now we see the tasks and if we click that it lands on the tasks which is empty but it's working it doesn't throw any errors and then in the controller you can do whatever your structure your code without any jet stream magic or live wire or anything and this is exactly what i did here behind the scenes so it's a typical laravel controller like it worked in laravel seven six or even five i think index method get the tasks show the index create is the form to create the task store is with validation form request show the task edit the task form route model binding is used update again with form request for validation and destroy with delete so nothing really fancy or new here and in the terminal i've made a model with migration i've made a few request files i've migrated and in migrations it's just one string of description in the model it's fillable that's it the main gesturing thing comes from the views so you need to use tailwind css to create your views so let's take a look at tasks index view so if we get back to the dashboard page let's copy and paste the dashboard and create a new page for tasks index so we have resources use dashboards let's save as resources views tasks index blade like this and then instead of dashboard we have tasks list and there's no default table component or something like that in jet stream so we may take it from tailwind ui tailwind ui is a competent library for tailwind by adam watten and steve sugar and it's not free but some components are free including table this one so preview but this table is publicly available the code so we may look at it copy and paste into our index blade i think instead of this part let's try it out without refresh click the tasks and we have the table and now what we need to do is just replace the table the hard-coded data with our own tasks so i've done that behind the scenes you may play around with more tailwind classes so there are two columns description and actions and there is a for each of tasks with showing the description and showing view edit delete those routes already exist but we didn't fill them yet and visually it looks like this so a list or table from the database i filled in manually the first task or if we add the second task caps lock refresh it appears in the table so again it's a proof that you don't need to use jet stream stuff except for tailwind and from here we create other pages for the crud so in the index we create route to the tasks create so this is a button that looks like this so you add a task the create blade for that is in the same folder so create blade form the styling for that was kind of borrowed from the profile page so there's a profile page in tailwind by default it contains the forms so tailwind styling is from there you add a task it is stored in the database it appears in the table you can view that's show blade simple table back to the list edit the task also works controller you've seen that already and delete also should work so now we've created our tasks crud on top of gesturing and now let's add a second menu item into our system user management with rows and permissions so here i am logged in as administrator i've done it behind the scenes already and i will show you the code step by step an administrator sees the users list with management of users so step by step in the code we have another link for now ignore user access i will get to that in a few minutes so we have a route to users index and also maybe it will be a new trick for some of you this is how you can check the route parts tasks star perfect for resource controllers so we have users index in the routes web let's open that up i've made a route group middleware by auth and here's our previous controller and here's our new controller user controller which is pretty similar to the task controller pretty similar crud resource controller with a bit more logic so for now ignore the gates and the access i will get to that in a minute we get the user with rows what are the roles if we click the user i added that belongs to many relationship with rows and row is a separate model with just the title so in this case i'm not using any external permission for rolling permission management like spati permissions or bouncer there are a few of them but we will implement that without any package so user may have menu rows let's get back to our controller we create the user and we assign the rows we store the user and sync with the rows again belongs to many relationship we show the user we added the user so nothing really complicated here you may want to look at the migration so row user is a pivot table with foreign id this is the syntax that came in laravel 7 but generally user management is a typical crowd controller that was my point of this section and if you go to user's index blade it's almost the same as task list so the table of users with the actions for user show and user edit so for example if you add user let's use fake filler chrome extension we create the user so typical stuff now let's get to the permissions how to make that menu item available only for admin for that let's analyze the seeders so i have a file called database seeder database seeders this one and this will kind of explain to you the hierarchy of permissions and roles so for permissions tables here we have two permissions user access and task access and we have a separate model permission so that's number one then we have rows table seeder which is admin and user then we have a row user table known as that one i wanted to show you permission roll table so many-to-many relationship so every row may have many permissions and every permission may belongs to many rows so it's a many too many that's why we have permission role tables either and for the admin user we assign both permissions and for simple user we assign only task permission so that then we see the users but we see admin with id 1 user with id 2 and then in the separate seeder we assign the rows so first user admin second user simple user and then how do we turn that data into this can user access for that we need to define the gates somewhere we need to run gate define user access and then true or false for specific role who is logged in and for that we have a special middleware i've created a middleware called auth gates it's an app http middleware in here let's close it down so if there is a logged in user we get the roles and for each of the permissions of all those roles it's some operations with arrays and relationships but at the end of it we gate define for example task access or user access and we return true or false depending on the role has that access or not and then we assign that middleware auth gates in all the pages so there is a file called app http kernel where you can enable some middleware to run on all the web pages so web group means that auth gates will run on any page will assign the permissions gate defined and then in any place of that page we can use can user access in the blade or not sure if you notice in the controller so user controller here in the index we can use gate denies or gate allows user access so even if someone logged in as a simple user would know the url in the index they would be denied and third place where we use that in the store in the validation request form request in addition to validating the rules of the fields there's authorized method which will use the same gates so again a recap we have permissions and rows seated in the database then we have a middleware that transforms that database data into gate defined statements and then whenever we need that we use gate allows gate denies or just can statement in the blade again there's nothing specific to jet stream here again i was trying to convince you that jet stream is just the layer of the core stuff but on top of that you can do whatever you want although i will show you one jet stream specific thing or in fact laravel fortify thing fortify is the auth backend that powers the jet stream and by default you wouldn't need to know about that but in our case we need to assign the role for a new registered user so if i log out and click register in here after filling the form i need to assign the role and to do that there is a specific folder of laravel fortify called app actions and fortify folder there is a create new user actually the method where the creation happens and in here you can customize whatever you want and before my customizations it look like this so like this i've added just assigning the user and assigning the role so i'm attaching role id to to any new registered user and that's it for this video i hope that jetstream is not that scary for you anymore you may or may not want to use that the github repository is available on github for free as usual the link is in the description of this video and again i advise you to subscribe to the channel because i'm shooting the videos daily now if you have more ideas about jetstream or laravel or whatever shoot in the comments let's discuss what will be my next videos see you guys in other videos

Channel: Laravel Daily

Views: 83,270

Keywords:

Id: pyOcSEkG4Q0

Length: 16min 50sec (1010 seconds)

Published: Thu Dec 03 2020