Master React & Node: Build a Full Employee Management System! (part 1)

hello everyone welcome back to code with sub YouTube channel in this video we will create employee management system using reactjs nodejs and my SQL database for the database you can use any other dbms like you can use SQL or post or other mongodb but I have used my SQL database okay for the front end reactjs and for the server side nodejs so in this video we will create this okay this is the demo that I showing right now to you okay this is the login page okay and I have validated it through server side let's press slog button see wrong email or password or empty are required okay so we will validate this through server site uh now let's uh uh log into the system gmail.com let's Press login button so we log to the system this is the dashboard of employee management system this is the summary of admin employe and total of Sal salary that we should pay and these we will see see here the list of the admins okay now let's click on the manage employees in the manage employees we can add an employee edit and delete the emplo like let's add an employe let's select the category the category are already stored inside the database so I have pitch them okay we will pitch them and we will select the category let's select an image let's press add emply see the emplo has added successfully okay now let's move to the dashboard see everything has changed to employe and the total of salary if you would like to edit it so we can edit it PR just edit okay see the record has edited successfully okay and also if you would like to delete so we can edit delete it delete the record okay also the categories we have these categories so we can add a new category like that is related to developer okay that was development developer add it see that the category has added and also if you press the log out so we will log out from the system see we log out from the system so it was all about that we will perform in this video we have used all the concepts that you will learn in the reactj like routing and also the how to connect with the database and how to pitch the data insert and perform the operation and also how to Hash the password and also how to generate the token and store the token inside the cookies we will do a lot of things this video will be very helpful for you uh and this was the demo that I have showed to you for this the first part and the second part is a short video watch that that is must to watch okay that is a short video but that is very essential there we will discuss the uh role base management system and also whenever we come to the system if you are logged in as employee we will move to the employee detail if you are loging as admin we will move to the admin side okay just keep this in mind uh this is the first part and for the second part that is a short video but very essential topics that we will discuss there so now let's get started okay to create this project this first part the admin dashboard so let's get started so for this employee management system the first thing yet that you should already installed nodejs let's check it okay let should move to the nodejs download so you can download it for Windows Mac and other uh operating system so let's wait for it so you can download it okay after downloading and installing it you can check it in your terminal or CMD okay move to the terminal CD and write note minus V okay version the version 18 this is node and also npm npm will automatically install with that npm version that is N9 okay so after doing this now we will create our react and node app okay so the first thing now we will do to create our apps okay for that let's move to our um storage and here I will create a folder control shift n and I will name it employee Ms okay employee Ms press enter now this folder I will open this using with Visual Studio editor okay this is the coder that I am using if you didn't install you can install Visual Studio code uh okay it is a free open source and a very good editor so now let's open the folder okay open folder after that come here to that area and employ Ms okay this is the folder select folder so after opening the folder now we will create our apps first of all we will create our react app so let's move to the terminal okay we can move here also um by going to the go and to the terminal let's check here terminal and new terminal and also there is a shortcut in keyboard so after coming here now we will create our react app npm create W okay it is the uh you can use a create react app okay but uh instead of that the wit JS is using to create our app it is very fast okay so now let's assign a project name to our app that is like employee Ms okay press enter now the package name the same okay press enter now select the framework we are using react then the uh variant select a variant we are using just JavaScript so it is done okay employ Ms has created so now we will move CD employ Ms we will move move to the CD employee Ms after moving to this folder employee Ms now we will install write npm install so it will install all the packages dependencies that we need for our react app okay so now we will wait for these dependencies and packages until it install so the packages has installed now to run our react app we will write this command okay npm run de we can press control and our Mouse left button by pressing this it will open automatically but I will copy this URL and move to Chrome and paste it here and press enter so this is our default react app okay later we will customize it right now leave it like this now we will create our node app okay so let's move back to our terminal and here we will create now our node up so for to create node up we will take a new terminal in the new terminal we will create a folder first of all so let's come here and here we will create um name we will name it for example server okay and now we will move to server folder CD server after moving to the server folder now I will write npm in it minus y hypon y press enter so it will create a packag aition file inside a server okay so this file has created inside that okay so now we will install those important packages that we need to use in our server app so let's install all those packages first of all Cs and now let's typ npm install first thing is that we will install Express Express is the framework of nodejs which we will be using for coding okay we will use express for writing the noj our uh server side code then we will install my SQL we will use database as MySQL you can use mongod uh but we are using MySQL and then cars okay to access our server side in our front front end okay we will use cars cross origin okay uh then cooki parser cookie parser which are used for the cookie okay to handle the cookie from our server site later we will use them and bcrypt which is used for hashing our password bcrypt and Json token which is used to generate a token okay for just the security purpose uh later we will generate the C and the token and we will uh teach you everything okay the these packages that we are installing right now and then molter okay molter and path are used to just for file uploading whenever we want to upload an image so we will use these molter and path packages so now let's press enter and we will install these packages yeah those has has installed successfully so now we will create a file inside This Server okay so let's create a new file by the name of for example index.js in this file index.js we will write all our code but I forgot one another package I think one is nmon yeah we should install npm install nmon okay let's press enter to install this package also this package is used whenever we um write something our server side up and we change it means that we change the code nman will automatically refresh our server side up okay so this is the um uh D of this nmon package okay that will automatically refresh the code now we will use that okay to use that let's come here to the package adjon then come here to the scripts and and under the scripts here uh we will use nmon start sorry start nmon and index.js okay this is the file that we would like to refesh automatically whenever we write something or change our code so this was the usage of nman now to run our server side up so let's write something in our server side up okay so the first thing is it that we will uh import um the express import Express Express from Express okay this is it should not include it express from Express okay and uh after that let's create an instance of that const op is equal to express we will call Express now let's use op. lesson here we will assign a port number uh later we will use the tnv file okay to uh assign our port number there but right now I will just assign a port number to this lesson method for example 3,000 and a call back function we will just write console.log server is running we will print this message let's save it and now let's write now uh npm start uh we paste within error so let's check it what is the error import import is not working by default in Express so for the we will come again to package. and here we will write uh module so here we will like type okay type module okay let's save it now and let's check it okay see the server has reped automatically and it printed server is running this was the job of uh no man okay whenever we change something so it will automatically refresh our app so the server is running uh successful okay our server is running right now so now let's move to our front end app and there we will install those important packages and also we will um just edit this code okay let's move to our front end code front end up and here let's come here to the front end terminal let's close this contrl C Okay contrl C so that has closed we are in employe Ms okay in this front end uh folder here we will install npm install first of all a s which is HTTP request and response Library uh then we will use board strap which is used for Designing okay we will use Bo strap designing you can use pure CSS or Tailwind CSS which one you um would like to use okay and the third package is that is Rec AR act router D which is used for routing okay to navigate from one component to another component okay and the fourth thing is that bootst icons you can use the font icons but I'm using B of icons so now let's press enter and we will install these packages later we will edit our code so the packages has installed now let's move to our front Ed to SRC folder okay in the SRC folder we will write our logic our code okay all our code come here this is the main folder okay in this main folder we have imported up. GSX in up. GSX we have that default code so let's first of all I will Lear npm run de I will Lear uh react up now let's close this and let's remove all this code okay this is react pment this empty TX and let's remove this also remove this also save it and let's move to op. CSX control a remove all the CSS code and also index. CSS remove all all the code let's save it and now let's move to our app uh let's see it see nothing now let's write something in upd GSX let's for example write this simple this CF has printed now we will start our coding coding okay so the first of all we will write to create our login page okay so the first thing in our this employee management system we will create a login page so now let's M Toc folder here we will create one another folder components and inside this I will create a login j6 and here I will write rce react AR functional export compon component okay it has generated automatically uh why it has generated automatically because I have installed a package so let's come here to the extension here in vs code and write here react this is the extension okay I will show you this extension I have installed this extension due to this extension you can use a lot of shortcuts okay install this um extension okay for the snipet of react so after that now let's write our code and inside this now let's write a login page H2 login page or login and here let's uh create a forum inside this forum we will have a du and inside we will have label this is for the email for email and let's have an an input field and this is text uh this is email and we can assign others like name is equal to email or aut to complete of and placeholder enter email let's just wrap this email in strong t Okay strong exit and come here control V it let's copy this code or before copying the code let's add a class name to this input form class name that is for Forum control okay boot stff class name this is let's import the boot stff we have installed the boot stff import bootstrap SL U d/ CSS SL uh bootstrap do main.css okay this is the minimize form of Bo let's import it inside our up. GSX okay once we will import it here so here we use the Forum controlled and also rounded zero it means the rounded corner should be zero uh let's copy now this du and we will paste it for the password also uh let's name it password and also here we will write password and type password email password and aut to complete of here we don't need aut to complete uh for placeholder enter password and Forum control rounded zero let's create a button now and let's assign a class name to this that is button button success and width should be 100 round it zero and submit okay and let's add bootst classes to the first du element to the heer that is deflex it should uh should be display should be Flex justify content content Center align items Center and vertical height should be 100 and we will assign a custom class that is login page let's add some classes to this one also padding should be three we have added padding to this um D element and this should be around it round it and width of this uh D should be 25 okay with is 25 and let's add border and we will add a custom class name Lin four Lin Forum D are Lin Forum okay so these are the boot stuff classes that I have added now I I will add some CSS code to these two custom classes also I will add um a background image okay I have an image so let's check it let's come here to the download so this is the image okay I will cut this image this one let's drag it and let's move to visual studio code and here come here to the public I will paste it inside the public okay let's create an image a folder images I will move this image to this folder move so I will display this image in the background so for that let's come here to the component I will create a u style CSS file okay style. CSS so I will write some code for this Lin Fage and Lin Forum so I have added this CSS code okay for login page this okay login page just the background and also login Forum I I have added background color and the color should be white so I think nothing left uh let's now check it okay let's save it and let's import this login inside the app.jsx instead of this let's import log in that has imported let's save it and let's move now to see our login page looks like this but our background image so let's check what happened to the background image come here I think we didn't import the style in the login page okay so let's import um SL it mean the same directory style. CSS save it and now let's check it yeah it looks like this this is our login page let's add some margin bottom to these um input Fields okay just come here to this one let's add class name margin bottom three and also to this one bottom three and let's write one another deal so here we will have a checkbox okay input checkbox okay we have this checkbox name for example take okay ID tick mark or agree we can assign agree let's save it and let's check it how it looks like let's first of all look to this uh and we should write here you are agree with terms yeah for example you are agree with our terms and condition let's remove this strong and so it looks like this okay this is our login page and uh one thing else let's add some this is margin bottom should be one and here we will add Orin bottom two yeah it looks like this now okay one thing is that add a class name margin start margin end should be two it okay now and let's change this text to uh uh login so this is our login page that we has designed so now we will handle whenever we are writing some input Fields okay input in these input Fields so we should store them somewhere okay so for that we are using your state hook let's move to the code okay so whenever we are writing something in this email field uh input field or password we should store that let's increase size of the code we should sort that somewhere okay so for that we are using use State use State hook okay which is used just let's write const first of all I would like to store the email then the password so for that I want to create an object okay we can store separately also like this okay email set email is equal to use State hook so this is the aable where we will store the value and this method is used to update this email okay so instead of writing this separate by writing again for the password also and for other fields instead of that I will create an object okay like I will write values sit values is equal to use and this is an object with us let's create an object inside this okay we can create an array object whatever you want okay so you can create that here we will assign a and default Val is empty string then password the default value is an empty string now whenever we are writing something in this input fields we will store that in this email and the password we will store here so let's do it here we will call unchange event so by unchange event we can create a call a separate function okay which we can create here but I will do inline here in this unchange event okay I will create an array function here let's create an array function and here we will pass an event and here I will call the this set values okay set values method here now in set values um is in object so we will update the object so to update object inside uh to to update the object we will WR like this okay create the object curly places then spread operator then values after that comma we will update now here the email just email email is equal to with e. target. value what we did look at okay so we are writing sit values we call this method okay and then we would like to update the object so updating object we can do like this okay this is a spread operator in the values it means that keep the values the previous values the same for example we had the password and other properties keep those all values the same just update this email and assign e. target. value okay this is an event whatever we are writing assign that to the email the same thing we will do for the password also copy this I told you we can create a separate function for this unchange event okay but I did it in line in this Arrow function here I will just update the password save it so after writing um storing the vales inside this so now when we press the submit but okay this button we should call a function so here we will call unsubmit event unsubmit in handle submit we will call this function let's create this function handle submit is equal to this is an arrow function with us we will get an event here let's write event. prevent default so prevent the defa default submission and we will now use accs Library okay to call our server side up it means that to pass this value and check with the credentials okay with the database so let's do it okay so AXS let's import first of all the AXS Library import AXS from AXS axis. poost we will post the data and we will write here our URL what is our URL the URL is our server side URL that we are using okay so that is HTTP SL Local Host because we are using locally Local Host then the port number what port number we assigned to our server side up that was 3,000 so we should write that that 3,000 slash then where we want to go okay we would like to move to the slash for example login okay admin login okay we would like to move to or we can move to let's do something like / admin login we will move to this you uh route okay lat we will create it in our server side up after that we will get a result okay dot do then we will get a result so right now we will console the result okay console log result. C if there was any error console that error also console. log eror let's save it now let's move to our server side up okay to create this API so before writing the API we will um first of all create connection with our database so for the database I am using let's open my SQL workbench let's install my SQL and Apache you might be using the um my SQL workbench but I'm using the zum server okay so let's open it what happened so let's check the my SQL yeah that is running so let's move and come here to the browser and write Here Local Host okay let's remove this preset let's move to PHP my admin to the my SQL okay my SQL database is it running I think there is yeah that is running okay so let's create a new database now I will create a new database let's assign a name to this that is imply Ms okay emply MNS let let's create it that has created okay imply Ms so now we can create a table for the admin let's assign table name to create a table I will assign a name for admin and we will fil ID email and password I think we need just three Fields so let's create it we has created okay let's uh Define the fields the first one is the ID and then the email and password let's this is integer with us this is uh Watcher and this is also Watcher with us and the length it is not we can Define here for example the email should be like 50 password password should be 140 because we would like to change that to the hash and then come here index okay this is primary key uh the ID is primary key with us okay let's assign it Auto increment so that is okay okay let's create it now save it so we have created the admin table we will just assign um manually aard to this so I have inserted this one record manually okay one thing I should mention that the password is didn't Ash okay I will apply the hashing password and checking that back in employee record okay don't worry for that so this is just a manual record for the admin to test it okay login our login page so now let's move to our server side okay now we first of all we will create connection with the my SQL database so to create a connection I will create a separate file just come here to the server side up okay let's close the employee Ms and to the server here I will create a new folder by the name of UT tails inside that I will create a file db. JS okay and here I will create a connection first of all I will import the my SQL import my SQL from my SQL const con connection is equal to my SQL do create connection and here we will Define first of all the host our host is Local Host then the user user is root with us password we didn't apply the part we don't have a password and the database the database is employe Ms oh now let's check it okay count. connect here we will create a function error if error if there was an error so account console.log connection error else console.log you will just print connected save it okay this is the connection with my SQL database okay so it will create the connection now let's move we will create our routes first of all okay I will create a folder so let's sorry create a folder by the name of uh routes inside this routes first I will create a route that is user or admin route okay admin or I can name it yeah admin uh route admin route. JS inside this admin rout uh I will Define now the routes related to the admin all routes okay the apis I will just write all of them here here so first of all we will import Express Express from Express okay after that let's const uh router okay we will use router is equal to express. router we will use this method okay now we will use this router okay to create our API like this okay router. post we will post data the login data okay the our route path is the path is SL um we should write let's move to our front end we have used this part okay Local Host Au admin admin Lin we will just write here admin Lin okay the Au we will write that in the index uh file okay so we will just write admin Lin here we will get a request and response now we will just console our data console.log request. body okay that the data that we received from front end or not now let's move to our index.js in the index we will just Define first of all import cars from Cars okay cars and let's use them we will write const uh sorry op. use cars and also up. use the express. Json this is used okay Express Json to convert our transfer our data to the Json format when we are passing from our frent uh now let's import export first of all our um let's admin route okay we will export it we will export export a router as admin router Router now let's import it inside our index stres import um admin router from routes admin route okay after importing them now let's use them okay up. use here we will assign po which is a then we will write here admin user admin router now let's move and check it okay let's move to the console to our project and here we will test it okay let's appreciate first of all that is okay let's write something email admin gmail.com and here we will write something password okay whatever is that let's press now um uh the Lin so after login let's check it okay we got the data or not let's move to the terminal we faced with an error so it says that let's check it okay we will check now the error is in server s side okay we faced with an error in server s side let's check it the error employee route admin imported from the admin route okay error is in this file import SL route ad main route let's check it we are in the index so we should import ad main route I will fix the error okay I will show you then uh I think the ER is just we should add GS file here okay let's check it okay first let's just come here and let's press log in let's move our code back yeah we f yeah but we didn't receive the data it is an empty body okay it means that we didn't receive our um data so let's check it where is the error uh let's move to our front end op. jsx uh login uh we didn't pass the data okay let's pass our data comma then we will pass the object values okay values now let's check it once again let's come here to the browser press log in and come here to the see we got this data okay we got the admin gmail.com and password that we has entered so it means that we got our data so now it we will check this credentials with the database just come here to the admin route uh and here we will just check our um credentials now with the database to log to the system so let's write first of all the SQL query for to match them okay so let's write const SQL is equal to select select St from uh admin okay the table name was admin where uh email is equal to with question mark and password is equal to with question mark okay these question marks means that we will apply it means that we will write the values of these email later okay when we are running our query now let's Let's uh import first of all our connection okay database connection so for that we have the connection here so let's first of all export this okay so let's export it export default con so after exporting it let's import it now import confirm uh I think we should move to slash we should move to the utils then d BJs let's save it and now we will use that connection okay to run our query that is con. query so after that we will pass our SQL query then we will attach the values that we want okay these values okay let this email and this password we will attach them so we will write them in this AR notation so we will write request. body. email comma request. body do password after attaching them uh we will get an error or result this is in a call back function if we faced with an error so we will return uh response. Json login status false comma error ER is in a message uh that is that query error just quy error okay else if we got the result what we should do then a result. length was greater than zero it means that there is a record a record is existed so what we will do first of all this is the result is in Array with us we will fix the ID of this user or the you the email okay const uh email is equal to result this is an ARR with us so we will pitch just the first recard that we matched okay dot email it will store the email off user or we can store the ID also after that we will now create the token okay the token we will store then in the um cookie of the browser okay this is for the authentication when uh user come we will check that okay a user is already login or not okay first of all we will generate a token then we will store it inside the cookies the browser cookies so let's generate a token const token is equal to we will use GWT Json wh token we installed it at the start so let's import it import JWT from Json whip token now let's write JWT do sign and here first of all we will Define our payload okay the payload is a string with us it means that we will access it later okay I will show you first our payload is right now we will write role the role of this user which has logged in this is admin with us okay now this API is for admin the one who log in that is admin comma then we will U uh specify our secret key okay this is a secret key that we are defining right now only you should know about this no one else should know about this okay this is a secret key at least it will be 32 characters so let's for example write JWT secret key we will write like this you should write a hard and hashed and a secure key okay then you should write it here after that expires in okay expires in uh for example one day okay this cookie will expire in one day or we should close this here I think one of them is extra that is okay now okay now we can add something else to the payload like email okay email this is our payload okay we will assign email that we have okay this email is assigned to this email contrl B and let's um permit our the document so the document has formatted so this is our token uh token has generated now we will store this token inside the browser cookies so to store inside the browser cookies carefully look at this okay most of the user face with error whenever they are soaring this they face with cards error so for that first of all we will come here to the index then to the cards to the cards we will add first of all we will add three things here okay first of all origin origin okay this is the we from which URL you would like to access we want to access this up from this URL okay this is our URL our front end URL paste it here okay this is our origin the second one is the methods which methods you are using let's specify them get post and so we are using put okay and the third thing is credentials true credential true when never you specified these things now let's come here back to admin route and here we will use response. cookies okay we will uh assign the cookies and the name of the string okay first of all name then uh we will uh assign the value that is token comma our value is uh the token that we has generated why we faed with an error so we should close yeah let's cut it outside from the assign method okay here we should write it here at the last we will return okay return result let's copy this line paste it here return result adjacent logging status true it means we logged in successfully and error we don't have any error remove it else it means if the length was not greater than zero else it means that we faced with an error paste it here return laging status false here is wrong credentials wrong email or password let's save it and now let's move okay uh I think uh yes Ling status okay let's see it okay let's move to our login just come here to the index stres to the login and we just console the result now let's check it okay let's repeate let's add the email admin gmail.com and here we will enter the password 1 2 3 4 5 and we will move to the console now let's press the login what happened see we got this data okay config traditional and data Lin status true it means that we logged in successfully if we uh write wrong password let's press enter what we get in the result let's check it data C wrong email or password login status false okay so this was our login system that means that we logged in successfully and the code that we wrote that is okay there is no problem with that okay now whenever we lag in successfully we should move to the dashboard it is in admin with us okay so we should directly move to the dashboard so for the dashboard now we will Implement our react aam our routing okay so let's move to our ab. GSX here we will implement our routing for the routing we will first import browser router routes and route from react router D after now we will use them okay let's remove this login and instead of that we will use browser router close it inside this we will use routes inside it we will use route in route you will specify first of all path uh the first part is for that we use that was for admin login so we will write SL out slash admin Lin that was the first one that we in the element is is equal to with the uh login okay the second part that we would like to create that is for dashboard o/ dashboard or we can remove this a okay let's remove it just simple admin login in dashboard and here we will create now the dashboard component let's create that inside the components create that dashboard jsx R A fce and let's come here to the up GSX and and here we will change this to the dashboard see the dashboard has imported dashboard now come here to the login whenever we log in successfully we should move to the dashboard just come here instead of this we will write we will use use navigate Hook from react aam use navigate hook that has imported now let's use it here first of all we will create an instance of that const navigate is equal to use navigate and here we will use that more to slash dashboard save it let's check it now just come here and let's go back to here we should move to the uh o/ or just login admin okay login admin that was login admin or that was admin login I think yeah that was admin login so we came to this page now let's write our email gmail.com and our password Press login button see we came directly to the dashboard so we have logged in let's check our cookies the cooka stored inside that or not let's move to the application let's extend it come here to the we should check the cookies yeah Local Host so yeah there is no key keys right now okay it means the cook key is not stored let's move to the dashboard everything is okay index.js use SL admin router and come here to the admin router login SL out SL admin login admin login that is okay response. cookie token token okay let's go back refresh it right now there is no cookie cookie oh yeah to to use to store the cookie when is okay let's come here we should add in our front end okay just come here to the front end in this front end on the top of this uh okay here we will Define axis. defaults do with credentials is equal to true we will pass this save it now let's check it okay rep it and now let's login admin at gmail.com 45 first login button see the code the token has generated and that has stored inside the cookies look at that so this this here most of the user that they are watching the videos this be faced with this error but you should do these two things okay to do it first of all you should add this to the cars and the second thing is from where you are requesting there you should add this line so now we should handle the error okay whenever we face with an error it means when we enter rank credentials we should display the error on the top or down okay that the wrong credentials so for that whenever we return this error okay here we are returning the errors so query error or wrong email or password so we should display that inside the um uh print end okay so for for that let's come here whenever we get the result so we will um do something here app result dot data dot um login status login status if it was okay it means if this was okay right if this was true okay if we return the status true this one so then it means that we logged in successfully then we should move to the um board paste it here else what we will do we will store the error inside the uh a variable okay let's create a variable const error sit error is equal to use State we will use sit error call This And store result. data do error okay that we returned we will return this error save it and let's show you we will return this error okay result. data. error so when we store that inside this variable error now we will display that so let's come here we will display that on the top of uh this forum so let's write here a de and here we will assign a class name to this text danger okay this is a BST class here we will display if there was an error so we will display the error and error okay we will display the error it means that we will assign default null to this error just come here the default value is null this end mean if there the error was existed then it will show this let's save it and now let's move to our front end repeting now let's write something wrong okay @gmail.com for example okay let's Press login see wrong email or password we faed with this credentials okay so if you want to change the text color so we can change the text color also yeah we can change that to text warning I think it will be yeah it is okay wrong email or password so we displayed the error like this but if we log in successfully then we should move to the dashboard so now we will Design our dashboard okay so come here to the dashboard first of all we will create a sidebar in the left side a top meno bar on the top and here we will display the summary of um salary employees and admins and down we will display the admins in a table how many admins are there so let's move to the dashboard component and here we will start our um coding of dashboard okay let start div element and inside this D element I will add boot St classes later okay first of all I will write just the simple HTML code and inside this we will have the our um okay of a sidebar here I will add a link link is the we will import it from react autodom when we click on this we will move to a route let's import it from react yeah yeah link press enter that has imported automatically now let's use that here and Link has a property by the name by two okay two it means where we should where we would like to move we would like to move weever rep press on this link to dashboard okay to this route let's move to to this route we will move to this route whenever we click on this route and this link okay let's write here like code with Usef okay code with Usef CWC and after that we will create a UL underline um an order list inside that we will create a list inside this we will have another link okay and this would be dashboard like we can say dashboard and two is equal to we will move again to dashboard we will create another list also that would be for manage inlo one another one also for this would be for category okay Cate gory we will have different categories for the employees and also for the frile and L out okay we will add log out here so these are a few list that I have added okay so first of all we will check it how it looks like and then we will move and design it using board stra so let's move to the browser and it looks like this okay right now now we will I will design it through bootst straff I will add some boot straff classes I will pause the video later I will show you so I have added the board stff classes and also the board stff icons I imported Bo icons then I have used in front of all U lists okay let's see see I have used these icons okay this is our sidebar now I will show you the code okay don't worry so first of all this is that de I added content float rlex s column these are just boft classes if you know about boft or you are using pure CSS or still CSS you can do this okay this is simple design that you can do UL these are the list these are links dashboard manage employee category profile and logout so these are different list with that we did and a link to code with you so I also change the cwc2 um code with your sub okay so it is the code that how it looks like okay this is the sidebar code now we will add a no bar at the top then we will Design the home page for the dashboard okay let's first of all add the uh no bar at the top just simple no bar we will WR employe management system there so just come here down and here we will just write one another uh du element and create one another new element and inside that we will write H4 for example yeah H4 employee management system let's add Board of classes class name call okay let's check it how it looks like let's move to the Chrome it looks like this okay but we will design it okay just let's paring for this pading for this would be zero and margin should be zero and let's add class name uh to this and here we will add padding to and deflex justify content Center and also add shad let check it yeah it looks like this now okay this is employee management system that we has added also we added the shadow this is the top now bar so now we will add a few cards here okay we will design that for um in home component we will create one another component by the name of home and we will add all these thingss the like cards and also the ad list of admins in home component but how to handle it okay for example we are displaying at the same time this now bar and side bar and also we want to change these context which are at the center okay this dashboard so to to change this Center content so for that we will use Outlet okay react autod provide this picture for us okay so we can do this code will be the same for all components but we will change just the center code so for that we need to use Outlet so let's use the outlet first of all here we will import the outlet from react autodom okay let's press enter the outlet has imported and we use that here it means that it will display all these records okay that the Side Bar and also this the top now bar okay it will display all these things but instead of this Outlet it will display the component that we want to render okay which component we want to render it will display that so for this to handle this outlet for that we will write something let's move to the op. j6 now inside this route we will Define other routes okay we that we want to display uh instead of this Outlet okay instead of this Outlet okay we will um just write all those routes inside this route inside this dashboard so let's write route path is equal to I will leave it empty because on the dashboard we would like to display the home component also if it means that whenever I'm displaying sidebar and top now bar I will display the home component also so I will leave it empty and here I will assign the element is equal to so here I should import the home component right now I don't have the home component let's create it home. jsx let's import it here home that has imported let's save it so now let's check it okay just come here see right now by default we have the home component right now here see the home okay so let's add other routes also we will like to display the manage employees also the categories also the profile also and log out also so let's create these components also so I will add shift Alt AR rrow down I will add three components the first one for the employee so for the employee I will add slash employee okay where we will go first of all we will move to slash dashboard then whenever we move to SL employee so it will open the employee uh um component for us okay so now we will create the employee component and we will uh write it here instead of home yes okay let's create that j6 save it and also we should um let's first of all light it okay then we will imply that has imported automatically and now we will move to the category okay let's create the category also category has imported and here we will add SL category and the last one is for the profile slash profile and also let's add these routes to the sidebar also so let's move to the sidebar um where is our sidebar come here to the dashboard and in the dashboard come here to the Top This is for dashboard and this is also for dashboard and to the manage employees we should move to the employee okay let's remove this yeah dashboard slly and for the category D SL dasboard SL category for the profile SL okay SL profile let's check it now uh we faced within error let's check it where is the error just move to the console SL employee is not valid absolute CH so we should add a dashboard before the um routes okay that we has missed it come here to the up GSX and here we will add dashboard in front of all these board let's save it and now let's move okay what happened see let's close it dashboard manage employees category profile okay so we did all of them so now we will come here to the manage employees okay whenever we come here so we should be able to add an employee edit update uh update delete and we should perform all the operation on employee but before that we need the category okay first of all we will add a category because uh first of all we should have a category then we will store the employees in that for example we have it category so we the employees should be in a category okay so it means that there is a relationship between this category and manage uh emploees uh between emploee so first of all I will create a table for the category let's come here to our PHP my admin and here I will add a new table new press the new and uh I think yeah let's add the table name um table name is category and how many we have two Fields press okay just created or not save it and let's add a new table by the name of category and the fields or two fields and press create that has created and the first one is ID and the second one is the name of category and this is integer and this is water and length of this is 30 and this is Auto in ment this is primary key and also Auto increment let's save it the category table has created successfully and now let's create categories okay we will come here to our code and here we will create a button whenever we press on that we should display a forum and we will should be able to create a category come here to the code into the category do element and inside this you will write H3 tag and that is we should write category list and down from this we will create a link let's import it from react autodom so does not imported yeah that has imported now let's write it to is equal to we should move to slash uh dashboard slash add category and we will move to this route and here at category and down from this we will display our categories how many categories we have but right now we will just add um let's first of all add a class name to this class name this is uh dlex display Flex justify content Center class name px5 top five let's save it and let's check it now uh yeah it looks like this category L list and other category just come here I think margin top should be three and here I will add a class name button button success yeah it looks like this so now when I press this add category so I should be able to see a forum here and add a category so let's create this add a category component okay and also this route so first of all come here to the up. GSX and here I will add one another route and that would be add category add category save it and now let's create the um component that is okay let's check it PR that category see we came here to the uh yeah yeah I think uh I should come directly to the oh I think I didn't imported the add category here yeah that has imported save it see add category so now I will create a form here I should be able to add a category to our database come here to the add category add category so to writing the design for for this uh so let's add uh copy the design of login page okay control B if we copy the design of login page it will be easy for us okay later I will customize it okay it will not waste our time come here to the add category let's close it and paste it and now let's remove this permit and also this one and let's change it to the 75 vertical height and also should remove uh this function right now and this is art category and let's remove this error and what else and also remove this do and also the password fi we should have just I will change this email field now to category category category and this is text category enter category and instead of this let's remove it on change event okay we will now create a new um State variable okay to steer to store the value of this category inside that okay let's create State variable const category sit category is equal to use State hook now let's add whenever we are writing something in this input field we should store that inside this category so we will call sit category and I will pass e. Target do value okay it will store the value inside that and let's change it art category uh I think everything is okay okay let's check it now how it looks like yeah it looks like this but we will add let's move to the top and I will add some design vertical height let's change it to 100 what happened see it is is like looks like this but we should yeah I changed this to height 75 okay I remove the vertical height V so it looks like this right now okay so now we when we add something that will be store inside uh this variable category now whenever we press this submit button this add category we should be able to pass this data to our database and store that there so for that let's create okay we will call um let's come here here to The Forum on submit when you we press the submit button so we should be able to call on submit function now let's create this function uh yeah const anual submit is equal to we will get an event let's prevent default submission and we will use access let's import it. post we will post the data to which URL HTTP Loc host the port number is 3,000 slash we will um move to the enter a path that would be what like like that / add category and we will pass the data which is a category that then we will get a result console. log result. data. cage if there was an error console do log error let's save it now and now let's move to the uh server side okay and we will just add this route this apii okay just come here to the index Tates here we have the admin router let's move to the admin router and here I will create that API that is router okay router. poost and here our path is ADD category SL comma we will get a request and response let's write our SQL query const SQL is equal to select no sorry we should write insert okay into category open the bracket and here we will write name we just want to insert the name and then values and after that open parenthesis question mark okay let's now use con. Query we will run our query write the SQL then here we will attach our data that is request. body. category and after that we will get an error or result response okay if error if we faed with an error so then we will return response. Json uh status false or yeah let's do it like this and error is um query error else we what we will do we will return if there was no error so then we will return response. Json status true and yeah just status true we should add it now let's move back to our front end and here um if we got the result let's APO result. data. status status it means if it was true so then we will navigate we will use navigate hook and we will move to the um category uh component back okay so let's import use navigate Hook from uh react autodom let's create an instance of that const navigate is equal to use navigate sorry I should create it out from the let's create it here and we will use it here we get and we will move to dashboard slash category else if that was wrong so what we will do then we will can alert okay error uh we will just print result. data dot error save it so now let's check it okay what happened let's move to our Chrome and let's add a category that is it part example let's press uh add category see the category has added so now let's check our database here to the category see the category has added first and the it so now we should display those record category list here okay just come here to the category and in the category down from this we will be able to display the categories we will create a table to display the categories and here we will create a table inside that table head and inside that table row table head just we will print the name of category tbody table row and inside that I will use map function to print all the records okay let's remove this instead of that so first of all I should pitch the recards okay from the database okay so to pitch the recards then we will display them here so let's first of all pitch the records just come here whenever we come here to the category I will use use effect hook okay this use effect hook will um has three variations okay uh whenever okay let's I will just show you the context here we have a callback function create that and here we have three variations okay if you leave it empty like this it is the first variation we can add an AR re notation just empty notation and also we can write a variable here okay that we have created State variable these three variations I will explain you now and this use effect is used whenever we want to just contact with outside of f for example we are pitching some data or we are using um sit time out okay um in JavaScript or something is okay the most of often we are using it when you are we are pitching the data okay so now it has three times okay three variations the first one is like when you write this empty AR notation so when you write this means that it will just render at the first time okay whenever you run your application so it will run this use effect hook other um when you are uh after you run the application it will not render again okay it will just run uh render once whenever you run your application but if you don't write this array notation it means whenever you update something or uh change something anywh application so it will render again and again okay and if you write comma and a re notation name here you write a state variable for example you have state variables at the top and you wrote that variable so then it will render whenever you change that variable okay whenever you update that variable so it will render this again this use effect hook okay so right now we need just to render at the first time okay whenever we run our application so for that I will write just empty array notation and here I will use AIS dogit and we will move to http Local Host and then 3,000 is our for number uh and then we will move from where we want which your um route we want to get our categories o/ category category we will move to this route and we will get the do then we will get a result what we will do we will store the result inside a variable State variable I will create that okay let's first of all pitch the error now let's create a variable and we will store our data inside that const c Gories comma sit category uh is equal to use State sorry use State and this is an array type this because we are ret returning an array I will add AR re notation to this variable category so now here I will just write like this it category or I can just display you okay console.log result. data I will display you the data what we are getting in the result so yeah now let's create this o/ category um API okay so let's come here to the server site to the index tges and to the admin route okay here I will add that router. git our path is category request. response and here now we will just write our quy first of all const SQL is equal to select steric from category now let's run that con. query pass our SQL error our result so again we will do the same thing as we did before let's copy this and paste it here if there was an error we will return on this and if not status true let's move back to our uh add category yeah to category component to this one and yeah first of all we will display just the result okay so let's move okay move to our let's move to console we faced with these errors that says uh not found and C absolute rout path emply uh nested under pa/ just was not let's refresh this yeah we got this result okay those were previous errors so we got status true okay it means that we returned um the data uh correctly there is no problem now let's store our data inside this uh category variable so we will WR set category and we returned before just true but instead of that we should return yeah here we should return the status true and also the result result result is equal to with the result we should return the result also just move back to category and here I will write Appo result. data. status if the status status was true so then we will call sit category and we will assign the result. data do result that we returned else we will just display alert uh result. data do error that we returned save it and now let's check it now here we will display the these records okay category which we have stored inside the category so we will use Ma function for that okay category maav and here we will get to the uh s single category and let's now print the data okay table row and inside this I will print table data and category. name display the data inside curly braces we are using curly braces for the dynamic values Dynamic data so let's check it okay now let's move to the browser let's close it see we just printed the ID okay because we have just one uh category which was it just come here on the top I will add class name margin top three and also we can add a class name of the boot stff table save it and let's check it how it looks like yeah it looks like this now we have just ID so we can change the shape the design of table also but it is okay right now okay it is okay let's add one another category it is development Okay add category C it and development these two category we have right now now we will move to the manage employees okay we will add employee and also we will be able to perform cred operation on the employees also we will do a lot of thing okay just stay bear with me I will add one another category designing okay design in are the categor see we have just these three categories so let's move to the manage employes okay so first of all what we will do as we did in the category first we will add um an employee then we will be able to display the records of the employee then update and delete and edit other operation we will perform on on employees so now let's move to the manage employees let's move to our code and let's close this C yeah let's close this profile and also Deb adjon we don't need that and uh employee we are working with that home and dashboard we should close it also uh we should just uh how those important files yeah this is the employee with us and come here to the category as we did in the category so first of all we will display okay the category we will write the same code like this okay let's copy this one okay until this area okay I will copy this code it is the same code just HTML okay don't worry and paste it here and I will close the DU tags that is okay let's format it right click and format the document that has formatted now we will display here employee list instead of got category employee list and also here we will add employee now instead of add category we will add employ and we will move to dashboard then add emplo instead of category implo now we will move to our op. GSX and we will create this route op let's shift alt arrow down it will take a copy of that and instead of this we will add employ e and here we will um create one another component by the name of art emply let's come here JX R AFC store now let's use that instead of add category so now let's move to adding employe component control and click this we came to add employe component uh let's move to add category we will do something okay we will create a forum let's copy the code of this forum because we need the same thing we need just a forum HTML Forum so instead of writing from scratch it will take time so I copied that code and I will just let's right now I will so first I will Design the um for from okay I will remove all these functions add employee save it let's check it now Okay add imply how it looks like the same code let's move to browser and we paste with an error let's check it where is the error here we don't have anything and come here to the emploee yeah link we didn't imported the link react link that has imported now let's check it yeah employee list add employee I press this and we came to add employee list okay so first of all we will add other I will change this input Forum to um for the employee we would like to add name of the employee the salary the email the uh image of the employee we will do a lot of thing okay I will create I will Design The Forum first of all okay let's come here to the art employee and I will just design this forum now uh art category add emply so to the add implo component I have added this for okay in this forum we have a name input Fields email input Fields password salary and address also the image okay these are the input fields that we have now we want to um which first of all see it okay it looks like this okay this is input field just HTML Forum that we have these input Fields nothing else okay now we want to uh import the categories okay we want to select a category for the emploee okay related to which category this emply is that is it designing development or any other category so first of all let's come here to add the category so to add the category I will add that here so let's first of all copy this address field and I will paste down from address and here I will change this address to category category Forum label and input instead of input now we will use select select HTML tag okay inside this HTML uh select category ID also category R category what we should we should display those categories so to display these categories first of all we should Fitch them those uh categories so to fit them we already Fitch the categories in category component okay see we already this this this use effect was used to fit the categories okay so we will copy the same code as we did okay this code copy it because we would like to write something like this okay because we are returning the category I will copy this category variable also copy it come to add employee paste it here now if the result status was okay so we will store the result inside this category okay sit category now we will use this category to display the categories just come here down here we will display the recards okay to display the recards we will use the um maap function so let's use category do map function here category return we will just display the option the value is c. name and also the name we will display c. name and at the top we will add a class name form select save it let's check it now see we can select a category which see we have different categories we can select which one we want okay so now whenever we are writing something in these input Fields okay we should store that in the variable so for that I will create an object because we have four five um VAR uh elements in fo elements so let's create a variable an object sorry we will create an object values or we can select employee employee sit employee is equal to use State hook this is an object with us we will add first of all name in empty string email empty string password in empty string address in empty string category and empty string and also the image and empty string these are the input fields that we have name email password address category and let's check them first of all name email password oh salary I missed the salary let's add salary so these are variables with us or now whenever we are writing something in these input fields we should update these data okay according to that let's add uh on on change event on change event we will create an arrow function and we will update the um our employees we will call sit employee and we will update that we will write employee as I displayed it before spread operator imply it will keep all the values same but we will update here the name build name is equal to with e. target. value so it will just update the name let's copy this code we will do for email also but we will change here the email for the password and also this is for s and come here to the address category for the category let's first of all format the document yeah for the category I will WR it paste it category I will store the category inside category come here for the image select image IM image and here we will just write files this is an image with zero okay the first file andall that inside the image save it and one thing else that we should update the value of this option this select category we we will display the name of categories but when we are storing inside the database we should store the ID of category okay this is a relationship between the employee and category so we should store the category ID inside the employee table so let's change the value to c. ID so now what we should do we should uh whenever we press this submit button okay this button so we should call a function just come here to The Forum onsubmit handle submit function but before implementing this handle submit function we will create our table okay employee table let's M to our PHP my admin and here we will create um a new table employee and we will add how many fields we need name email let's check them let's remove it once save it just come here 1 2 3 4 five 6 and seven we need seven and 8 create it and this is the ID of the employee name and this is uh email then password uh after that category salary and then category yeah no we should store the address and imh finally the category ID category ID so ID name email password salary address image and category ID so this is the ID is primary key with us so let's that integer type and primary key okay Auto increment and let's add length to this name 30 email 40 password 150 because we will change the password to hash and salary this is integer but these are watch are with us password and salary is in integer with us address Watcher 30 and the image is also watchart because we want just to store the name or the path of the image and we will upload the image to the server like 60 make it 60 category ID it is integer but it is uh it should have relationship with the um category okay this should be matched with the category so the category ID is integer and we should select it as uh index okay because it will be a reference with the an [Music] ID so just press okay let's press go and this uh column is index with us now now let's create relationship okay so let's first of all I will save it okay let's press the save button so the table has created successfully now let's move to um the homepage and select the employee database and then come here to the we should move to the design okay let's find the design more select more and designer select this one after designing so we have these three tables emply let's grab it down so we will create the um uh link between this category and uh employe okay so to create the link we will just move and create the relationship here select relationship on the left side um see create relationship okay select this so after selecting it it says select a reference key so our reference key is this in category this ID okay select this one then it says select foreign key okay our foreign key is this category ID okay let's press this one so it has uh showed a PO up meu now for us so now um what you want to do okay UND delete and update okay so now now let's leave it like this okay fore okay so the relationship has been added created okay so we have created the relationship now let's move back to our code okay and the table has created also so now whenever we press the submit button we should um register that record okay just come here to the uh forum and on handle on submit uh on submit handle submit we will create this function and now let's const handle submit is equal to we will get an event uh we will PR prevent default submission prevent default submission close it and after that we will use AXS to pass the data axes. poost and after that our URL HTTP Local Host then our for number 3,000 after that we will move to / add employee add imply then we will pass our data which is uh let's see the name of variable that is imply okay we will pass the data that is in object with us already dot then we will sorry control Z we will get a result first of all I will console the result console. log result. data and C if there was any error so console.log error now let's move to our server site and we will create this add employe route okay just come here to the server side and to the admin routes okay we will move to admin routes and we will come here to the router. poost uh a route is our path is ADD employee and and we will get a request and response now let's write our query we will insert recard to the um database so we will copy this query because it is also for the insert insert into now to the employee employee and we will insert name um email sorry we should write like this comma email I will uh write all the fields so I wrote These input Fields okay this isql query insert into employee uh name email password address salary image and category ID in the values in this question mark now what we should do first of all we should change this password to Hash okay we will change our password that we passed we will hash that password then we will store inside the database so to store that so to change the password to Hash so for that we will import bcrypt okay bcrypt is used for that import bcrypt from bcrypt now let's use the bcrypt bcrypt do uh hash and first of all we will pass our um data our string our password request. body. password after that the salt okay salt is just a number okay that we would like to assign and it is it will just attach a unique character how many for example 10 unique character will be attached with our password the salt mean okay then we will it will we will create a call back function we will get an error or result a hash password sorry okay this will be our hash password if we face with an error now okay let's copy this code and paste it here if we paste with an error so we will return this otherwise what we will do we will write our values is equal to in in a rotation okay we will write all our uh values so let's do it like this for of all we will write request. body. name then request body. email then our password we should write hash password that we generated and then the address request. body. address and salary request. body. salary and image request. body. image after that category ID request. body. category ID so after writing this now we will run our query so let's run our query we will write count. query we will pass our SQL statement now then we will pass our values here and after that it will generate in um error or result we will copy the same code as we did here okay copy this okay if there was an error this was adding category so just come here so we will return the status true okay if there was an error so we will return this otherwise we will return this status true now let's move and check it what happened okay just come here to the browser and refresh this page and also let's move to the console what happened okay we will check in the console just come here yeah let's insert now the names password 1 2 3 4 5 salary for example like this address Main Street main road development select an image so I will select an image let's select an image for example right now I don't have a good image so let's select this one okay let's press add employe what happened Okay add employe we got this result it says query error so we faed with query error so let's move to our server site and let's check there is no error but we faced with running our query error we fa with this error uh I think let's change this password to do string okay salting error and hash app error return yeah let's check it now just come here let's press add employe again with p paste within query error so I will just solve the error where is the error then we will I will show you the error okay so the problem has solved first of all I Chang the multi-line uh SQL query okay to this shape okay I remove the quotation from these and I wrote those quotation single uh quotation at the start of query okay this is multi-line query and the second problem was that here we were writing category ID but in our ad here this was just category okay this was like this so I change this name to category ID and also down where I was changing the data here I Chang this the category it okay before this was just category without ID so I change the name so the error has solved so now let's insert a record okay just come here insert a name password five and salary whatever is that okay this is just like Main Road Main Street this is just an example okay that we will display development and select an image for this user for example let's uh select an image login react okay so let's press um add emplo so after adding emplo let's check now our database okay come here to the imply see the record has inserted okay the password is hashed okay we change the password to Hash permit and these are other things that we has to but the image is just an object we should store the path of the image uh oh right now we didn't handle the image upload okay so now we will uh handle the image upload in noj okay whenever we pass an image so we should handle that and we should store the path of the image okay this one we should Sol now the uh image upload in njs so let's write the logic for the filing up file upload so for that first of all I will import two uh packages The First One Import molter from molter okay and also import path from path after importing these two now let's use them let's use write the logic image upload and image upload save it so here first of all con we will specify the Storage storage is equal to molter do disk storage inside dis storage first of all we will Define the destination where I would like to store okay so for the destination I will get request file and call back function what does this mean I will just show you and explain to you so this is the request that we are getting from the browser this is our file and this is a call back function that we can create and call okay let's call the call back function we need it okay and first of all if there is an error we will leave the error empty and then we will specify where we want to store our image whenever we upload the file where we want to store we want to store that on the public SL images we want to store that on the public and images folder let's move to our server side up and let's create a public folder sorry just come here create a folder by the name of Public public okay and inside this create one another folder by the name of images so we will upload our files to this images the second parameter is the file name okay that we want to use file name again we will get request file in call back method so here again we will call call back error that is no no error and write null and now which name you would like to assign the file you are storing on your storage so let's assign our customized name so first of all we will extract the name of our file like this okay file. filed name okay so it will extract the name of our file plus we will attach an underscore with that for example we have uploaded this image we have in image let's check it and later I will show you okay let's plus we will attach date. now we will attach the time with that plus we will use path do extension name and we will assign file. original name so it will extract the extension and it will attach with that what it will do let's move to the images for example this is emply Ms image with us okay what it will do first of all it will extract this name then it will attach underscore then dat. now time in millisecond then the extension of that so it will assign this name to our F and it will store inside the public images so now let's create the another option const upload is equal to and we should assign the storage now that is we should use multer okay molter and we should pass to the storage property the storage that we has created to this storage we assign this storage okay and now we will use this upload so let's use this upload how we can use when we come here to this add employee so we will call this upload let's call it here upload do single single mean that we are uploading just a single file okay not multiple we can um just create here array also of files so here we will assign the name of that okay field name that is image that with has Okay add imply come here to the image it's just name assign a name IM image type file okay so that is okay now let's move and we will check it oh okay let's now refresh our page and we will apply it once again select category select an image employe Ms category for example press add image okay now let's check it okay again we got the object object we didn't re's see the path name so let's to the admin outout storage data 9 file original name public SL so let's check if the image has saved here or not no there is no image I think the image has not uploaded molter disk storage destination and call back call back file name so the error is that we should store whenever we are storing the image like this okay request. file because that is a file with us do file name this one okay so now let's save it and we will try it again let's come here let's press um two and that is okay press add imply now let's check it file. file name we faced with this error properties undefined file name let's check the public folder so the problem was that we couldn't access this file that file name that whenever we are passing from uh front end the file so for the file we should use Forum data object okay so we should pass that let's do it like that this okay uh just come here down to the handle submit I will create const for data is equal to new for data it create a new object of forum data now we will write Forum data do append first of all name comma our employee employee. name okay we will attach this value with that okay we attach right now the name just okay see name we will attach all these fields so I have attached all those email password and ad salary image and category all of them okay like this after adding now we will pass Forum data Forum data this object let's check it now okay what happen let's move to our browser let's repress the page okay after repression let's select an image we faced within this error so let's solve this error why we can't pitch this let's move back yeah there is an error file request file. file just let's move to our admin route request. file. file name oh let's move it refesh the page that is okay now okay let's select an image emply Ms let's Place add employe see status true true it means that record has inserted successfully now let's move and check is the image available or not let's move see the image has uploaded image then we have attached the date time okay after the extension of that and also let's check the database okay just come here let's move to employee see this is the path of the image that we displayed okay image just this the name of the image later we will display it okay now let's delete these records because we will insert record from scratch let's delete them delete all of them so we have uploaded file successfully now let's uh insert a new recard example at gmail mail.com like this okay five and salary designing and also let's select an image we can select this image and let's press whenever we press this login button if the record hased successfully so we should move directly to the employee page so let's handle this also just come here to the um add employee and here we will handle that okay let's remove it we will do the same thing let's control B it and as we did in the art category as we did here okay if the result the data the status was okay so do like this otherwise paste it here yep status was okay so we will move directly to the dashboard. employe else we will alert the error the error that that we faced with with and also we should import navigate and create an instance of navigate use navigate let's create an instance of that navigate is equal to use navigate save it and now let's move let's press uh um yeah let's insert Rec card see we directly came to the employee page so now we should display the records of the employee so let's do it let's come here to the uh employee uh we should come here to the employee let's try get here down from this now we should display the records okay top three just come here and we will create a table uh first of all we should pitch the records okay to fit the records just come here and we will use use State hook again use effect hook as we did okay before I explained you the use effect hook and here we will pitching out the employees so to fit the implies we need something uh to write on the use effect okay some logic like this okay the same logic we would like to implement but just we will change the route um we will change this okay now we will pitch employee emply and also we will create a const state variable employee SE employee is equal to use State hook and this is an array type with us and let's use now here instead of set set category sit emply that's it okay this is the logic now let's implement this API uh this uh route okay emplo let's move to admin route and here we will implement the employee const no sorry router dot um G as we did for the category okay we will do something like that okay as we implemented for the category just come here at the top uh for the category okay this category let's copy this code because it is the same code we should not waste too much time for it but now I will change it to the employee request and response select s from employee not category and also con query result query error yeah that's it that's okay we have returned everything now let's move back to our uh add employee just come here to the employee and here we will display the record so to display the records again we will display like we did here okay we will um just copy this div element the table also copy it and come here to the employee and instead of this I will paste that paste it so to after pasting now what we will do we will um in the heer we will have name let duplicate name and name then we have email address solary and also what else we we should display um ml address and also the image we should display the image uh I will display the image here okay image so I will display just these three cards okay those FS for an employee and here we will use employee instead of employee okay. map and we will get an employee e uh table row and then we will display all those records first of all we will display e do name and then we will display the E do image okay to display the image now we will implement the logic for the image displaying so so first of all here we will use image let's use IMG okay so after that um we will display the image from our server side okay because the images are stored inside the public folder of our server file okay so to display that let's first of all write like this here we will write the path of our server okay what is the path of our server so we should write HTTP Local Host then we should write the port number 3,000 after that we should access images folder slash the name of our image okay this is the F of our image so to display that let's first of all add plus e do image so what we will move to this route okay then we will display the e. image the image that we are pitching from database in the database we store the name of them and this is path that we attach with that and to access our server side in our front end so for that we will write something like let's move here and just move to the server come here to the index.js and here I will use app.use express. static public the public folder we can access it right now okay let's save it and we will check it later okay now let's move back to our employee and display other other records also and let's display table data now we will display the email E do email and also the address and also the salary we can create one another heater that is action okay which we want to do like update and delete for that we will create two buttons one is for delete we will make it edit the second one for delete save it now let's move and check it what happened uh we faed within error so let's move to the browser to the console uh it says that AIS is not defined let's import AIS yeah we will import AIS we have imported the axis now let's move back see we displayed the images and we displayed the record but the image displayed too much the size is too much but we will decrease it let's move to employee and here I will add a class name like this let's add a class name that is image employee image employee image or yeah I will add some CSS code to this let's move to style. CSS here I will add some CSS code I have added this code now let's check it now see it looks like this right now okay now let's design the buttons also just come here to the uh employee to the button button button uh pry info button SM let's copy this code paste it here and this is warning save it Che so the looks like this let's add some gape margin and two it looks like this now so now whenever we press this edit button we should be able to edit this record okay so let's move back to our employee and to our button do edit okay whenever we PR we will change it to the link react autodom link say simple link okay let's import it yeah link has imported let's perat the document so after that we will assign a path to is equal to where we would like to move we want to move dashboard Bo slash to the edit employe and also we should pass our ID okay to pass the ID we should attach our ID with this route so let's attach our ID with this and we will write like this close it and also at the start let's remove this now will we will just attach plus let's write slash here and plus we will attach e. ID we will pass our ID to this route okay now let's create this route let's come here to our op. jsx op. js6 and here we will add that troute shift alt dashboard sledit employee a play and also we will get an ID okay we will get an ID now we will create a component for the edit employee and we will add that here edit employ that has ADD it now let's move to edit employee and we will edit our employee first of all we will grab the U the ID from our URL so to grab the id const id is equal to we will use use Forum Hook from react Ram what it will do it will just take our ID from URL that we have passed after that we would like to fix the record based on ID and we will display that record in the input Fields so let's uh get a recard based on that ID con first but before that I will create a forum okay let's first of all design our Forum then I will fix that TR card so to design a forum we need the same Forum as we created in the ad employee because we want to do the same thing okay just we want to update a recard what we will do I will just copy this add employee for this design okay what I will do whenever I come here to the edit employee by default okay I should have the data for example I came to the edit employee component I should have the value of input field in this name okay in this name field I should have the value of name and also the record that I want to edit I should have that record in these input Fields okay so for that I was trying to fch a recard then I will display that in these input Fields so also let's copy these things okay uh let's copy these inut fields also copy this and what else we need handle submit let's remove right now the handle submit function I will do it later first of all I will display yeah I think uh it is okay let's now I will check let's import UST State hook state has import let's move to the edit component press the edit so we faced with an error now let's uh check the error so it says reference category is not defined so reference error category is not defined at edit imply let's move to so we should pitch this category also okay then we will display the category so for that come here to the category let's grab it here and we will pitch use H and use effect H I will just pitch the categories this is used for to pitch the category and let's paste it here at the top and also we will create the category variable copy this and let's paste it here now let's move to the browser and what is the error let's import use effect use effect use effect and let's now move to the browser uh it's says accs let's import the accs also is also imported see this is our edit Forum so we should display the default values okay name and which record we want to edit so for that we need to pit first of all a record based on ID then we will update that record edit employee now let's switch record based on this ID Okay so so let's come here um by default let add the use effect hook first of all we pitch this um uh we use it for pitching the category and also now I will Fitch use the XS we can create a function and call them in use effect but I will do like this xs. G HTTP Local Host 3,000 slash slash we will get employe okay employee employee then we will pass our ID also okay so to attach our ID plus we will f+ ID okay we attach our ID do then we will get a result do c if there was an error will console do log the error so what we will do we will now now we will create um our varable now we will update these values okay these values whenever we pitch the record so we should update these values so let's do it so here I will call sit employee in this object first of all I will write employee after that I will update all those implies first of all I will update the uh let's update the name is equal to with the result. data dot whenever we yeah data. name I think so before that I think we should first of all console it what we get in the result console.log result let's display the result result. data okay now let's move and check it just come here to the console uh we pitched let's check it we pitched we didn't created the API right now let's create this API or employee based on ID okay let's move to the uh server.js to the admin routes okay and here we will picture recard based on the ID router doget slash employee employee SL ID we will get based on ID okay request. response let's first of all grab our ID so our ID to grab that we will use const ID is equal to our request. ps. ID so we will ID get ID from this let's console.log our ID we get ID or not let's right now refresh the page after refreshing let's move to the console see we got the ID six so now we will get this record based on this ID and let's copy this code okay we want to edit it okay we will from employee select St from employee where uh ID is equal to with question mark and here we will attach the ID SQL and we will attach the id request. body. id no sorry we have the id id okay comma so after attaching that we will get our result if that was okay otherwise then we will if there was an error we will turn on this if no error then we will turn on status tree and result result okay let's save it and now let's move let's refresh our page what we get in the result so it says let's manage emplyee press edit and we got this error this uh result okay it says status true and we got the result the result is in array in the array we have that record so let's do it now let's move back to our edit employee and here we will edit our records set employee and we will first of all write employee then we will edit name we will write result. data do result that we pitched okay the name of that was result first record do name so this is the record that we can get the name uh same to this I will update all the um Fields okay also the email result. data dot result sorry I will update them so we will update these four pairs okay uh the password and image that is the work of employee to update his password and image so now let's move to the fields first of all I will remove the a password field let's remove this field I think uh where it has removed this is in foot fi let's remove this and we will add do the salary class name call 12 save it and the address is okay the category that is also done uh select image let's remove this also let's change it to the edit imply save it and also we will add value will be it let's add value to these input Fields first of all to the name uh we will add value is equal to with the employee do name that we has we had stored okay this one employee. name for the email value is equal to employee. email part the salary employee dot sorry value is equal to employee. salary address that is okay let's save it and now let's move to our browser see we have the default values we want to edit this record okay so let's edit the record okay for example we want to change the name to youu and also one one and something like this Main Road 12 it to development let's edit employe whenever we place this edit employe we should be able to edit this imply okay so now let's record that okay uh let's uh by pressing that button we should be able to uh let's call handle submit okay handle on submit handle submit we will call this function const handle when we press handle edit button handle submit is equal to we will get an event e do frent default now we will use AXS to update this record okay A.P we will use put method HTTP Local Host 3,000 slash we will mve to O sledit employee this uh route and we will move um also pass our ID okay to that recard so let's attach our ID with that slash plus ID and we will pass the data that we want to update let's pass the object okay employee we will pass this employee object this one and in this we should store uh let's remove this image and also category ID we should remove this and no sorry we should store the category ID uh we don't need the password failed email salary address and category ID yeah these fields should be in the employee so after passing the imply we will get a result let's console the result data. cage if there was any error console.log error save it now let's move to our server side and we will um edit our record let's move to the admin route router. putut slash edit employee and also we will get an ID so first of all let's grab our ID like as we did before so after that we will update our record let's write the query const SQL is equal to update employee seat uh first of all we will update the name is equal to with question mark we will change it to question mark and then we will update the email question mark we will attach them later okay then the salary uh is equal to with question we should that is okay equal toal to and also we should address and category ID where ID is equal to with question mark okay let's now I will just make it multi-line string like this write it here down and here down now let's copy this code okay and paste it here and we will attach let's set shift tab we will attach all our um data okay request. body dot uh first of all name then request. body do email request. body do salary request. body do address comma request what else yeah category ID but instead of this um we will write like this okay it is a pure method to do like this let's all right and values is equal to name email and let's remove the password address salary and category ID first of all name email then salary is before than that then address then category ID now let's remove it here I will write values then here I will write ID save it and let's move to edit imply and here we will result conso the result now let's move to the browser what happened okay so let's for example I will change this record to change just the name and also the email and uh I will add 12 and change this to development edit employe now let's check it okay let's move to the database so I think the record has not let's move to console in the console we got this object yes we got the object that is query error we pasted within error so let's display the error what is the error plus error we will display the error let's save it so we got this error let's check the error so the problem has solved okay we should add this PR operator before these values okay that we are writing first of all we should write these values then we should add the ID so we should write this spr operator before the values in update so this is our query and these are our values and we are updated our qu now let's check it okay so let's add a new name to this also change the solary like this okay and let's change it development first edit employee okay so now let's move and to the employee whenever we edit the employee we should move back to the employee list so we will do that okay so see the employee uh information has updated okay so now we will do that whenever we update in employe we should move directly to the uh employee page just come here to the handle submit okay if the console the result was okay as we did in the categories so it did category I think where was that was in add employe I think so we will light it we will light it don't wor for that let's write F result. data do status if it was okay so then we will move directly to the um imply page so let's import use nigate hook first of all that has imported now let's create an instance of that now let's use it here Nate we should move to dashboard slash imply else we will alert just we will result. data do error save it and now let's check it let's edit it and let's change it to the r and let's press edit employe see we faced with an error or update a CH forign key constraint fails okay it says that the fire and key you should select a category but instead of that we should do something in our edit like just come here to the category to the edit employee and we should set the default value for this category okay the default video for category ID so let's come here down so here we will do that for the uh category Also let's edit it category ID or ID result. data result Z dot category ID let's save it and let's check it now now let's Okay ER appreciate and let's change it now edit employe see the employee name has edited successfully so this was all about edit and now we will move to perform the deletion whenever we press this delete button we should be able to delete a record but before that we will add one new record let's name it choose a file I don't have images but I will select just the thumbnails of my videos okay and let's press add imply see any you employee has added successfully so now whenever we press this delete button we should be able to delete this record let's do it just come here to the employee and in the employee come here to the delete button so whenever we press this delete button we should be able so let's do it uh let's add onclick event to this button handle delete and we should pass the IDF of this user also per the document so let's pause the ID of this us user handle and we will pass the ID e do ID now let's create this handle delete function con handle delete what happened and delete is equal to we will pass an event to this we will get ID here okay not the event we will get ID here now we will just call our server site to delete record from our server site let's use accs do delete we will use delete method and let's copy our route uh URL and paste it here instead of employee we will just try delete employee and we will pass our ID to that plus ID do then we will get a result and let's EO result. data. status was okay so then we will use navigate let's import use navigate hook and let's create an instance of that const navigate is equal to use navigate and just come here to the navigate we will move to um slash dashboard or SL dashboard slash employe else alert result. data do error let's save it now let's move to create this API let's move to admin route and we will create that router. delete and this is our route slash we will get an ID request and response and here we will write our SQL query to delete the recard from my SQL database but before that we will grab the id const id is equal to um request. ps. ID and let's write the SQL query SQL is equal to um delete from employee where ID is equal to question mark and here let's write the concept of let's write copy this and paste it here that's okay SQL and here we will just write ID and error error it will return this uh result otherwise it will return the status two and result let's save it uh where is the error let's check it yeah here we faced within error I think we should close this no but yeah that is okay now and let's check it now what happened okay let's move here and let's press this delete button uh add the record so let's repeate what happened the record has not deleted let's move to console come here to the employee delete employee oh this is O delete employee slash ID then the result status that is okay else error let's repes it press the delete button so faced within error what it says uh let's check it config message network error so the problem is that we should add to our server site the delete method Also let's I will show you let's come here to the index.js here we have added these get post and for these three methods to our cars so now this was blocked because the delete was um undefined for this so we will add delete also save it now let's check it refresh it press delete I think it has deleted but it need a refresh okay that has deleted but for that to refresh um a page so for that let's move to the back to implo dogs and here instead of navigate we will use window. location do reload okay it will reload our page use navigate will not do it but this will reload our page if you delete it see the delet the record has deleted automatically so it was all about uh managing this employee category and let's move to the dashboard and let's design our dashboard and after that we will come here directly to the log out okay to log out from the system the profile is the same to as we did like the employee how to edit an employee so here in the profile we can edit our records okay like if you would like to change the password or something else so you can do that so now let's move to the dashboard I will Design the dashboard in the dashboard what I will do I will just create three cards here okay to display the salary total of salary total of emploee total of admins here and under from that down in this area I will display just the recards of admin how many admins are there I will display them so now we will Design our homepage okay so let's move to our homepage um let's come here to the homepage so I will write some code just to create three cards let's remove this code and I will write some code so this is the code for those three cards okay this is the first this code is for the first okay the total of admin right now I didn't specify the total but I just wrote the simple code okay static code like admin total and also employe total and this is for salary total and it looks like this I just created these three cards so now we will fix the total of them and we will display them here okay for example how many admins are there in the system how many employees and um how much is the salary the total of salary so for that we will use use effect hook to fit the data use effect close it and let's save it so let's create a function outside from this const uh ad main count okay ad main count is equal to it is an arrow function with us uh what we will do first of all we will create three state variable const ad main count sit admin count is equal to use State okay same to this uh I think we have a function by this name admin count admin total okay let's take copy of this and this is um employee total and also the um salary total and make it emply total sit total total so we have these three states variables so now we will uh just add the value of them so for first of all we have created this one admin count now we will just um Pitch the records from uh our server side and the count of the admins how many admins are there in the system so for that we will use accs doget and HTTP our URL Local Host port number 3,000 SL slash uh admin count okay like main count we will move to this URL that then we will get a result app result. data. status if it was okay so what we will do we will set admin total and we will call result. data. result zero we will fix an array dot um we will just uh return admin and let's display the admin total so to display the admin total we will write like this admin total that variable so now let's create we will call this method inside this uh use effect now let's create this ad main count um API okay copy it and come here to the adain route router. git paste it so first of all we will write our query csql is equal to select count count of uh ID we will use count function count of ID as admin from admin okay admin table now let's run this query okay as we did here past it here and we will not pass this error result we will return return this result okay let's save it and now let's move and check it so can we see we have just one total of admins are one so we can separate this and we can bring that the total to the right side so for that come here to the impl to the home we will add bootstop classes here but before adding classes let's write like exit and here I will write H5 and I will paste that here and here I will WR deflex just defy content around save it let's check it now see it looks like this but let's make it between it looks like better now so total of admin one now we will fix total of emploee and salary so let's create a function just this was a admin count so we will create one another function for that would be employee account employee account and let's call it copy this and we will call it at the use effect hook and here we will M to employee count and here we will just write result data status and here we will update uh sit emply total and down we will display the let's copy this Dev instead of this we will write that and this is imply total yeah emplyee total I think yeah emploee total and now let's create this imply account copy this and come here to the adain let's copy this one paste it here that API and this is emply account emploee let's check it okay emploee count okay and here select count ID as adme as employee employe from employee table yeah that's okay so let's move back to our um home homepage and here we will uh read imply save it and let's check it now see we have zero employee right now there is no employee with us we have deleted all them so now let's count the total of salary so for that we will create one another function salary count we will make it like salary count okay but we should write total I think think salary count is assigned tot salary total is assigned there to our varable salary count and we will move to salary count salary count and here we will read salary let's call this and we will assign data to this set total salary to this one one and now let's read it okay salary total copy this and here salary total so now let's create the API this salary account API copy this and come here to the admin route uh let's copy this paste it here and this is a salary count the name is okay yes salary count what we will do here so here we will just use some aggregate function okay sum of salary as salary from imply table okay PR imply table okay yeah we we should write our query like this aary from employe and here we will just return the result that okay now let's check it so let's appreciate uh we didn't select some salary I think everything is okay let's move back to our homepage salary count salary count set salary total salary. salary that's okay let's move to the console oh yeah right now we don't there is no imply in our database so the default value we will assign zero okay let's assign the default values z z and zero let's save it and let's check it now uh I think [Music] salary salary yeah salary total salary total the default value has displayed and gone back let's check it access. salary count so just come here salary count so let's change the name of this uh um salary a salary of employe a okay we will change the name copy this and come here to the home yeah so the the problem was that it is returning the null okay whenever um right now we don't have any imply so it return nulls whenever um we we assign the default value zero so when we call this function it it update that and assign null to that it was a reason so later we will add an imply and we will see the uh effect okay let's add an imply that has added now let's move to dashboard see this is the total of salary and we have one employee one uh admin so now let's display the admins here the down how many ad the record of the admins so just come here to the home and down from this two I will dis create a du element and inside that H3 a list of admins and then we will create a table inside table we will have the table hit inside the table row table hit first of all email and then the action and down in the let's create table body inside table body we will just fix the admins and we will display the record of admins okay let's first of all I will add some classes here class name margin top 4 ping X5 paring top three and let's save it and let's check it yeah it looks like this list of AD means uh email induction let's add a class name to the table yeah it looks like this so let's fish out the records of admin let create a function con uh admin okay okay our main records is equal to and here we will create const admins sit admins is equal to US state it is an array type with us and here we will call the function admin records control Z add main records we'll call it and it's add a d here and here we will pitch the recards okay we will Let's uh copy this code paste it here I will customize it and get we will move to admins admin records and here res status and we will just assign uh data. result to um sit admins okay copy this paste it here and now let's create this API admin array cards just come here to the admin routes and let's pitch it router Dot dog I mean records request response so first of all we will con SQL is equal to select St from adain after that con we will do the same thing let's copy this code paste it here so it will return the true and result now let's display the recards of admin here down at the bottom area yeah here we will display the records of admin like we will write map function we will use okay admins admin. map I think let's check the name of variable that is admins okay admins and here let's change it admins MAF we will get admin and here we will display a table row inside the table row we will display the uh table data inside that the email the a. email and also down we will display two buttons okay the buttons as I did in the employe let's come here to the employe we we will just copy the code of these two buttons edit and delete copy this code paste it here but uh uh instead of this let's do it that's okay let's close it table data let's remove this button function and also we we don't want yeah this is also a button with us a button okay let's save it and now let's check it so we didn't fix the record offord means let's check it uh a. email that's okay table data. email admin. map admin s admins use State admin records admin records St in result else result we will just alert result. data dot error let's save it and now let's we faced with this error you have an error in your SQL syntax check the manual corresp okay there is an error with our query admin recards select steric from from this is not Forum but this is from save it yeah we F the record and we displayed the list of the admins so now we will perform the lout functionality okay whenever reface this lag out so we should directly log out from the system and we should move to the login page so let's move here to our sidebar let's move to the dashboard contrl P write dashboard and in the dashboard we should come here to the L out okay whenever we um click on this so we should log out from the system let's uh yeah whenever we click on this list okay on click we should handle lagout should call this and let's come here we will create that function now const handle lout is equal to so here we will use axus dogit we will move to http Local Host 3,000 slash SL logout do thing we will get a result app result. dat. status status we will use use navigate hook now let's import that and let's create an instance of that constate is equal to use navigate hook now let's use that that is uh navigate and we will move to a um login page okay slash let's find the F of admin login we should move control C admin login okay to this route let's save it okay let's create now this logout API in our admin route router. git logout request and response here we will clear the cookies before before whenever we logged into the system there we stored our code the cookies inside the um we stored the token inside cookies okay so let's check that let's now move to our console just come here to the application to the cookie see we have stored this token okay this token which we have stored so now whenever we log out to the system so we should directly log out from the system we should we will remove this token okay let's close it and now what we will do we will write response. clear cookie and we will assign the name of the co uh token okay that the name of the cookie which was token after that we will return response. Json uh status true okay and one thing else that we should do in our front end let's move to our from where we requested to this logout from we have requested from our dashboard okay from the dashboard so here on the top we will write xs. default. with credentials is equal to true we should write it now let's move and let's move to our console back to the cookies see let's press log out see the cookie has uh removed and we should move directly to the admin Lin so let's right here where we should move we should move slash admin Lin okay like this okay let's login back to the system admin at gmail.com and password H let's press log in so we log into the system okay so let's M to manage employee add one another employee and salary address select category and choose an image file let's press add see the admin has added now um the employe has added uh now let's move back to the dashboard see salary has increased but let's add a dollar sign before the salary total of salary uh let's move to home salary total it looks like this manage employe dated Ed imply that has edited and if you would like to delete so you can delete that category we can add another category also and log out also so let's press the log out so we will be logged out from the system so it was all about this per first part but the second video is a short video but where is initial okay there we will discuss very important topics like role based management and also for example if we move right now to the Local Host we will face with this empty page okay so we will um perform these operation like role based management system and also we will check it if the user was logged in already so we should move directly to the dashboard or to the employee section okay in the second part we will create the role base for the employee and for the admin right now we just logged implemented the uh admin part but in the second VAR we will implement the user Al so the employee okay the employee can log into the system and can see his record just the employee will see his record uh and also we will verify the user whenever we are requesting from the browser so all these topics will be discussed in the second video don't miss that part that is a short video and that is very essential topics that we will discuss in that video uh I hope this video was helpful for you if you like this video don't forget to like the video comment down and thanks for watching

Channel: Code With Yousaf

Views: 20,983

Keywords: react tutorial, react, react tutorial for beginners, node js, node js tutorial for beginners, mysql, employee management system, employee management, employee management system in react js, employee management system in react and node, database, full-stack web development with react node, employee management system software, employee task management system, employee records management software, employee hr software, source code, node express employee management system

Id: IKQQIYDfyPc

Length: 195min 42sec (11742 seconds)

Published: Wed Oct 11 2023