React JS & Laravel 8- ReactJS CRUD with Laravel REST API from Scratch| Sweet Alert & Form Validation

hey guys welcome to my channel so guys in this video we are going to learn how to build a crud application using react and your laravel application okay so guys we are going to insert the data update the data using laravel api with the react js application so let's get started so first let's go to a laravel and install this first so let's click on documentation and we are at the latest version that is 8x let's install this so install via composer let's click on this and here guys make sure you have already installed your composer let's move back to our so i'm i'm using xampp server over here and open your command prompt i have installed git bash so i'm using git bash over here let's paste the command and tell over here level api so we are using laravel project for api purpose okay so let's let's just wait for this to get installed successfully perfect so guys we have successfully installed our laravel application and now let's close this terminal and let's go inside this laravel app and right click and open your git bash so if you don't have git bash just open your command prompt and follow the path of your project and now hit php artisan serve hit enter and your server is started so let's go and browse that okay hit enter so this is our project guys service now we have successfully installed laravel and we have run the application and now guys let us install our react okay so let's create a react project let's get back and go back one step and over here open your git bash or your terminal let's go to the dock and start with the document over here create a new react app so to create a new react app you need one node.js and npm to be installed before first only and the version should be above this so 10.16 and 5.6 then only you can create your react app so let's copy i have already installed that so let me just show you that node hyphen v if you give so the version is this node then npm hyphen v so npm version also is high from this okay it's six it's here is five so now let's copy this paste and now from my app to react funda app okay let's hit enter and our project started creating so let's come here and see that so it's executing and creating the project so let's wait for few minutes to complete this installation so guys our application is installed successfully over here and now let's run this app so let's close this terminal let's move inside this app and open with the git bash audio command prompt and move to your dock so let's copy this npm start hit enter so it will automatically start okay so it's automatically open we did we should not type it will automatically start the development server perfect so let me minimize this we have successfully done installation of your react and your laravel application now guys let us get started with creating a card application so first let's move to our folder so first let us open a react fund app so open with code okay so now let us try to access this design let's get back go to src app.js file so this is the output guys we are getting over here so let's live like this and first let us create one folder called pages let's create on pages psg es pages and one simple file name student dot js one more file called add student add student dot js now let us use bootstrap so we are going to import that link directly in our index.html file so just move to our public folder and index.html okay so let's go over here move to getbootstrap.com let's close all this dock copy the css link okay so we'll copy directly copy and paste after the title remove this thing we don't required it all set and the script so this bundle script will copy and paste we don't require this cross origin and integrity done guys so let's save this close this index.html and let's move to this student.js file now let's create a class first so first you have to import the class so let's import react and open curly brace called the component also from single quote react and then create a class called student extend component so this component you are going to extend copy this and paste let export default student okay and now you have to render function open and close curly brace let's use return and insert this okay here we forgot to give comma just give comma and start with the div tag so they've designed the class name called container row called md12 and simple card last name is equal to card copy this will be a card header this will be the h4 tag where students data and one simple link you are going to create let's open the link and over here will tell add student and link to is equal to open curly braces and close curly inside single quotes add student okay and design this link name with the class name as button button primary button small float and okay save and this is showing error because we have to link that so that is nothing but your router so let's open a terminal npm install react hyphen router hyphen dom so guys until it installs so let's leave that and over here let's design that okay so after this card body card body class name card body okay so we need to wait to install this so before that let's import the class also import link from react router dom okay so let's just wait to get installed perfect so it has installed guys let us kill this terminal and if you want to confirm it's installed or not go to your package.json you can find that react router dom okay let's close and now guys let's call this file into our app.js file let's move and remove all this so let's remove this we don't required import react from react okay and then call your router so before that you need to set that okay import open curly brace we need to give browser router so browser router as well tell router and then we are going to use switch and one route okay from single quote react router dom done and now guys you need to call your router first so which router this router okay so this router you need to call that router and then switch and after this switch you need to use this route let's use that route close and over here you can use either in this format or else we'll remove and give just forward slash here we are going to tell exact path is equal to double quotes forward slash home and then component is equal to create that student and let's import the student first so import student from from current directory i am going to pages folder first so pages slash then your student file okay student.js file as simple so we are not going to extend that dot js it will understand very clearly and let's change this variable let's add student and this will be your add student file name and now let's copy paste again let's remove this exact and mention this as add student where i'm going to take this and paste that's it and now guys let us test it so let's move perfect so guys you can see the output that student data has come so before this i just want the spaces on every pages so let's move to index.html file so at this root we are going to give class is equal to this is not a gs file so we have to give direct class and use py5 done and now guys let's close this and let's see the output so perfect so guys there is space from top and bottom both so now let's click on this add button that time you are moving to add student route and the page also is called so which means it's going to this component add student where this is going to your add student page so let's move that add student page and let's design this so before designing let's copy all the same from your student.js file and paste inside your address done and here you are going to change the title as add student as simple and let's make this to be a secret back button where this path will be called as home button done so link is imported and you need to change the class name add student okay so copy this and export the default also done and now guys let's design with the form open form and close the form div class name which is form hyphen group margin bottom three okay and one label where we don't require this for it will give an error so this will be the student name student name we will tell and input field type is equal to text name value and give forward slash okay give the class name design the input form control done so let's see the output guys okay perfect so everything is cool let's make this form s6 done and now we are going to add few more fields which is three fields we are going to add more student name student course then email and then phone okay give a name for this which will be the name name course and then email and final one phone so after this guys we need one simple button let's create a button but on button that type will be a submit design this button with the class name called btn btn primary and save student done and now guys let us get this form action when you click on the submit button first we are going to work with input fields so let's call that input field over here so we will call on change is equal to open and close curly brace this dot we are going to handle all the input fields so handle this dot handle input so same thing you are going to call for every field let's paste paste paste paste and now whatever you're going to take from this input field you have to show in this value also so let's open and close curly brace and this dot state dot name okay so this state you are going to create first and this is the name value okay name so let's copy this copy paste for three also and change as per the input field attribute names email and phone done now guys let us create this both input and state okay so first we have to take all the value so let's copy this date and create over here state is equal to open and close curly brace so that we are going to assign the name field single quotes give so fourth time next will be the course then your email and the final one phone so let's copy this phone all set so after this you are going to call your handle input so copy this handle input paste is equal to so before this before handling input you have to check with the event so event of your and now you have to call this dot set state function okay so this will set state means all this fields value it will set open and close curly brace and inside square bracket e dot target dot name so all the input fields value are going to take e dot event dot target dot value and this means it will go to your input box and this input box the name value it will take and the values value it will take okay so this values so this both are working and setting on this variable so after setting we have to submit on this button then it will go to form okay so let's use on submit is equal to open and close curly brace where you are going to tell this dot save student so copy the save student function name and create over here save student is equal to event of your function okay so this is we have created and now guys let's call the api to store that so before we need we are submitting we need to give even dot prevent default so prevent default function and now we have going to use axios to send that data okay so for that guys let's install that axios first terminal so let's give npm install ax ios hit enter so guys let's wait until it get installed so guys our axios is installed successfully so let's just check it out you know from our package.json file you can find that axios install now so let's use this guys to save our data so first let's create a variable called variable of response is equal to where i am going to use axios hit enter so when you directly the class will be imported at the top so let me just cut and paste below so this is the you have to input when you use axios so guys we are going to use async also because when the response come until unless the response comes you should not execute the next line whatever you give over here so for that you need to give async and evade weight okay so away axios dot post function so over here you are going to create that path so forward slash api forward slash add hyphen student give comma and this dot state so what state this date whatever you are taking all that values you have to store when you send the request it will go over there so guys for this you need to create the api okay so let's let's get started so the error is this it's declared but never used so it's a warning so just ignore that and let's move to our laravel application so let's get back to our laravel laravel api so it's a fresh application let's open with code okay full size so guys first let's get to our database over here copy this control c and get back to your laravel app go to your env file and change the database name first save and let's close guys so database connected and now first let's move to our app provider app service provider over here you can see boot function so inside this boot function return schema colon colon default string length function where 191 you are going to set and import the class perfect now let's save okay let's remove this we don't require return that because it's just setting that we don't need to use return let's close this guys and now let's create a student so we we are using where you can see add student right so this fields we are going to create let's get back open your terminal so type the command to generate the model migration and the controller so first let's create a model so php artisan make colon model model where i am going to create a student okay hit enter model created successfully let's go to app model student dot php file is created and now guys over here we are going to use protected dollar table is equal to over here you need to assign the table so we will create a students table okay so let's save this and what are the fields we are going to create dollar fillable is equal over here we are going to tell name and then course email and the phone done so these are the four fields so let's create a table for this first php artisan make colon migration where create underscore students now this table name students underscore table okay hit enter created migration so let's go inside our database migration and this is a students table perfect so let's copy this students and you have to place just over here inside your model done and let's create all the fields dollar table of where i'm going to use string function because we are using the name okay and same with the course email and form done save guys and let's close this file perfect so now let's create a controller php artisan make colon controller controller name so i want one inside the api folder so let's create api folder forward slash the controller name called student controller hit enter controller created successfully okay so let's move app http controller api folder inside that api folder we have a student controller so if now let's create a function public function and the function name will be store okay so whatever data we send over here it should store so before that create a variable called student is equal to call your model called student so which model you're going to call so you need to import the class so this is the class guys so this model is nothing but your this just created model okay done semicolon before that you have to assign with the object called new so this is your object and now guys you are going to call all the fields so before all the fields means this input fields name course email and phone okay so that name is equal to whatever request you're getting so from anywhere if you get from postman or your react because we are going to get from this react okay so for this all the things we call as request only so for the request you need to give re quest request dollar request this request copy and paste over here of your input field okay so whatever input field we are going to create it we are going we will create the same let's make this course and this is our input field course this will be your email database column name and this is input column name and final phone copy and paste this phone also done and after this guys you need to save the data so once it save you need to send the response so let's type return response function in json format okay json in array format you are going to send status that is 200 and the message you are going to share send me sshe message okay we should not give comma we have to go like this over here student added successfully so before saving this you need to migrate this table right so which table you have created the student table so let's migrate that table php artisan migrate okay hit enter so you can see all the tables inserted with that our students table also is inserted let's go to our database first refresh you can see that students students table is created over here you can see all the fields perfect guys so all set from our level so now we need to route this so let's move to about before that kill this terminal let's go to our routes api.php move over here and now let's create a api let me just remove all this we don't require route column column post method because we are going to send the data okay so this will be a url so what you already have created in your react js you can see that api slash add student so we are going to take this add student api will be default so let's take this add student and send over here forward slash give comma and call your controller so student controller colon colon class at your which function store function done so input the class of this it's already inputted over here guys so this is the class inputted and this store function should be created in your student controller which we already created it cool so now let's get back to this api and now guys when you access this it should work so let's start the project of your laravel so this laravel api project is already started guys let us see the output okay it's running over here and yep let's go back to our over here so you need to send that path let's copy this path get back paste all set so you can send in this method or else you can define at your app.js directly so let's send now and now guys let's write if condition if this res okay so response dot data so this data is pretty default and whatever the data you are going to get so this data inside this data status is triple equal to 200 so this status is nothing but your inside your level you have sent that from your student controller so this status okay let's get back and now once it is success if it is 200 means let's show the message called with the log function log where the response dot data dot message so this message is your from your controller okay so copy this message variable and paste over here done so after the success of this adding student we are going to show that and i want to empty the input box so for that you need to tell this dot set state okay set state function open and close curly brace and now inside this let's copy this all the input fields just copy and make it empty done so once it save it will empty the input box so now let's test guys refresh perfect so let's go to over here add student everything working fine let's add with student name with bca with gmail.com so phone number some random digit number save student okay so guys it has saved and the box is empty so let us see that console log over here so first let us open the console inspect you can see that student added successfully the output has come and let's see that database guys let's go browse boom so you can see guys the data is added let's get back and add one more data let's refresh now and boom prakash gmail.com student name phone number let's save data you can see student added successfully message has come and let's browse this cool so guys we have successfully completed with the react and laravel api how to insert the data into our database so guys let's see how to fetch the data from our database in react.js using laravel api so guys now let's get started so first let's move to our react app and create one simple table design so let's get back to our react application and we should move on student.js file perfect and yep guys so let's design the table over here first so table where the table class name is equal to table table bordered table striped done and table head table row table heading id and then your student name student course student email id and the phone and simple guys finally one edit button and one for delete button done and then your table body t body and inside this you will be doing your table row datas so guys now let's see the output first control s and check the output perfect so we have got this and yes guys let's get started with the api call so first let's go in this class inside this class call your component did mount so let's call the component did mount function open and close curly brace and whenever you load the page i mean this page is whenever this page is loaded that time this function will be automatically called okay we are going to use axios in this and get the data so for that guys let's create one variable called response so using const response is equal to your axios so a x i o s x use input the class guys so let's import that over here you can see just input this fcs.get function and inside this get function you are going to get all the data api forward slash i mean give first forward slash api dot students okay so this will be our url and after this whenever you run this the time you should execute so before executing you need to check await also because it will give an error when you don't wait for that so let's use await so when you use await you need to use async also async so now guys let's first go and create the api and the code to fetch the data so let's move to a laravel application perfect so first let's move to our api.php inside routes let's create the route colon coolant get function call the route name what you have created over here api is default just call this student so this students and your controller name so let's copy the same controller which we used in to store the data so let's tell this as index so let's copy this index go to your student controller and create the function with the name index so public function and the function name index so let's create a variable called students is equal to your model name student so colon colon all where we are going to return so let me just copy from here and paste so if it is success means everything is going to be 200 and take this data and send it over here and make this message as students okay so same variable we are going to access there done and now guys let's move back so this api will call perfectly and it will respond so let's move to our react app so now your data has come guys so once it is coming the time we are going to check with the if condition if this response dot data so before checking this response.data i'll just show you some output in our console log so use log function to check our yes okay so this our yes we are sending over here now let's get back inspect move to console so okay we didn't give the path so let's copy the path first copy and give the correct path eight thousand slash api slash your students data okay now everything will be working fine refresh so you can see that the data has come so whatever the response dot this data so this data dot student so this is the status we sent 200 and the students which we shared over here so inside that students we have two data so these data are coming from your database which we have stored in previous video so these two data fetched over here so it's now let us get this data into our table so let's get back to our here let's comment this for the reference and let's open this if else condition and over here you need to check that status triple equal to 200 if it is 200 means then you have to come here and this dot set state function open and close create a student variable so students colon whatever the response you are getting response dot data dot students so this student is coming from from your controller okay so this student you are calling that done and one loading thing we will see guys loading over here false and this when you're setting the state you need to assign that state over here first state is equal to open and close curly brace where the student variable you are going to send student of array done and then loading colon true first you have to initialize this then in this student you have to copy this and call over here okay so whatever the data you are storing over here and this will store all your data and the loading is true over here and this is false and now let's move below at this render function so i don't want to call directly over here let's create separate things so first you use if else let's create one simple variable let's create one variable called uh student underscore html table whatever just create that your null okay and this student variable only we have to check so before checking this you need to check with this dot state dot loading so this dot state dot loading if it is true means if condition will give you true so when it is true that time you have to call this variable and paste over here is equal to and just create that tr table tag because we are going to assign over here okay so let me just finish with that table row and table data and inside this table data i am going to call h2 tag until loading and this call pan okay is equal to we are going to give 6 because three three plus six one seven okay so mention that seven done remove this again you are going to copy this and is equal to now guys we have to loop the data so what data whatever data you are going to present over here so let's hit enter this dot state dot your students variable so that students copy this students and we are going to use map function okay so inside this mapping only we are going to create done so give over here item so whatever the items comes over here and open close curly brace and before that you have to pass this okay and inside this function you are going to return open and close function and design your table row so tr tag table row table data so table data first we are going to get the id so just call this from the students whatever the id is open and close curly brace item dot id so this thing only you are going to paste over here using key is equal to open close curly brace item id copy paste this will be your column name name database column fields okay so next is course and this will be your email and this will be your phone number okay so these fields these names are nothing but your database column names okay so this name course email phone done let's get back and now a simple td tag to display the edit and delete button so to paste a tag we have to use link in react so link open and close link give this edit to is equal to open and close curly brace where so before giving url let's call the class and design the button class name where button button hyphen success button hyphen small done and over here above the tab button below the escape button that symbol you have to give okay so edit student forward slash use dollar and open curly brace and close curly brace and the id over here okay so that id is nothing but your dot item of id done so this dollar item of your column field primary key id and then finally one td tag with the delete button but on button where type is equal to we will give button only and copy the class copy paste and this button name will be delete danger save guys and now let's take this variable and paste inside this dd body tag okay all set so save it and now guys let's check it refresh perfect so once it's loading and after that it's showing so why it's loading guys because we are checking that right over here inside this if condition if that state is until unless it loads it will show false when it is false it will show your data output okay so guys we have successfully fetched the data and let's add one more data over here as varun vca varun gmail.com some random digit phone number add student okay data added let's go back and see where you can see that data has come so we have successfully seen how to view the data in react.js using laravel api so guys let's see how to edit and update data in react.js using laravel api so guys as we saw we have added the student and fetched the data of the students in react.js with laravel api so guys now we are going to edit and update the data using our laravel api in react.js so guys let's get started so first let's move to this slash home page over here and yup guys let's move to our react and as you can see in app.js so on this route called homepage we are at the student model okay so let's go to this student js file okay so it's at my student.js and this is our table guys where this edit button is given perfect and now to call that url we have created over edit student with the forward slash the item of id so which item this is nothing but your students data so student item or row you can call anything so i have called as item of id so now let us see this output guys first let's get back refresh and let's click on this id number two edit you can see that with the url edit student slash two so right now let's create a page for this url let's move so let's copy this url and go to our app.js file and create one route for this route path is equal to in double quotes forward slash and then post your edit student forward slash then you have to call the id so colon id so this will be the url calling this id is nothing but your this whatever id you have shared in here okay and then call your component so component is equal to open and close curly brace edit student so edit student you are going to create let's import that import edit student from the page from the page is slash edit student you are going to create okay so let's copy this name and go inside the pages and create a file with the edit student.js so now over here it's created so let's take the same form let's go back refresh okay so i want this ad form so same form we need the things so this input fields only whatever the details to edit this you need the ad form only so let's copy that ad form so add students form i'm going to copy everything control ac copy and go to your edit student and paste and now let's change guys few things so first change your class name let's make it to edit student copy this and export default as edit student done and then second we are going to render function so move to your render function over here instead of add student give edit student and the link we are going to keep the same not changing anything and then on submit you are going to give update student okay so make this update student and whatever the handle input let me just minimize this sidebar let's make this handle input same thing you are going to give no changes and whatever the value is there you have to keep same thing done and this button from save to update student same thing that's it so no changes guys only one change in your form that update student and let's go above and change over here okay so this update student and whatever things are there we will just change according to it so first this handle input okay this dot handle input whatever the function is calling it's over here so it will set all the input fields target name and the value of that input it will set inside this state okay and once it is set then you are going to send the update function to update the data so before sending updating the data you need to check with let's comment this right now we need to get the data so before that let's see the output first let's click on this id number two edit so you can find the form edit students we required the data of this id number two whatever the data you have to print in this input box so for that let's get started so let's create a function use async component did mount function open and close curly brace so guys now let us get the id first so what id are going to get this id so let us inspect and try to get this id first let's move on the console let's go back over here let's create one variable called id is equal to you can create student underscore id and this will be this dot props dot match dot your parameter param that is parents dot id so this ad is nothing but you are getting from your url so which url from your route so this id you're going to call that okay so once you call this over here let's give semicolon and let us just log this console log and check the output log student id paste okay so let's get back refresh you can see that id has come automatically whatever id we sent that from here let's click on three you can see that third id has come perfect so guys now with this help of this id you are going to get the data from your database so let's create the axios so first let's create one variable called resrs is equal to a weight of your axios axios dot get method you are going to use backtick so that is below escape button okay it's not a single code it's a backtick so over here and now you have to give forward slash api forward slash edit hyphen student id so dollar open close curly braces and then your student id you have to pass inside this done so now guys you need to execute this api so before executing let's go to a laravel let's move okay so let's get back to api and now guys let's create a route colon colon get function where we are going to create forward slash edit hyphen student so make sure you're copying the correct path edit student just leave this api because it's a default thing we have to give copy this edit student with the id so edit students forward slash with the id or passing okay and you're going to a controller so let's copy the same controller which you are using at the top paste and make this to edit so guys let's copy this and go to your student controller and create a edit function name so public function and the function name edit function now create a variable called students or student is equal to your model colon colon find function so what you're passing from your parameter this id right so copy this id and send into your edit function and from this id you are going to get find with this okay so once the specific id is found then you have to send that into your response so written response in the json format okay so let's use the status is equal to oops 200 and then the variable called students student and your dollar student okay so this student you are going to pass over here as simple so guys now everything is working fine then copy this your same edit url and paste over here so right now it will be working so before that you need to call the correct path so let's copy the level and paste over here done so now it will call the correct path and then it will fetch the data so now guys we need to check that if this response is success or not so if you use if condition so response dot data dot your status so from where this status is coming that is from your controller so this status you have shared right status so that status you are getting over here where triple equal to 200 whatever that matches then you have to share that so in this you have to set the values so whatever the values you are getting in this let's this dot set state function okay and then you are going to call all the fields so what are the fields you are going to paste so i'll show you so these are the name course email and phone right so these fields you have to call over here inside this so that is already assigned at the top let's copy that replace paste and then use the same method to call your student data also so let's call that student okay so why student you are go you are taking from here okay so this response student so that student you are going to call over your dot name okay so this name is nothing but your database column field so i'll just show you database name course email and phone so these four fields you have to call so let's copy this and paste ctrl d d paste and change the column fields name email so let's make this as phone done guys and now all the data will be printed so let us see the output guys first save let's move to our react refresh so before refreshing the data has come cool so let's close this you can see guys data has come as per the id so let's move to this first that is with prakash at this id number one let's edit you can see that with prakash bca without gmail.com his phone number perfect so guys now let us update the data so let's get back to our react and let's move to this function so once you click on this update button it's going to form on submit dollar this update student so this update student will take all your input and values field names okay so then here you are coming back and now guys over here let's uncomment this and change the path so first you are going to create this variable called response that await which if you have used await you have to use async okay and then you are going to update with the put method okay so we'll use put method and the path will be update student okay so this is the path where you are going to send the data with the id so let's cut this ctrl x and remove this single quote you have to backtick okay so use backtick and paste the path forward slash and send the id dollar open and close curly brace you are going to send the id inside this so student id so from where are you getting this you need to as you got over here to fetch the record so same thing you are going to copy and paste over here done so when you update you are going to get that id from your parameter i mean this url okay so you are going to get from here and back to you will send over here and then this dot state so whatever the value is there inside your input box which is assigned over here and then you will send the response so once the response is 200 you will tell whatever the message comes over here okay so message we will check that as updated so we have to write the code so once it is success you are going to empty the text box so let's save and now guys let's copy this path and move to our laravel so let's first create a api we are going to update using put method so route of put method where for single quotes update off with the id and we are going to copy the same controller student controller and create a function called update so let's copy this go to the student controller and create a function named update so public function and the function name update function where you are going to now update the data so guys same code as we stored that okay so let's copy this full to store the data we have copied right so same thing you are going to check earlier so first let's accept all the request request dollar request and the id so you are getting the id right from your update student you are getting this id copy that id and pass from your update function so this we are going to use this id and send into this model so let's remove this new keyword and use this find of id dollar id so with this help of id we are going to find from the student model and then update all the data using update function okay so this input fields and now guys once you response is success you are going to send 200 and updated successfully set and yup guys everything set over here now let's get back to our react over here all set and let us update guys so get back refresh let's inspect to see the message let's move on console now guys from bca2 i'm going to add and this phone number 2 i'm going to update with 555. let's click on update so response you saw student updated successfully and it's empty so i don't want to this to be empty let's get back just remove this done oppos refresh okay so you can see guys the data is updated perfectly let's update to vade n okay let's click on update so updated successfully perfect guys so i need to change this button as it's updating because we cannot know it's getting updated or not so when you click on this bca b update student we cannot know what is going on over here so for that you need to just add one simple thing document dot get element by id function dot inner text is equal to where you are going to tell updating okay so what you are going to take over here single quote update button so let's copy this name update button and paste over here id is equal to update button okay so once it's clicked on updating then after the success message you can tell again the same message what you have passed over here update student copy this and paste back that's it okay so refresh all set let's change this with prakash update updating its written and again after updating its move to same thing okay update student so guys if you want one more option like copy and paste and make this tool disabled is equal to d r u a true okay so after disabling you want to make it false again enable that done let me just show what is the difference now refresh data came with prakash and i am going to update updating see it's hidden right perfect so we have updated with the vid prakash and make it to bca updated get back you can see with percussion and it's bca let's try to update from this varun to one go wind so varun go wind update student cool so let's get back you can see one going so guys we have successfully completed how to edit the data and update the data in our react.js using laravel api so how to delete the data from our database in react.js using laravel api so let's get started so first as we can see that localhost 3000 we're at home page we have to go to this and move to this delete button so let's go to a react app let me okay so guys this is our student page where all the tables are appended okay so this is a table where this variable is called student html variable and over here our table row is designed with the delete button as simple guys and now let's start to delete the data so first we are going to use onclick function so on click on click is equal to open and close curly brace where we are going to check with the event of this dot delete student function okay where i'm going to send this event dollar e and then with this only with this function i'm going to send the id also as you can see this key item item of id so whatever you have stored in our database like so this id so let's get back send that item offer dot id done and now let's copy this delete function and move over here let's create after this did component let's paste delete student is equal to where event with the id are getting off your open and close curly brace and then guys route guys so before calling let's create one variable called constant variable is equal to response axios axios dot delete function delete function i'm going to use okay so let's use backtick so below the escape button just click that backtick code forward slash api forward slash delete hyphen student forward slash with the id so dollar open and close curly brace that id which you are getting from here so let's copy this id and send in this done so once it's sent then you have to call this api right so that let's create this api first so let's copy this api is default just leave that copy this delete student and go to our laravel and now we are under routes api.php route delete method because we have created delete method over there okay so just don't forget this delete method is called over here and we are sending that with the id so dollar i mean direct open curly and close dialer id and let's call the controller so we are going to copy from top the same controller at destroy so let's copy this destroy and go to a student controller and create that destroy function so public function where function destroy oops makes this public i see public function and now guys we are going to delete that so from student variable is equal to find your model student model colon colon find function and inside this you are going to paste the dollar id so from where you are getting from this destroy function okay so this destroy function is coming from your this id okay so this id is sent on this function and then it's deleting the data so to after deleting the data we need to send the response so before let's delete the data first and now let's send the response so let's copy the same thing copy and paste so once it's deleted it will go to 200 and deleted successfully done and opus let's move to api.php all set let's go to our react app and now guys this should work so before calling this url you have to correct call the correct path so that is localhost colon 8000 okay so paste here remove perfect so guys now let us check in the if condition if this is success means it should show else it should not so so if it's success then you have to check with this so guys once it executes this we are going to face error because when we get the response until that this code will execute off so guys for that we need to use await okay so if you are using await you have to use async also a sync async done and then only a response can come dollar data dot status triple equal to 200 so if it's success then you're going to let's use the log to print the message called response dot data dot message so this message you're getting from your controller let me just show so this message copy this and paste done so guys now once it's deleted you should show that it is deleted but when we click like i mean to say when i click this delete button this data should get removed okay we should not load this page so for that you need to use some different so first let's create one constant variable of this clicked clicked funda so let's keep an unique variable where event dot current target current target okay so this event dot current target and with this help of variable dot we are going to get uh we will first fix that inner text inner text is equal to tell this as deleting so when you click on this delete button it's loading okay refresh when you click on this delete button it should show deleting and then it should remove this data so for that now we have set this deleting and after this let's copy this once it's deleted the time you need to remove the data so this current dot closest function with the remove function okay so what closest you are going to remove that is your table row let me just show that so whatever you have appended right so that table tr so this tr you have to call over here that's it so once it's clicked it will remove that data after deleting the data only you're going to remove that row okay save and yep guys so let's test it let's refresh open the inspect let's go to console log so let me just add with dummy data dummy dummy dummy gmail.com so let's add save student student added successfully let's go back you can see that it's added and now let's click to delete so click on delete student deleted successfully you can see that data is deleted guys let's refresh once again so you can see that data has been deleted so let's add few more details let's save student saved let's add another data done go back refresh so there is no message over here and now let's try to delete this fifth data so before that let me just show you in the output of your database so guys we have total five six records over here i mean till six id let's delete this id number five first let's get back we are clicking on delete deleting and it's deleted okay so let's see now what db browse once again you can see that data is deleted so this we have successfully completed with how to delete the data so we have successfully completed with how to delete that data in react.js using laravel api so guys let's see how to show a success message using sweet alert so guys we are on the react now so localized colon 3000 and yep guys so let's move to our sweet alert so hit enter and yeah guys so let's move to this sweet alert website you click on guide and you will be on this installation so to install in react we can use this npm install suite alert copy that and move to our react app guys so now let's on a terminal and in install this sweet alert so let's paste ctrl v hit enter so guys let's wait until it get installed so guys our sweet alert is installed successfully so let's move to our package.json file and over here you can find that sweet alert is installed so let's kill the terminal and close the file so now we are going to use the sweet alert to show the success message so for that like when you go to add after adding the record i want to show a success message so let's let's move to this file with the route that okay so in your app.js file we have set up the route if you don't understand how this has been set up please watch out the videos of this react js crud in laravel api link in the description so guys now let's move to this add route where component is add student so over here as you can see it's called there so inside this pages you need to go to add student dot js file perfect so when you click on the submit button you are going to save student function so let's get back to the save student over here guys so once you save the data at that time you are getting the response where you can see this the status is 200 means success so after success you are showing the message in console log so now instead of this we want to show the message in sweet alert so for that first let's get back to our dock and here is the method guys you need to import the class so let's copy this get back and move at the top of the page and paste let's remove this cdn done guys so with the help of this file we are going to call all the function so let's get back to the dock again and getting started you can get this preview okay so but i don't want this i need this way okay let's click you can see this message perfect so let's copy this and paste set and the message we were getting that message you are going to copy and paste inside the text paste here and instead of good job mention success and yeah something means we'll give okay and this will be the success icon done save guys and now let's see so let's refresh and let's add the data kalish become kalish at gmail.com one two three four five six seven eight nine ten and let's save student save you can see success student added successfully the message which we have printed from our laravel controller okay and let's give okay perfect so that this is how we show sweet alert message and now let's get back to this edit also and give the success message over there to show so let's edit data has come when you click on update the data should get updated okay so for that also let's print the message let's get back to react so we just need to copy the class import this class copy let's go to our edit js at the top of the page input the sweet alert class and sim code we are going to copy to show the message so let's get back so this is the update function i mean this form when we submit this form the time you are going over here and updating the data so while updating when you are success then you are showing the alert message over here so this is we showed in a console log right so let's show in a sweet alert as simple the same data message you are going to show and instead of success you can tell updated okay and it's successfully updating right so let's keep the success icon only so let's save let's get back refresh and now let's change from bca to mca and for number let's update cool updated student updated successfully let's give okay so now let's get back and for the deleting part so when you click on delete that time what happens we have to delete this data and show the success message for that also so let's get on this direct home on the root so let's get back on the app.js the path called this slash and which is calling the student component so inside my pages i have a student.js file where this is my delete button okay let me just show that so this is the delete button so when you click on this it's going to delete function so let's move we are over here and once it is success means you are going to show the message so for that you are showing in a console log let's show in a sweet alert so let me just copy from there copy the sweet alert and import the class of that swell let's import that swal let's move at the top paste perfect so this is my sweet alert class done and yep guys over here let's show as title deleted and this success will be once it is deleted means it should show success only okay let's get back refresh if delete so deleted student deleted successfully okay so that delete data is not there let's delete this college also click on delete deleting and it's deleted so student deleted successfully okay so we have learnt how to integrate our sweet alert into a react.js application so guys let's see how to do the validation so full crud application in react.js with laravel api we are going to do validation so we will be doing about validation about adding the forms and editing the forms so off while editing it and if the id is wrong so that validation and the delete id okay so now let's get started with add student so when i click save student it should validate it should be required and it should show the message as this field is required our phone number email validation all things so let's get started so first let's move to our application react.js so let's go over here so we are on the add student page so let's move to that component route of path add student where we are going to this add student component in the pages folder add dot add student.js pages folder add student.js done so yeah guys so when we click on this submit button the time we are going to student function where you are moving to this function and going to save the data using this laravel api route okay so let's go to this and do the validation over there and get the response according to that so now let's move to our laravel application so guys here is our route add student where we are posting the data using post method okay add student we are going at the student controller at store function so let's move to the student controller which we have created over here and at store function so this was the function to store the data guys so now before storing you need to validate all the fields so let's begin with that first create a variable called validator validator is equal to where validator scope resolution of make open and close function and now guys over here you need to start with the dollar request dollar request of all input fields where you are going to get in this array okay let's make this over here and now call your all the input fields name like this is the name so this name is nothing but your input field request so this name will be there after this you are going to get the validation which i want to be required and will give max length colon 191 copy and paste next is course so i'll paste the same same validation next is email so you are going to paste email and mention the email also over here done and then phone number so let's copy this and make phone over here required and we'll tell this as max 10 number and minimum also 10 number okay so instead of this email we have to put numeric done so now guys let's check this is in a if condition after this give if if dollar validator fails fa ils fails function then you need to give else if if it fails then you're going over here else you are saving the data so let's make little front and close the else condition done and to return the message we are going to copy this and paste back and let's remove this and make one unique variable called validate underscore error and over here you are going to paste all the validator message so let's copy this validator of messages okay so it's messages not message so guys now let us test this so before testing let's go so guys now let's get back to react app by taking this variable validate error so let's go so guys once this is success the response is correct it will tell 200 if there is some error then you are going to move to else condition so let's go in the else condition and print this so first you are going to state the variable for error list so let's define that this dot set state open and close bracket and curly braces then you are going to tell create one variable called error list colon whatever the response you are getting so response dot data dot the error list you are getting so let me just show that this validate underscore err okay so that value you are getting and then sending this in array format okay so we will copy and create one array over here inside your state let's paste colon with array done so now with this help of what are the details or error message you are getting let's show that in our below the input of html so let's use span tag to show the message design the class using bootstrap classes text danger and open and close curly brace paste it over here so list dot your input field name so that input field name is nothing but this value so name copy this so before this you are getting from state right we need to initialize that this state dot error underscore list dot then your name okay so same we are going to copy and paste for the course also so let's mention that course and the next field is email and then the phone let's paste copy and paste the phone down so with now let us test so once you click on the submit button you will go to save student and over there if there is some error then it will come back to this that's it so now let's go okay refresh and now let us click on this save button before that let's inspect on your developer tool go to console so if any error comes we can see over here so let's save student okay so this set state okay we have missed one spelling mistake remove this assist to set state okay give correct spelling refresh and yep guys so now let's click on save student you can see that input the name field is required the course field is required email and phone so let's add one input field called vade and let's save student you can see that the wait is there and that error has gone and the left out things are available so let's add that bca so vade at gmail.com let's make some error in this and add some random digit phone number save you can see these two error has gone and email must be valid email address so let's give this at gmail.com and this should be must be greater than 10 digit okay let's save student still it's showing the error so let's go back to a level and let me just remove this numeric and now guys let us try get back to google chrome and now let us save the student guys let's click on save perfect so student added successfully okay let's refresh okay that message was not refreshed because the page didn't load right or i'll just refresh the page so once it's added you can move back to your home page okay so for that guys you can just add one simple code into your react so let's add that after this i want to go to homepage this dot props dot history dot push function where after inserting the data i want to go to home page okay let's save and yep guys add student vj bcaa vijay at gmail.com and the phone number i'm going to give wrong save student you can see must be at least 10 characters so let's give one two three four five six seven eight nine ten okay now let's save the student you can see successfully added your redirect to home page perfect so let's save and let's close you can see that guys data has come over here with the validation so now let's move on to edit the validation okay let's click on over here and yep guys so let me just show you one thing so id number 10 is last write let's click so id number data you have got now let's try to give over here 12 what in case of 12 when you try to validate that so you get error so for that also you need to do some validation so get back to your laravel doc and move at the edit function so before how are you getting to understand this is edit function so you need to go to your react app go to your app.js file at the route where you can find this url edit student with the id so edit student with the id at this component edit student so let's move there edit student.js so when you load the page that time this url calls with the id okay so edit student slash id and then you get the response over here okay so after this if this is success then you are getting that details if id is wrong so at that time what you will do use else statement and paste this over here space and make this to 404 which means something is not found so let's create this status with 404 so let's get back and just go to your api you can find this edit student api right so you are getting from here so edit student that path i'm calling over here edit student with the id going to the controller at edit function so this is how we are coming to this edit function now guys let us use if condition if student if it is true then you will be you will get your data else you are going to say its 4.4 error where the message you are going to show no student id font as simple so let's save and when the response goes back to your react app over here you all check with the response of your data with status 404 as simple so once 404 comes over here that time you are going to push back and show the message so let us copy some code to show the message so let's copy this sweet alert message if you want to understand how this sweet alert is working please watch out the previous video link in the description let's save so this is to show the message and over here we will tell if it is like warning and the message you will get that no student found okay and give this as warning the icon will be warning and after this showing the message i want to go back to home page so this dot props dot history dot push function where after this want to go on home page as simple close and jump guys now let's try to hit enter you can see warning the message did not come let's see why from your controller let's send this message not student so make this message and call that message over here okay done let's refresh again now edit with this id9 and let's add some id number 50 hit enter when you try to access the id50 you can see no student id font okay done and now let's get back to edit and same way guys when you're have don't have any data that time you have to validate so as we done for the adding of student data same we are going to update with the edit students okay so let's move top we need just to copy all the same things and go to your update function paste let's move one step forward and paste that's it so the same input fields we are calling all these fields are same for updating the data so in case of updating we have to move on this on your react file we are on the edit student so when you click on this submit button you go to update student function okay so this is update student if it is success then you are coming inside this what in case of if it is wrong so at that time you will check else condition else while updating if the id is changed so this id right so this id is changed over here so for that case you are going to copy the same code which you have just for the done for edit let's paste so if status is 404 then you have to show this message warning and push to history else so for this else condition what about this showing the message so first let us set this for not four let's get back so now you are finding this id right if id sent wrong at that time you are going to use this fs condition cut one step forward paste is else and the same message you are going to print so let me just copy from top that no student id found over here done and now that this is this will be your 404 error so if something goes wrong it will come here if the validation error comes at that time you will go over here in the else condition so as we did for add student will copy from there itself so let's copy this code state set state of this whatever the response that validate error is coming we need to copy and create one state error list with the array error list with array done and use this to display your messages in your input fields so as simple so same way guys we are going to use that span tag and design the class text field using class called text danger open curly this dot state dot your error list from there dot your input field names okay so copy paste this will be the course and this will be your email field copy paste this will be your phone okay phone save and now guys let us test refresh and now let's submit you can see updated successfully now let's try to edit with other data where we will take this so we'll check with this id number three let's click on update you can see at least 10 characters and this is button is disabled so let me just enable that comment it yup guys let's refresh okay now update student must be at least 10 character let's give one two three four five six seven eight nine ten okay now let's update perfect updated successfully okay and we want to go back to the home page after updating that so this was the message once it is success i want to go back to this dot props dot history history dot push function to home page after saving the record okay it's showing the message and i want to go back so let's comment it because we are not using this let's and now let's try to update so guys i'm going to change this as bca csc section and update student perfect so updated and student updated successfully and back we are over here cool so it's for this delete also you can validate it as same thing okay by checking that id so guys we have successfully completed how to do validation in react.js using our laravel api so thank you for watching this video please subscribe like and share

Channel: Funda Coder

Views: 6,199

Rating: 5 out of 5

Keywords: fundaofwebit, funda coder, laravel 8 with react js crud, react laravel api, laravel 8 react crud, react js crud operation, react js crud api, reactjs crud using hooks, reactjs crud using axios, reactjs crud with laravel api, reactjs crud with laravel 8 api, react laravel crud tutorial, laravel reactJS crud with REST API, laravel + reactjs crud, insert data using react js api, insert data using laravel api in react js, crud app using laravel api in reactjs

Id: NidmTs2xZaE

Length: 99min 53sec (5993 seconds)

Published: Fri Jun 11 2021