Laravel Full Tutorial with Livewire - Employees Management Project - Full Tutorial For Beginners

hello my friends welcome again I'm going to start a new series with laravel and liveware I'm going to build the employee management application I built this with laravel and vue.js exactly exactly what the document said but now I'm going to do with the laravel Livewire and I have installed the laravel and I have created employee labor level project and I have opened with a vs code also I have installed larave jet stream and now I'm going to set up the application I'm going to uh change the user stable so if I open the users table and we have name email verified but we want the username last name and first name okay so change this stuff first name copy and paste and add last name uh copy and paste and here we need the username okay username first name last name and email okay we have a image verified current theme ID and profile pod photo but no worries okay say that and now we need to create the employees uh table also the countries states departments so I'm going to create first the countries and states cities departments and after the employees because the employee needs the country ID state ID has a Verizon key okay so open the terminal and I'm going to zoom this little bit here we are artisan make I'm going to create the model as well make model uh country and dash M for migration after that I need States uh change this to state okay City and also the Departments department and now the last one is the employee okay now I need to open the vs code so in the country we have country code and the name okay open the countries table and we need other country code and the name okay now for the state we need the country ID name close this open the dates table and we need ID country ID and we need other constraint and the name okay string for the name save also we need the cities with just date ID and the name open the cities table and the same thing origin ID state ID and we need the name oh okay and now we need the Departments which has only the name open the Departments oh sorry Department stable and we need only the name table string name good now we need the employees table which has a last name first name middle name and so on and if I go to the I'm going to copy what tab and we have the in place that available employee management here and I'm going to open the database migration and only have sorry employees just copy this for not leave you there okay and paste it here so we have a last name first name middle name address Department ID country state city and so on save close this one and I'm going to go to the dot EnV we have the database employee Livewire by default it's going to give it this name because of the application name is employee Livewire okay copy this and I'm going I'm going to open the table Plus and create that database so here create new one paste the name okay and open that now we don't have any not if I run the artisan migrate and we have a tables here go back refresh we have cities countries departments employees users State session and so on so go here open the employee lab wire DOT test and we have the level application go and register and login so that's it for the setup our application and see you my friends in the next video all the best bye hello my friends welcome again in this video I'm going to customize the register page of the laravel jet stream so if I go to the I am in the laravel application employee Livewire test and if I go to the register page we have the name email and the password but if I go here the users table as the username first name last name email and all of that I'm going not that so I'm going to do this that the username first name and last name here and I have opened the application with vs code I have installed stream and for that we have if I go to the resources views we have the out folder and here we have all the Authentication blade files and the register page is here we have a method here a form and we have a X jet label this is a laravel component so if I go to vendor and learnable jet stream here we have resources components and here we have the input and the label and the input has the graph for disabled and has the class this class and labeled as the props value and this class okay just to show you so now go back [Music] and go to the register blade and I'm going to copy change this first this is going to be username and here we need with the capital okay and the name we need username also for the value username and I'm going to copy this one and paste it here another one here and now change this to be the first name okay another one for the last name and this need to be first name and this one the last name like this autocomplete for the first name and last name last name and username here username save and go back refresh and we have a username first name last name email and the password okay but we are not done we need go to the app actions and we have registering sorry fortify and we have here the create new user and we have the method create here we make a validation for the name and we we need the username here and copy that and paste and here we need the first name also the last name okay and user create add the username and copy and paste and change this last name sorry first name first and this is going to be the last okay save and one more thing we need to go to the models a user model okay and here we need to add the username here uh first name and last name like this save and close this one and now it's time to try what we have done so I'm going to use the fake filter here just okay register and yeah we are register and we are in the dashboard go to the profile but uh the problem is we don't have the username here and also here we expect the name but didn't have the name in the user table we have the username and we need to fix that so here we have a profile information and need to go to the first I'm going to fix this one go to the navigation menu and when the search for the name or house and here we have our username change this to be username okay username like this and another one when we have our username and I think that's it yeah here we have a username like this and here username okay save and refresh here and yeah here we have the username okay go to the profile we need okay uh and we have the live wire and profile update profile information form and update profile information form here we have here here is the photo I don't need photo and here is a name okay if I change this to B username and Save refresh and here we have the username okay and here we have the xjet and we have a wire model and the state we have a state for the name so I think in the user nav wire class we have a state and I'm going to change this to the user name like this and also the other complete for the username copy and paste it here and here so exit label for the username and ID is going to be username for that and also the error for the username okay save and come here refresh and yeah we have the username here okay that's it so now we have the username here we can uh log out sorry logout and go and register a new user with a as a John though and go and login after that I have registered a new user with that name so John .com and that's the password and yeah we are here I have a profile and we have the username here so that's it for this video friends hope you enjoy and see you in the next one all the best thank you very much hello my friends welcome again so here we are in the application and we are in the dashboard now and we add here the username also I added in the profile the username we change the name to username but the problem I see is if I leave it blank and hit save we expect a narrow but we don't show anything so like this if I leave empty the email and we have the email required field okay I'm going to fix this now so if I open the vs code here is our application and in the resources views profile here we have the update profile information and we add the username here but uh the problem is in the app actions and update user profile information and here we have the name so we need to change validator make the change name to username and now we are good to go but uh yeah I'm going to change this as well and this one username save go here and refresh okay leave it black now hit save and now the username field is required okay now in this video I'm going to add the user interface which is the responsive Budget on the HTML5 and bootstrap 4. I'm going to copy what we had in the previous uh project with UDS so go to the GitHub and we can find the laravel employee management Repository okay and here we I want to search for the resources views layouts and we have the main layout and copy this one okay go here resources and layouts I'm going to create new file for the main Dot blade.php and pass that code here we need the bootstrap 4 and jQuery and proper JS so I'm going to go to the get bootstrap and here we go to the documentation change this to version 4. and I'm going to copy all the JS files see first CDN and press it here okay hit save and I'm going to do is go to the views inside the app so here we use uh components and here we have the F layout and change this return view layout dot Main okay save and go to our application and Road country syntaxia we have roads in the main blade and where is the road road yeah route for the country in States because we don't have now this roads we are going to create later but for now we need to remove and users index as well as we don't have and I think we are good to go save refresh yeah here you are now we need the if you go to the public here CSS we have the sb-admin DOT magnified the CSS go and copy this file select all copy and go to the vs code inside the public CSS create new file and SP admin.min.js sorry that's CSS pass it here that code and hit save and we need the JS file as well here in the public JS SB Dash admin copy this one and create a new file in the JS folder SB Dash admin dash mean that J dot JS sorry and pass the code here hit save in the main we have the asset scissors that file and also the JS file okay now if I refresh here we have the dashboard we have the drop down working and but if you see we lost the content okay so I mean you go here and change this step what we had up and refresh so we lost this content here and that's it because in the main blade here we don't need the yield content we need to remove and I'm going to add the slot here okay we are working with components and if I refresh now here we have the content that is not it's out of style because this is with the styling with styling CSS the jet stream is coming with Titan CSS by default so if I go to the Thailand CSS and and go to the installation here just to show you using entitled with CDN and copy this one go to the main and add it here save and refresh the application you see now we have the contact here I'm going to remove because we don't need the title CSS we need to work with a okay now if you go to the dashboard here here we have the xjet welcome that's content and we have the X slot name header and if you go to the main we don't have any we have the content and navigation here and we don't have any slot name here so I'm going to remove that from the dashboard and just leave it extract welcome and also we need I'm going to remove this and add the H1 welcome to the Main dashboard save and refresh yeah welcome to the main dashboard so we add the user interface you can log out go and log in okay so we added the user interface now in the next video I'm going to fix this uh user will be able to login user email and password that's it by default and we have to fix this three field attempt will block the user for five minutes and by default so if I close this and log out by default the laravel is coming with five attempts so if I go login and uh make a change here one attempt to three four five and yeah and we have the 429 too many requests okay but we need to make only three failed attempts and we'll lock the user for five minutes look for the one minutes by default so if we wait for the one minute and we have the ability to test again five to make again five requests okay hope you enjoyed this video and see you friends your friends in the next one all the best hope you good weekend hello my friends welcome again in this video I'm going to work with Authentication and here we have the user will be able to log in use an email and password and that is okay because we are using the the stream and by default we have the email and password okay and the other we have this one three failed attempt will lock the user for five minutes and this is not the same what we did with the previous project with a lot of value ugs because here we have installed the Lara widget stream we don't have the logging controller so if you go here and go to the app uh con sdp controllers we have don't have any controller here we have the actions and we don't have any login actions if you go to the config and 45 and here we have middleware and we have the web and the throttle login and here down we have the rape limiting by default 45 will throttle logins for five requests per minutes so we are able to make five requests for one minute for every email and IP address combination good now how we can modify that if we go to the providers the road service provider we have this uh rate limiting configuration here and we have for the API which has the limit 16 60 and for the login we have to but if you go to the 45 service provider here we have the rate limited for login and this is five requests per minute and we here we have the email and the request IP so if you what the config set if you go to the 45 requests per minute okay so 45 seconds provider if we want to make a change here so I'm going to add it just to show you one and go here and make a somehow failed attempt one and if I make again well now we have too many requests and if I go here and start a timer for one minute after a minute we can make again the requests but we want three field attempt for five minutes and here we add one two attempts for one minute if we go to the list class a limit class here we have the attempts and minutes and we have a method per minute which help has only the attempts otherwise we have the per minutes which here we have the minutes and the attempts as well so I'm going to change this to add per minutes and here we have the minutes and the attempts and I'm going to add the minutes which is five minutes and the time switch is three so add the minutes five and attempts three okay if I hit save go to the timer yeah we are done if I make again the requests we can do the request now one two three and now we have too many requests and if I start for one minute if all are good we have five minutes here so we cannot make a request after a minute okay hope you understand so we add here five minutes and three attempts so if we made three sorry if we made three failed attempt will we will lock the user for five minutes what we said here we added here five minutes and three attempts okay if I go here to the timer and we have 10 seconds just to show you two one okay reset come here and try and yeah too many requests so we need to move to wait uh five minutes good next thing is the uh work with the user management okay come here and I'm going to close this one because we are done now with this close the farmwork and the vendor config app all of that if we go to the roads Webroot we have this Road middleware I'm going to create a new road for the users or when to create new Road middleware and here I'm going to add the Sanctum copy that and pass it here and here I'm going to add group function whether I have the cluster here and here number I'm going to this road but shorter because we have our sanctum I don't need this verified for now if you can add it here as well so if if we only can add verified and we have the same thing so here I'm going to add the road View and the view is going to be dashboard and the file is going to be dashboard as well and I'm going to name it dashboard okay that's it now we can remove this I'm going to comment so this route we added in the in this group because here I'm going to add the route for the users but before that I'm going to create the Live Wire component for the users because we are working with the Live Wire now so artisan make Live Wire and I'm going to call it this user index like this and this is going to be inside the user user index or users yeah users a user index enter and know for that clear and now if you go to the app HTTP Live Wire users we have the user index class and here we render The View which is inside the Live Wire users and the user index and if we go to the use Live Wire we have this user's index user index inside the users I'm going to make a change just to show the component here and I'm going to add H1 this is the user index liveware component save now inside the web wrote we can do Road get and get the users and add user index class which is the Live Wire class I'm going to name it users Dot index save and now we need to go to the layout main layout and when we have the drop here here we have a dashboard employee management system management user management and here we have the users I'm going to add the root here the road and the road is users index okay hit save on code of the application and now I think yeah we can make a login go and login and if you go to the user management go to the users and we have the this is the user index Livewire component and you see here we lost the dashboard and that's it we could go to the live wire die wire the 11 live web and go to the documentation and when we rendering components Road get full page components so here we have Road cat and class oh and by default the live wire will render the show post component in the slot so we have the slot in the main blade which is this one okay of a blade layout component located at resources view layouts and app.blade.php the app that did the PHP is this one so here we have the update and but in our case we have the main blade the dashboard the update is this kind of the default of laravel if we want to make happening configuring the layout component we can add the layouts and layouts and give the name here sub copy this one hope you understand me what I'm going to what I say if you go to the user index and add it here and change the base to layout.main save and I'm going to indent this we save and now refresh and yeah we have the dashboard the bootstrap dashboard and this is the user index Live Wire component okay friends hope you enjoyed this video and see you in the next one oh hello my friends welcome again so here we are in the users index Live Wire component okay so in the dashboard you could just click the drop down and users and we are here and if I open the vs code this is the user index blade component is the level component and we have the the Live Wire user index class I'm going to open in the right the user index is here and user index blade is here and in the user index class just render this view this one and now we have this okay I'm going to show all the users in this uh user index Live Wire component so here and for that I'm going to copy what we have in our laravel employee management application if we go to the resources views and users here we have the Intex blade and I'm going to copy all of that okay and paste it here and you see here we expect users and we add the user like this users user all and Save and now come here and refresh yeah we need to save also the user index blade now refresh and we have the user's create route is not defined and users create wrote remove this road and also remove the user set it we don't have this one as well okay and now save come here and refresh and yeah we have all the users so if I open the table plus inside the users we have five users okay and now I want to make this search when you click something here we type something here I'm going to search we I want to remove this button we are immediately what when we type we are going to search because we are working with a laravel and live well so in this case I'm going to add the property in the user class user index class and public property name it search and by default is going to be empty string and in the user index blade here we can add the wire model to bind the search here wire model is going to be search and Save and here I'm going to make a check if the length of the of this search is greater than two first I'm going to add uh users is going to be user Alt and after that if the we have a search I'm going to the users it's going to be user where and we are going to search by username where user name is going to be like this search okay and then to get this search so we need that save and and now we need to add the users here and now save and come here refresh and if you type here with uh nothing happened because we don't have the Live Wire in this case in this blade so if I open the main blade PHP and here we don't have the Live Wire so we need to add it here and I'm going to add the name where styles and also the Live Wire Scripts and if I open the app blade PHP so we have the Styles this is like this and yeah and I will add the models because we are going to work with models copy this and add it here okay hit save and close this one and refresh now so if we put something here you see here we updated the the users and if you if I open the network when we type here we we make a request okay and if I type a gender copy this pass it here we have a John Doe here okay I'm going to add one more thing here so if you go to the documentation the get bootstrap you can add The Spinners and here we have spin I need to copy this one and here I'm going to remove the search button and I'm going to add this one okay refresh and yeah we have this spinner but I want to show this only if we are if we make a request and for that if you go to the Live Wire and here we have the loading state we make her or loading the other wire loading and so I will add it here and if I save and come here and refresh nothing happened if I type something yeah you see uh Maybe I'm going to slow 3G and now I'm going to make a request and now we have the loading State here okay what we can do uh so we can remove if we want if I refresh and what we want to remove I'm going to remove the this one if if we don't think yeah I want to remove all the table so we can do wire loading remove and we when we have the table here and this hit save and refresh now open the inspect element Network and change this to slow 3G okay it's something and we remove the table now we show the table we can remove the table and uh don't show the if we don't have a user but I'm going to leave this and I'm going to add it not for each but for else and for us not for else or else user as user and or else here and here if is empty I'm going to hmm display no results okay save and refresh okay so here we have uh and yeah we added no results here and now I think we are done with this video so we display the users we add the search and if you go to the laravel laravel in the GitHub you have this in the repositories so I have added this yeah you have another live where employee management name and this is our repository so I'm going to add now open the terminal and git add hit commit and I'm going to do is uh user index table okay get push everything okay refresh and yeah fix the user index table okay friends hope you enjoy and see you in the next one all the best bye bye hello my friends welcome again in this video I'm going to work with a create method we are going to create a new user and for that I'm going to work with a bootstrap model so go to the get bootstrap documentation and select the version 6. components model and here we have example model I'm going to copy this one so copy this model and open the user index blade and I'm going to add it in the end here is a card header is the card I'm going to add it just here and the button I'm going to add it when we have the create here and change the text here to be new user for example save and refresh now okay now we have new user if I click we show the model okay go to the GitHub and here we have laravel employees management Repository go and find the resources views users and create plate and I need to copy the form so copy the form here okay copy that and in the model body I'm going to add it the form just remove the button we don't need the button here because we have the button in the model footer so here store user and we have a form remove this also remove the csrf token and Save go here refresh new user and we have the user name first name last name email and password okay now I need to open the user index class and this I'm going to open in the right and here we need to add the properties for the four so we have username the first name last name email and password okay and now I'll use the index blade when we have form we have a username value and I'm going to change this to be wire model for the username and I'm going to remove that one Focus autocomplete and so on and also the hold and here we have a first name change the first name to B first name like this like like we have in the user index and also remove the all of that internet we need only the wire model wire model the same thing for the last name last name and email wire model for the email and for the password it's a wire model password okay save and now I when I click the button I want to call the method in our user index class and for that I'm going to use wire click event and it's going to turn on the store user method okay save this and go here and create that method store user we don't need parameters here and here first if you go to the level Live Wire I want to make a validation and here is how we can create a make a validation add the rules and before the encoded okay so I'm going to copy that and here past we have username email and username is going to be required copy and paste we have a first name last name also the email and the password okay I remove this one now here we can do is this dot validate and after that the user create and user name sorry username like this is going to be dollar sign this username and copy and paste this is going to be the first name okay last name email and password but password is going to be cut this and hash make and the value here is this password okay after that I'm going to do this reset it's going to reset all the fields and what happened oh yeah I just assign we need to do like this save and go to the dashboard to refresh new user I'm going to work with fake filler and we don't store the user just yeah we make a request for every key we passed here so if we go here and properties we have a lazy lazy updating so why more than lazy or why more attentive differ and I'm good copy this and add it or properties here where we have wire model differ okay save and come here refresh new user fake Fielder nothing happened store user and we don't store any user and why is that happen so we have rules for the username first name yeah user create is going to be user name like this and last name like this save refresh again new user regular store refresh again nothing happened okay password email username first name store user wire click wire click store user and why it's not story data this email list and where is the problem headers message preview the last name field is required email data so yeah why we don't have the last name field last name username and last name because we don't add the wire model here or a model Dot defer save and refresh store new user fake killer store user and we have a new user but the problem is we don't close the model so if I install new user click filler store user and yeah we have the user pathway don't close the modeling for that I'm going to work with a if you search for browser this passing browser events and here we can do copy this go to the store user method add the browser event and give it a name I'm going to give your name close model just close mode and not anything else save and now in the JavaScript copy this and open the mindblade.php which is the oh default layout add the name here so close model and I know I don't want to alert but I want if you go to the bootstrap and options we have the option to hide yeah we have this hide the model copy this one and paste it here and if you go here what is what we have a model name and this is example model just copy this and paste it here save and refresh new use sorry new user fake Fielder store user and now we could close the model okay this is how we can start a new user with laravel Livewire and bootstrap for in the next video I'm going to work with edit and delete users all the best friends see you in the next one thank you very much for supporting me hello my friends welcome again we are in the user management index page here we show all the users we can search and we can create new user now it's time to edit and delete the user I have opened the vs code here I have the user index blade level component and here they use index class Live Wire so now when I click the edit I want to show a model with a user additions and after that we can so here we can show the user with the username and also all the fields and here we can uh update the user the same thing but just the update button okay now when we have the edit button here we have a link that I'm going to change this to be button and I'm going to add the wire click and it's going to be edit or better show edit model and I'm going to add the user sorry like this user ID okay copy this save first copy and come here and create that method so method with that name show edit mode and here we expect the ID and now what we can do here first I'm going to do this reset reset all the fields we have and now we need the find the user first find user after we can instantiate these fields with the user fields so I'm going to call it Lord user and we need the show the model okay so first I'm going to create a new property here public user ID and here I'm just going to do this user ID is going to be with this ID we have here and I'm not going to load the user here I'm going to create a new method load user and here I'm going to say user find this user ID and with that this username is going to be first I'm going to say the user is going to be with that user and now user username like this and just copy and paste and change this sorry change this to first name but here we need that now here we need to add that first name like this and last name we need to change this to be last name like this and the email also the password okay now we're not I'm building the password so just that because the password we are going to create another one for updating the password so load user and now we can go over here of this load user like this and we need to show the model and we are going to do the same thing we close the model here so copy this dispatch browser event and now I'm going to say show model instead of close show model OKAY save and come here copy this and paste and instead of close model change this to be show model and the same model we have just change this to show okay save you can find this in the documentation of bootstrap models options and here is for the show and here is for the height we use that now it's time to use the show the shot but and if you go and refresh that so we save this and this as well and this as well Okay click edit and we edit the visual the username and all of that but we have the password field here for that I'm going to hide and we need a property for edit and it's going to be false by default and when we show this so I did I'm going to say this edit mode true and here when you have a form here we have a form when we have the password okay I'm going to make if we don't have the edit mode show this save and refresh defined constant edit mode edit mode so if not dollar sign edit mode save sorry friends for that and edit and now it's show and hide the password okay now it's time to when if we have edit mode I want to show button update user so change this update and this is going to be update user like this and also here we can we need to make a check so if if we have the dollar sign edit mode cut this and paste it here else we can show this one save refresh edit and now we have update user clauses new user and we have update user and why is that because we need where we have a show edit model we need to reset all the fields when you hit this class close button we need that uh so when you close that button we need to clear all the fields and what we can do is have The Wire click and this is going to be clause model and come here create that method close model and we can close the model by dispatching this event and after that we can do this dot reset to reset all the fields and come here refresh edit we have close new user and we don't why we don't reset all the fields because we don't save this one okay refresh again edit loss new user and we have a new user okay now it's time to update a user so when we hit click the update user come here and create a method for the update user I don't need the params here we can do is find the user first so I'm going to copy what we have here and first I'm going to do this or the last sign validated is going to be less than this validate and it's going to validator fields and here we have the rules copy that and add it when we have it here just remove the password because we don't need the password Here save and uh right here we find the user and we are going to update the user so user update and add the validated Fields here and after that this reset and also this positive model for closed model and Save and we are going to check if we update the user's edit outside update update user and we have update the user we close the motor and everything is okay in the next video I'm going to do the at the delete user and also show a message here for the create new user update and delete the user okay my friends hope you enjoy and see you in the next one all the best friends hello my friends welcome again so here we are in the dartboard and we need to go to the users here we display all the users and now I want we can create new user we can search by the username yeah now we can edit I want to show the message here the user has been the user successfully edited and updated and the user successfully created and another one for the deleted and we I want to add the button here to delete it the user so if I go here to the vs code user index and you see here we have this if we have a session which has a message we alert alert success and we display the message now we're going to add the new button here to delete the user and here we have for edit I'm just going to copy this one and paste and this is going to be not show edit model but uh delete user and we need the user ID here this is going to be delete and it's not going to be so BTN success but BTN Danger save and refresh here and of course we have this delete button now when we click this we triggered this delete delete user method copy this one and open the user index class I'm going to open this in the right so here is the blade and here is a glass and I'm going to do in the end sorry method give you the name we expect the ID and here what we can do is first we find the user I'll copy this one and paste it here but change this to B the ID we passed here and now user delete and we need to add the session and you can find all of that in your in the the level Live Wire and I think I have created a video in this channel for for the laravel Livewire message flash message you have here and all you need to do is add this a session Flash and give it the name and a server message okay so session Flash and the name in our case is the same thing as it here method so if we want to change this one for example uh user message we can do the same thing here user method and we need to give the for example the user deleted user successfully deleted successfully deleted and save go here and refresh and delete this user with id34 delete and we delete it but we don't display the don't see the message here and this because we don't save in user index blade so refresh again and now delete the user with id35 and we don't have the message yeah sorry friends we need to have the same thing here save again refresh and delete and now user successfully deleted okay I'm going to do the same thing for the updated and created so copy this one here we have the update user and after we dispatch the browser then with close model we add the session user updated change this one and when we have the created store new user add this one and I'll change this to be created user successfully created okay save come here refresh edit update user and now user successfully updated new user test user1 and test test .com and type some password store new user and here we have user successfully created okay friends so now we can uh delete edit and create and search if you go to the get no sorry GitHub I'm going to add the GitHub so git add and git commit users cloud finish it okay git push okay now go to the laravel not available and my repositories Live Wire employee management and here we have the user cut finisher okay friends hope you enjoy and the next video we are going to work with the system management for Country state department and City and the last one for the employee management all the best and see you in the next videos thank you very much hello my friends welcome again so we are done with a user management we can search we can create new user uh display all the users edit and delete and I have forgot to add the imagination here is not a big deal but I'm going to show you so if you go to the Live Wire documentation here we have the pagination and what we can do is just add this one to the class so if I open the user index class go and pass that one here import the user with designation we need to import and Save before that we need to add pagination here to query so but you need by five for example and also here by five save and come here and the refresh and now we display only five users if you go to the user index bleed and add it after the table I'm going to add a div and I'm going to display the users links like this save refresh and we have pagination here but the problem is not with bootstrap because in the laravel eight the default view is with a Thailand CSS and if you go to the if you go to the a lot of head documentation pagination and you can see he's with Italian CSS by default if you go to use if you want to use a bootstrap by default views rendering to display the imagination leaks are compatible with the Italian CSS if you want you cannot vendor publish you can run this command and it's going to render the imagination copy that and pass in the terminal and run enter I have done that so if you want a bootstrap you can copy this line and add it to the app service provider okay so open the app service provider and add it in the boot import the paginator and Save and now if you go to the user index blade we can do pagination booster 4 save and refresh and now we have a bootstrap for pagination like this okay just added here and make a change here go to that is for this users now I'm going to work with a country for that I'm going to open the terminal and make a live wire component for the country so artisan make Live Wire and I'm going to add it in the country folder name it country index enter and close this one also close the app service provider I'm going to copy all the users index split copy and closed also close the user index also close the user index class and open the country index blade and pass it here now I'm going to remove this we don't need this ask me also in the user index so if I open the user index blade sorry user index blade and what we copied yeah we don't need that in the form because we search by the wire model so remove and close this one we need a property search in the country class so if I open a country index class and I'm going to open this one in the right okay so we need a property for the search and it's going to be an empty string by default and this is for this y model here and we have an example model okay we have users we need that we need the countries here and for now I'm going to add countries like this country all just for now uh and now here in the user index blade we can remove that and remove all the users where we have user and changes to country okay in the model we have changed this to be with capital and also here with capital and countries like this okay we have country code and the name also here change the B count releving like these countries we are country d country code we have the name and okay we can add imagination by four five we need that to create this method copy that and create new method with that name for now just don't do anything also we need a delete country method copy and create that method and we expect an ID here also here show model edit react ID so ID okay what we have what else we have and now we have a property for the Country and in the country we have only the code and the country code and the name so those are signed country code code and dollar sign name sorry public dollar sign name and here now we can add what we have a country name select and change the country code here we can say country code like this and copy this and paste it here and so we have the country code and the name select all that and add name here also remove the first just because we need only the name so that this last name we don't need email we don't need and the password we don't need okay that's it here we have a closed model method I'm going to create that method for close model a method for update country copy and create that method for update country and method for store country copy and I'm going to add it here sorry method and give it a name and we have the edit mode also here we need to add the public dollar sign edit mode is going to be false by default and I think this so if I save here and save here as well we need to go to the web PHP and register the road for the countries copy and paste the users and change users to the countries and also the user indexed country index okay save that close and open the main blade PHP and we have when we have country here at the road road for the countries index save come here refresh and go to the country and we have some close this and here we have a country code and I'm going to search for the countries yeah here we need to change this B countries like this save and refresh and we have a countries but we have the default level uh layout so we need that in a country index here we need to add the layout is going to be layouts.9 save and refresh and now we have this one we don't have any country so we need to change this one country code here so go to the yeah changed country code like this and also in the method in the form when we have a country code select all we need that country code like this and save come here and refresh and yeah we have a country code and new country and we have here we have country code the name close we didn't close because we don't dispatch the event but I want to show you something so if I open the main blade PHP I'm going to close the index because this is going to be for this video just I'm going to show you something what I'm going to do in the next one so here we have an event we are listening for the event close model and we are going to hide the model on the example model and here we are listening for the show model event and we're going to show the model the example model and this is for the users so now we need to work with a countries so here let's mean we need to create the same thing for the countries and we have a state we have a department a city we have the employee management so that means we are going to create too many of repeat code and I don't want that and also someone commented on me how we can uh close multiple models with booster models with laravel liveware and that's all I'm going to do in the next one next video so we are going to remove that and uh if you've got a live wire and search for the dispatch event browser events so here we have the name of the event and we can add properties and we can listen for the event and here is the property new name and here we can add the property in your name with that we can close the model and don't show that hard-coded name here and what to do here okay that's it for this video if you if you like subscribe to my channel like the video and see you in the next one all the best all the best hello my friends welcome again so we are in the mind dashboard and in the user management we have done all of that thing if I open the vs code and open the user index blade here we have and we have this model here which is which has the ID of example model when we click this example model here this button will show the model and we close the model when we with that right click and delete user no sorry when I click here in the model we have close where it is yeah widely plus model and if I open the user index class so you have a closed model which is dispatch browser event close model and in the main blade we have this listen for the event class model and what we do is Define the example model which is in user index the ID of the model and with that we hide and with the same thing for the show model we'll listen for the show model event and we'll Define the example model and we show that okay but now for example here in the country I have created two countries just to show you here uh we can do the same thing I want to display the country here display the model and when you close I want to close the model and for that I want to copy and paste that or just add the examples model in the in the country index blade and the same thing for the state department and City and I have a comment in the YouTube channel and he asked me how he can show and hide multiple models with a live wire and I'm going to do this in this video so we don't need that uh copy and paste for every uh crowd we have so for Country State Department City and so on I'm going to make some changes here and leave only that if you go to the level Live Wire and here we have the dispatch browser event and we have a name and also we can add properties here and I'm going to open the user index in the right so here we have in the left and what I'm going to do the first thing is yeah with this passive browser event for closed model and with that we just listen here and we hard coded the name and what to do so if we change the name the ID of the model we need to change it here and what to do we need to change it here okay and so on for the show model we are going to do more Dynamic now so I'm going to change the name first I'm going to be action model or just model the event and I'm going to give it a property for the name so model name model name is going to be in this case I'm going to give it a with hash and user model user model and also I'm going to give it another property for the action action model [Music] and this is going to be height okay so we add an event with two properties and we need at least after that event so first we need to change this to be modal which is the event edit here and if you go to the level documented level documentation oh this is how we can display the property name event detail and name of the property we added in this case for the ID we added the model name or we can be more specific model ID but it's okay I think or model ID and here what we can do is just add the event Dot uh sorry detail Dot model ID model ID like this and for the height we add the action model so event dot detail Dot model action model sorry action model and if you save and cities for the show for the height okay so I'm going to copy this when we have the hide model closed model place it here close mode and again here and yeah I'm going to do the same thing with the show model when we have show model here but in this case I'm going to change this to be show only that one and so so model we don't have any other yeah save the user index class we need to remove that we have only one save come here I refresh go to the user sorry and click that new user we display the mobile hit that close and we don't close the model so we have some problems here refresh edit we don't show here and user index main blade mod user index and yeah we need to change the example the ID we give the idea user model copy this and select all the example model and change with the user model OKAY save that refresh and new user close and we close it edit close we close it edit the user remove that and change the updated user and yeah we update the user and we close the model everything works perfectly perfectly we don't add more but we remove one so we had only one and is more than a dynamic and we can show any we can we can close the model uh one more thing I want to do is yeah here we are in the user and in the user index we have a button for the new user and for now we'll work with a bootstrap so yeah at the data toggle model and data Target user model we can do one more thing here and I'm going to change this to be wire click event and it's going to uh show user model click this save event and we have we don't have that I'm going to create that method method show user model and what I want to do with that reset all the fields we have and so copy this one and pass it here save so when you click the new user we execute this method show you the model and we reset all the fields and we dispatch the browser event with model ID and the action what that is sure okay come here refresh click user and we show the user the model sorry and height again height that's it how we can use with a multiple bootstrap models with a laravel and live wire so just show close edit you can update or close the model and that's it for this video hope you enjoy and see you in the next one so if you're in the country we are going to do the same thing so come here when we have the close this also this one just copy this and close and open the country index we have a show edit model and close model here we can add dollar sign this release reset and we can hide the model I'm going to create a new one for the like in the user method uh show country model we don't have a parameters here and hear the same thing this reset because we don't want any Fields here this is going to be show Save open the country index blade and one more thing going to change here the user model the model ID so it's like this is going to be country model okay save and the country index now we can do the same thing here remove that and here we can add the wire click click and show country model okay Henry select all the example models and change the country model like this save Yeah country wanted and come here refresh click new country with displayed model close edit and why is not working because the edit model yeah we don't have that one but this button is working and close again hope you enjoyed this video see you in the next one with we're going to work with the create edit and delete uh countries all the best friends hello my friends welcome again so in the previous video we fixed the problem with a models not the problem but we made it made it dynamically so in the main blade We only listen for one event from the live wire and we added the model ID and the action model detail event okay for that now we can use for every model we have in the in our crafts okay now it's time to go to the country and work create new country edit and delete the country okay open the country index and also the country index blade and this class I'm going to open in the right as always so here we have a model and the model has the model title model type is going to be uh create country like this and Save refresh yeah create country we have a country code and a name uh country code yeah and the name the third name for the name here edit mode to false when you show a deep form I'm going to yeah copy this one and pass it here and I'm going to do the same thing I have done with the user index so I did my reset we changed the edit mode through and we need that here the same thing uh public and the country [Music] ID is going to be so when we show the edit form here we reset of the thing we change them edit mode through and we assign the ID with ID we have here and we need to create a new method for the load country okay so come here and create that method method load countries okay so here what I said we need to do a list Dot country ID is going to be with the ID we have and after that we need to call this a lot countries yeah and you need to change the edit mode through because we have to fall so that countries and this edit mode is going to be true and save and if you go here in the refresh click edit and now we display the but what I said here yeah so if the edit mode if we have it mode this is going to be copy paste this is going to be edit Country and you can add else and after that cut this and paste it here okay save come here refresh uh create new country yeah create country edit and now we have edit account good [Music] you need to load the country and we find by the ID the country and after that we assign the properties so the same thing I'm going to I'm going to do here dollar sign country is going to be country and this country ID and after that the this Dot country code is going to be with the country code like this and don't assign this dot name is going to be the country name okay so if I save here and come here refresh I did and we have the country code and name good now I want to create a new country so when we create a new country we we call the Star Country here in the star country is here and we are going to do the same thing here what we did with the users so we validate first and after that we create the model create and we dispatch event and session flash message okay so copy the rules go here and at the beginning but we have only the country code required and the name is going to be required and if you want more specific validation you can do that but for me I'm going to do just for a quick to show you very quick documentation validation when we have yeah we have validation here and you can add the minimum of characters and all of that you want you have in the level documentation also I want to show you here you can add the real-time validation you add the rules and you create this updated in the property name and for any time you pass a key here it's going to be validated okay I'm going to leave like this it's okay for me so the rules and when we store a country first we need to do is validate the fields and after that [Music] country create and it's going to create the country code is going to be this country code okay and the name is going to be this name and after that really spec no reset and dispatch the sub copy that and pass it here the same thing reset all the fields and we hide the motor with dispatcher browser event to hide the model and also add the session for the not user I'm going to change this to be uh country also here we need to change the ID of the model the big country model because we have country model here where it is yeah okay country model and now here again change the this to be country okay so if I save and here we need to change the if session has continuous message yeah that's okay come here and refresh create new country and I have opened this country code here first for example the Armenia has a name and the code am pass a name here store country and we have a mass assignment if I open the country model we need other protected fillable and we have the country [Music] code and the name save come here refresh a new country [Music] and Armenia has the am that's okay store country Yeah country successfully created we have the country here and we close the model okay now I want to edit the model if I hit that nothing happened so close the model in the user index when we have a show edit model first yeah we show the edit but in the update we validated and we update with the validator to the same thing with what we did with uh created so update the country come here and the value dated is going to be those assigned this validate and it's going to validate the country code to be required and the name to be required as well okay and after that we need update country so when we have the update country we have the ID if I have edit mode update country so first I'm going to do the same thing we did with a that countries I'll copy this one and paste it here and now dollar sign country update the validated fields and after that we just reset dispatch event for to close the model and we had we flash a message a country successfully updated okay save come here and the refresh edit and Armenia you update the country yeah content successfully updated we close the model and we update the name good now the other thing I want is to delete the country and I think we have a delete Model here we are going to do the same thing we just find the user here and we delete and we add the flash message so here we have a country and find a country by ID okay dollar sign country delete and copy the message here and here we need to add dollar sign country is going to be with that country and Country successfully deleted save come here refresh and if I delete this yeah we continue successfully deleted if I search yeah we don't have a search here and why that we have a search up there okay I'm going to do the same thing as we did it here copy this one and pass it here you need a country not a user and also countries here and also dollar sign countries which can be the same thing as we have here and if we have a search with a greater than two characters we search by the name by five and here now we can add the countries like so save come here refresh okay search for the Albania yeah close United Kingdom okay this is for the country in the next video we are going to work with the state and hope you enjoy and see you in the next one all the best friends thank you very much hello my friends welcome again so here we are in the dashboard and we have created the user craft a display of the user research and we work with the country in the previous video we can create new content delete and also search the country in this video I'm going to work with a state and here is the documentation for what we want to build so we have a system management country state city and Department user and the employee Management in the end okay and I need to add the role and permission but in the last videos because I start with the country now and I want to finish that the system management okay friends so here I'm going to open the vs code and first I need to open the terminal and I'm going to create a live wire component State and State index okay going to create the same thing we created for the country okay close this one and now open the state index blade and also the state index Plus and the state index class I'm going to open it in the right as always and in the state index bleeding I'm going to copy what we have in the country index blade okay select all here copy close this one now and come here and paste all of that okay now I'm going to open the country index class and I'm going to copy what we have here yeah [Music] yeah before the render copy that and also pass it here and I'm going to copy the this one as well and pass it here okay close the counter index and now we need to make some changes I just make a copy paste to be more quick video so here we have a search we need the search and also we have a search here okay next thing is we don't need the country code because if I open the table Plus in the state we need country ID in the name so change this to B country ID good and we have a two count ID here in is a state ID now okay we have a name and edit mode and data decode also here we need to change this to B count three ID required okay so edit model and this state ID now here state ID is going to be this ID and edit mode change this to be load so I'm going to select another one and load States good dispatch browser event with a model and model ID which is going to be the State model okay good now let's state B State and here State model import that and find this state ID okay and now this uh country ID is going to be with with this state country ID and now a state name this name is a state name okay also here we need to change this and I'm going to select sorry I want to select this one and change the p State sorry not four but the last sign State and this it's going to be state as well change this to the state as well and also here now show State model good dispatch relevant and also here we need to change select all that country and change to be the last hash and State model good here we have a star change this will be Star State good and disvalidate because it's going to validate rules here and after that we need the state create and country ID so 80 is going to be this country ID and the name this name are good also change this to B f state and this one okay uh here now we need update State and the ID here also here we need to add this the last sign State and this is going to be State as well and it's going to update the state and State message with a State successfully updated good and now the last one we have here dollar sign States and state here and also State here and we need that States dollar sign States okay and the last thing we need to add the layout this is going to be the layouts .mine and save this one now here we are okay in this instate index blade we need to make some changes first here changes to be States also the country here to be State message we have a search wire model for search okay that's okay and here we change the new date and also here show State model when we have a shows yeah sure State model okay okay well let me move here just add the country and now here we need that States and change this to be state state ID and here country and name okay and I have created the relationship with country and states so if I open the model State model and I add the fillable here you can add it there and also I have created this country method which is the this belongs to Country class and the same thing in the country model I have created this States and return this has many states okay for that we can do this this state country and the name and now here we have a show edit model and delete delete a state okay and when you have delete country change this would be delete State as well and yeah delete state and state successfully deleted good show edit model yeah so I didn't want that here that states that states I did not true okay okay and I think we are good we have this to be States okay uh also the country model we need to change this to be State model okay State model good edit State and create state and here we have country code we don't need the country code we have a country ID country ID here and the name of the country ID we have a term select so if you come here and go to the bootstrap and here we have a select menu go to the forms and in the right we have select where is the select horizontal for [Music] width okay yeah here we have a select menu and I'm going to copy this one just to show you first so we don't need that input but we need the select and the value this is going to be wire more than the far country ID so cut it cut it here and paste here and we need some we need countries here for that we can do uh two methods first we can do here for each Okay so like this for each and country all sorry country all like this as a country and just go cut this one and paste it here and the value is going to be the country d okay and here we display the country name okay remove that and also we remove the input we have the name for the name good and if we have a edit mode right click close model update country update State and store state okay save uh we need to save us this one as well and come here sorry open the webphp web PHP and copy the countries and paste it here change this to B States and here to be States and here to be a state index save import the state index okay and now one more thing open the main blade PHP here and here we have a rule for the state Okay add the road and these State index okay say that come here and refresh everything okay we have in we are in the countries go to the state and we have a class country not found yes what do I yeah sorry fans when the state index late I have made a mistake when for each when we have for it here for it up models and Country like this okay refresh and here we are in the state new state and we have a country okay and we can give it a name for example uh London good store country we have here we're going to change this and Define variable country in the state index we have a country where we have a country here so if I search for the country and here country search again right click not country ID but state ID so here we hit that State and also here the state yeah save come here refresh and we have successfully stayed successfully created and we display it here the country name and state name okay edit and here we edit the London update and also called the member function on node or we have this one update no what state create and this state update the estate find counted not country ID my mistake okay state ID when you have the update this one is need to be a state ID friends okay refresh and edit London update update and stay successfully updated and we have the name London up okay but we need to change the buttons here yeah State and also here this state save come here refresh create new state and problem I'm going to change the Rana store state and why we don't store the states on your state I have not selected I need to select this one they run and store State yeah why are you done wire click Star State and the quantity this country D is set not done and session Plus and the wise happened that one so new state if select opinion now and Tiana Star State yeah State successfully created we get the state we close the model edit Tirana and updated update state yeah and yes but when you create we if we check it for Albania and we leave it to that we have a problem so in the state index we need to go to the select and then copy the option and first we need that here without selected and here choose like this refresh and new state and here why we have like that option select that and seven save come here and refresh new state and we have why we have tools here we have option yeah sorry friends cut this and we need to add it after that okay save in the refresh now new state now we have not disabled we need to leave it like this refresh instead and choose choose Albania uh country for a state from benia which is uh store State and yeah now we have successfully done that another one we need is the delete so if I delete here yeah we deleted and successfully deleted and the search for the by the name is first open here and yeah another name so if I search for the London yeah we have London here so we make uh in one video the state card hope you enjoy friends and see you in the next one which is the department and the City all the best friends hello my friends welcome again so here we are in the countries in system management we at the state in the previous video and I may I make a pause because for some days because I had the personal problems so here we are now I'm going to work with the city in this video okay and open the I'm going to open the vs code here I'm going to open the terminal and artisan make Livewire and here I'm going to create a City Dot CD index okay close this one and here we have a city index and I'm going to open the state index and the city index why I'm going to open onto the site yeah here we have the state and the city and I'm going to copy all what we have here because it because it's going to be almost the same so copy here and paste it here okay we have a search we have not County ID but the state ID and we have a name edit mode and also the city ID I'm going to open the table Plus okay and and play Live Wire open cities you have state ID and the name okay now here again we need to add the state ID change this one to state ID required required show edit model this uh is going to be City ID and not load States but large cities like this and this pass mode [Music] browser event model ID is going to be when I'm going to change the name to B City model okay and here not dollar sign state but uh City just here you need to change this to be state like this okay and here select all the all the state models like this and change the B City we need to import that okay and this state ID is going to be with CD state ID and if we need to open the date model and here we have method for the country relationship and I'm going to create one more for the cities and remove this and here editor dollar sign of this has many City class okay save a close and open the City model sorry open the city model and here first I'm going to add the properties here protected key level and we have the name and the state ID okay and the method for a relationship with the state and return those assign this belong to other State class save and close this one okay now here we have a change this a bit delete City okay and ctct find the ID by D and delete the city and also here City and here city as well show CD model reset and this pass the meant to do the same thing here so select all that and change that City so now we are okay here we have a show City model closed model and store City not state store City like this and we have a validation for the state ID date ID here CT create state ID and the name and we dispatch the browser event I'm going to add the sitting as such also here state ID to update the City and I make us here this state ID CT find this city ID here and City update the validated field so state ID and the name and we reset everything and we dispatch browser event okay City successfully updated and City successfully created okay validate state ID state ID okay one more thing I'm going to copy that this one and pass it here that change this to be dollar sign cities and here also City model and also here we are named like research and we need to add it here see this dollar sign is like this and also add the layout copy this one and paste it here and now everything is okay for the city index close this and open the City index blade and also open the date index blade and I'm going to copy all of that and paste it to the city and we need to make some changes here first change this to B cities and alert for the City message okay why model search yes that's okay show City model and new City we have ID and state okay this is going to be dollar sign cities and say state is going to be uh City okay this is going to be state city state name and show edit model City ID and delete with capital city we added the cdad okay okay here we need that okay the cities good no State model level not State model but uh City City model yeah and not at its state but I did City and create City okay not country code but uh State here and for his app models state as the state and here for the state ID we have an error message or the name update City and also update City here and start City and also the city here and I think we are done save and go to the browser refresh one more thing I forget go to the web routes here and copy the states paste it here change this to be cities and City index okay remove that import and also change this to be CDs index save close this one and open the Mind blade PHP inside the layouts when we have a city here and I'm going to cut it I'm going to add here copy and paste and change this to be cities okay save come here refresh go to State Management City and now we have cities here New City choose London and test here Star City property content is not found and why we why is that okay close this mine we don't need this open the no here we have a city index if session has City message okay okay wire model for the state ID save and close this one refresh you'll see the select test Star City and now state ID if you list in cities why open we have States ID not state ID okay why we have that States but not state and we need to open the cities table and we need to remove this to be State not States save and open the terminal and I'm going to Artisan migrate migrate fresh I want to delete all of what we have and the refresh now we need to go to the register page because we don't have any one here and fake healer alright is there not now country new country code and the name is going to be United Kingdom okay go to the state now and new state choose London store go to the cities New City London test Star City and now successfully created new one test number one Star City yeah edit update the city and yeah we updated but we don't show the for the message when we update the CTN if I open the City index plus here update update City model and we have here change this to be City message okay save and refresh test again update City and now we have update City delete and we delete it but we don't show the message again when we have the delete delete and I make a mistake here refresh delete and now City successfully deleted okay new one choose London give it a name test new one give it a name I'm going to leave it London again that's just test the search and if you search for the London yeah we have done that edit update and yeah okay friends that's it for this video hope you enjoy and see you in the next one which is department and the last one we will be the employee management all the best hello my friends welcome again in this video I'm going to work with a department we have a create for a card for Country state and city now it's time to work with a department I have opened the vs code here and I'm going to open the terminal as always and create a live wire component so artisan make liveware and Department Department index I have created this okay and here we have other department and Department index I'm going to open the city index blade as well and copy what we have here and paste the department index okay and now we need to make some changes so first change the here to be the apartments and also Department here like this and wire model Source you can add lazy here on every uh so in the city the country department and State if you want you will add lazy and or just leave it like this new Department while loading remove and if I open the table plus I think in that department we have only the name okay open the employee liveware open s yeah we have only the name so remove the state here we have the ID name and manage here we need at the Departments and select all of that with change with Department remove this we don't need that and while click show edit model also at the department ID and edit also the same thing and delete the apartment no results here that part departments okay um and uh change this to be yeah Department model edit mode edit department and create Department okay we don't need the this diff remove that we need only for the name and while different name okay those model update Department and store Department okay and that's it save and open the City index class and I'm going to copy what we have here because it's going to be almost the same and I'm going to open also the department index and paste here so we have us not state ID only the name edit mode and here the department ID got rules we have only for the name show edit model ID and this department ID so you need the other department ID I'm going to copy this because maybe we need another so Department ID here lot Department select this and also the other one and load Department sorry here Lord Department okay uh what we have we have a city not City model but the apartment modal okay and here DOTA science City change this to be the department okay and also select all the city models and other department model and import the department here cool so this and if we have some kind of path select yeah and this department ID okay okay here we are good now we don't need that we need only the name Lord Department and delete Department find ID and delete and after that we added Department message with a Department successfully deleted and you see me I repeat the same thing for the uh State CTN Department so I think you understand now this because if you are not understand with what I did with the country I repeat with a state and I repeat with a city and I now I'm going to repeat what again with the department so this is very good to understand you how this is work it's working so here are the partners successfully deleted okay and now shows it showed Department model okay and reset everything and I'm going to select on the city model and change to be Department model like this okay so we delete the department show Department model close Moda and now not store City but store Department and this validate we are calling the validate to validate the name here and Department create just the name and I need to open the Department model because I want that on the field label here protected feed level and is going to be only the name save close and okay reset show browser model height and here Department and also Department successfully created okay remove that in the update Department here and this validated this name required find the department by Department ID we have here and update the validated reset and we need to change this to B department and this will be Department as well okay save uh one or thing we need we need to add this one copy close that and here in the render now select this and be changed dot assign departments and also select this and B Department okay now we need to add it here departments is going to be on the other side departments oh and here I'm going to add the layout which is inside the layout layouts dot meet my and I think we are okay save one more thing open the web PHP inside the roads and copy that change this to B departments and here to be Department index and also here to be departments save close this and open the main blade PHP inside the department do the same thing we did here and change this to be departments like this save come here and refresh and Department index not defined and Department open the web PHP Department my mistake save and refresh and now it's okay click in the Departments at this video Livewire Department index dot layout oh yeah sorry no it's not that it's a Arrow key save refresh and now we have the Departments create new department and show Department Motor not found and yeah update Department Show Department model show Department Motor not found show edit model show Department model like this save and here show Department model yeah refresh new Department then we have so I'm going to say PHP and PHP like this and we have Star City here just try the final variables Department ID yeah I have made a mistake here uh select all of that and changed Department and Save refresh and yeah we have PHP here and Department successfully created again laravel Star City and Department code successfully created I need to change this to be not Star City but so we store Department and the same thing for update save and refresh again start department and view Js store Department yeah edit and I'm going just and we update it successfully updated delete and successfully delete it search for the PHP and yeah go and edit this update and we updated that okay hope you enjoy and see you in the next video friends all the best hello my friends welcome again so in this video we are going to start with the employee management we're done we have done the system management the user management only the user so we need the load and permission but after we finish the employee management I'm going to do with the role in permission it's not a very it's easy it's not difficult difficult so first thing I'm going to open that terminal and here Zoom it did City in the employee liveware and I'm going to upload the vs code okay and here we are in the previous video we made change for the departments and now we need to first open the terminal or come here and make artisan make Live Wire and in this case we need employee Dot employee index okay open the vs code and open the web PHP and here I'm going to copy that and paste it change this to be employee employees and class employee index like this save close this and open the Mind blade PHP and when we have employee management here we need to add the roads sorry Road and there are these employee index like this save from here and refresh go to the employee index and yeah we have here but we have the default app layout we need to change this in the employee index class here we need that layout and this layout so that mine save and area patch here and now we have the mind diode okay we need to display all the employee here and it's going to be the same thing with the others with others like country I'm going to copy that one when we have a State index select all and copy and close this one and open the employee index blade and paste it here then first I'm going to change the Title Here employees and here as well employee message wire search y model for the search and show State model and if I open the table plus here okay employee liveware open now in the employees we have the last name first name middle name address Department ID country ID state ID City and zip code birth date and date hired I want to show the first name I want to show the apartment name and the ZIP code or per date we're going to see so first last first name the address and Department come here and here we have first name here I'm going to show the Department copy this and paste a country one more for the uh uh date hired I'm going to add it here this one okay sorry date higher okay and now this one we need to change with the employee okay employees employee ID employee country name and employee first name like this and show edit model and delete employee like like this we added the employee ID okay we have the employee country and the name so we need the relationship with uh employee and Country so open the employee model and we don't have anything here first we need to add the fillable here protected dollar sign fee level and it's going to be an array with our fields which are last name first name it name so last name first name middle name we have address Department ID address Department ID country ID state ID and City ZIP code City ID and here you make a mistake here ctad zip code birth date and date hired case ctd zip code birth date and date hired okay this one and now we need the relationship with the country with a Department with State and with City so method first I'm going to create for country and return to understand this belong the country class okay another one method for the state and return the same thing this belongs to the state class okay another one for the city and you see here we have a single names country not countries okay for the city we don't need params here and we are going to return the same thing okay return dollar sign this belongs to the city model and now for the Department going to return dollars and this belong to the Department Plus save close this and open the Department model and we need the method for the employees is going to return dollar sign this has many employee class and copy this one save open the country model and paste it here save close open the state model and paste it here save close and open the city model the same thing is it safe and close so we have the relationship done now with country employee country and the name okay just add the employees here good I'm going to change this to B employee model employee model good edit employee the same thing here and I think yeah the same thing here and the same thing here now in the form we have another country code but we need we need the last name first name middle name address department at the country state city and zip code birth date date hired so this is for the name I'm going to cut it and paste it here first and change this to be last name and here we need that last name like this and a wire model is going to be sorry it's going to be last name like this okay uh copy this one and paste it again select all of that and change to the first name so paste it here and change this to be the middle name and here as well middle and here middle name okay so yeah did last name first name middle name we need address one more for the address where we are here okay select all that and change the address also here the address code now we have a country not country code just country here and here we need the with this layer old countries and we add the country ID good copy this one and paste it here just change the country D to B state ID and here to be state okay and one more for the City ID and also here this is for the state so change this to be State and the dollar sign country change to B dollar sign State like this and here we need City ID ctd City and so here we need the City and change this one as well the other side City or City all as a city okay yes so we added the city State and we need the department as well so add it here the department change this to be Department and the country data B the department here ID and ID like this and here the B Department of us the dollar sign Department okay we added the department address state ID we need the zip code for date and date hired so now when we have the risk for the first name copy and we need to paste it here and change the first name to be uh birth date sorry zip code first so zip code like this and I change this to be a zip code another one for the birth date birth date like this okay and another one for the day tired and here the same thing date hired and I'm going to save this okay come here and and go to the employees and we have undefined variable employees because if I go to the employee index we don't add it here so I'm going to copy in the state index what we have here we need to change a lot here but I'm going to copy just for reference and come here and paste it first we have the search that's okay we have a country ID and whether I move first this one and this is going to be the employee ID so not our sign employee ID okay and we start here for the last name like this and copy and paste change this to B first name and we paste it here and this one middle name okay this one is the bin address okay this one is going to be the country ID this one is going to be the state ID state ID like this another one for the City ID another one for the Department ID like this and another one for the zip code ZIP code like this another one for the uh birth date and another one the last one I think is for the date hired and we have our rules for the copy this one paste it here last name required now this is going to be the first name copy and paste it here and copy and paste some so here are the last name first name copy this and paste it here middle name address uh country d state ID Department ID foreign zip code birthday and we have the date hired copy this one and add it here okay now we have the rules we have the show model and I'm going to change all the models to be the employee model like this uh and Dot States we don't have the large states again go to the state index I'm going to copy this one I'm going to add it here not States change this to be employees okay and also change this one to be the employee model and we need to import yes and also here we need to add employees to be dollar sign employees we have here then save go to the browser and refresh and now we have employees here we don't have any we have a search but uh form and button for the new but we have the new state here so if you go to the employee index blade and where is the new change this to be new employees employee save and refresh and now we have new employee we don't have a show employee model we need to make some changes again so employee model so when we simply show and changes to Bistro employee e model with a capital letter save and go to the employee index show employee model save refresh new employee and we have the create employee and here we have the country state City department and all the fields okay friends this is going to be a long video so I'm going to pause it here and create another one for the next day hope you enjoy and see you in the next one all the best friends see you hello my friends welcome again so we have made we displayed all the employees we don't have any now but we can if we have a display here and we created this form now it's time to start employee and if I open the vs code here we have the form uh the table sorry and here we have the button for the new employee I'm going to open this or just type of ways this in the right and the blade in the left so here we have rules we show the edit model and we added the ID we don't have the state ID here we need to add the uh employee ID employee ID here edit mode and you need to change this to be lot employee like this and employee find this employee ID and with that employee is the employee find this employee ID and this country ID is going to be the employee country d and we have the first name and all of that we need that add it here so dollar sign this first name is going to be the employee first name and copy and paste change this to be last name and here last name paste it here is the middle name and here the middle name as well okay this again we have the address and the address here okay we have the account ID which is now I'm going to add the state ID and state ID here okay this again now ctet and here ctad now is the Department ID and I see we don't have here the department ID we forget the department ID is going to be required okay yeah we have a department ID so here change this will be Department ID and also here Department ID okay a zip code for date and date hired so zip code and a zip code like this birth date and uh I need to open the table Plus to see what we the exact name for the build it we have employee library open uh employees character and we have the yeah birth date like this and the last one is the date hired and date hired like this okay now here we have delete State and change this to delete employee simply find ID also we need to change this to be another sign employee so delete employee employee fine the idea delete and change this to be employee message and here employee successfully deleted okay so employee model that's okay close model store now store employee is validated and employee create and I'm going to copy the what we have here and paste it here but instead of this we need to do is double assign this last name and here at least first name and here we need that last name like this first name like this middle name like this address country ID like this state ID like this cpad like this and Department ID like this okay zip code birth date and date hired okay copy this one select all and paste now here is the middle name sorry middle name here is the address okay country d a state ID Department ID okay zip code birth date here and a date hired okay reset this part with the employee message and employee successfully created if I save and go to the browser refresh here new employee and we have I have a fake wheeler here and looks like that I have a error because we fill the search as well so I'm going to save this uh not lazy but what we have here differ so like this and now if I refresh new employee fake healer nothing happened Store employee and store State not found and compound okay and I think we have Star State here right click yes store State not store state but store employee and also update employee save come here refresh new employee fake Fielder Store employee and um correct the value choose or column column Department ID okay why is that Department ID like this refresh again new employee fake Fielder and commentary yeah Store employee we have an incorrected value because we have the date as it is like like this but the we expect like this okay and for that uh I'm going to add here the carbon I'm going to use carbon bars and this birth date and I'm going to format in in the this way okay we need to import the carbon import carbon carbon and the same thing for the date hired okay change this to be a bit hired save go to the browser refresh new employee right wheeler here and choose yeah everything okay Store employee and yeah here we are employee successfully created okay friends this is how we can uh start the employee in the next video I'm going to edit and delete the employee all the best see you in the next video Hello friends welcome again so we made this uh to create a new employee so if I hit on the fake filler and we need to choose here for example and Store employee yeah we successfully created new employee and we have here the first name and uh Department and we don't display in the right way I see here you don't have the first name here and the first name is here and also the department is not here the country is here so we need to fix that open the vs code and I'm going to open the employee index blade okay so we have first name and yeah cut this and paste it here so we have a first name okay now here we need the department name Department and add the name okay we are the country and we need the date hired as well date hired and if I save now come here refresh and yeah here is the first name the department United Kingdom the country and the date hired okay I went up in the employee index class in the right split the right okay and I'm going to see yeah so we can search for example just search for the down and nothing happened because we uh when you have a search we added a defer here so remove that we have this because I had this because for the fake filler here now so if I search for the down and name oh yeah where not name but where first name first name like this search save and refresh here and search for the down and we have it down here edit and Okay so now it's time to work with edit and delete show edit model and this employee I did we assigned with ID we have here and we display the model and load employee first name last name and middle name and here we have a first name middle name yeah enter name and I think if I open the table Plus all right and play that wire open and employees sector last name first name middle name address Department okay so go to the view refresh and why the middle name is not showing here and this middle name we add the employee middle name okay name here middle name okay a second here why that need the name is not there I'm going to fix this and we don't have the middle name for the because maybe we don't store here create with name this middle name and if I open the model the model for the employee maybe we have yeah here we it is save close this and uh create a new now we have an error yeah because we feel the search bar so we need that defer to the search okay and the refresh new employee fake healer choose here and Store employee now this one has the internet okay now I need to update that so when we click the update employee here update employee and the validation that we have validated and I'm going to copy that it was here the same thing is going to be copy that okay and if we find this employee ID and update with a message employee message and employees successfully updated okay so save this and come here refresh I'm going to add the middle name here submit name update employee and employee successfully updated and if I check yeah we don't have the why is that middle name required and that's it because we need the update like this I'm going to paste it and change this to be last name like this okay copy and paste it here okay save call me your refresh and the middle name here me too update employee and we successfully updated and if I edit now yeah we have meeting the second one need two update yeah show the message and now is the meter 2. close now I want to work with the delete when we have the delete method yeah delete employee and we find the employee we delete it and yeah it is everything okay refresh so if I delete this yeah employee deleted delete this employee deleted delete this empty delete it okay now if I create a new one a Fielder and just show you yeah oh yeah need to write the dates here so in the next video I'm going to add dates here tattoos and make this smaller gold okay so now I'm going to add with fake healer but in a little time real life we need to select here for the date we need to have like a calendar here and create a new employee okay so we added the edit and delete and we have ability to search yep so if I search for the in now is we need I need to remove this because for the this extension I added the defer here so if I type something yeah we don't have any results for that but if I type Megan and yeah we have a Megan edit and we can delete cool that's it for this video hope you enjoy and see in the next one for adding the date with the live wire thank you friends all the best hello my friends welcome again so here I have opened the documentation to create the for creating employee email management application and here we have the employee management we display a list of employees with search and filter by employee name and department but I'm not filtering by employee name because I'm going to search by the employee name so we're just going to filter by Department we don't have that so if we are here we just search by the name yeah we don't filter I'm going to figure that and we have a create update and delete employees yeah we can create update and delete but when we have this I want to add the date picker here and for that if you go to the the level Live Wire a screencast and yes I got down here and you have in the custom form inputs here you have a using a date picker pick a date and if you got the in the GitHub is here you just installed or using the CDN it Styles and you can add the because they uh I'm going to use another one which is a flat picker and this is very easy just with the EO the CDN here as well copy the CSS and in the vs code I need to open the Mind blade PHP which is the default or layout and copy the script as well and at the bottom we have a Lego Escape after that I'm going to add the script and usage is just add require flat picker or in my case I'm going to use the with a jQuery because we have a jQuery for the yeah we have a jQuery here and I'm going to create a script here script and add it here this one optional config and we don't have optional config and div with the name selector but I'm going to change this and add ID birth date because we need if I open the employee index blade here we have a form and the form has that address country did differ the part and zip code and yeah we have a birth date and date hired so we need sorry we need two of them a birthday treat ID birth date and we have the ID for date here also I want one more for the date hired date hired save this or we can do like this and Save and uh I think we are okay now if I go here and refresh new employee and yeah we have the ticker go and create and one Store employee yeah we store the employee and we have two caspers here and that's okay if I open the table plus refresh yeah we have a two last name Paul the Casper and so on and here is the birth date and date hired and here's a birthday and they tired and that's if I open the I'm going to close the main blade now we don't need that open the employee index class and this I'm going to open in the right as a always here we have a carbon pairs I'm going to remove that and the here okay also here also here and I'm going to do the same thing in the update okay save and come your refresh again create new one Meyer and choose some random dates and of course yeah we are the same date here date format okay update the Casper and I'm just going to say Casper up update yeah successfully updated refresh and we have a Casper up and have the same or data okay now we fix that the next thing is the at the filter by Department so when we're done select drop down here for the Department and come here and I think we have yeah we have our option for the Department copy this one and go up and here we have a search I'm going to add div class call and wire model remove that and not the department ID but selected Department ID I'm going to call it like this and we need to add it here public dollar sign selected Department ID by default is going to be node and [Music] I'm going to change this to be the same thing as we have here copy and paste save this and the refresh here and yeah we have a choose choose Department okay and so on now here is the thing we have employees if we have a search okay else else if we have uh selected Department ID we need say the employees is going to be employee where foreign ID is this selected Department ID and paginate by five okay save and come here and refresh and here we have two departments for the laravel and three for the PHP lovers if I select PSP lovers yeah we have only three select for laravel and we have two laravel now if I refresh and uh I'm going to search for casparate copy this and paste it here and the that's our with the PHP Network Department I'm going to change this level and nothing happened I want the search by Casper and also by the level by Department name so here what I'm going to do is if we have a search we are we are going to search my first name and also I'm going to check if also we have a this select Department ID sorry uh we are going to do employees is going to be the same thing as we have here but we need sorry we need to add one more Source where statement here and where the department ID is going to be this selected Department ID and else add this so if we have a search and if we have a select the department ID we are going to make this query else we just search by the name hope makes sense for you and yeah save come here refresh here we have all of employees and I'm going to filter by the department okay now I'm going to sell it by this name and this has the laravel department okay I'm going to change the department of PSP lovers and now we don't have any results okay that's it so I think now we are done with that I have a in mind one more uh series to create a project and I'm not sure if I want to add the role in permission you comment in this video if you want a roller permission if you don't want that I'm going to start a new project if you want the roller permission you have in in my channel just for all information with from spotty I have a video for that but if you want again here comment and I'm going to create uncut for the rolling permission with a live wire okay friends hope you enjoy and all the all the best thank you very much

Channel: Code With Tony

Views: 15,167

Keywords: laravel, vuejs, livewire, laravel 8, laravel 9, laravel crud, laravel 8 tutorial, laravel 9 tutorial, laravel livewire tutorial, laravel jetstream livewire tutorial, laravel livewire jetstream, laravel livewire project tutorial, laravel 8 full tutorial, laravel livewire project, laravel livewire setup, laravel tutorial, laravel application, laravel jetstream, laravel jetstream tutorial, laravel livewire, laravel livewire crud modal, laravel livewire crud example

Id: y8ci9knqFS4

Length: 283min 25sec (17005 seconds)

Published: Thu Jul 08 2021