Employee-management-System Tutorial using Spring-boot, react.js and mysql | Full-Stack

hi guys welcome to another project full stack project we are here we'll be building an employee management system so let's go and check the app out so as you can see this is the application here we can click on add employee and we'll fill in these details we save the data the employee is there we can add another one let me just do this it's telling me to fill in or input let's say sarah they say say mary mary at mail.com you can see is there let's update this let's cut this to john definitely let's call this dough our last code is do at me.com refresh we can say that john doe is here we can delete it he's gone we can add another one and call this sum miriam some at mail.com okay i see it's there so this is an overview of the app we'll be creating okay so what will we be covering in this course in this course will be before we take this course you have to have an under a basic understanding of java javascript reacts html and css basics also in the course we'll be covering some react hooks such as use state use effect use navigate use params and other hooks so let's go coding before we code let's also look at the project structure here we'll first of all create our api our back end in spring boot then we test using postman then we create our front end then we create our components then we add feature we test on the go so this is going to be like true hours long or yet about and then before at the end of the course they are going to learn a lot now let's go okay guys first things first let's create our backend application in springboot to do that so go to start dot spring dot io india will give this group just got it to turian the active file call it employee [Music] that's going to be the name back end because play management management backend just leave it that way then for the java you choose on the version that's installed on your system to do that you to check the version installed go to your command prompt or temina and um type java dash dash version you see the version that's installed for me this is version eight i have old version 8 and version 17 installed so if you have only version 8 you click on this 8 if you have version 17 if you click on it if you don't have any java installed go to java website java jdk are you downloads you can see java jdk download and you you download the wonder you download for version 17 you have a long long term supports there's you can go to javascript and click on download for using windows you download for window for using mac that's for that so let's add our dependency let's click on add dependency we'll add spring web for creating restful api we create that we'll go to add another dependency we'll go to sql add spring data jpa this is for persis steal our data he helps to reduce our boilerplate code well he helps automatically generate codes for querying the database for us instead of us manually typing in dashboards spring data gpa does then we also add dependency for mysql since we'll be using my sql database if we'll be using postgres we'll click on the postgres driver so let's click on the mysql driver added dependency we've done that now let's click on explore to see how our project structure will look like we can review here and see what and what we have on dependency and what our words we don't have we can click on close then we can generate copy continue it is being generated then we can open when done there is been is been then let's move it to a tutorial let's move it on into this folder is on this folder and play management back end so now let's open this on our intelligent and begin to write our code we'll go to intellij we go to this so this is a distinguishing retail letter open okay does it now let's open it i trust this trust project okay my application is it dancing okay i think it's be done yeah okay it wasn't okay let me see it wasn't properly beat let me see on if you can see there's some error here this may likely not happen in yours i think this is happening in mind okay let me see what's the problem here seen marvin mode for addition okay let's set up as you can see let's click seventeen please go no it's intense okay the error is now contaminated okay it's still not the icon to run your application it's not showing us a problem here okay there is it here so let's click on this setting let's go to preferences let's go to beat an execution let's go to bluetooth execution bluetooth let's go to marvin then this use mavira pal let's change it to bundle marvin thierry bundled my victorious apply let's click ok let's ally to build okay you can see the error is gone the you cannot run the application here yeah we can see you can run our application now would you run so if you're having that problem if your run is not showing what you do is go to setting then preferences your if you have that error of marvin then go to your build execution deployments built to marvin then change your mapping homepad to bundle but you're not going to have this error you know you're likely not going to have that i know everything a lot of useless stuff in this id so a lot of those stuff came up so let's first of all let's now our application is set we can roll these just we can run it if we want to now let me know with our time let's quickly connect our application to our database to do that we go to resources and go to application.properties here i will just copy and paste some code here um this code are available on my gits on my gits on my github git oh bom where is it again git gist yeah i will leave a link to the description where you can copy you can see there are a lot of tcf who can copy this application property file you can just copy them and just put your details so let's so i'll be needing very quickly let's play walls here so this is our database employee management i have not created it so this data spring the data source is pointing us to the location of our database if we are in a production setting where our database will be host on let's say amazon or any other cloud platform this will put the link here that locates our application to where it is hosted for us we are hosting it on my local machine that's why you see locals this is this on my local machine to this database name now the data source does your password your username and password so accessing the database that's what this is then this other one that says hibernate dtl auto this means that we'll have what update means that whenever your application is run you should look at your database and if there's any need to make a modification it should automatically modify your database but in production environments will most likely remove this or we just take it to none in production environment so you know have to update our schema or make some changes that will affect our database okay for the driver we're using what you see is my sql using my scale drive if it was postgres this would be postgres something like that okay now for these other ones spring gpa hyperlink dialet is this basically the default we are trying to say look our sq it is the director to use so if we move it it's going to be like that so it's still going to work so let's let me go to my database so i'm using my sk workbench if you are using if you are using it what is your code they want to use in php and if you're using phpmyadmin yeah something like that that has mysql and the nsk server installed together you can also use that but if you want to download if you're using workbench if you don't have anything at all i will suggest you download the workbench then we download the watch you can just create a new section here you create your host name like that just create your connection name anything you want then you just click ok then for the password you click write a password that you most likely use or the password that connects to your server then this workbench does not it's just a workbench that connects to your main scale server the server is is separate so if you go if i use a macbook go to preference and you'll see my sql server is here which is running so if i stop makes qsf i won't be able to access my local database so this mesquite this is saved by swatch who runs your database while your type is runs on okay so if you don't have these i will leave a link below where you can download your main scale workbench and your server they're very different so let's not forget that most of us will just download my workbench and forget about the server i will be having will be surprised by the network so your workbench needs to run on the server so i will leave a link below where you can download both of them now let me click on my local db db let me create a database here called employee management so especially employee management okay i can just apply and create a schema so it's just keep my same player management's very no there's not on the table nothing after he's just there so let's go back to our so this is our employee management database is present on our system and this is the direction so when we run our app then it gets connected so does that now let's create our model and do something so let's create some folder or packages let's go to new package let's call this model we're a model is a representation of our database and how is a an object that bondo has send data to our database and receive data from our database and it also help us to structure the table in our database so that's the model so let's write all our folder down let's create a controller folder let's create a service folder foreign logic let's create a repository folder it is a book the repositories where we link directly to our database so the way these are sprint book architecture works you can see i created like different folder the mode is where we specify our database we will specify the the model like a an object that helps create our data our table in our database and also we will call so a we will console collect data to the save it in our table and retrieve data that's the model package and the controller is our apis what connects to our front end application from the controller when you receive we receive information from our front end then it connects to our service then our service layer that connects to a repository that repository then connects to the database now let's create a model here let's call it a java class let's call it m we employee like to add the following to git okay i have a git let's just do that to us making so these are employee class emoji class let's create our um what's it called let's create our our feeds let's call this id let's create another feed private string that's the first let's see first name let's create a private feed the string last name press pretty private return string in me okay let's go to generate some stuff here let's generate constructor let's just make it known then you click on ctrl enter or without enter in windows probably yes click on generator setters let's generate everything yeah so can access our these are our feeds because they are private we need to create get ourselves to assess them does the conversion in java for those who are not too used to java that's basically the content convention on writing java codes okay um so that's that now let's to make this employee to for our application to create a table on our database with the name employee we annotate this with entity using java make sure that the you're importing java.persistence or annotated to the entity then if we do not use the table it would not annotate to a table automatically create a table with the name employee so let's just leave it that way to create a a table the name employee default employee now let's annotate this with ad id let it be id let's annotate to it with um the letter value let's see strategy is generated type dot identity so what this does is this id is like a a unique identifier for all object on our database and it is automatically generated you don't have to whenever you are adding is in employee you don't have to add the value to this ad is automatically handled by the your our sprinkle that's what these annotations mean then for the first name you create a column on our table with a name same as first name name column last name if you want to change the column name we can say add column player say name to b we can say let's just be f and if we don't want the default to be first name f and they would replace it would make this first name but let's just leave it as the way it is let's automatically let the system create a column for us with this name with this value so does that we are done with our model so let's create our repository remember the repository is what talks directly to our database now let's create a repository let's create java let me get an interface and call it employee repository and play repository okay let's annotate this with ads repository this annotation means that look this is a repository is you know spring boot is um it's a framework so this annotation is like there are some things going on behind the scene that it's controlling what happens here so does that let's extend jpa repository i'll pass to parameter i will pass the mode class which is employee this employee is the model class here and then the id of the model class which is a unique identifier the data type is an integer so that's what is in positive now if we look if let me this is the gpa repository that is coming from the if we go here where is it we'll see that we used spring data jpa we can see it here which was a dependency so that's where this is this gpa is coming from so this gpa contains functions that automata helps to control how that helps to continues automatically bid function that accesses our database and if we click on it we'll see it has a friend or mentored so we don't have to like create a mentor to see fan or employee safe or employee you know delete employees so they already contains methods and that help us to to do those things you can see on the crowd it contains all these other things okay so by extending it it by setting it we it automatically has those things so whenever we are where we see what's going to happen very soon now let's go to our service layer in our service layer we'll create um a service interface that will hold our methods then we again create another class that will implement this method that's just a convention we can just decide to create one class and do everything but i would like to follow the conventions yeah so let's create an interface and call this employee employee interface i want us to follow convention and play service interface and play service interfaces create an interface and let's just let's create mentored stats let's just say that an interface basically what it does is help to save methods just save mentor then whenever whatever class is extending the interface we have to implement those method so interface just like abstract class is just for you to just save your method then let's create a method that is a public employee out on an employee let's say save employee let's create another one public let's create let's see let's just an option of employee so it gets employee by id the scripts under employee prescripts a list of is on return a list of employee and we say get all employees the employee unless create another employee let's see updates updates so updates update employee this method is going to update employee then this and i want delete employee okay so these are the methods that i will basically be using these are there are five or four okay that's five here we'll be saving an employee here will be getting an employee will be a single player by id that's one we will be getting all employees and here we'll be updating and deleting now to save employee will pass in an object that will be saved which is going to likely be an employee now to get and play by ideal pass to mostly passing an integer of id to get an employee will not pass anything by getting everything to update employee you will passing music passing an id and an employee of um to be updated this id then to delete the employee will give you personal id that will be deleted so does that let me get rid of okay so does that um so now let's create another class we will not implement all this method let's for let's follow class so let's create a class called employee service okay this class implements employee what employee interface here we can see that is telling us look we have to implement all these methods implement methods let's implement all of them now you can see this method that we are defined here this place also saved them has been has been implemented here now the reason why i did this was this hub makes our code more cleaner there's something where you have to add new method you know so you understand what's really going on you just come here add it then implement it over here it helps for code consistency so that's basically reason why i did this now here since this is a we're going to annotate this switch at service that this test sprinkle like do look this is a service class this is going to connect with our repository that's what this ad service mean so we're also going to use another notation called auto wired how are going on this auto means that look we are bringing in an object of another class so this is going to be um this is all called the pedestal injection means that we are bringing another object here that's the previous injection so we are seeing that look this employee service is going is depends on the repository that means it's going to connect with the repository so that's what we're doing otherwire idea so we'll say employee repository i simply repository let's make this private okay we're bringing this this otherwise means we are bringing this employer repository here because we are going to be making use of it now here let's return let's connect to let's save our employee let's say return and play procedure dot save i'm passing the methods here you can see if we see and play repository dot save if you look at my employee repository you see that i don't have any method i didn't define it for a method called save but if we go here we can see that it's accessing the method save where did this method save come from the mentor actually came from because this man proposes extends this gpa repository the metal save actually is found on this gpa repository this one let's send this other one again this other one you can see the metal safe here this method is what we are calling because we are sending these class this interface so this method save exactly so i call it and this method automatically handled by our spring data gpa which is the dependency we are using so i just want to explain to us what's going on so does that we are saving so over here let's get and play by id if you can see now i'm returning an option of employee what does this this mean for those of us have no comma across this in java this option now of every means that look we are going to return an employee if it exists if it does not exist will return a null so that's what this this option means that look this employee can't be there or it cannot be there so that's why i'm using an option because we are getting an employee by id that means what if the player doesn't exist so what we're going to return what if the employee would add it does not exist so that's why i wrapped its own option now of employee so that's what that means okay we'll say um or save functionality okay that's what i said if it's empty do this if it's 90 then i can say employee repository let's see find the id then we'll pass in the id i do that okay you'll see brushes dots find by id i see the id provided in squeeze a table find by id oh i'm doing find all now don't find fine by id okay let's pause the idk we're getting okay yeah so i get on play by the list let me just okay so that's that then for get employees i think get is deprecated for update employee you will see employee repository dots updates the updates dots let's look at methods dots updates i think they should be update some here okay okay i think before we do that let me first of all see let's create an object of employee and we see employee employee through updates equals to employee repository dot find by id so first of all let's look for that employee which is this and we're looking for and this employee find by additives so then let's make it an option of option of employee okay let's find the id face now since let's to give that employee as if it does exist which which will be saved here they will now say employee to update dots gets dot sets dots search option okay dot s or s true okay if it doesn't exist it should draw an arrow okay now the dots gets dot sets they are your system first name should be this employee dot get first name employee to update dot set last name should be employee dot gets last name employee top date dot set email is gonna be employee dots so what am i doing here so what i did here is that to end to update an employee you need to employ id and the employee objects probably that was changed at the front end now when we come here we first of all looked for our database and checked and got that employee and save it as employee to update now then i'm planning to update now when i say look that particular employee that we got that i said before here now when i seen a nun set the first name of that one that is already existing which this new employee now is the one that is coming in with the first name that was set to it now this employee to update now which is the one we'll go from the database sets the last name of it to the new one that is coming to get the last story to the new one's last name again we're saying set the embedder of it to the new email of the wonder is to be updated now if we go to our modern class we'll see that we have and get first names said first name get last name say last name now these are modern class it's what's going on be used to hold our data that's coming so that exactly how we're doing here we're saying look this one now we're setting this one to do this other one has come in exactly what we're doing here so now we're gonna say employee service and play repository dot save and play to update thank you let's return this thing okay i hope this is a bit clear now now that we've updated this employee now we are now receiving it again here so that is a cool do not delete this will say repository a player repository and play repository.delete deletepad and let me tutor id to delete delete by id good just is this now here we are deleting so this is our services okay now we come over here we can rewrite conditions let's see um if you can just say if id does if id exists then we can see employee dot delete should be deleted then we can say yes we just none let's see so now do something something so those are those are these are all called business logic on our service layer yeah so let's just leave it that way let's know waste a lot of time it's okay so that's that and so let's go to our controller create our api so here we'll create we see m employee controller okay here we quickly annotate this with address controller we are saying look this is going to be this is a rest controller it's automatically handled by spring program sequencing look there's gonna be a it's gonna be a mapping what's the annotation called again this is going to be request map yeah this is going to be request mapping um if the employee if the url goes to the url slash let's just see slash employee good if it goes to the legislative url is let us say facebook.com assuming this is going to be a facebook api we save the user go to facebook.com employee if you hit these endpoints if you hit this api okay if it does not put anything here if user if the user goes to the url you'll say facebook.com is going to hit this directly so our url know it's going to be since we are working on a local environment it's going to be http and whether it's localhost slash 80 td port and stuff like that if we run our app we're going to see what it is if it goes to slash employee should he disappear now here we're going to bring in those other wire while demons are bringing in something we're going to bring in the service layer employee service and play service employee service now what i do here we are saying we're bringing a play service because i'm going to pass our data through to the employee service we had where the impressive will cause the repository and then the database i hope now we know we have an idea on what's going on okay here we create a method code okay it returns an employee called get save students so students save and what is that save students um let's even play umbridge assistive student here okay locate that oh and play all right okay we're going to case get saved employee he's going to take in an employee employee here we'll see return employee service dots we're calling this mentor save employee inside the employee service which is this save employee here we're calling this so that's that and here we're going to annotate this with ads request no ads get mapping this is going to be if you see if it's a get request it will call this method if you say get requested call this method are going to pass in here no this is sorry this is going to be a posts requests sorry because i send the data to our database it's going to be a post request so if it's a post request it's going to call this method if the url is coming and it's a post request it's going to call this method um all we're going to put here let's i'm going to tell you the ads request body this is going to be we're saying look this is going to be a body of the post request remember if i send me a post request there's a body a body is just the data that you are sending to the api that topic that is going to be saved so that the ties a request body so annotate this with requests but they were saying look springboard this gun on this is gonna be coming and it's gonna be saved so that's what the annotation so let's create another mentor that will handle the gets um this is going to be stuff employee they don't list up employee i will say get all employee design is not going to take anything we're going to say return service employee service dot gets all employees okay we're going to take this which is going to be get requests we say get mapping and there's no parameter body there's nobody regarding question have a body so there's not gonna be anything here so create another mentor that will handle get single employee there's gonna be an employee optional social option of employee you see get employee by id so here's we're going to pass in and addis inside we'll see service employee dots get a paper id person to id so yeah it's gonna be let's return here's gonna be a get request so see how it gets mapping so if so this is gonna be a get request and so if now we have to get requests so here now how we're going to specify which of them should go to this route because there are two mentored here and which of them will go to disrupt here we just and puts a something here and say id just say slash id so if the url has slash id value is gonna skip this one i'm to hit and do hit this we'll call this method then this unless annotated is at request parameter at parts variable with id so like if let's just go to uh let me just test this let me just give an instance of what it's going to be let us say we see um gogo.com sorry goku google.com slash employee slash let's say six d6 is the iddis so does this id here if we just go to let's assume google documents our url if we just go to slash and play our sending and get request if and click enter now we're actually sending a get request then it's gonna say start employees gonna say okay this one has a parameter this one does no it's gonna hit this one if if i not put slash let's just say if a anything is gonna say okay look there's something after it's gonna hit this employee it's to pass this id here this cell phone here is going to say this is going to that's all called part variable is going to save it as this and it's going to pass it down so i just want to give an example of how it's going to be when you realite our url is 60 tp so slash local slash 30 slash 8080 then slash employee [Music] employee this is going to be if we click if we hit is going to be alright our url is going to be this this is our url if i put slash m employee is going to hit this api here and it's going to call each of the men are going to hide this map okay so does that last to update employee let's say public oh no let's return an employee up update employee we passing on id i'll pass in and play objects employee we see return service update employee passing the id and the employee objects so that's for save files for okay we this will annotate which are put mapping this is going to be a put request and this is going to be at requests body and this one is going to be at parts variable so this is going to be like a path variable is going to be a body but if we have been put we are updating it's more like getting the post request and some other thing so this is going to be the object that we're going to be updating and this id variable we're going to be personal id so who can get each the id for the particular object the particular employee from the database who are going to query the data using this id that's really who can get a particular employee to now update it with this data so that's why it is this way uh let's do our last and call it okay this is returned on nothing let's delete and mp hello that's employee trying to look at my spending here these are not returning so just simply service dots delete employee but we're actually going to pass in an id id let's call this at parts variable so let's annotate this switch at delete mapping goodies let me just give some spaces down so here i'm gonna let let me just comment this code out so let's see here we are bringing in just what we are bringing in employee service instance so um so for those of us will be looking at the console who knows what's going on here you see this is right there crisis see this is a post requests here we are going to be saving an employee so here this is where i get an employee here getting our employee here here we are on um employee here we are going to be dating on employee right here here might be deleting um employee okay okay i'm trying to format my code here oh i think it's a little bigger okay so i think this um this is a bit better okay just put this trying to shave account for much metal commits okay i'll check how to format document later okay so does that let's test our api and see if it works let me run the app first let's run this ask what's gonna come up gonna be an error or not so let's see yeah let me see this okay seems there are no error okay let me check my database if you know well let's go let's test our our aprc if it will work so let me add a new let's just make a post request let's say hc then let's make it a go to body go to raw go to json let's see first name say first name dennis last name this is john me what give me let's see come okay i think it worked so let me call my database to see because the return is returning the exact object so let's and what's our list so let's test let's add another one let's add another objects let's add another object let's call this let's see sarah james cigarettes he's been added let's get all let's see comedy gets okay let me take this ability we can see we have both of our objects coming there we're able to get them so if i rerun my query my query you can see both objects are there so let's update and see let me click on update is how it puts let's see slash let's say once i update the first element the first value here let me now call this lost june now let's call this to nam jonah yes cody's monday let's call his journal at me for for method not allowed okay oh yeah who's gonna here don't know about putting a put employee slash one let me see what's going on put any put requests put requests sorry oh actually i didn't add the i didn't specify the the parts that was my mistake here should have specified the part okay it's been done let's reload my apnc take this down i didn't specify the id parts so when the url went to slash employee and it was a put he didn't see any parts let's go to slash yeah okay sorry same thing with this let's go to [Music] let me add the parts to this for deleting let's just add a part to it yeah i just had to put it okay so let's run so those api to make sure it's working properly okay all right okay now let's go again let me get this single let me first forget all let me get on you can see where i get all the data let me update this particular first one with this value juno mandating recently has been updated to normally seen less quality database on c you see the first one with the item i was updated as juno mandates in you can see it here okay let me test the metadamato test let's test the we've tested post mapping tested posts we've tested get all we've tested this puts okay let's test get a single one item let me let me get let me just make this a get request layer set id2 let's get the second item you can see the id2 is big cutting now let's delete let's test the deletes let's just delete the first one you see nothing was returned it was terminal let me just check you see the first has been deleted yeah so let's let me modify this let me get rid of this and just delete it away so she was also seats okay okay let's because i forgets all okay we have only two left okay let me delete let me see it's not gonna work because it didn't say that there was going to be a slash two parts you see say four or five error method not allowed because we're going to localhost slash and slash two and they and our api doesn't say that there's gonna be delete for slash two this is a problem today i just want to show what this is so let's we've successfully implemented our ap and now let's go to our front end and create our reacts application okay let me stop this for now recording my database to see because the return is returning the exact objects okay guys let's create our react app for the front end okay so for what we'll do go to our terminal command prompt then proceed to tutorial employee management let me check what if i'm correctly here okay then we'll do npx creates reacts app employee management front end okay so this will take a little bit of time to get installed so let's stick around okay it's been installed um so let's open that on our 3s code let's open the app now vs code the front end let's go to yeah this is it let's open it then let's run it and see let's npn npm stats okay take this up let's you now we can see the app is running currently okay so let's configure our front end list before we move that further let's look at our package.json look at the things the plc we have we currently have react dome we'll need since we'll be using bootstrap we'll install bootstrap who will install azios for making network call then we install rearranger dom for routing and other react hooks so let's quickly do that to install bootstrap mpm i put bootstrap okay let's install that then we can see it's been installed let's installed is just for making network call it's just library the last tutorial i made i use the fetch api for making calls network calls so today i would like us to use azios so we'll know how it work how to use it it's been installed then let's install layout router dom okay so as it's installing less quickly let's get rid of what won't be won't be needy this let's get rid of the things will not be needing oh let's get rid of this one beneath this we'll not be needing this now we need this is is this let's read three daughters okay great updates let's get rid of those um objects let's get rid of that okay this first index or css let's get rid of that it is.js let's put it do this you to do this and i think now let's import our bootstrap that we just added we do import bootstrap bootstrap slash d slash css slash bootstrap.main.cxx okay where it was our bootstrap installed anything we stored via npm is installed on this node module let me try on this node module here if you click it down we'll look at every tip that we installed the npm are here so if we go to bootstrap b o o c look at it here bootstrap all into put strap slash d slash css slash bootstrap.meme dot css so this is what we are bringing out yet so we can use it so let's take it back okay so let's let's go to our index let's change this to employee management tab and play management app okay let's run okay we can see our app is currently on and play management up okay now let's create our folder now let's create our component folder where our component will be components let's create another folder called services here rights method that will make network call should be here it should be a folder called creative folder good service okay so that's for that now first of all like you guys let's create our components let's create header head.com gs yeah let's create a footer component.js let's create a list employee components.js you can use jsx yeah ogx it of them let's create our mother let's call this ad employee compo main.js if you observe my component is only named i started with a capital letter that's the react code convention that each component you whenever you're near name your convent your component you should start naming with capital letter it's just a good convention okay so i'll so we'll do write our header our footer and our our so i have i already wrote a code on my gist that a raw code with that implementation just the the static code that for the header the footer and all of that so i will leave a link below where we can go and copy instead of tapping i don't want to waste much time typing that's why i did this so we can come here this is for the header components there are codes no implementation yet this is for the header you tap it here you put it here so if we look at the code we are importing the react we're just creating the react components the header component now these class name these these are bootstrap styling names then these are these also digital static so when we export this let's go to our to here and let's see header let's see header components make sure his import is imported here then if we it is being read that here already the app then if we go to uh if we go to our employment you can see the header is there so let's put in let's get our footer and other components let's go to our footer click on this footer okay let's glue this thing is clothing gradually i don't know so let's just copy this footer um go to here we go to a footer component paste it and let me quickly add this title this footer i will leave a go to index or css dots for background color to it black let's see color to be white let's see padding to be 15 let's see test our line to be center let's say position to be fixed leave at the bottom let's say bottom let's put it at the bottom to be zero okay and let's export our footer our footer component and let's go okay how's it gonna and we'll see our footage okay see very small let's just add a witch this middleweight to be 100 okay so i'll cancel our footer components let me go to the footer component so we'll see what i did there so what i did was i said all right reserved this column that see this is a javascript code that gets the currency here so that's exactly what it will claim soon this whole can see here it is a currency so let's let me add for the list and play components let's also go down copy for list and play components this list and play component let me click on it click needs and add and play component 2 so junk is loading slowly this template component i think my network is a bit slow so let's just get it now we can also go to the bootstrap documentation you see everything there go to installation [Music] you'll see how to install bootstrap if we don't want to install bootstrap as i did we can also copy the link here and place it on our index dot j instead html also so we can also copy this let me copy it and go to our index.html here then we can paste it somewhere here it can also work but i want us to use our bootstrap offline so that was where npm is studied so it should be on our node module so let's go and copy this here our list and play these have raw code nothing much is there this template components you can see look what i'm doing here i'm just importing reacts i gave them a class name is styling which are bootstrap style and that's just static nothing is there i have no added implementation okay let me do the same for for add employee components this look a little bit long just a form let me so a link is there below where you can copy that let me go to our add and play components you can see it's just raw there nothing is there so let me export those components and see let's call it list employee components uh let me export add employee components add in place so let's see how it looks like let me go here we can see how it is yeah nothing if you click on it once it happens you click on these notes so i have to add implementation to make this functional so this is how it is for now so let's create our method to make network calls and display our data and create functionality for each of this button so to do that we'll go back to our code we'll go to our services let me get rid of this add and play components because we just want it to look like this for now we want a situation whereby when you click on the add employee takes you to the employee component can we let's do that first so that when you click on the ad employee it takes you to the ad employee component so that will work to do that we'll be making use of react's router and some bro some reality react hooks so to do that will import imports browser router from real router dom this is the react rather than installed not long ago if you go to our package.json you see the rearrange dom here yeah where for go to node module is there also react rather than okay so let me know which time bringing it up let's just go directly so we will be using browser browser router routes routes using routes and routes okay now let's have to do that wrap everything using the react router let me just get rid of this for now just get rid of that so we will wrap everything using the react router let me wrap everything here using the browser router browser router inside the browser router will create our routes where we are saying loot is just going to be a route then from the route we create routes we get our routes so this high is done they're from around to begin to write a path and we'll see what either goes to the lookout to the root file then we should add this component which is going to be which is going to be list employee components when the user wanted this slash you should go this also add another route and see see when i say when the part is slash m employee we should the element that should be returned that should be rendered should be add employee components okay i will also say that loop routes also add another route and say look if the parties add employee we should return we should render me we should render and add employee components and let me also configure this dynamically and say look if the parties had an employee that has an option of if we participate employee return this element and every other thing that comes after the ad employee should be captured as id that's what this means look that whenever we go to slash add employee everything that comes after should be captured as id so let's select element b add employee components okay so nothing's missing okay now so let's keep our header here let's keep our header here header components and let's keep our footer here footage the header footer component will always be rendered so that was you know footer components so that's why if you can see that our header and footer component are outside the routes that means they are always rendered they have no parts so they are they will always be rendered with this application app when whenever the app is rendered here our header and footer will always be rendered while these other components we believe that according to the parts this part is just this the part is the part is this slash whatever employee so these are parts slash let's see add employee so this every wrapping those those are what we'll call parts so i think something is wrong with our code okay slash employee should be listed employee not add employee good should be list employee so let me go to employee see listen place trend dad if we go to add employee consider the employees render if you go to add employee slash that you're saying that thing that like comes along you can see the add and place here in that so this other thing that came along with it means that if we go to this add employee slash this other every other thing that came he saved us in this variable that's what this means so one button will be updating our components will be updating we'll be deleting so we'll be passing the id here so that was why i added this route so that's for that let me keep this here let me keep this here yeah let me format my code okay let me give just gives the bootstrap class name to be no nice okay now let's not make this let's keep this here i don't want this to i don't want it to the continent just to prevent your element from spawning through okay yeah they look a bit okay now okay yeah look i will slash employee okay you can see this it's not expanding through his smoke at the middle of so this so this is our we click on add employee okay let's configure this route to add employee whenever you click on the route it goes to add employee so to do that we'll go to if there's any confusion you can just let this track confuse you can just add a chat and i'll respond to that so let's configure this add employee to so when you click on it to take you to the add employee to this will take you to this ad employee so to do that we'll go to the add to the list employee components and you see this a here that has ad employee what will happen to have to replace this with link make sure the link is importing it's been imported from real data done okay i'll close it here with the link then we put to where we're going then we put we're going to slash add employee stardazzo so let's test our app again let me go to locals we click on it we can see we are here if we click on it we are here so now let's before then let's just play with it seems to be sweet so let's get our method that will call our data from the from our api using azure library so remember i have let me get close this in our service this thing our service folder let me create a class that will contain methods for calling data from getting data from our api and from sending data i don't want our i want our code to be organized that's why i'm doing this i can directly go to our components are here and at least component i just created method to call our api but i want our code to be orderly that's what i'm doing so let me do that i love clean code so let's call this employee service employ service dots yes okay that gives a class employee service then let get create methods for calling let's see mentored to get or employee from api from our database api so our database the database without them so record is gets all employee so say return as you should be using this as use measure is imported from the azios library dot gets then you put the url here which is http slash dot 8080 slash employee so this is our endpoint if we go here we'll see that our our if we run our code so it's running on port 8080 are they and if you go to slash this thing when we were testing that was exactly what was there so that's the url so this means we are getting all our data then we'll then we'll export let's export this who can use this essay let's create an east object near play service is good as for defaults we're spotting so we can use it sva so instead of us putting this url let's make green code is a variable let's save it as a variable let your say cost cost base per day cost two uh let's take it out here good okay so we just call the basic rll here so instead of tapping everything so let's do that and let's go to our get all employee our list employee and call this method so our list employee inside here we use the use effects they use effects hook ensure it's been imported here use effect hook then we create a mentored what we're doing i will say look don't only watch our components and always render when you watch our company so just make leave it at empty so what the use effect does is it keeps a look on our component whenever the state of our component changes to use effect runs so if there's a little change in our comp in our state to use if it runs everything so let's create a function here let us call this gets gets all employee let's just get our employee so let's call the method here employee i will say asio's dots oh i'm sorry i'm saying how's this employee play service you can see his it is imported here which is this employee service here wants to get this method so say dot gets all employee since dot d then whenever it it it comes whenever it's successful then this method then is wrong whenever it does not it's not successful then there's an error that is thrown then we catch the error by saying console.log then the error let's just lock it so let me move it to the next line so we can see it clearly okay the depth is successful let's see response let's just whatever is coming from our api let's save everything as a response that's why it's there it's like that then then whatever then we're not going to do something with that so before then let's import let's use our use states let's bring in use states use state is a hook that helps us to save and set data so to do that i'll over here i will see where is that okay above this place i will see cost const that's the structure code let's say employee employee array then sets and employee array equals to use states then it's going to be our objects so since it's a list of arrays so we're using these brackets open bracket closed so that means this is an array that's why using this and this is going to set the array into this so here we'll just call this and see if there's if you after making call to the api and sa response will call this method and we'll set the response that's coming dots the data and then we set it as this if we look at the response the response contains a lot of things it contains so let me just consider the response so see the response contain a lot of things is contained data it contains header and other things let me say console. log response okay so what's the error from error somewhere we're going to [Music] for this component here 15 or okay assign expected an assignment or function call instead of some expression okay sorry okay let's just let's console update let's console update problem for now okay let's console up the response and see what it gives okay sorry let me i was okay so i think error is going these are two different code i what i did was comma i was supposed to like break this code and they run this code so i wasn't breaking this code these are two different codes i was like wanted to run both at the time so i'm supposed to like break this code then this other one will run okay so does that let's test our api let me make sure api is running unless okay sorry before then if less to get all methods okay yeah it automatically runs and get committed okay okay that's true let's just console.log them before we we write before we display them here so okay to do that let's go to our host okay let me check our let me check if if we're getting the response there's an error here the same assets from as in by oh cost policy okay so what we have to do now is we have to go to our controller on our endpoint and to add cross origin all here we are saying that look allow everything to connect to this endpoint allow anything to connect to this endpoint that's what the cross origin does it what we are doing before was it was blocking things from connected to our endpoints now we are saying connect a live written to connect when production most likely will put an object of things that we want to connect because http slash local hosts slash 8080 slash 30 i think we're running on 3000 our front end is running on 3000 let's see we can see this ring on three thousand say let's this we can say let's only this connect to our endpoints let's read this question and point out can i say okay command let's also this source of connect so but for development purpose let's just allow all to connect alive everything to connect so let me run our app see so let's go to let me close everything here let me refresh arrow error configuration okay let me refresh i think our if endpoint is okay our end point is successful now we can see the response here which is this response we have console logging console logging this response we can see that it contains a lot of things it contains config data header request so this data is so interested at because these data is what contains our object from like our name so that's why we do response dot data to get this particular data so if you want to get the header we can get that on the request so that was how we did response.data to get the data our settings here now to get to now this now contains our data now i will do now now map true or look through this array and get each element from it and pass it down to our body now let me get this down let me get this down i was gonna here delete you now to do that i mean so come here and say it's an object where this is java that this collect raises me that look we're writing a javascript i'm no longer writing html here we'll say employee array dot map i will call it employee call it employee i will say see arrow t arrow say arrow and we say okay let me take you to the next i will say look this is it and here we just give it an id of this employee dot id so this is employee so what we're doing here i'll map it through the array but this is an array of employees so when we say dot map we pick each element of this and which element is saved as an employee and each of these elements has a unique identifier so that's what the map does and he saved employees so this apparently is one item okay so wherever it is wrong each of these employees then are then displayed so let's do the td td i will say this is employee dot id this first one will lag on that is called under this the next one should be let's click on objects and say employee dots first name first name the next one will be employee dot last name last name last name and the other one should be let's see employee dot email and then we would then put a td again and say look let's add actions let's say a the call this update um let's see another one let's call this delete okay so let's see let me give it give me just give a space between so they will not be too close together okay so sorry this car this is oh yeah update and delete okay so let's go and see we can see it's there yeah i see this i was rented a lot of times we can see is there an update and delete for nice nothing happens we can see we are getting our data okay um so let's give it a class name ptn btn info class name btn btn danger so we can see update and delete it's kind of look cool now so let's click implement the function when you add employee you collect the employee and save to your database so let's do that now so to do that we'll go to our service and play service i write a mentor to save employee we'll say save employee and it takes in an employee objects and employee data and then we see return as us you see others is very it's very dot posts so positions is very easy i will say base url then passing the employee data so otherwise it is very straightforward unlike fetch where you have to specify the header type the you have to specify other things you want to use the fetch api before as your those things will have already been taken place behind the scene so a very straightforward library so this is how to we're making a post request here saving an employee please let me let me mentored to save employee let me just commend that out so let's add the implementation on the add employee components here so to do that so first of all we're making use of use states let's use states so a few states um each of these oh let's come here as constant let's const this is first name first name set first first name goes to use states is gonna be um a string const set last name of me last name last name set last name it's going to be used it's going to be a string const it's going to be a string so while just collecting the variables mental to collect variables let me see let me annotate its methods that's a method let's say variable a method to call it impedes us to collect and stop inputs so whenever we call this method it collects the input and save it here whenever i will call this the collect the input and save it as last name whenever i will call the set email mentor they collect the input so this method and save it as email so that's the use states so this is image string we put double if it was an array if we are going to collect an array we do something like this it was going to be an object we do something like this so does it so it's going to be a string so here now let's put the value here um this is first name let's say value is going to be first name for arrow st first name say value what friday is gonna be last name let's say value gonna be email so if you can see let's notice up here so let me just make sure this works let's here let's just call this denny's let's call this john ho ho that's let's just check this out you can see the values are there i just statically typed them in okay so that means that this was actually called so does that okay now let's do add on change whenever the values change oh no come change whenever it's changed oh say look sets which is set first name will be events.target.value what we are doing here is we are saying look whenever there is a change in this impute feed whenever there is a changes in input field collect everything that has to do with the input save them as then call this method set first name then look for the value which is whatever we typed into this input feed extract that value from this set and save it as first name that's exactly what this method is what we did here so let's do that for the others let's say on change and see let's collect the inputs as e let's say sets set last name dot target dot value let's do this increase here and change let's see save it as e maintain sets in me and target okay now let's let me create let's bundle everything to our objects um const m employee let's just call it employee data because so let's bond everything to it as an object this and then let's call this let's say first name first name last name let's bundle it on my object and then let's console.log the objects and see what the object is dot console.log employee okay so this is console.log okay so let's check it out and inspects what's going on here these are okay let's just call this this pre-fill okay so you can see these are the object why is it null no no okay sorry it was refreshed you want to click on save not to happen okay the object are there now click on save it had to yeah yeah sorry okay so we can view the object let's take this off then let's click a method so that whenever we on click so that whenever i will click it to save it then let's just let's call this event i will see that payment called save employee let's call the methods call this whenever we click on this button save we run a method called save employee so let's create a mentor from here here function say employee here that's event dot pre event defaults so we're doing that we're saying that look this event is everything that has to do with this form which is coming here we're saying look prevent the normal behavior of a form that's what this is and now when we have done that then go below our do whatever we specify here do that so what do we specify here let's get the employee service dot save employee then we'll pass in the employee objects which we have collected here after we have filled it then we collected them here then we saved it if we click on the save employee let's go there consider save employee we're getting save employee okay well this is the method here we're passing this employee data this object so does where is that again that's add and play good okay does this data here that we collected would contain the input from the user we bordered it into an object and we're passing it down then let's say the depth is successful then we'll do something if there's an error then we do something let's just catch the error first and cause error there's an error if there's no error let's move it to the next line so we can see if there's no error that means zoom this ldt if there's no l error we we whatever comes back we save it as response and would then if it's successful let's navigate to if well sorry if it's successful i'm not that's right if it's successful let's navigate to the home page so to do that we'll be using a hook called use navigate to do that using imports use navigates use navigate from react router dom so here we now create an object of the usernavigate let me create an object okay let me create an object here of the usernavigates let's create something here okay here let's just bundle the object input from user okay that's all these those are here we save method.save employee save save employee save data send data data to api to api and save and navigate when successful so let's use make use of const cost navigates also yes say this is navigate okay so if we successful we'll see now if we get i will not say i will navigate into let's navigate to employee okay so you can just sorry so you can just get rid of this response no need of get collected so when it's successful we navigate to the slash employee page which is this we navigate to this slash employee so navigate to this so that exactly what we did here okay now let me implement on cancel if you click on cancel let's just navigate away to the home page so we make use of the link okay and the link and we said so if we click on it we say to what parts call it employee which is exactly this thing here which is this when we cook you you it will not run this return it will not go to this place here so does it so let me quickly go through it over again so what we did here was that we we create we use a use state hook then we collected each value from our input first name last name email by using this method on the on change and we set the value here here now we bundled each element into an object first name last name email and then we then pass the up bond object into this method and then we then saved to our api if it is successful we navigate using the use navigate hook we navigate to these parts which is to this part of the home page if there's an error we can also lock the arrow so let's check if our api if our method works so let me go now first of all follow me check the console or let me refresh let me add employee click on console you see cancel it returns back it goes back to the home page that works let me let's save save employee sorry save employees oh is saving is saving an empty employee i don't need that i don't need that so to do that let's handle let's make sure that the employees are not this object we are passing through are not empty i don't know to do that i will say if employee data is not equal to it's not equal to empty and employee data is not equal to apply data dot last name is nick was empty dot first name the last name and and employee data dot email is not because empty if we can encounter empty then run this method here let's put it here s if they are empty a lot and say please fill in all inputs we don't want to send empty our data to our database okay let's test it out let me refresh add employee save please fill in all inputs okay let me just do this to this let's not add any please fill in or impute okay validating so now let's say john singh let's say mary and john at mail dot com save you can see johnson mary is saved here okay if you can see our um our inputs are you know they are is it was saved but they are not the orderly arranged so let's write a whereby our last input will be displayed first so to do that we go to our api again i'll go to service okay we go to get all employee get to employee get all employee and we say find all when we see such fine go sold by direction.descending by what's by id okay let's refresh our runner up again so so over here we are getting the last element first that's how we're just sorting i'm getting the last one first and the by the id the last id that was out there we're getting fixed that's what we did here okay let me check if our endpoint is running let's go we can see this is not here 5432 so it works so let's implement the updates and delete employee and then we'll be done so to implement the update employee let's go to our service here and do updates updates employee to update employee we'll need the id i will name the of employee data i will pass thing here we see return [Music] as use dots put is going to be a put request i will say the busy roll base url then the employee objects now if we look at our api for the updates employee we'll see that we'll see that update service employee we see that we have the part variable which is the id we have the power variable so our response coming from the aps you have a part variable with an id we should be then be used to to do other things so to do that too we have to add our id to it and to add our id to the parts you and url we use a backtick and string literal i will say slash and let's just do this slash id okay open that how was this so let me go back again remember our url is local employee but to make a put request we have to go with slash the id so that's exactly what is the busy arrow here which is this they will have to add slash id which is the id will be getting from the parameter so that was exactly what we did plus the object data okay now to update our employee let's go to our our list employee then on the updates let's create a link here that will take us somewhere cannot update it here link here will take us to let's also use that same employee add employee to do this let's say you take us to add let's make use of this same ad employee here's the add-in play again this let's make use of this same add employee object for adding employee let's also use the same um component to update our employee so when click on this update we go to add employee then let's let me also pass in the id also because if we go to the if we go to our app.js we saw that when you you if you go to this absolute part you can also add in extra things as id so that was why i did something like this so let's go to the add this employee so let's as i'm going to the add employee let's also add our id we go do something like this um we see let's use let's destructure this again in this structure the structural work here slash variable employee dot id let's pass in the id so let's test it out and see how it works if it works click on updates you can see the id is being passed here but here you see adding employees employee page so let's change this ad employee to update and play whenever we are coming from this update employee should be update employee and we should also display the already existing data of that employee here so therefore if we're coming to add employee issue display ad and play without any data so let's quickly do that in the employee in the ad employee space over here we write the method first of all let's use a let's use another hook called use params so these use params helpful helps to get the parameters such what is our parameter these are parameter like if i click here and update so these all these are parameters help us to get parameters so let's use that and hook so here we see constant let's destructure this and sequence to use params okay so what it does that it looked at our parameter with the name id and us collect it remember if we go to if we go to the objects we we say look all these are parameters so this was saved as id so our use parameter what it does is that it goes through our routes and check out our parts and look for a name that is exactly what it was renamed to so this thing can also if we want to destructure this so this will save as an id so so it's getting this id here that's what it's getting so we can also if we don't do the structure we can also say const id equals to use parameter see okay let us see const use paragram because to use parameter when i say use const id equals to use param use param i just want dot id so we can also do this so this is just a shortcut for all these okay so i just want those to know that it's a shortcut for this so now we have getting the id from the url i will now say look now let's go down here read i want to say look if no further for less creating a method called title so that we can dynamically pass in the title here here when i say if if id exists that's if this id has a value then we'll say return we'll say return pub dates employee s if he doesn't exist to see return add add employee right what is this okay sorry i didn't put this that's on the problem with this if this exists sorry okay now let's put this title here um let's put this title here okay so let's go again and see okay we can host let's click on add employees so it's in add employee because there's no id in the parameter if you go to update employee it has turned to update employee because there's id in the parameter okay so we have dynamically done that so also let's get whenever we click on the updates employee let's fill in the data that correspond to this id let's fill it here so to do that we use a we use make use of another hook let's make use of this use effects again and we'll see how should we put that now let's just put everything below i will say if id if id is then we say use effects let's put this and employee service dot gets sorry let's get employed by id kids sorry let's get in play by id first sorry let me go here and click on get a playback id get employee by id so passing an id here and we see return return as use does gets i'm passing the busy roll pcroll since we're getting played by id how we're gonna do that let's go to the endpoint so get employee by id pose gets here i get today by ig we are adding slash the id parameter here so over here we do let's destructure this undo slash um so i said structure let's use stringly terra sorry slash the id which will be passed here okay getting played by id so employee dot get and play by height for e by id what play by id will pass in the id okay okay let's see if there's id you just id around this okay if there's id then run this method okay then dot then if then dot catch let's see error console.log the error then if we successful then we do then let's call the result of the response response and we'll see oc okay we'll see let's create some let's just create a lot of objects here let's before then let's what do you have first name last name image so let's set those things to let's reset them to the first name last name email so you will see sets first name will be response data dot first name okay open what's going on here set last name to be response to data dot last name we know why that way sets email to be response dot data dot email okay and does it so let's check if it is if it works let's check it if it works okay let me click on this and click on add employee it's not there or date employee okay you can work out let's see what the problem is okay let me just consider log and see spreads free to resource server response with the set of all for not found free to do okay okay thinker let's see what's going on here play get the player id get employee this url dot gets id get a playback id there's a decent play here on the employee okay now let me console.log objects okay sorry there are requests fit with ctos codes sorry okay let's see who did request for gets my pain personal id okay okay start see okay it's not getting something wrong with our what's going on oh sorry the piece here here was more like raising your busy area like it was we're supposed to have made it an object sorry that was my perm source mistake for my end this supposed to be a variable yeah this supposed to be a variable so that's like was a mistake it's supposed to be available so i was so what what when we did something like this the basic array was being considered as a string and this is a variable here so when i did this this was like a string and this is supposed to be i'm supposed to have done something like this yeah sorry just and this so so it's going to work now let's check again and see these are actually variable not string i was okay okay you can see okay let's start again you can see it's displaying properly now click on updates you can see there the values are there now we're able to get them by id if i click on this one update you can see the value idea so let's proceed let's save it now go to our add employee list if okay let's remove this alerts yeah okay okay now let's save it now um save employee okay if we click on the chip save and play then what we should do is if this is not this this is not just this it's not this is not if they're not null then we should save the employee passing the employee we should save employee passing the employee we should pass in the id2 to pass the id and the employee objects now we are done we navigate okay so no sorry sorry sorry sorry does so let's create another for inside save employee this is just for saving let's say if let's let's let's do something okay let's create another if statement if the id exists if id exists yes if i did exist okay okay if i d exist then c to this but passing the id okay um open up some what's going on here what i'm actually doing is that i'm using this one mentorship employee to which is this method here same employee to dynamically save the employee according to what that is being updated or is a new employee now if all the these values are passive that properly feed they will not check if the parameter has an id if it has an id then it should click issue save the employee and pass in the id to it and the object if not if it doesn't contain an ad they should go to the normal save employee and just save the employee so let's go to our service we can see that save employee update employee it has an id is supposed to call on the update employee and passing the id or s if you call on the save employee so let's distribute column the update employee so if there's adding the parameter by using use params the issue pass click you should run this method update employee as if there's no id you should just save the employee directly so that was all we did here so let's test and see if it works okay okay let's test and see what gradually coming to an end this is not five less this was empty let's update this not empty again let's just say let's call this mara blessing mara at dot com save okay let me refresh okay my id was saved here okay i think i have to sorry it was similar so let me add one last thing if it's been saved we have to call on we have to call on [Music] we have to navigate to the save employee okay and we have to call on i think yeah we're saving employee okay okay let's i want it to automatically refresh whenever we are done okay let's let me let me update this phone now let's call this isaiah lisa lisa at mail.com if i refresh now the phone has been updated to azalea sassoo is working now so wait yeah it's working now so let me add an employee let's call it job job me [Music] job at mail.com these are some random data you can see job is there let's update this to you can see we want to update the data automatically feed let's now call this to let us call this z k and elias elias sdks header brother s here at mail.com you can see the sdk layers it was updated good good good i think we are done now let's we are actually let's click on this john c it was populated let's rename to let's call this what name should we call this num let's call it rev let's call this okay let's just leave the email okay if we click if refresh he has been changed to rev okay all right so now let's click on the delete button whenever we click on the delete you should if you remove the others last implementation okay to delete an employee first of all we'll go to the employee service and add the mentor delete employee i will be passing id i will do return asios dot deletes they will pass the base url and we see plus we say plus id so if we go to our endpoint we see that when we are deleting we have a visual slash the id and so with the adidas we are getting from the endpoint from here i'm sending so it will be sent to the api in that format so this is also the simply as this but here we use string literals while we're here we use the old concatenation pattern okay now so let's go to our list employee and implement our delete so first of all to do that we'll go to um we add the method here code function call it delete employee just creates an event just got this let's pass in an event on id here we'll come here let me do this um here i'll say on click on click so for let's call it events um i'll say delete employee opacity event and i'm passing the employee employee dots id okay so is it this no so passing the employee dot id okay so now let's go here we'll say let's prevent the defaults dot pre print let's let's remove the default character they will now say azios see employee service the delete employee passing the id i will say then if you successful then we'll be successful then we run our methods then dot card if there's an error we'll just say the console.log error the e as error so that's that let's test our app and see it ha its functions okay so let me refresh this and click on delete you can see it's gone let's delete the five he's gone for his country it's gone so he's gone let me refresh it's gone let's add employee let me just add my data here you can see it's added let me update it so let's just say mary let's do the surname and then call here mary we can see it's been updated so that is our application so we are done so if there's any course or tutorial you want me to do just add it in the comment section and i will get it done thank you and see you guys don't forget to like and subscribe and share my tutorial if you gain a lot no say so if you don't also say so thank you

Channel: Phegon Dev

Views: 19,392

Keywords: spring-boot, spring mvc, react js, mysql, usenavigate react router v6, useeffect react hooks, useparams react router, java, javascript, sql, spring boot tutorial, spring boot project, react project, reactjs projects, react hooks tutorial, 2023, 2022, full-stack web development, rest api tutorial, spring boot api, axios react, hooks in react js, useEffect, useState, useNavigate, usenavigate react, react-router-dom, bootstrap, spring boot crud, react crud app tutorial, react, nigeria, africa

Id: jJJ07Tni81A

Length: 132min 18sec (7938 seconds)

Published: Wed Jun 15 2022