laravel and reactjs project tutorial 2022 Step by step | Full Crud [ Explained with Examples ] 2022

welcome guys welcome to this video in this video we are going to create an employee manager app using react and larwell now we are going to see the concept of the and the basics of react we will see how to create components out of possibilities using props we are going to see laravel and we are going to understand the basics and the usage of larval how we can create roads and control our models as well as we will see how to create wrong model binding and concepts like that so we have this application here where we use the laravel factory to generate the data we will do that too we can view the data in this one we can update the data as well as we can delete the data so when we do anything any of these operations we get nice notification up there we can add here the employee details we also have the debug bar at the bottom we will see the usage of the bug bar with so that it is going to be helpful when you develop your application [Music] all right guys to start with we need to create a larval project so i'm here in the larval website and here are the instructions to install or create a laravel project now here we need to use composer so make sure you have composer installed in your system so here we have windows exe you can download from here if you have mac you can run these commands to install composer make sure you have the php installed in your system if you're using windows you can simply download zamp and basically when you for example if i uh not here if i click here so you can see here we have the 8.1.1 and what it includes it includes php 8.1.1 so this is going to install the php in your system then you can run composer and then you can create a lot more project if you have mac in that case you will you and you don't have php installed you can follow the tutorial from the description uh the link is given there so now first thing first i want to create a project i'm going to copy this command and i'm going to open the powershell so here i will navigate to the desktop so desktop and here i need to create a folder so i'm not going to create a separate folder here because this command is going to do it for us so i'm just going to paste the command and instead of example app we can say here employee this is going to create a project for us we're going to put all the files all the required fonts in there so you can i already have a folder created here so we need to wait till it completes all the dependencies it is installing currently all right so the project is installed here so if we fold the instructions it says go inside using change directory cd and then we need to run php out of themselves so let's do that so we need to go inside folder using cd and our project name is employee and so we are inside so i clear the screen here and then php artisan server all right so development server is up and i need to copy this link and i'm going to paste it right here and you can see our application is up now i have sam installed in my system currently and it is up and running so if i go to localhost slash php my admin so i can reach to the phpmyadmin here we are going to create employee [Music] app database so i'm gonna for our employee just grab to create that so we have this database now uh what we need to do we need to connect our application with the data that in this database so for that what i first need to do is i need to open this folder in the text editor so i'm going to use the visual studio in this case i have and i'm going to drag and drop the project here okay so we have dot env file now this even first thing first you can set up the project name uh the app name so we have a pass employee manager and then uh to debugging needs to be true it will help us in debugging the app if your app is in production live on live server you can put a production here otherwise it is going to be local now we have database connection so here it says learn laurel now we created the database with the name of employee underscore app so we need to change it here so we need to put that name here now if you have different username and password you need to change that here too other than that other configurations we don't need to touch so far so we have here aws configuration for a street bucket and ready seller but those things are bit at once we're not going to touch those things currently so i'm going to close this file now if we go back here our application is right there what is happening basically this page is powered by welcome.blade so if i go here and resources you will see a folder named views we now user responsible for the display of your application and any uh thing that you see here that's going to be generated by view so here we have a view file welcome.play.php if i open this file this is the file which is showing all the content that you seeing in the main page here now for because when we go to this url it is the root of our application and for that we have some routes so there is a folder named routes you can check there we have laptop php we also have api.php but we are not going to deal with this with you know it is for the api development we will be working with web.php so if i open this file we have a router created here out if user goes to the main url of our application and we are returning welcome now this value is the welcome.delay so the name must match here so here it's in welcome down below we are just passing welcome so it's working there so we can change that now we also have uh if we go here uh app inside there we have http and there we have controllers now we will be adding controllers here and those controllers will help us working with the data and also if you have noticed we also have models here so if you need to talk to the database we will be using the models default we have user model created here all right so i'm going to close these directories for now now first thing first what we need to do we need to work with the react set up on our laravel application because by default if i go to resources and then js and we have app.js here if i open this uh so currently uh it is importing the bootstrap file which is in the same directory and if i go in that file we don't see anything uh related to react so we need to set up all by ourselves we do have excuse provided by default so we don't need to install excuse now yeah in the video further we will see what it seems exactly do so let's install the react so first thing first i go back to the powershell here we need to open uh the new tab and here i'm gonna go back to the project so it's gonna be desktop and their cd employee app now here we need to run a command it is basically we used to run a command and if you are working with laravel seven or before we used to run php artists and present react pre uh preset react so if i run this command you will get uh all right now uh one thing i must tell you if we go back to the environment file dot env uh we can't provide the space in between so if we are creating any app it must have without space so here remove the space and run this command again now you can see that command pre set is not defined because after level 7 this is not working to work so we need to use a different approach to install react in our application so for that what we need to do we need to run these commands so first composer preset let me copy and paste the command here so composer require laravel ui now this is going to install their wire components and after that we can run the react command okay it is done so now we run phpr as a new react so when i run this it is telling us please run pm install and npm run down so i'm going to install npm install first and i'm just going to install a few uh required packages and if i go back here to our application in resources.js you will see that we now have a components folder there is an example.js file if i open this file you will see we have react imported here and this is a react component so we are getting the react configured so currently let's see we need to wait till it completes all right so it is complete now so we can run npm run dev as well to compile so fire on this it is suggesting us to run this schema as well so i'm just going to copy and run this command now again run npm run death and now it is compiling so you can see that compiled successfully so we have a compilation working and that's good so we are our react is now configured now we need to bind it with the html so that we can see how it works so currently if i go to our app and refresh we don't see any difference because we don't we are not calling any react component anywhere so we need to borrow that and before that what i'm going to do i want to also set the auth pages for our application so i'm going to run a command here that is in ui so just going to create the scope holding for the auth pages so if i go now back to the application and refresh you will see the login and register pages are created so if i go to register we can register a user now in the project if you see by running that scaffolding command the php is not we got few views files here we got our folder where we have login register and that's why we see these this page now there because these files are added and also we have a layout folder so it is basically a layout file where we are using all the css njs and basically if i go back to app this page is having the layout file used in it so we will be seeing in how we're gonna work with this now i also want to install a package which is the laravel debug bar so what that exactly does is it tells us and helps us in debugging the application so if we face any issue uh we can debug using laravel debug so what i'm going to do i'm going to go back in powershell so the command is composer require uh the bug bar the link for the package is in the description so i'm going to run this command now all right it is completed now i'm going to go back to our app so if far refresh now and if we if you notice at the bottom we get a debug bar now so to have this enabled make sure you have the app debugged set to true if it is false it's not going to display the debug bar at the bottom so now what the benefit of this is that we can see what exactly the view file used for this page so if i'm in the register and i like your views you can see it tells us this is powered by our register dot light also powered by a layout app downplayed so if i go back to home it tells us this is powered by welcome to uplay so if i go to login it is going to tell us yeah it is powered by login and app so if you face any issue on this page you know which files you will have to check you can check here you can also check your routes so what routes are responsible here we can see that there is a login controller and there is a method that is dealing with this so by adding the login pages we also got controllers so if i go to app http controllers there is an odd folder now and inside out we have a few controller created those controllers are basically dealing with login registration uh those those uh components all right so enough talking now let's get started first i want to uh have the database uh set up here so what i'm going to do i'm going to run the command let's say clear that php artisan migrate now this is going to run all the migrations and it is going to create the database tables for us because we have a few migrations file here in our project database migrations and you can see here we have create user table this is provided by larval so the when you generate a new project you will have these here so now what we're going to do we're going to run the migrate and you can see that it migrated so these tables are now created so for refresh we can see that we have users table so we can register and lock in using this table so let's do that so if i go here click on register i'm gonna say let's say test test and one two three four five six seven eight register we just got registered so if i go to home page it's this and here dashboard weekend you are logged in so for viewing this page we need to log in now let's do this what we do on this page we need to display the react component currently we don't uh we are not doing it so let's do that so what i do basically i close this folder we go here so our uh js resources js let me have a compliment example so here we have some content so it says uh example component time example component it is getting generated here in react and here export default and at the bottom if you notice you will see document.getelementbyid so it is looking for an ide sample and then it is rendering this example component to that id so if you see here basically it's a function and that is uh export default here and then here it is used and then it is bound with this id all right so if i go to laptop later we have an id of app here you can see so what we can do we can change this uh there so we can pass data since that to see the difference so what i do i'm gonna pass the app id here so i'm just gonna make it up and if this id exists bind this uh example to that it's just gonna bind it there so if in app.play we have this app id so it should work now to see the changes what we need to do either we don't npm run dev or we can run npm around watch the main difference is if you're on npm run dev so if you change any make any changes in any js or react file you will have to run npm ram dav all by yourself manually if you do npm run watch there's been a watch for changes inside the oriented files and it is going to compile automatically so what i'm going to do i'm going to say on camera watch so it does it automatically so it's just makes not recognized you need to run npm install one more time and i'm gonna run up one more command here npm install laravel mix latest version so let's install this now we try again and pimp our watch so you can see now it's working yeah now this compiler automatically so what we do here now refresh the page now you'll notice we have example component i'm example component so if i go back here an example and here i say react and here [Music] i'm a react component and then i refresh here you can see it changes there now the navigation from the top gun is completely gone the reason is because in the app.play it is the main id that we binded our component to so navigation is inside of you can see here so we need to correct this so for that what we can do basically we need to create a file and there we can call this component all right so let's correct this bring our navigation back so what i do simply i'm not going to change that id here we'll go back to example.js and it's going to change the code back to the way it was all right and we're going to leave this code for now so that we whenever we create a new component we will you can get the code from here if you want to so what we need to do first thing first if i go back here we have a home downplay and if i go here refresh you can see this came back so we want our react component showing up right here right so for that we need to find out where this is outputting so you are logged in so this is outputting from home home.play file so if i see here you can see you are logged in and session status that is happening right here so we can bind our component to this very uh file so here if i pass here let's say id and here i'm going to call it an employee app so this is the id now if i go back here instead of example we pause employee app and go back here refresh you can see that now it is showing here we have our navigation also working and this changes we are updating because at behind this is automatically compiling recompiling the npm from watch so if it is not working in your system it is not going to change here so check there if you face an issue all right so now what we need to do basically we need to because if you see here we are working with example dot js component and we want to create multiple components for our crud of this employee manager so for creating multiple components we need to make a setup for react so if i go back here in resources js in the js folder we need to create another file i'm going to call this file index.js and basically what this file going to do we need to cut this portion of the code where we are binding our app to the id and we're going to pass this in the let me bring it here so index.js this one so the main reason of doing this is because we want to bind multiple components not just a single component so what i do basically here i'm going to create another component next to example.js it's going to be app.js all right so now we have an app.js component and i'm going to call this component inside this component so let's do that so if i go to example.js we can copy these two lines from here go back to index.js and paste there all right and now to call this app.js we need to say import yeah now if something is becoming confusing and hard to understand bear with me i'm gonna explain how things are working so initially it might be a bit confusing so here we say import app from and then here we tell them the bots so here is going to be the components and then there is the app component that we are calling and that's how included and instead of example i'm gonna pause this app so here basically we just called a single component and we bind that component with the ide employee app and that employee app is in the home.plate that we used so this is done now what we need to do in app.js so app.js basically going to be as soon as we copy this all right and here we need to create a function so that function is going to be i'm just going to copy this again just to save time and paste here and i'm going to call this function as app and export default because we are exporting this so we call it the app all right now here uh what we need to do we need to say uh we don't need this so we can remove this and here at this point uh we can call component here so we can say our component goes here so in simple words if you want to include some components you can call those components right here so you need to include it on top and you need to include a component here so we need to have a component so let's undo this so if i go to google strap and here we need to look for tables so i want to include the table and that is we will be showing we employ this so we want to include this table right so yeah so we want to create a component that holds the data for this table so let's do that so what i'm going to do i'm going to create a component and for a component we can create a separate directory so here i create a folder and i call this employee let's call it for now list all right and inside this i create a component called table.js now this table.js is something we need to include here so that we can find it so so we can display it so it's import color table from and then employee list and then table currently there is nothing i say hello now here we need to call it as well so to call a component you simply say table and this is how you call the component so it is now going to render here so you get that we have index where we are calling this we have app we are we are passing this and this app is called here now there is one thing that is missing i created this index.js but how our application gonna know that we need to use this file the reason is because this is something we created so if i go to amp.js and this is outside of the components directory this is a lowercase and.js by default that was present there so if you see here we have require components an example given here here what we can do we can simply say here index so here what we are saying we are saying okay there is a bootstrap.js included we are including it there is index.js and use it so we are calling it and then it is connected to our larval app so we go index.js here we are telling okay we have an id of app we need to render our components there and here is a component that component will have all the components inside it so we are passing that component and here if i go to this component we are you can see here we call the component side so if you want to call another component you just need to create another component pass like this here for now we have only one so we will be doing it like this so if i go back to the here refresh and inspect console here we can see the errors so if we face any issue so let's see the lowest and divide we need to remove hello from here because it's a component so it should be something like this in gsx format so what i'm doing i'm going to copy this from example i'm going to go in table i'm going to call it table and this example also becomes table yeah all right and then you're going to refresh now you can see that this is rendering their table component so now we can basically we can uh work with the table component that show our table here so if i go back to bootstrap website so here is the table html so i copy this and here we don't need this we want table so let's paste table here i don't know why they are not giving the table instead they're giving and the another thing we need to change the class to class name as in jsx you pass class name so i just pass that here instead of class all right and now if i go back here and inspect so we have a table here i'm just gonna add it as html and i control all ctrl a key and ctrl c to copy so that we can have that content there so i'm going to go back and we can replace it here i'm going to indent it a bit so it looks acceptable last name needs to change back to class change with last name so now we should have uh it's working so let's all right let's see what happens yeah go back there refresh now we have table showing up right there so we have bootstrap by default working there so it's all right we have here invalid down property code spam so we basically don't need these values so we can simply get rid of these values here all right so we have a single data the rest of the data we will be putting here using uh factory so let's do that now it's the time we work with the content of our table so we need to show the employee names and everything here so what we do basically give us here and here i'm going to make some changes i'm going to put here i'm going to give it a width like this then we need here a name field and at last we want to have an field of actions so these are going to be the buttons where we want to show the content basically edit delete update buttons so that's going to be here so now the next thing is we need to work with the data so we don't currently have any data and we're using a function here so i'm going to change the structure of this file and i'm going to show you how we can do this so i'm going to minimize it a bit okay so we have a function i'm going to minimize it here i'm going to say class i'm going to call it table class and it's going to extends and it is going to extend the component a react component and the reason i'm using this here we have a single function that is working and in class we can have multiple functions so for fetching the data from the database for or we need to have a function which is going to be a separate function from this one so we need a class in that case so what i'm going to do to deal with this very code i'm going to call a function here it's going to be a render function and inside this render function you can pause your jsx so all this that we passed here i'm just going to cut this so you just remove this example function and inside render you paste it like this so this is exactly the same thing now here this class has name table and at the export we want the same name so if i go back here and refresh uh we get an error component is not defined now i call this component here but we need to import it from react so we need to say here coma and here we say component so this should fix that error so go back here refresh you can see we count the data back and no matter so now it is working through our class all right now let's work with the function that is going to get us the data so for that we can say here we can add a comment get employee list so this is going to be a function and this function is going to be in getting the data so i create a functional cat employee list and i'm going to use the arrow function all right and i'm also in a class you can use constructor so to set up the default variables you can use constructors it's going to be constructor and if there is any props we have the access to it so we can use these props but we don't have props currently and we in react we use state so any variable you will be or property variable is also called property so you can update using state so here are going to be this.state and equals an object which is going to have the variables and if it is getting confusing when you see this working you will get the understanding how this works basically so here i create a variable employee and it is going to be empty array by default and here we need to pass column instead so because it is inside object when you are inside object you don't use is equal to sign in reviews column all right now this employs we're going to put data inside it and loop through that data and display it here but before that we need to work with the laravel side first from our component we are ready to show the data here but if we go in our database we don't have any employee table or employee data so let's deal with that so for that i go to the terminal again and here we have php autism sub already running in npm run watch so you need to open another tab and here what i'm gonna do gonna go to the directory first and then employee app and here inside we need to uh create a model a factory a seeder file so i'm gonna show you the command for it so it's a php artisan make and we can create a model so model because we want to deal with the database and in database we will be creating a table with the name of employees so here we will use the singular name of that to create a model so it's going to have a migration factory and seeder and this is how you can pass this to create these three files along with model so if i hit enter you can see model created successfully factory created successfully we have a migration file for it successfully and access your file pretty successfully so if i go back to text editor here we need to go to the database migrations and you will see a new file create employees table so here in employees table we need to have the feeds we need so here first thing field we need is table and that is going to be the name field so employee name so i'm going to call that string and it is going to be let's call it employee underscore name all right and also we need salary for each employee so as a dollar table salary oh sorry so when you do this we need to pause here in teacher and pass salary inside okay so this these are the two fields we need so if i run now php art is in my grade we have this table there in the database so you can see employees right so we can now store data here so now we need to work with the factory so laravel factory help us create demo data so in this case i want to create some demo data so that we can display here in our react app so let's do that so what i do is close the migration file go into factories and there is employee factory here we have a definition folder inside it would be to pass two fields and those two fields are exactly the same employee name and salary so let's do that so because we need to generate data for these two fields employee underscore name and what we want to pause here uh it's going to be i will show you in a moment and also salary okay so if i go here on this the it's extending factory class so the factory class has a faker library in it so if you want to generate some dummy data you can call to this class as it is extending factory class it will have access to figure so to access that you can say this and then you can say faker because yeah we are holding this class using factory we have access to faker and you know faker if you want to generate name you just call me so it's gonna generate random names now we need to generate uh salary as well so for that i need to generate numbers so uh for that i do here color this and then faker and i can say generic number between so it's a number between let's say fifty thousand to five hundred thousand all right so the number going to be between these two numbers and this is going to be random so this is how you define like what type of data you generate but this is not done yet because we need to tell larval that okay we need how many records we need to create so for that we need to go into the seeder file so if you remember in the command we we also created a scetar file so let's check that now so if i go to seeder we have here employees either and here inside this employees editor we have run method where we need to run so we say here employee so we are calling employee class and then we are saying factory now why and how i'm doing this employee is the model that we created and you can see that we use the create model and it created the model and this model if you want to access it is inside here app models and then employee all right so we are calling this model inside cedar and as this employee model has access to factory so we can tell here how many records we want to create so i want to generate 100 employees and i tell all right we need to create these records so just create these so laravel will know okay using factory we need to create 100 records it will go inside factory there we'll see okay these are the fields and this is the type of data we need to generate so it will generate it now here we need to call include the employee so here i would say use app backslash so if you remember we had it an app model employee so the same thing here models and then employee if you are not going to include this you will face error that employee not found this is done now uh when we run a command a seed command it's going to pass the data to database but in the database when we go there is a restriction we can't pass mass assignment mass data in database directly we need to tell database that expect that we are passing some data so be ready so for that we say here protected and we say here dollar fillable and we say we are going to pass some data and allow this data to get it so for a mass assignment this is important otherwise you're going to face error so here simply we need to pass the field names employee name and also we need to there shouldn't be any spaces and salary all right so from model side we are all set this is all we need employee cedar we have it here employee factory we have here all looks fine to me now the only thing is pending that the if i give back here and file in the seeder file we said okay generate hundred create but to uh run this employees either because we created this here file we need to connect it with laravel cedar because we have a cedars directory there is a database editor and here we need to include all the seeders files we want to run because if you you can see we created the seeder so we need to tell our well okay we created one cedar font you run it so to run it we need to call it here so here what we're going to do simply want to say dollar this and we say call and call what we want to call the employees either so employee theater class all right and it is going to run the employees either and then employees either or on the factory and in the factory we will get the data generated okay let's see how it works i run the command here php artisan migrate dashboard seed now nothing to migrate there's almost nothing uh no new table we were adding so there's nothing to migrate for seating you can see that it ran employees either it took 180 milliseconds now if i go to database and check the employees and you see that we have hundred records here so we have random names generated we have random numbers generated between fifty thousand and five hundred thousand so that is the salary so yeah we now have the dummy data now as we have the data now we can display this data to our app here so if you remember we started that in table.js so we created the function but we stopped because we didn't have the data so let's proceed here here what we need to do first thing first i'm going to call x use now x use is the http clients that helps you get the data from getting post requests you can use to get the data so here i say get and i just need to pass the url so it's here again employee so this is the route we are passing so we are expecting data here and once we get the data we have then in here we want to do a gonna call function which is going to receive a response response and that response we can work with all right so we need to see what response we are getting so i simply say here console.log response so we can see that now what did what type of data we're getting and now the thing is uh we need to call this function and when you want to call this function you need to call it when this component is mount mounted so for there is a method present and react and that is a life cycle method and what exactly it will do once the component is mounted it's going to call the function so we say here component i did mount all right and this is the method all we need to do this dot we're gonna call get employee list that's it so when we refresh the page the component will mount once it mount it calls this function this function goes to this url and currently we don't have this url so we need to set this and once we have set up we will see the cons a lot so here we need to go in the php so if i scroll down here routes web.php and here we need to create a route and also to deal with if you remember we created a model factory migration seeder but we did not create the controller there is a need of a controller to manipulate data to making changes in data before adding or getting data so what i do here i say php artisan make controller and the controller we are going to create is employee employees controller all right so we create that enough iq here we should have it in http controllers employees controller great so we can use this controller in our route now so i create a route and this route going to be a get route now because we here mentioned it's a ghetto language route so the same way you need to say here it is a cat route you know we have this and what we want basically we want employees controller class and then i want to pass a method and that's going to be get employee list all right so uh this is going to be the method now something so i'm going to break it down here like this is what that is it read now we don't have this on top so i'm going to remove the comment and we need to include this as well so here i say use and we need to say app backslash http and then controllers and then employee controller employees controller now we have access to it so it should work now if you want to give this controller a name you simply pass here at the end name so you can say any name so i'm gonna give it a name of employee dot list so you can use this name in case you want to use name all right so far so good yeah looks good to me now let's deal with this method so we go back in controller here we need to create this method because we don't have it so get get employee list from database so it's going to be public function and this function i'm going to pass here try statement now the try statement is basically to check if there is any error we can uh see that our or we can save that are in a log file so here we say here exception dollar e and you can log any adder like this so simply you plus dollar v it will give you a complete detailing lock you need to pause on top use log and also use exception these are two classes we're using exception and log so we're calling on top now here let's get the data so for getting the data we need to call the model as model deals with database so we say employee and if you remember the employee model we created so the one here now we have the value cells as well so now i go back to controller here what are you going to say we want to say all then it's going to be dollar in employees employees all right and we can return this return and when you deal with the data in js as we are using react to show data we better pass data in json prop format so we can do this response and then we say json so we just need to pass this inside this variable our function all right now it's going to be as we want so let's see what happens i go ahead and refresh the page and we get the header we get request field status 500 we go to network list response and we get the employee class so you see mine did not include the employee class and we got the error so we need to include it so employee classes in app backslash models and then we have the employee this should fix this error so let's refresh and this time is 200 so we have a list you can see that we have the data is coming hundred all right now it is coming uh in ascending order if you want to change the order what i do will change the way it is getting so i'm gonna say here order by let's say order by id and we want in descending order and then we say get this should change the other so if i go back to the browser and refresh now you can see it's upside down all right great now if i go to console.log we are getting data something like this we get an object where we have data and then we have an array so what we can do here is if i go to table.js here if i say response.data then we will get our access to array because currently it is object then data now for refresh you can see we get straightaway array of hundred employees so what we do we simply loop through so we need to assign the value to the state and to do that what do we do we basically call this dot set state and to set state we follow something like this inside it what we want to do we want to say uh the employees and we want to set it to equal response data put a space here so this is gonna set the data to there and uh then what we can do we can loop through so here what i do i'm going to create another component so what we do here so we have a table row here so i can create a component here inside the employee list i create a component table uh row so it's gonna be like this and what we do basically we're going to better take the class so just copy this syntax here to table row close this and we have the again render method here and this render method is going to have the return and we need to return the gsx so if i go back here i just gonna get that row and this table row will be like complete raw so we just need to take this like here go back here piece it because if you have everything in some tasks from table row and then table cell you will have a lot of functions here so it's better to have separate so we have it like this okay so now we have it so we need to create a constructor as well and the constructor props and then all right now with this table we are calling it here it should be table row and the same way now we exported it we need to export here table row now to use it in this file we need to import it on top so we need to call import table row and it didn't import it without an issue okay now we need to loop through this employee's data so let's do that so here what we need to do we need to first call uh table run so this is the component but this is going to be a single component and we want to show the data that we're getting so we need to loop through so for that then we need to run here a function uh basically i'm going to go and say some database and here i said this dot state so we need access to state property because we have the value inside states of this dot state dot employee so we say this state dot employees all right then we use a javascript method map and it's gonna be like this dot map so it's gonna map through each value so i'm gonna say function and here we say x value and then for index all right and then we want to run this function i don't need this this goes to yeah it looks better now inside it has a return and that's going to be the and now here is the thing we need to pass this component inside because each time this loop runs it is going to pass a single value so it's going to pass first time this value second time this value so each time the table row will update so we pause it like here so here we need to pass a key because each employee is should be unique so it's going to be the index hi and then also we want to pass data because that's what we're dealing with we need to show the data of you that employee so it's going to be x so we are passing here uh x data so basically now we are passing a prop here and now we need to catch this prop in our table row so go there so here what we need to do we need to say how we can show the prop so here we have id1 and now uh it was hard coded but here we are getting it from the loop so when we get is that a prop we say uh base dot state oh sorry this dot props dot data so i passed their data so i'm calling here data dot id now if i go back to the browser we have id there so we are calling id here so it should work now the same way i need to show the employee name copy this pass here it's going to be employee underscore name again go to browser we have employee underscore name we are passing the same so i'm going to copy it again again this time and this time it's going to be celery now make sure these name matches spellings so otherwise you won't see the data here and i leave this for now because we need to pause the buttons and we will do that so for now this is it and here we are passing react down we don't need this we can remove that we need react and component only so all right let's see if it works and we get data so if i go back to the browser and refresh the page we get an error so it says this is undefined and let's see so if i go to table okay we are setting this state so inside axios this loses this is not accessible there so we need to pass here this like this itself is equal to this and instead of this now we'll pass it ourself and it should fix it so let's go back now and refresh okay great we have the data you can see we have all right so let's add the buttons so if you get the point why i create a separate component for table row and in table now you will get the understanding why is that because if you see we create a table row now we need buttons here and each button going to have functions for update for view so we'll be putting those if i don't create those components all those functionality going to be in a single file which is going to be a lot messier to manage so now as we are creating multiple components it's going to be a lot easier for us to handle so we have table row here called then we have table row now here i'm going to create a brand new component so i'm going to call first of all create a component here so it's going to be let's call it table action because we have some buttons so action buttons and dot js now i go to table row and copy everything from here and paste here first thing first we need to change this name table action so the same we are exporting here now here in table row we can include this import so it's a table action buttons it imports it automatically we pass here this component we need to have the id of that particular employee so we can pass that employee id here as a prop so let's do that so i call it each each row id and say it is equal to and all we need to do we need to pass this problem there right there all right so now we be able to use it so let's go here in our buttons area now here what we need to do we need to create the button so what i'm going to do i'm going to go back to bootstrap and here here i search for button [Music] button group so here we have button groups so we have three buttons here and that's what we need so i'm going to copy this go back here and here the thing is we need only the buttons so paste that here only and move this we can remove this all right now if i go back to our app you can see that buttons are looking nice and we have another as well so error is class okay we use class somewhere just saying use class name so we'll go back there and that's right here last name class name it should be like this now i'm going to call this info and i'm going to call the last one danger this is going to be delete this is going to be update and this is going to be view all right so that makes a lot of sense as you'll see now it's better so we have you update delete nice so what we need now all right so first thing first we want to work with employee view so i'm gonna expand it a bit a little bit space so we only work on this area now what we want to do i want to go back to the bootstrap and here i will search for modal and here we have some sample models so yeah so we can use this so to powering a model we need this so what i'm thinking we should create a separate model uh component for each and as well as we need to follow us uh let's do that so we need a button so we have a button here on click on that we are opening the model you can see that's the example here so we need a button like this so i simply copy this go back to code editor our button is like this so let's see what we need to add so we have here when i remove the comment we have let's see okay we need to pause these two power our model so here after type class name and break it again paste these two so we have now we noticeable thing is we have a data bs target which is an id of example model so the model id should match so we need to create another component and for that what i'm going to do i'm going to create a folder so i create here a folder with minimal model right models and i create first model that's going to be a view model dot js all right now this view model is going to have let's take the code from here table row paste in there and change name view model and now for the html oh sorry gsx we need to remove this and here we need to call this so you copy all these from here straight away and paste it here now first thing first we need to indent it a bit more all right now so we have the uh the example so this id should match with this button id and here we don't need the action button to remove that export is already there now we need to import this model here for sure so let's do that so import view model and you can see it uh imported automatically now we can call this here now there is a trick because we are calling it here and if you remember this always happening inside table action which is inside table raw and if you remember this is an inside loop so we are doing it for 100 employees so for that if you want to show the detail of each employee on model separately we need to pass some data here otherwise it's not going to work so what we do basically in the action view where we have this view model called we need to pass here model i call it model id and that's going to be equal to the id we are receiving so if you remember in table row we are passing each row id that we can call here so you say base dot props dot each uh row id all right and also we need to pass the data to this model so that for example if we go back to the page so when you click we need the data name and salary so it should display it's very fresh currently let's see what happens currently it says okay we need to correct this first last name so ctrl d to select all and then just replace my control v so this should be fine now and then we have tab index where it is so we can change it to capitalize other than that that thing all should be fine now and if i click here we got a model all right so what we can do basically we can get uh so we can get data when we click here so for this particular employee we can fetch the data from database now what i do if i go here and model instead of putting over here i go to table action buttons here the button because i'm click going to be far here i can see here on click and we want to do we want to run a method and we pass method like this so we say that uh just run this dot and i give this method a name get employee details all right and as we have the access to the id we can pass the id here and now we can have this method so let's create it so here i say [Music] getting uh individual employee data and then we call this all right and then as i want to make it arrow function and as we are receiving the id if you remember i pass it here so we can get it and here we use the x use again xcos and this time it's going to be post request and let's define a route so i say here in cat and the virtual employee details yeah it sounds about right now we need to pass here an id so i call here employee id and that's going to be equal to yd the id we're receiving on top once it is all done we always receive response here we can pause our function as well and let's get here response and then here what we can say we can say console.log response and if you remember there need to be a data inside it it's a response.data okay this will fire on click of view now what we need to do we need to work with this route so let's deal with that so i go to web.php and here let's create another route it's going to be route post and okay we pass here this route then what we need to do we need to say which controller we want to use in that case i'm just going to copy this and this go here paste here and your space i change the function name to get employee details and for we can give it a name if you want to so uh yeah so we go here now and create this method so here we can create it straight away public function this method it is going to receive request dollar request as we're receiving the id so we need to use it and here let's add a comment so we pause here [Music] get individual employee details and here inside again as you guessed it i'm going to use try catch again copy and paste here to save time here we're gonna make the difference so here actually we still can use this uh here i'm gonna say find or fail so it is going to be and get the data if it doesn't get the data it's going to fail and to get the employee id if you go back to the modern buttons so we are passing employee id so we need to get this employee id here oh sorry we can close these either files yes and only an app as well so that we have all the files open those are required so yeah employee controller and here inside it what we do we simply say dollar request and then get and we pass that employee id like this so this uh is going to get you the id and we are passing this id here if it gets the data it's going to get the employee data instead of employees and then you can return the employee data something like that all right looks fine to me let's see what happens so if i go back here refresh and hit view so we get an object and if you see here purl we get the data for that particular employee so yeah it's working great so as we are getting the data let's go back to the button here so we can now use this data so what do we want to do so if i go back to browser we getting an object there is employee name salary id so i want to create two properties so here what i do i say this dot state [Music] and it's going to be equal to object and it's going to be current because the person the employee we clicked on current employee name and by default i'm going to set it to null and then current employee salary again by default no okay now what we want to do we need to update these values from this response the one we are receiving here so we can set employee name and salary to that so for that if you guessed it right we will be using this dot set state again so this dot set state and here what i want to do current employee name and that's going to be equal to response dot data because we console log response to of data and after that if i go back here we have the employee underscore name so we can simply pass that so do that dot employees connect and then we have the current employee salary again response data celery okay it's fine it should work now as we are updating these values so we are setting the state so what we can do on click when we are doing this we can pass this to this model because the ultimate goal is to when we click here to show this data here so we need to pass this data to this model so what we can do we have this remodel in here i say let's call it employee data and it's going to be equal to again you need to pause here this dot state all right so it will have both the values because we are passing this will have both values and yeah so on click it will update the values so initially these values are null then it's going to have some data then we are passing and then we can work in displaying these values so let's see that so i go to view model now and as we are receiving values from here so we have a prop to receive employee data and we go back here and you can use that so here uh first thing first we have a id so i want to give a unique id for each model and of you remember we passed the model id here as well it's also a prop so we can give that here so how we define the id we simply say uh like this let me say here uh this is a view model all right and with the id of this dot props dot it's gonna be dot and then the prop we have model id so if we pass that here all right so each model will have a unique id now and yeah that way we be able to work with that now we need to show the data so what i do inside the model body here i say name and to display data i say use strong tag and inside it i'm going to pause the prop simply it's going to be this dot props dot employee data because we are passing employee data if you remember so here it should be dot and then at last we need employee actually it's the current deploy because we are passing uh this state here so this current employee we need to pass like this and this goes away all right now i pass here that sure and then here we say celery all right and celery going to be again strong tag let do a copy paste this and here and here current employee sorry so we can pause that here all right now if i go back here and scroll down the button here is also needs to be updated because if you remember we are here saying example id and we change the id here to a dynamic id from the model id so we need to pass here something like this so i'm going to remove these it's going to be uh id view model right and then we need to pause because we're passing the id so we can use that here as well so it's going to be dynamic as well all right go here and let's refresh no header so far click here we have the person's information salary and we don't want save changes so we can remove that from here employee details [Music] right so it's working as expected we have the view functionality working so if i go and inspect any of these we have a model with the unique id you can see here and the we have the target with the unique dynamic id as well okay so working with update what i'm going to do go back to the table action buttons here and now we can make fit separation but not that i delete i take it out now here we can break it down like this okay so what we need first thing first i'm going to copy these two lines so we need similar behavior here this time it is not going to be viewed it's going to be updated all right so we'll create a model which is responsible for update then on click we need the values and that's going to be exactly the same because these values we will be using in update model as well so i'm going to copy this and i'm going to paste here as well so because when you click you will and pause one more time so when you click it should fetch the data for that particular employee to update so yeah it's gonna work now we're gonna go back here in view models i'm going to create a new file update model dot js and simply we can copy and paste everything from view model to update model and change so here i say update model and we need to export it at the bottom now here we are just displaying currently so we will correct that in here we need to import it so we say here import update model so now you can call this model just like this here you can call it here update model then close it i'm also going to pass these two values so that we have the employee id and or you can simply get the employee data then we have the um you can work with that too but in our case we are using employee id for each model so i'm passing this to okay great now we have the dynamic id passing already so if i go to update model here i'm going to change it to update and update should be lower case model should be capitalized so yeah model and the prop is exactly the same so no problem about that now here in the model volume we need to make changes so here i'm going to create a form and let's create it and i'm going to pause the class name is google form now here i want to use it there with the class of uh form group and we need inside it the input so input now for input we need type of text all right then we need uh we also need the id so i'm going to pass an id of employee name also we need belly so for valley what i want to do [Applause] so we see we don't we are just getting the prop we can't just call prop here automatically because when this page renders it's going to render those models behind the scenes so it's going to give us the adder because we are getting those values on click so we need to pass default values here so what we can do we can let's let's go up here and i set two properties so i say here this dot state equals an object it's going to be employee name by default no then employee salary again by default null and bobbyking2 we can uh we can copy that so here all we need to do here is we said this dot state dot employee name if that is present then that is this otherwise empty string so that means otherwise so if this value is present this is going to show otherwise this all right great now what i want to do uh i'm going to copy and paste this again because we need the so for employee salary this is also going to be text and this time it's going to be celery okay it looks good and also we need a button we have a button already here and all just on top of it i'm gonna create another button so i'm gonna copy this input from here paste here and this is going to be submit and we call the class name to let's call it vdnbn info so it's going to be sky blue then we need the values of us here let's do all right and then there need to be a function so because on click of this button we need to update the data so we are going to be on click and this one click going to be this dot let's create a function with the name of update employee and data all right so yeah that's what we need so we don't have this function currently so let's create it go above here and call this function and i want to make it an arrow function so just convert it like this and inside it we can do uh deal with the data so currently we have the employee data here and here but we are not updating the data if you remember we are passing data in one click when we click this update button it is going to fire get employee details and then we are passing employee data but here in update we haven't used that employee data we have this empty value so what do we need to do we need to update the data so let's first get the values from the input so what i do here i create another method it's going to be on change this is going to fire so what i want to do on change we want to uh update the input so i said this down input employee name so this is the method i'm going to call and what exactly it is going to do is going to update the state so let's call it here just like that and it's in our function so updating the name state or employee name state so this value so here we are going to receive an event as it is going to be fired on change here we can say this dot set state and here what we want to do whatever we have in input on change we want to set it to this employee name so we can say here simply i copy this space here and it's going to be event dot target dot value all right so this is going to update it so basically if you go on the log you will see that in any event target value whatever user types one click of the model or an input that value will store here now we have two things we have employee name and employee salary so same thing we need to do in the employee salary as well so i go here paste right there this time it's going to be update salary copy this and just here i say update employee salary data or state then here again it will receive an event as it is going to fire on on change and copy this to save time now here we say celery so this will update valleys now let's see if our model and everything works if i go back here and refresh it comes log we have few errors class name did you mean i don't know where i did this let's correct that so it is it's catalan again careful and here this looks good go back refresh uh update we have two inputs here so if i pass here something uh so what we can do we can check so so yeah it's basically it's storing here we are not doing anything with the state currently so we are not seeing anything but uh after all it's working so let's do this uh let's get the value from the data because when i click here it should be pre-filled but it is not because we are not dealing with the uh prop the prop we can pass here so we pass simply data we are not using it so let's do that now here we need to care about a few things they're going to be some value there if there is value then fine otherwise it's going to be empty string because when a page refresh we are not clicking on this so these values shouldn't be creating any problem so what i'm going to do here in this case we need to use a function get derived state from props so what exactly it does it it's going to get the values from the props and get put in there so what i do let's show you here so it's going to be a static method it's going to be get derived state from props as we need to update the data from props so we need to use this so props we have access to here and we have current the score state all right so this is what we get now here i'm going to create an object which is going to be similar to the state so what because we want to update the data so we can do this so we let employee and update and they are going to be employee name by default now and then employee salary again null all right so we need to pass an if condition here we're gonna check if state data is null then put the prop value in this state so for that we simply say here if and then going to be current state we can access it like this and dot employee name and we save not equal all right to the props dot employee data dot current employee name so if this is not the case then we need to update the value so we want to update this object so we say employee update dot employee name and we want to put the value from prop because obviously when you click the update button we will be having some value when you click here and that is going to be in prop so we're going to putting that value in this object all right the same way i'm gonna put the condition again here this is going to be employee salary and current employee salary same goes here just copy the paste here and reply salary so it is going to update that and because this object is updating we can return it and this is going to update the state so employee update so it's a spelling mistake here so we need to be having this employee update so it should all be one no adders if i click here you can see the object is filling the values so if i go here easter and update we have is easter on this volume getting there great all right so if i want to change the value i put here something now that is creating some issue here you can see i'm gonna type here it's just making things empty so for that what we need to do we need to check here now this function fires whenever we set state so whenever you are doing any thing here you're passing any values here we are trying to set a state then it is creating issue so we need to set some condition here that checks that okay if we are updating this field only get the data from the fields do not get the data from prop because here currently it is getting of prop and we need to stop it in case we add some input so what i do here in that case we need to check here so here i put him in updating data from props below and here i put a comment updating data from input something like that too so you get the understanding so we say here if and we say current state dot employee name okay so first we're saying if this is present that means we already have the uh data in current state so that the data is updated through this object and it's in current state then if the current state dot employee data all right and then we need uh sorry it's going to be current a employee name and it is not equal to props so whatever data we are getting saying my name i'm just going to copy this i'll explain what exactly happening here then we simply say here return i know okay so what happened is we said okay if there is data already so because uh when you refresh when you click here there is already name data present there so we are saying if the data is present there and that data that what is present here inside this input so if i go and refresh so we have data this present data is not equal to props data so how this will happen because when i'm going to type anything here so if i go here and let's go one more time so if i type anything here now it is changed to what we are getting from the problem because from prop we are getting only uh the data without w so we this is the what we are getting but with whatever you add it is going to be new data so we are just checking here if current deploy name is not equal to what we are getting in prop and in that case we want to stop it so we don't want to update using prop because if you use update using prop so the data user added is not going to be processed so for that here i'm going to copy and paste this too this is going to be employee sorry salary and here salary in the same way current employee celery goes here all right go back there refresh update now you can see that now this is something uh it is working but it's not disturbing others because it is not going to here because the data is not matching prop because prop was sending data till here here and we added this data so it is different now so it is not firing these statements it is just fine till here all right i see this update again update yeah so every second time it is getting blank you know you can see here i click here and then i click again goes away so what we need to do for that so here we are saying if the current state name is not equal to this that means it is null and we have some value in prop so let's say prop is bringing this employee name and current state is null then it is not equal and it is updating but when we update here we have the value here right and now this current state has that name inside it so next time when you click on it it is having conflict because we have the net value there but it's not null and we need to in that case what we want to do we want to say that if this is a base value not equal or if there is value and it is equal so the value present if i click this value it is here so next time it is not going to be null it's going to be inside this variable say here so when i click here it is not firing and not updating this so that's causing issue so i pass this here also we need to pause here for updating the salary just copy this refresh update there is name update again there is name again there is name so you can see it stays there so the first time it is null and it is not equal to the name that is we are getting in prop so it is updating this second time it has the name and the prop name is also has a name and both names are equal so it is again updating it and showing it so it's working yeah that's looks good so now it's time we process the form so let's create a method that is going to deal with the update so we have a method already created here employee update data so i say here updating employee [Music] data all right so here again as usual we're gonna use excuse uh dot post method if you wanna pass the url a route so it's gonna be update slash employee slash data and then i want to pass the data so for the data what we want to do we're going to pass here employee id so we want to have this dot and we are getting the model id you remember so we are passing this so if i go back here in the action buttons we are passing this which is ultimately the employee id and then the employee data so we can use it so we can say here simply copy this and for the employee name we need to pause again somewhat based props then we are using the where are we using we're using employer here so yeah just gonna copy this actually what we can do we can get it from state as we are updating the state so that is going to be so i could call here this.state dot employee name and at last employee salary which is going to be this start again we're going to access through state and then going to be employee salary all right now when we get this we want to catch the response we get then here i pause our function just respond getting the response in here what we can do we can simply because we are updating it and at this point what i want to do i want to simply say location and location dot reload so it will refresh the page and uh i think we don't need this response in that case so yeah so we don't have this round let's work with this i go back here to the vamp.php and there we create this route so here it's gonna be route and post route this is the route coma and i copy this from here all right now here we say update employee data we are not using name anywhere so i'm just going to remove the name so we just are updating so let's go to the controller and here let's add this method so public [Music] function method is here and let me say updating employee yeah all right looks good now let's uh deal with the update again i'm gonna copy paste try catch here so we log the error and [Music] here for the update we need to use request because we are receiving data here so we're going to say request and dollar request all right you can see what data you're getting simply by dd dollar request and there should be single dollar and then dash here all basically and just gonna die down all the data so let's see so refresh i say update i pass here another d and i hit update we go to here response and you can see that we have some data showing up there we have employee id employee name salary all the data is coming that's great so we need to deal with this data so what i do is simply i'm going to create three variables dollar employee employee name or what to simply copy this three times this becomes id that is a name and this becomes salary all right now we need to get the data so as a dollar request get we need to pass the names that we have here say employee id we pass here the same way we need to remove these okay so in place it should match here so employee name and employee salary so we should be able to get the data now here we call the model employee and we say where here we say id is equal to this id so where this employee the current employee we are updating is present update the data and we pass an array we say here employee underscore name which is going to be equal to that and then employee underscore salary and we want to set it to this so employee name going to be this variable and an employee salary going to be this way as it is array we need to pass commas here so it should be fine and if all works fine we can return some response response and if you want to return response in json you can respond uh you can use json method i cannot pass the array here and we can even pass the data interacts similar to this if you want to pass it like that so we remove this too okay so far so good now we have i need to add a semicolon here instead of reloading let's see what we're getting so here's a response and i'm gonna console this response all right now refresh update i remove md from here update data come to log we have empty data here okay so the field names are wrong here sorry about that if i go to database we have employment school name salary here i have employment school name salary employing discord service it shouldn't be like this all right so it should be like this this is the okay variable was wrong so it should be dollar salary dollar employee name it's been a long video now so getting a bit lazy maybe so this is something we need to do now here refresh go back here removing the md update this time we get 200 and data here as well it's a very fresh page yeah it removes the md so now what we can do now we successfully updated so we need to show the status some kind of notification so i'm going to use a package and it's a toastify react toastify so i'm gonna install this here in our project and the link is in the description you can check from there just install this now what we need to do we need to go back to our update model so let's go there and here when we have the console.log log i'm gonna remove the response and i'm gonna uh say our toast now to see this message for a while and then we refresh the page so harasses set timeout and i put a yeah time out here and put the reload now to see the uh this notification we need to add a component by this package so for the package we have it here and then we need to call the component like this so let's do that so in our update model we need to call a component so i'm gonna copy these two lines go back there and i'm gonna paste these lines here so we have toast uh you're just gonna replace it like this actually we don't need container in here that container we need in the main file so if i go to the main file which is table because we want to show it on top of table so i will add here i'll remove this tricky act down from here as well and paste this here all right so we have this and now when we have it here we can call it inside this so where we have our table in a row here container let's pan that's out of here okay now let's see if it works so if i go back here refresh and update let's put md back to this ploy we get the message there and after that it refreshes as far as perfect so for working with delete video table actions where we have buttons so here is our delete button and what i'm going to do i'm going to copy this again and i'm going to paste this again so we have this this time this is going to be class danger we have model i'm going to create another model with the name of delete mode so it's going to be i'm going to give the user an alert like okay we are you sure you want to delete it so it's going to be delete we can remove this and we can import our components so here in models i create another modeled lead model dot js all right great now what we're going to do we're going to have it so we go to let's go because we have the view which is the simple one so i'm going to copy everything from here paste here now i'm going to change this name to delete model and then we're gonna export it and here we simply wanna say are you sure you want to delete this employee data the title will be there so we have the one button here and we will create another button here in a moment now what i do we need to import this delete model in our buttons so let's go on top import delete model from models go down there and just like we did before for update view i'm going to pause this here and i'm going to pause pull the values just the same way so i'm going to copy these in paste here great now here what do we want to do we want to create our function on a button click so this is the close button or what i do basically uh yeah leave this button as it is copy this and paste here another button and this is going to be yes so the user is ready to delete and this is scannery this is going to be danger and this is going to be model distress uh and on click what i do when i say here on click we're on the function so we're on a function like this and react so that it doesn't fire automatically it only fires when we want it to fire so this is going to tell this that delete employee data and here we want to pass a prop so we will pass this model id simply now also we can change this name here delete model so go back to buttons yes delete model already here so it should be the same here great so we pause this now on click now we need to have this function so let's add this so go up and here just build a constructor we can say delete function for employee data and here it's again going to be uh error function so i'm gonna say like this and then what we want to do we want to use excuse dot delete and here i'm going to pause the url it's going to be delete then employee then data and i'm going to pass the id so we can get the id here so you can say employee instead of id is just call it like that because uh ultimately we make it bigger we are passing the id here so whatever id you're passing a call whatever you want so impossible so pause it like this so if you pass id you need to pause slash here all right and then we say here then and here we need to pause another error function and here uh yes it's going to delete so we can say toast dot adder so that it's going to be a red alert employ employee deleted successfully and again refresh the page so set set timeout all right so here it's gonna be 250. two and a half seconds then after that location dot sorry it's a reload and it should work now we don't have this route to work with this right now go to web.php here here we are going to create a route and i want to show you how we can work with road model binding in this one because that's a concept in larval and it's important one so we have here so far let's see employee so you can see that if i go to delete so we are passing delete employee data and then the id of the employee here we are saying delete employee data and employ id pass it like this then we can say here comma and i'm going to copy and paste this just like that here all right now what we're going to do we want to use a method destroy okay and go to the class here and here we say daily thing employee so there is a public function destroy all right and here because we have the employee id pass here and so we can use the employee class here all right and then it's going to be dollar employee like this and we don't need to say like find or wear id or find or feel nothing like that if we are passing it like this it is quite simple to delete in that case all we need to do we need to say dollar employee delete and it will do it so what i do i cannot be and paste try catch here to be at safe side and here all we need to do is get this stellar employee and pause the lead method and darwil will figure out this id and automatically going to delete alright so all is set we have our route set delete method is set and we are using delete method this time to be very precise on this one for update you can use put for uh save you can use posts for update you can use post as well as we use post here so ah that's not what we do so here uh we have it let's check if it works so we go back to the browser refresh i want to delete this one so i say delete yes employee deleted successfully refresh and 100 employees gone it's not there so successfully we have the functionality at place now it's working perfectly all right guys now for creating an employee we need to add employee create button i'm going to add it on top of this table so what i do basically i'm going to go into the files there in modules we're going to create another model it's going to be create model on js all right now this model will have uh let's get the data from view and close it please we don't need anymore table rope we don't need anymore so we need all these files that's it and here what we have so it's going to be model create we don't have to pass any dynamic id we can remove that and it's going to be create model or let's call it model create all right and here in the input to save time what i can do i can go simply in update model and we can copy things we need from here to there so here if i go we have the form already created so we can copy this go back in there and paste in there so for create we don't need any prop as it's going to be the new values so we uh we are not passing any value in this case it's going to be they're going to be a placeholder and we want to pass the placeholder like name here so user knows where to enter the name and unchange employee name yes we will be doing this and uh the value again here now painted place older and here in this placeholder is going to be salary here so this if you remember input name input salary we are just setting the values so we need to we are opening the state accordingly so if i go back here we see here we have these methods here so we are just setting the state to the internal value so we can use that so we can copy this state here on top and then i go here and i copy these two methods and i paste these methods here now here it's going to be creating and same goes here so we have employee name employee salary as us empty state by default then on change these two methods are firing these methods are updating these two state values so state is began updating basically nothing uh nothing fancy so we have here one button which is dealing with the closing of the model so here we need to have another button which is going to fire for storing the data so i'm gonna copy paste the input here call it the button and id we can skip it we don't need any id here placeholder we need value instead we will see here save because we are saving an employee and uh on change instead on change we need one click and function we need to create let's call this function store employee data so this is going to be the method we don't have this method so let's add this method so here storing employee data all right so here we pass uh it's gonna be arrow function again all right now here i use excuse post and here we need to pass to store let's call employee data okay and the data we need to pass as we are updating the state you can see so if we can pass data from state so here i simply pass here employee name that's going to be this downstate dot employee name all right the same way employee salary this dot state dot employee salary so yeah now here we need to get a response so we then here all we want to do i wanna give it alert so as here toast dot success and the message going to be employee saved successfully all right and again set timeout in further projects we'll see what best we can do and how make this application work once or something like this more than once for now i'm just gonna do the location dot reload to refresh the page now we don't have this route so work with that so go here now we need to create a route so here let's create a route so we're out and this is going to be post as restoring data and then what we want to do we want to remove this i'm going to copy this from here and the method we're going to call is store method so i go to employee controller and here we say storing new employee all right public function store as we are receiving the data i will use here again so i'm going to use a request dollar request i copy the try catch from here so we can save time here now we can work with the store so here i remove this and to get the data i see here employee name going to be go to dollar request and then get and the value we are getting so here we are passing employee name because there's spellings and right sometimes it's going to create problems to make sure you use correct spellings so here i could in calculus and paste here all right we have both values so here i say employee and here we're gonna use a create method which takes the array just like update method so we can pass array just like this so we're going to pass right like that so employee name and employee salary and both are able to be the same otherwise we will face issue so yeah now i'm gonna response back again the same so just and yeah you can see yeah great so it should be working now so i'm going to create here all this set so let's say refresh okay so we are almost done but not there yet if i go to the jsx of ours we have the model but we don't have a button and we haven't included this create model anywhere so first of all let's add a button so i'm gonna create here a div and adding div here will give us an error because we should have a single our element it's a single tag so why not you're gonna pause this and you can pause it empty and at the end you can pause like this so now we can have multiple themes inside it so the top div it's going to be the day where we want to have the button so i say class name let's call that row i say text right margin bottom padding bottom three and inside it we want a button so let's see here button and we need to have a class on this button too so let's do that so it's going to be class name and i'm going to give it a button button vdn info for sky blue color text right cool 3 and offset md 9 so that it goes to the right of the screen it doesn't look in the middle and here also we want so that we can open the model the model we have here this model we want to open on this buttons click so we say here data and that's going to be toggle which is going to be mobile and then we're gonna have the data target which is going to be equal to the id so here we need to be id model create and yeah that's it and for the text i say here add new employee now we need to include this into the main table so let's go to table here and i'm over here using import create uh model now create model um and model and then create model it should be fine now we need to call it so i want to call it here now in the idea remove this another thing we need to change the name we haven't changed it so create and export it as create so where we imported it we imported it as create model so it should be and yeah let's refresh and so models uh working fine but there is some issue with the bootstrap that is not working on the create model as we added the create model in main screen so if i go back so if i go back to the browser refresh when i hit it it's not working however it's working here so to fix it what i can do we can go into the layout file which is basically mainly responsible file if we go here and mainly we have this app.blade powering this app so we can add there in the where the body tags are ending here we can add two uh one the jquery as well as the bootstrap i mean.js these two files now if i go back and refresh the page and add this we have the model working just fine so here i'm gonna add a class or this class name it's going to be the end vdn info so it looks a bit better so go here refresh and yeah it's better now so if i want to save and in the inputs you can have some other class as well so here if i go here you can say class name and a form control i want this on every input so i'm going to paste here it will make it look a bit better so if i refresh now go here and you can see it's a bit better now we can have here margin bottom three let's see how it looks so copy this paste here and refresh yeah that's it's better actually so i remove the padding but margin should be there so we're going to copy this and wherever we have the input we want to add this so in create in update we also have it so here we want to add it and uh oh yeah mainly here so refresh screen looks good and update also looks good man yeah much better so let's see if create works if i add here roger and some number as a salary and save we get employees see it successfully and we get the roger added and that's great so create is working as expected we have view working update uh it's also working so if i update the username and yeah it's updates you won't delete it it deletes so yeah it's working we will see if we can work with the more on this project to make it more advanced and pass the values to the parent element using props because currently we need to refresh the page so we'll see about that but for now this is it and you can download the code from the description and i hope you like this video thank you for watching and do share your feedback thank you for watching bye [Music]

Channel: Zarx Biz

Views: 59,458

Keywords: laravel, laravel tutorial, laravel crash course, codecourse, php, laravel series, laravel project, laravel php, php framework, model view controller, laravel 5, laravel course, laravel for beginners, instagram clone, instagram clone laravel, php tutorial, laravel rest api tutorial, laravel restful api, laravel rest api for beginners, build an api in laravel, build an api in laravel 8, create a rest api in laravel, laravel 8, mvc, laravel from scratch, reactjs, laravel react

Id: svziC8BblM0

Length: 148min 56sec (8936 seconds)

Published: Sat Jan 15 2022