Full Stack Spring Boot and React CRUD 1.5 hours Course | Full Stack Web App | MySQL | Hibernate

welcome to the ultimate course on building the full stack application using spring boot and react by the end of this course you will be able to make this fully stacked application where you can create the user read the data of user idiot the user and also delete the user while building this application you will also learn how to build the rest api using spring boot and mysql and also integrate the same rest api in front in with react so before starting the course if you are new here be sure to subscribe and click on the bell icon to get the latest notification i will put the github link of the source code in the description of this video so that if you get any issue while following the course you can just check out from there as well let's talk about the prerequisite to follow this course you need to have the basic knowledge of java and javascript similarly you need to have java jdk and node.js installed into your system so if you haven't i have already got video for that you can just check out on the description we will be using the intellij for spring boot so if you are comfortable with other id like spring tool suit or eclipse you can go with that as well and we will be using mysql database so make sure to install mysql server onto your system so if you haven't already i have got separate video for that as well so you can just check out on the description and for react we will be using the vs code as our code editor so if you are comfortable with other core editor like atom or web strum so you can go with that as well and for testing the api we will be using the postman so let's get started so here the first thing we will be creating is rest api using the spring boot so before creating the spring boot you need to make sure that you have properly installed zaba jdk onto your system so to check if java jdk is already installed into your system or not just open terminal or if you're using windows just open the command prompt and just type java hyphen version and if it shows something like java version and the version of java so the java jdk is already installed into your system so if you have an installed java jdk on your system so you can just check out on the description i have already got video for how you can install java jdk for windows linux and mac so once you install zaba jdk just go to your favorite browser and search for start dot spin dot io so it will open the spring initializer here and to create the spring project so let me just keep this default maven project language java and we will keep the snapshot whichever is the default and you can just keep the group name something like code with origin or you can just keep your name and we will give the fully stack in and you can just give the demo description so let me just keep something like back in application and so i have got the 17 java version so if you have got 8 or 11 so you can go with that as well so i will just choose the 17 and we need to add some of the dependencies and the first dependency is spring wave for running the application and the second is we just need to add the jps so jp is basically used to access and manage the data between java object and relational database and the next thing is we will be using the mysql database so for that just type mysql driver so once this is done so just click on generate so this will create the zip file so once this is created let me just show in finder and let me just double click to extract this one so let me just drag and drop into the desktop or just keep wherever you want so let me just close close this one from here so now to write the java program so i will be using the intellij as my id so if you are comfortable with netbeans or eclipse id or spring tool suit so you can go with that as well so now i will open the intellij so let me just source for intel isa and let me just click on open so let me just open the project so let me just click on open so this will now open the project so here you can see so this is installing the dependencies so once all the dependencies are installed so let me just create the package so let me just go inside this source inside main and inside java so inside here i just want to create some of the packages so let's right click here and click on new and just choose the package and just type model so this will be one of the package and another one we just want to create the repository so just type repo g30 and another package controller so let me just right click again and click on new and clear the new package so let me call it controller and for exception so we will creating the exception package so just type exception so these are the packages where we will be creating all the java classes so once we create all the packages let me just go inside this model and just right click and click on new and click on java class and let me just write the user to create the user class so inside here i will be writing all the entities which we will be using in our table so the user will be the table so for that let me just type entity annotation so the entity annotation will automatically generate user table once we connect the spring boot application with the mysql database and entities we will be using is id so just type private long id and another entity we will be using is username so just type private string username so similarly just type private string name so this is basically a username and name and another entity we want to use is email so just type private and just type string email so we just want this id to be auto generated so for that we just need to annotate this with id annotation first and then generate a value so just type generated value and we just need to generate all the get our answer so for that you can just right click and just click on this generate or you can directly press on command n in mac and just go into this getter and setter and just choose all the values and just click enter so this will generate all the getter that are inside this user class so once the modal class is created so we just want to create the repository interface so for that just right click on this repository click on new and just click on java class just choose the interface from here and we just want to name it user repository so just type user repository and just click enter so here we just need to extend this user repository with jpa repository so you can just extend this with crowd repository as well so inside this repository so if you just click on control and jp repositories just click on accept so you can see all the methods available here find all and find all my id so these are the methods which will be given by this jp representative so we just need to write the user inside here so this is the name of modal class so this will automatically import here so if you are not able to import so you can just hover into this so this will suggest us to import and we just need to write the data type of the primary key which we have used in this model class so since we have used the long into this id so we just need to write long here so once we this is done so we just need to connect our spring boot application with mysql database so for that just go into these resources and inside here you can see the application.properties so just go inside there and here so we just need to write some of the configurations so for that let me just type spring and dot jpa dot hibernate dot ddl auto and update so here if you write create instead of this update so each time you run the application whole data you have created or you have inserted into a table will be deleted so i will be using the update here so that the data which we will use will be saved for the next time once we run the application so just type spring data source dot url so here we just need to give the url of the database so for that just type jdbc and just type mysql slash and just type localhost and the port is 3306 3306 and here we just need to give the name of database so for that we just need to create one database so users need to install the mysql into your system so if you have an install so i i have already got a video for how you can install mysql into your windows linux and mac so just follow that video and once you install mysql and mysql workbench so you can just click on this mysql workbench to open and just go to this local instance and just enter the password so if you have one and let me just create the new database let me call it create database and just call fully stack or you can give the name whichever you want so just type create database fully stack and to execute just click here so this will create the full stack database to check or verify just type so databases and if you execute again so you can see the full stack database has been created so once i create this full stack database so i can just put fully stack here so just type the full stack or the database name and just type sping.datasource and username so i have the root username default username so i will be putting the root so if you have got different usernames so you can just put that but if you haven't set the different usernames so you can just put a root and just type spring.datasource.password so if you have got default password so you can just keep this blank but for my case i have got the password so i will just put my password and just type spring dot data source dot driver class name and since we are using the mysql so for that just type com.mysql.cj.jdbc.driver in capital letters so once you do that so let me just go into this fully stacked backend application and let me just right click and if i just click on this run fully stack application so this should run our application and create the user table inside our database so you can see here the tomcat is started at port 8080 so now again if i just go to the mysql workbench here and let me just type the command use database or you can just directly type use fully stack and just execute the command and if i just type so tables here so just type so tables so you can see the user table has been automatically created and inside here so let me just type dsc for description and just type user and now if i just execute this command so you can see id email name and username has been automatically created here so this is the power of springboot so once we connect the springboot application with mysql database so we will be writing the code to push the data into the database so for that let me just go into the utilizer log in and inside this controller so let me just create new class let me call it user controller and we just need to annotate this controller class with rest controller so just type raise controller and just make sure to import this one as well and inside here so we just need to inject the user repository interface as well so for injecting so we will be using the auto wired annotation and inside here just type private user repository and just make the object user repository and for posting the data so we have the annotation post mapping so for that just type post mapping and just keep the path so just give path something like slash user or you can give any path so just give the relevant path and let me just type user and new user and inside here so we will be passing the body or just on the body so for that we just need to use the annotation request body so just type request body and just type user and new user and we will be returning the saved data so for that just type return and just type user repository dot save so this will basically post the data and return the whichever data we have posted so just keep this to test the api so we just need to install one application which is called postman or you can use the insomnia as well so for this tutorial i will be using the postman so first let me just run this application and once this is started so let me just open the postman and once you open postman so let me just create the new collection let me call it so you can give any name so let me just give something like fully stack application and inside here i just want to create new requests so just right click and click on add request and we will be using the post so just click on post and just type http localhost 8080 slash user so since we have given the slash user as the path so just give slash user and inside this body just choose the raw and just choose the session instead of this text and inside here so we just need to give the data since we have created the entity name username and email so we just need to pass that so just type name so you can just pass name something like urgent codes and just type user name so you can just give something like arjun and let me just give email so just type origin gotham gmail.com and now if i just press on this send so make sure to choose this post and if i just click on send here so this is returning the same data here since we have written the same data which we have posted and the id is auto generated since we have used the annotation at the red generated value so now to check in database so let me just go into the mysql workbench and if i just type select star from user so user is the table name and if i just execute this command so you can see here the id 1 email name and username has been successfully posted into this database so again let me just give another user so let me just give something like demo and you can give the username demo username and again just keep the email demo email or you can give anything and let me just click on send so the id is generated as to and the user and username and email has been successfully sent so if i again go to the mysql workbench and again execute this command so now you should see two data inside this table so this is how you post the data into the database using the springboot so once we post the data into the database so now we will be writing the code to get all the users data from the database so for that let me again go to the intellij here and for getting the data so we will be using the another annotation which is known as gate mapping so for that just type add rate get mapping and you can just give the path something like users so since we will be getting all the users and once you do that so just type list so we will be returning the list of users so just type list and just type user and you need to make sure to import this one as well so you can hover over into this list so you will be able to import here so once you import and write the list user and just type get all users and inside here so we just want to return the all users so for that just type user repository dot find also this is given by jpa so just give this one and let me just run the application again so just click on stop and rerun so once this application is started let me again go to the postman here and let me just right click on this fully stack application collection add request so we'll be keeping this as gate so since we are getting the data from database and just type http localhost user and instead of this user so just type as since we are giving the path user so just give localhost 8080 users and if i just click on send so this should display all the data from our database so you can see user two users since we have added two users before so this is displaying all the data from the database so this is how you get the users from the database so before we proceed further for writing the code for update and delete so we will be first connecting this spring boot application with the react application so for creating the react application just open the terminal and you need to make sure that you have properly installed node and npm into your system so to check if node and npm is installed into your system or not just type node hyphen iphone version and if it shows some version like this then the node is already installed into your system so similarly just type npm iphone iphone version and it's showing some version that means node and npm has been properly installed so again if you haven't installed node and npm into your system i have already got video for how you can install node and npm into your windows mac or linux so you can just check out on the description so i will put the link of the video i have created into the description so once you install node and npm so you just need to create the react application so for that let me just go into desktop first and let me just type npx create react app and just type fully stack hyphen front and just click enter so this should now create the react application with the name fully stack front so you can already see so it's creating the full stack front so once the react application has been created so i will open with the vs code so if you are comfortable with other id like webstrum or atom or sublime text so you can just go with that as well so i will be using the visual studio code for this tutorial so let me just open the vs code and let me just click on this explorer and click on open folder so let me just open this react application so let me just click on this fully stack front so once you open this direct application to run this application just go into this terminal at the top and just click on this new terminal and just type npm start and just click enter so this should start the react application so you can see we have successfully created the react application and we have successfully run the react application as well so once you create the react application let me again go to the vs code and inside this source so i just want to create some folders to manage our code properly so inside this source so let me just create one folder let me call it layout so inside this layout folder so i will be keeping the net bar so let me just create the new file let me call it navbar.js and similarly let me just create another floor let me call it pages so if i want to add some pages so i will be adding inside here so we will be creating the home page so for that let me again create one file let me call it home.js and similarly for adding and editing and viewing the user so we will be separately writing the code inside another folder so let me call it users and inside here so i will be creating some files so add user.js and similarly let me just write another so just type edit user and similarly let me create another file so let me call it view view user so this is the basic folder structure so we will be writing the front end code inside these folders and javascript files so once you create all the folder and javascript files so we will be now creating the navbar into our react application so for react applications so we will be creating one functional component here so for functional components so i will be using the sniplet so to install sniplet just go into this extension here and source for react sniplet so just go into this first one es7 and react sniplet so just click on install so now if i just go on to the snapbar and type rfc so this will automatically create the functional component with the name navbar so you can see navbar so you can just rename this one as well so i won't be renaming this one so here we just need to add now the bootstrap so we will be using the bootstrap so for using the bootstrap into our react application so we just need to download or install the bootstrap using the npm so for that just type npm and just type bootstrap and just go to this first link from npmjs.com and you can see the installation instruction so just type this one or you can directly copy this one from here so just click on this npm bootstrap so this will copy and go to this vs code again and open the terminal so if you are running the react application and one terminal so you can just click on this add and this will automatically add the new one and just type control and b to paste that and just click enter so this should add the bootstrap into our react application so if i just go into this packet digestion so you can see the bootstrap 5.1.3 has been successfully added into our react application so once we add the bootstrap so to use the bootstrap into our react application so we just have to configure some of the things so just go into this app.js and just type import and dot dot slash node modules and bootstrap so just type bootstrap slash dist slash css and just type bootstrap dot mean dot css so once you add this so you will be now able to use the bootstrap into our react application so once we do that so let me again go to the browser and search for bootstrap and let's go to the first link from getbudhista.com and just go into this docs and here source for navbar and if you scroll down here so you can see the navbar here so let me just copy the code from here so let me just copy into clipboard and again go to the navbar.js let me just close this one from here and if i just paste that so we won't be needing all the code here so just delete the code from button or to this div so let me just clear everything from here and let me just save this one so here so the name is class so we just need to change this class into the class name so for that just type command and f or control f and this will find the class and so you can just manually try this class as well and we just need to replace this by class and capital names so just click enter so this will replace the class name so just click enter enter and just click on enter so this has replaced all the class names here so let me just close this one from here so once you do that so we are all good to go and now we have to import this navbar into the app.js since we are running the application from app.js so let me just clear this header from here so we don't need this here anymore and also we don't need this logo as well so let me just clear everything from here and if i just save and now we just need to import the navbar inside here so for that let me just type navbar so just type nab bar and you can see this has automatically suggested us so this is from layout and never so just click enter so this will automatically import here so if you are not able to get the auto import so you can just manually type as well so just type slash and just close the bracket and if i just save this one from here and again go to the react application and so this is not showing anything because we have closed the react application so just go into the terminal again and just go into this new terminal and just type npm start again so this should now again start our react application so the react application has been started and you can see the nav bar here so i just want to change some of the things from here so let me just go into the net bar and here so i just want to write nav bar dark so i just want to make it as a dark theme and busy primary so i just want to make it blue so i will just type primary so if i just type control and ask to save this one so you can see so this is looking a beautiful navbar here so so basically i just want to change this number into something like full stack application so if i just go here so you can see it is showing full stack application so similarly i just want to add the button here so i will be adding the add user button here so for that again go to the navbar.js here and just below this button so let me just type button and just type class name so we will be giving the button and just type button outline so you can just give the color as light and let me just type add user and if i just save this application so you can see the add user button has been successfully added so this is it for navbar so now we will be moving forward for the home page so once you write the code for navbar so we will be writing the code for home page to display the user information so for that just go into this home.js in pages and here let me just create one functional component so for that just type rfc so this will create the functional component and we will just keep the name as default home and inside here so i want to create one table so for that we will be using the bootstrap so before that we just want to create one container inside this tip so for that just type class name and just keep container and also i just want to give the padding top of four so let me just clear this home first and inside here i just want to type div and just type class name and just type py4 for margin top and inside here i will be writing the code for table so for that we will be grabbing the code from booty tab so for that just go into bootstrap here and source for table and let me just choose the first one so let me just click here to copy to clipboard and let me just paste it inside here so once you do that so you just need to make sure to change this class into class name so for that just type name name so let me just save this one so this will autoformat this one and now we just want to import this home into this app.js so for that just go into app.js and inside here let me just type home slash so this is automatically imported inside here so if you are not able to get up auto import so you can directly write this one manually so once you do that so if i just go into the react application so you can see the table has been displayed in our home page so now i just want to give some styling inside this home.js table so let me just go into this class name table and let me give some of the styling here so for that just type border so this will basically give the border into this table and i just want to make it look like shadow also so you can see the table is looking fine now so once you create the table so now we have to get all the users information into the home page so for that we just have to use the xds inside this react application so for that just go to your browser again and search for xcs inside this npm.js so just search for xds and you can see the xjs here so the installation instruction for this one is npm i enjoy so you can just type that or you can directly copy into the vs codes let me just open the terminal and just type control and b to paste and just click enter so this should add the exist into our react application so if i just go into this packet digestion so you can see the xgs has been already added so once you do that let me just close this package suggestion from here and we just need to import the xds so for that just type import and just type xds from axios so as this is now imported so now we just need to create the object for storing the user information so for that let me just type const and just type users set users and we will be using the use state hook inside here so just type use state and now this will auto import here so if you are not able to see this out of auto import so you can just type manually and inside here so we will be writing the initial state as the empty array so once you do that so we will be using the use effect hook as well so by using the use effect so you will tell the react that your component needs to do something after the render so every time the page is open so it will open the user information so for that just type use effect and let me just make one error function inside here and now for demonstration so if i just type something like console.log and let me just type code with urgent and whenever the page is loading so this will show this code with or zone in our console so if i just go to the browser and go into this react application just right click and inspect this one so if i just go into this console here so you can see the code with origin has been loaded when the page is loaded so we will be using this use effect hook to load the user information every time the page loads so for loading the information so we will be using the load user so for that just type const so we will be using the xjs here so just type load users and inside here so i will be creating one arrow function and let me just type const result and just type axios dot get so since we have already imported xds so we will be using the gate and we just need to give the address which we have used for getting all the data so let me just go into the postman so you can see we have used this link to get all the data information or user information so let me just copy this one from here so you can just go into the vs code and directly paste this one and also we just need to use the async and or wait inside here since the javascript execute line by line so unless this request is completed so it won't execute the next line so for that we just have to use the async here so just type async and await here so just type await just before the xcs so once you do that so if i just type console.log to print the result so just type result and if i just save the application and if i just go here and also we just have to add this load user inside this use effect as well so just type load users not users so we just need to correct this spelling so just type users here and again just correct this one from here as well and let me just give the bracket here and also we just need to give the empty array inside here as well so for that just type empty array so what this empty array will do if we don't give the empty array so this will run the unlimited time so if we put this one so this will runs once only when the page loads so now if i just save this application and just go into the browser so now this will show some error like allow cross origin or something like that so this is the expected error so this is showing because we haven't connected our front-end application with the back-end application so to connect our front-end application with back-end application so we just have to go into the spring boot application so just go into this intelligent again and just be down here so you just need to use one annotation so the annotation is cross origin so just type cross origin and here we just need to give the link or the local host port which we have used for our react application so for that we just have to type http and just type localhost so since we are running our application on port 3000 so if you see here it is running on 40 000 so we just have to give this one and again you need to run your spring boot application so you need to make sure that every time your back-end application is running so you can see so this has successfully started at port 8080 so once this is done so if i just go here on front-end application or browser so if i just reload the application now the error is gone so again you if you see here so all the data information are coming here and if i just go inside this prototype object so you can see all the information are coming but this is not clear so to make it clear so the information is still loading here so you can see these are the data from our database so to get the clear information so let me just go into the vs code again and if i just go down here and just type result dot data so now this should show the data only so if i just reload the application and just go inside here so you can see though this is showing the data which is coming from our database so this is only showing the data in our console so we just want to get the data into this table so for that we just have to go again in our vs code so let me just go inside the vs code and at the bottom so let me just minimize this one from here so we don't need the whole data inside here so let me just clear the everything from here so this table body so let me just keep one and clear other data so let me just clear this table row and also this table row from here and instead of this static data so we just want to get the dynamic data inside here from the database so for that we just have to use the map inside here so just go inside this table body and just type curly braces inside here and you just need to use the users which is basically coming from years where we have set the data and just type users dot map so what this map will do is creates a new array from calling a function for every error element so whenever new user is created so it will show on the table so for that let me just type user which is for basically individual user and just type index for counting the number and inside here let me just create one arrow function and let me just type something and you just need to grab this stable row from here so let me just grab everything from here and let me just paste it inside here so we just want to make this data dynamic instead of this mark auto and whatever into this dynamic data so we just want to make this data into dynamics so these are the static data so for now so we just have to type key equals index and inside instead of this one so we just want to type the index plus one so this will increase the number of index each time and basically so we just have to give the name here so for that just type dot name so we just want to replace this with name and just type username so just type user dot username and similarly so we just want to display the email as well so for that just type user dot email and if i just save this application and just go into this react application and reload this application this is not displaying because we are still displaying on our console so we just need to change this console.log into the seat user so since we have given the set users here so we just need to set user so just type set users and if i just save this application and just go into this application so you can see these data are displaying inside here so you can see this is the data coming from our database and i think the heading has been changed i don't know when did it change so let me just change it something like first name or you can just type name and you can just give the username username and the third one is email so just give email and similarly so we just want to give another heading so table heading so which is basically action so just type action here now this should look fine so instead of this action so we will be putting some of the icons here so let's wait for action so for now so this is displaying fine so now if i just add one more data from the postman so this would display in our application so let me just go into the postman and let me just go into the post request and let me just type something like new user so let me just give the username something like new user and you can just give new at the ready gmail.com and send the data so this has successfully created now if i just go into the react application and it reload the application so you can see the new user has been successfully added into our application so though we don't have to reload this application but for now so this will load only when the application loads so now we are reloading this application so from next time you don't need to reload this application so this is how you display the data from database into your home page so once we display the data from our database so let me just create some of the buttons inside this action so for that let me just go inside the home again and at the bottom so we just need to create the button here so let me just go inside here and let me just type table data and inside here let me just create the button so just type button and just give the class name button so just type button and button primary so i will be just giving the color blue and we can just type mx2 for the margin left too and similarly let me just create another button as well so let me call it so we can just copy this one from here and paste it inside here so let me just copy twice and let me just keep the another color inside here so let me just give something like outline primary and let me just call the first one with view and second one so let me call it edit and the third one so we will be creating for delete so delete and we just want to change this primary color into danger so denzel will basically make it a red color so let me just save this application and if i just go here so you can see view edit and delete button has been added so we will work on this view edit and delete later on the video for now so this will just be the button so once we do this on action so now we will be working on this add user so we will be writing the code for adding the user so whenever i will be clicking on this add user so this should display me a form and once we submit that form so this should display the data into this home page so for that just go to your vs code and just go to this users and inside this user so just go into this add user and just type rfc and this will now create one functional component so inside here let me just type something like add user form so we will be adding the form later on so for now we just want to add the routing so for adding the routing so we just have to go to this npm and just type react router and just type dome and just go to this first one so the react router dome and we just need to click here to copy this command and let me just go here and open the terminal and just type control and b to paste that command so this should now add the react router dome into our react application so if you see here the react router dome and the version 6.3.0 has been successfully added so once we add that so we just have to go to this app.js and here so we just need to import the react router dome or browser router so for that just type import and just type browser router as router and routes and so we will be using the routes and route for the routing and just type ads or from react router dome so once you do that so we just need to wrap the whole application with the router so just go inside this and just type router and inside this so we just have to grab this navbar and home and we will be writing the whole component inside the route so for that just type routes just below the navbar so just type routes and inside this route so we will be putting all the routes so for that just type route and just type exact path equals so now for home so we will be just giving the slash so whenever it will show the slash so it will be this it should display the home page so for that just type slash only and just type element and just keep the curly braces and just type the home component and just type just close the bracket and again just close the bracket here as well and again just close the bracket here as well so let me just clear the home from here and if i just save this application and reload the application so this is showing some problems so we just have to change these routes into route so there are two routes here so let me just save this application and you can see on the slash route so this is showing the home component so similarly so we have to use the same thing for add user as well so for that just type route and just type exact and path so let me just give something like add user or you can just give the default name whichever you want and just type element and in the element so we just want to display the add user so just give the curly braces and just type add user so you need to make sure to import this add user as well so if you're not able to auto import here so you can just manually type this one as well and just close the bracket and now we just have to add this add user into the button as well so for this add user button so we just have to add the path so for that just go into this nav bar so in network so we have this add user button and instead of this button so we just have to change this into link so for that just type link from the react auto dom and make sure to import this link from react router dome as well so just type this manually or you can just use the auto import as well and just change this button into link again and you just need to change the path here so just set the path so just to and just type add user so this add user is basically coming from here so we have given the add user here so you just need to make sure to give the exact name which you have given in this route so just give the same name here as well and if i just save the application and go here on this application and click on this add user so you can see the add user form is displaying here so instead of this add user form now we will be making the real form here so this is how you configure the routing so once you add the routing in your react application so let's start creating this add user form so for that let's go into this add user.js and let me just clear this one from here and let me just wrap this div with container so just type class name container and similarly just go inside this dim and create another div for row so let's type class name and just type a row and inside this div so i just want to give some styling so for that just type d class name and just give the column of medium size with six span and just type offset and just type offset of medium size three and similarly so we just want to make the border also so we just have to give the border for the div and just type around it and similarly just type padding 4 and margin top 2 and if i just save this application and just go inside here and if i just go here so you can see the outlook of this div and now let me just give shadow as well so just type shadow and save this application so you can see the shadow into this div as well so now let's try the heading so for that let me just type heading 2 and just type class name so i just want to write that text in the center so just type text center or you can just give the merge info and if i just type something like register user and save this application so you can see the register user has been displayed so once you do that so let's start creating the input box so for that let me just write div class name and just type margin bottom three and inside here so i just want to give one label so label and it's for html for so just type html for name so we just want to write the label for name and just type class name and just give the form label which is given by bootstrap so just type from label and just type name here so just save this application and if i just go here so you can see the name and we just need to make the input box here so for that just type input and just type type equals text so this is the text format and just type class name and just type form control which is also given by bootstrap so just type form control and just type placeholder as well so the place folder and just type the text we want to give so just type something like enter your name or you can just give any text you want and just type name equals name so just type name and just close this one so just type slash and close this bracket and if i just save this application and if i just go here so you can see the input form for username or name has been displayed so now similarly let's add for user name as well so for that we can just copy from this div margin bottom 3 to this div so let me just copy and just paste twice so just press twice and you can see the two text boxes and let me just change this name into username and this name into email so for that let's start changing so let me just type username here so just type username and just give the label username and similarly just type enter your username here and instead of this name so just type username and similarly let me just change this name into email so for that just type email and let me just change the label into email and you can just change this enter your name into in email address and let me just change this name into email now if i just save this application and come here so you can see the register user with name username and email so similarly so we just need to add the button as well so we just need to add the submit button so for that let me just go down here and let me just type button so just type button and just type type equals submit and you just need to give the class name and the class name would be for button so just type button and we just want to give the blue color with the outlines of the type button and just type outline primary or you can give the color as your preference so let me just close this button and just type submit so just save this application and you can see the submit button has been successfully added so similarly i just want to add another button as well so if i just click on cancel so this should go into the home page and for that so we just need to add another button so let me just call it button so you can just copy and paste this button as well so let me just copy this submit button and paste it inside here and let me just change this into something like danger so this should look something like red and you can just give the margin to and let me just type cancel instead of this submit and if i just save the application so you can see the two buttons one for summit and one for cancel so if i don't want to enter the data so i can just click on cancel and this should navigate us to the home page so once we create the form so we just want to type the user information and post the data into the database so for that let me again go to the vs code here and just below here so we just need to store the information inside the state so let's make an object for that so let me just type const and just type user and just type set user and let me just use the state use state hook so we have used this use state hook before as well so you just need to make sure to import here as well and you just need to initialize the object so for that let me just type user so just type name and let me just pass the empty name and username and similarly email so once you do that so we just need to deconstruct this object as well so since you can see we have just made an object by giving the curly braces so we just need to deconstruct this so for that you can just type const and just type name and username and email and just type user and similarly now we just need to link this name with the value so just go into this input here and just type value and inside value just pass the name so this name is coming from here and similarly again just type username here so just type value and just type user name and similarly for email just type value and just type email so once you pass the value so here we have just created this object so we just need to pass or put the value inside this name as well so for that we just have to create one function so let me call it const and just type on input change and inside here so i will be creating one event so just type event or you can give any name so i'll just type e only and here so we just need to pass this on event change into the onset inside this input so for that just type on scenes and inside this on change we want to call the on input change function so we won't be calling directly so we will be passing the event so for that just type event so just type curly braces and inside the bracket just type event and inside this event so we will be calling the function on inputs and so when input it change it will only be called at that time so just type on input change and let me just pass the event inside here so similarly just do the same thing for all the input so let me just copy this one from here and paste inside here and similarly the space inside email as well and once we pass the onsens event and on input change event inside here so just go inside this on input change and we just need to save the user so just type set user and just give the curly braces and inside this so let me just type e dot target dot name and just type e dot target dot value so here since we are giving the name field only so we need to add the spread operator just inside this curly braces so for that just type dot dot and just type user and just give comma so what this split operator will do is this will keep on adding the new update so once you do that just save this application and to see the output so what this will do so just go into the application and just right click and just click on inspect and before that you need to make sure to install the react developer tool so for installing just go into the new browser here and just type web store and just go to this first one from chrome.google.com so just go there and just type react and just type developer and just type tool and you just need to add this into your extension so just click on this react developer tool and just click on add to chrome so just click on add extension and let me just go here and pin this extension and let me just close this one from here so now if i just close this one and reload the application and again just open the inspect element so you can see the components and profiler has been added so let me just click on this component and you can see all the components and you can see the add user component which we have created and now if i just go here on this you register user and just type some information so this should display on this state so now api is just type something like origin so you can see so this is showing in name and similarly just type code with urgent for username so you can see so this is showing in the state again and just type something like code with erdridge gmail.com so you can see this is again storing inside the state in the email as well so this is how you store the information inside the state so now i just want to click on this submit and this should post the data into the database and also display into the home page so for that i just need to create one function inside here so let me call it something like const and just type on submit so just type on submit and let me just pass the event inside here so just type event and let me just make it something like this and we just want to pass this on submit into the form so inside here so we just need to make one form as well so just below this heading so just type form so just type form and let me just record this one from here and you just need to paste just before this div and let me just go into the form again here on top and let me just type something like on submit so whenever we click on submit button so just type on submit so we just want to call the on submit function so for that let me just pass the event and let me just type the on submit function so just type on submit and just type the event here inside here so let me just save this one and inside this summit so we just need to use the prevent default so without using the prevent default so now if i just click on this summit so this will show some weird url like this so to prevent this one so we just need to type the e dot prevent default so let's type prevent default and just save this one and if i just go here and now again just click on submit so reload this application first and if i just click on submit so this won't be showing anything inside years even if i just pass the data as well so let me just click on submit so you can see this is not showing anything in the url so once you do that so we just need to use the exias to post the data so for that just type so before that we just need to use the async and await just like before so just type async here just type async and we just need to use the await just before the xds so just type await and just type hds dot so we will be using the post so you need to make sure to import this xjs as well so just type import exist from xds or if it is showing automatically as auto import so you don't need to type that manually so just type the link which we have used to send the data so if i just go to the postman here and you can see so we have used this link to post the data so let me just copy this one from here and let me just paste it inside here so let me just paste it inside here and we just want to use the user information to send that so let me just type user here and once we click on submit so we just want to navigate into the home page so for that we just have to use the use navigate to so for that let me just go here on to this just before the add user or this user and just type late navigate so let me just type navigate and we just need to use the use navigate react router dom use navigate so let me just write this one and we just need to use this navigate to just navigate into the home page so just type navigate and just type so we just want to go home so home is basically given by slash so we use the slash just for home so we just click on that and once you do that so save the application now this should work so now if i just go into this register user and just type arjun and just type the username something like demouser or just give the email something like demo at there gmail.com and now if i just click on submit so here you can see the name origin and username demo user and email demo at the red gmail.com so which we have just added so this is how you post the data using the xcs so now let me just add another user as well so for that we just have to click on this add user and this will open this register user form and inside yet so let me just give some name like john doe and you can just give the username something like june or give the email address something like zone at the gmail.com and click on submit so this should add the new user with the name john doe and you can see the username and email has been successfully added and also displayed on the home page so once you do that so we just want to work now on this cancel button so whenever i just want to click on this cancel so this should navigate us to the home page so for that let me just go to the vs code again and in this add user so if you just go at the bottom so you can see in the bottom so you can see the cancel here so now if i just change this button into link so just click on link and you need to make sure to import this link here at the top with the use navigate and this from react auto dom so you can just manually type that as well and let me just change this button into the link here as well and we don't need this type summit now so just clear that and instead of this so we will be writing the path so for that just type 2 equals and just give the path inside the code and if i just save the application and just go inside this react app again and if i just click on cancel so this should navigate us to the home component and if i just click on add user and again add some other user so something like code origin and just give the username something like code with urgent and just type code with arjun at the gmail.com and click on submit so this would add the new user so this is how you make the routing for cancel button so now we will be writing the code for eating the user so for that we haven't written the back in code so we will just go into the intel isa and inside this user controller so for editing the user so first thing we have to get the specific user with the specific user id so for that you just need to get the user with the specific id so for that just type get mapping and we just need to type user slash and just give the curly braces and just type id so with the specific ids we just have to get the user information and just type user for that and just type gate user by id and inside here so since we are getting the specific user with id so we just have to use the annotation path variable and just type the long id so just type id and inside here just return the user repository dot so we will be just using the find by id which is given by jpa and just pass the id and if somebody just type the invalid id or which is not present in the database so this should display some error message as well so for that we will be writing the dot or else throw and just use the arrow function inside here so this is the lambda function and just type new and just type the class name which we will be creating inside this exception package so just type user not found exception so we will be creating the exact same class and we will be passing the id as well so just type id and just type the semicolon and let me just create the user not pound exception class inside this exception so just create the class and just type the exact names just type user not found exception so just type exception and just click enter and this should extend with the runtime exception and let me just create one constructor so for that just type public and just type user not found exception and let me just type long id to pass the id and just type super and let me just type some message like could not found the user with id and just pass the id here as well so let me just give one space here and this is showing one related problem so let me just click here and we just need to import this user not found exception class so just import the class so once you do that so we just have to add the advice class as well so for that let me again create one more class inside this exception and let me just type user not found advice so just type advice and we just need to annotate this class with controller advice and inside here so we will be writing the code for handling the exception so just type public so since we will be returning the map so just type map of string comma string and just type exception handler and inside here just pass the user not found exception and let me call it exception and inside here so i just want to create the map object so just type map and just type string and comma string again and just create the object just give some name like error map and let me just type new hatch map so now from this exception so we will get all the fields which are having the issue so we just need to extract and put it into the map so for that we just need to type in our map dot put and we just need to give the error message error message or you can just type whatever you want so just type either message and just type comma exception dot get message so whichever the message we will be getting from the exception handler and just give the semicolon and now simply return the map so just type written and just type here map and again we need to annotate this with some of the annotations so the first thing is since we will be getting this response so let's type response status or response body so let's type response body and similarly so we just need to annotate this with exception handler as well so just type exception handler and inside here you just need to type the user not found exception dot class so what this basically will tell to the spring boot is if you are getting the user not found exception dot class in the controller then send the request to this handler so similarly we just need to write the response status as well so this is the response for not found so we just need to type http status and just type the not found so we just need to type this one so once you do that so we should be able to run the application so let me just click here and run application and now if i just go to the postman and let me just create the new request so just click on add request and just type http localhost and user slash and just keep the id so if i just type one so since we have the data with user id one so if i just click on send so this will show the specific user with the id one so similarly if i just put two here so this should show me the data with the user id2 similarly if i just type 3 so this would basically display all the users so now if i just type 20 which is not available in our database and just click enter so now this should show us the custom error message which we have given so this is saying something like could not found the user with id 20 so this is how you get the specific user with the user id so now we will be working on edit or put mapping or editing the user so for editing the user so we have to use the annotation at the red boot mapping so just use that and inside here just give the path user slash and just give the curly braces and inside here just type id and since we will be returning the user so this type user and just type user update user and inside here so we will be writing the two parameters the first one is user so for that just type request body since we will be passing in the json and just type user and just type new user so this new user is basically the user passed by the client and we will be using the id as well so just type path variable and just type long and just type id so inside here so we will be returning the user repository dot find by id and just type id so here now we will be using the map so what this map will do is creates a new array from calling a function for every array element so here inside here so we'll be using the lambda function so just type user so this user is the existing user so inside here so we will be writing the user dot set so just type set username so here we will be setting the user with the information whichever is passed by the client so just type new user and just type get username so similarly let me just do the same thing for email and name as well so just type user dot set name and just type new user dot get name and similarly just do the same thing for email so just type set email and just type new user dot get email and now save the existing user into the database so for that just type return user repository dot save so just type save and just type the user so just give the semicolon here and if you are not able to get the user with the specific id so this should again display the same type of exception which we have given for getting the user id as well so here also just type the or else throw and just type the error of error function or give the lambda expression inside here and just type new and just keep the user not found exception simply and pass the id so now this should work for the put mapping or editing the user so now let me just run the application again and just click on this stop and rerun so the application has been successfully started so let me just go into the postman and let me just create a new request so instead of these kits we just need to keep the put here and just type http slash user slash one so if i want to edit the information of one so this should edit the information of one and again let me just go into this body and just go inside this raw and just type json here and inside the json so let me just write the json here and we just need to pass the information so for that just type user name and similarly let me just type the name also and similarly we just need to pass the email also so now if i just go into this database and check the data for one so let me just go into the mysql workbench here and just type the same command select start from user and execute this command so this should show the id one and information of the user is email is also gothammer.gmail.com and name is origin codes and username is arjun so let me just change some of the information so let me just change this username and name from here so let me just go into this postman again and instead of this username so the username here is origin so let me just type something like updated origin and again just go into this name here and let me just type the updated origin code so just type updated urgent codes and similarly let me just type the email something like update updated gmail.com so now if i just click on this send so you can see so this is showing the updated data here and now again if i just execute this select star from user and execute this command so you can see the update.gmail.com and the name has been updated and the username also has been updated successfully so now for showing the exception so if i just type something like 20 and just click send so you can see could not found the user with the id 20 so the edit user or put mapping is also working fine so once we write the code for editing the data so we will be writing the code for deleting the data using the user id so for that let me just go to the user controller again and we will be using the add a delete mapping annotation here and let me just give the same path as user and we will be passing the id to delete and now let me just type something like string so we will be retaining some string and just type delete user and inside here so i will be passing the path variable and just type long id and if the user is not exist in this id so if there is no user with that particular id so we should display some exceptions so for that user repository and just type exist by id and if that user is not existed so we just need to throw the exception so just type through new exceptions so which is user not found exception and just pass the id and if there is user with that specific id so we just need to delete that user so just type user repository dot delete by id and just pass the id and return some message something like user so just type user with id and just type the id and this type has been deleted success and if i just give the semicolon and save the application and let me just rerun the application so the application has been started successfully so if i just go to the postman here and let me just right click and add request and let me just make it get into delete and let me just save this one and just type http and if i just want to delete the user by to bell so let me just click on send so you can see the user with id tool has been deleted successfully so now again if i just send the same request so this should show could not found the user with id to well since we have just deleted the user information so again if i just go into the database on mysql workbench and select start from user so you can see there is no data with to build so similarly i just want to data delete the data with the id 11 as well so for that let me just type 11 and just click send so you can see the user with id 11 has been deleted success and if i just execute this command again so you can see on the database so there is no data with the id 11 so this is how you write the code for deleting the data from the database so once we write the back-end code for editing and deleting the user so we will be implementing the same thing for fronting as well so for that let me again go to the vs code here and inside the series user so i will be just copying the whole code from this add user so let me just type ctrl a ctrl c to copy and let me just type ctrl v to paste and here so we just need to change some of the things so let me just type edit user instead of add user and here as well so let me just change this register into the edit user so just type edit user and now we just need to add the routing as well so the first thing we will be doing is routing and then we will be configuring these routes from here as well so we will be later on using the put xias so for now let me just go into the home and let me just change this button of this edit into the link so just type link and you need to make sure to import this link from react router dom as well and you just need to change this button into the link as well here and now we just need to give the path so just type 2 and just give the curly braces inside here and now we just need to type the backtick character here so this is the backtick character which is present just above the tab key of your keyboard so just type this backtick character and just type slash edit user so just type edit user and just type slash again and we just need to provide the user id so for that just type dollar and just type user dot id so you need to also give the curly braces inside here and once you do that so let me just save this from here and again we just need to add the same path into the route as well so for that just go into this app.js and here as well so just type route so just type it out and just type exact path and here so we just need to give the edit user so just type edit user and slash just just type the column here and just type id and here so we just need to pass the element so which is basically edit user so just type curly braces here and just type edit user so just type edit user and just close the bracket here and here as well so again you need to make sure to import this edit user here as well so once you do that so now if i just go to the application and here let me just go into let me just click on cancel here so now if i just click on this edit so this should navigate us to this edit user page so once you configure this route so we just need to make some changes inside this edit user so since we have copied the code from this add user so the first thing we need to make change is inside this post so we just need to make it put and also we just need to change this code into backtick so just type back to character and just change here as well and similarly so we just need to change this into the specific id support just type dollar and just type id and this id we will be getting from the current route so for that we just have to use one hook so which is use param so for that just go here and just type const and just type id in curly braces and just type use parents and you need to make sure to import this use pattern here as well and just type the bracket here and once you do that so we just need to load the data whichever we have for that specific user so for that we will be creating one more function so for that just type const load user so just type load user and just type equals async and just type the arrow function inside here and just type const result and just type await and just type exias dot gate and just type the backtick here as well and let me just copy this from here so just copy this and let me just paste it inside here so since we will be getting the user with that specific id so we will be using this here and just type now set user and just type result dot data here as well so now we just need to use the use effect book so for that just go here and let me just type use effect and inside here so i will be writing the arrow function here and i will just add this load user function inside here so just type load user and again just keep the empty area here and once you do that so let me just save this application here and now if i just go to the application so you can see so this is already showing the data of user id once so if i just click on cancel so this if i just click on this user to demo so this should display the data here as well so let me just click on edit and now if i just click here and edit the user something like code with urgent and just click on submit so you can see so the data has been updated successfully so similarly let me just check for username and email as well so let me just change the username into code with arjun and in between so make sure to subscribe the code with origin channel as well so let me just type code with urgent and click on submit so you can see the data has been successfully edited so this is how you do the edit functionality on your front-end application so once we write the code for editing the user so now we will be writing the code for deleting the user so whenever we click on this button so this should delete this specific data and reload these other remaining users so for that just go to the vs code and just go inside this home.js from this pages and just below this load user so we will be writing the one function for editing the user so just type const and just type delete user so just type delete user and now just we just use a sync and pass the id inside here in parameter and let me just create one arrow function inside here and just type await and now we will be using the exist dot delete for deleting the data and inside here so we just need to pass the url so for that just type backtick here and just type http and just type slash slash localhost and just type 8080 slash user slash and we just need to pass the id so for that we just have to use the use params oops so for that just go here and just type const and just type id and just type use params and just keep this open bracket and just close this bracket and you need to make sure to import this from react auto dome so once you do that so you just need to put the id here so for that just type dollar and just type id so once you do that so once the user is deleted so we just need to make sure to load the data as well so for that we will be using this function load user so just type that and once you do that so we just need to configure in the button as well so for that just go down here so you can see the delete button so here so whenever we click on this delete button so this should delete the data so for that we just have to call the delete user function so for that just type on click so just type on click event here and just keep the error function and just call the delete user so just type delete user and inside here just type user dot id and save this application and if i just go to this application and just click on this delete button so you can see the user has been deleted successfully and also the remaining data are displayed successfully without reloading the application so again just type just click on this delete so you can see so this has successfully deleted so this is how you implement the delete functionality in front in so now for viewing the user detail information so let me just go into this view user and let me just go into this add user let me just copy this code from here so let me just type control and c to copy and again go to the view user and let me just clear this d from here and let me just type control n b to paste and we just need to close the deep so the steps last deep and slash div and slash deep so let me just save this one so once this is done so we just need to change this register user into something like user details so just type user and just type details and inside here so we just need to make one more dip for card so if i just see the application so you can see the user details so inside here i just want to make one more card so just type d and just type class name and just type card and inside here so we just need to make one more div for card header so just type deep class name and just type card header and inside the card error so let me just type something like details details of user and id and we will be giving the user id inside here and similarly so let me just make one unordered list so for that just type ul and class name and inside here let me just type list group and just type list group flash and inside here so we just need to add the list group item so basically we will be displaying all the details inside here so for that just type list and just type class name and inside here so we just need to type list and hyphen and so this type group and just type item so just type item and inside here the first one will be name so just type bold name so just type bold name and here so we will be writing the user dot name so later when we use the axis so similarly let me just copy this one from here and let me just paste it twice and let me just change this into username so just type user name and similarly let me just change this into email so just type email and once you do this so we just need to make one button so that button is for going back to the home so for that just go just below this div and just type link so just type link and just type class name so you need to make sure to import this link from react auto dom and just type class name and just type button as usual and just type button hyphen primary so you can just give the caller as uvs and just type margin and just type y axis 2 and the step 2 and we just want to go to home and just type back to home so now this should be working so let me just save this application so you can see the back to home has been created so if i just click here so this would navigate us to the home page so similarly if i just click on this view so this should navigate us to the user details page so now we will be writing the code for displaying the name username and email and similarly the user id so for displaying the user details so let me just again go to the vs code and let me just quickly go inside here and let me just create the object so just type const and just type user and set user and we will be using the use state just like for add user and inside here so we just need to initialize so just type name and just type similarly username and also the email so just type email and since we will be getting the specific user with the specific id so for that we will be using the use params so just type const id and just type use params and you need to make sure to import here as well so just type use params inside here and we will be using the use effect hook so just type use effect and inside here let me just create one arrow function inside here and we will be creating one function so just type const and just type load user and just give the a sync and just make the arrow function here and just type const result so just type result and we will be using the xcs.gate so let's type xcs.gate and just give the backtick here and just type http localhost 8080 slash user slash dollar and since we have already used the use params so we can just grab the id here so just type id and once you do that so we just need to save the user so just type set user so let's type result.data and inside this use effect so we just need to pass the load user function and we just need to make the empty array inside here so once you do that so now we should be able to get the user information and so just go into this name and inside here so we just need to type something like user dot name so just type user dot name so similarly here just type user dot id and just type user dot name here inside this username suggested user dot username and similarly for email so just type user dot email and now if i just save the application and if i just go inside here so this is saying something like you just stated not defined so you need to make sure to import inside this use effect just after this use effect so just type use state so this type uses state and once you do that and if i reload the application so you can see the user detail has been already displayed so if i just click on back to home and i just want to display or view this user so just type view on this so you can see the code with arjun username and user details of id2 and if i just click on back on home so this would navigate us to the back to home so similarly so if i just click on this fully stack application so i just want this to navigate into this home page so for that let me just go into the navbar so let me just go inside this number and at the top you can see the full stack application so we just need to change this into link so just change this anchor tag into this link so just type link here as well and instead of this adds riff so we just need to type two and just type slash and if i just save the application so if i just go here and if i just click on this fully tag application so this is already displaying here and now if i just go on view and click on full stack application so this is navigating yours to the home page so this is how you basically create your full stack application so let me just show you the as a whole demonstration of this application so let me just clear or delete this data first and this is the home page and if i just click on this add user and if i just type the name something like code with arjun and let me just type the username something like code with arjun and just type code with origin at the ready gmail.com and if i just click on submit so this would display the data into the home page and if i just click on view so this should display the user details and if i just click on back on back to home so this would navigate again us to the home page and if i just click on edit and let me just change the something like email here into one two three and username into one two three so if i just click and submit so this should update the user as well so this is how the update functionality works and if i just click on delete so this should delete the data as well so congratulations for having the passions to complete this course so if you want to get more exciting tutorials like this be sure to like share and subscribe to my channel i will see you in the next one [Music] you

Channel: Code With Arjun

Views: 242,327

Keywords: full stack course, front end backend full stack web development, full stack web developer, full stack java developer, full stack development with spring boot and react, spring boot and react full stack course, full stack web application using spring boot react and mysql, full stack spring boot mysql hibernate, full stack java hibernate spring boot spring, full stack java, full stack spring boot, spring boot backend and react frontend, spring boot react, codewitharjun, spring react

Id: 4LZKnegAm4g

Length: 93min 51sec (5631 seconds)

Published: Sun Sep 11 2022