Laravel 8 Tutorial - Insert Record Using Ajax

hi everyone welcome back to the laravel a tutorial in this video we are going to learn about insert record using ajax so let's see how can we insert our ad record into database table using ajax so first of all let's create a model so switch to the command prompt and here just type the command php artisan make colon model a space model name let's say model image student and also create the migration so just write your dash m and now press enter now create the controller here so just type in php artisan make controller space controller name and let's say controller name is student controller all right now press enter now switch to the project and just go inside the database directory then migration and from there just open create student table migration okay so just open this and inside this migration let's add some column here so just write here dollar table string and add here the column name first name okay now just copy this and paste here and change the column name last name and here email one more field and just write your phone okay now save this file and now just copy this well name and go to the student model so just go inside the app directory then models and just open student model okay and here just add the table name so just write here protected dollar table is equal to students now add the fillables we just write here protect dollar label is equal to create an array here and just write here the column name okay this one first name last name email and phone so just write here first name last name email and phone now save this file now let's migrate this migration so switch to the command prompt and here just type the command hp article migrate okay now press enter migration complete now switch to the project and just close this now just open a student controller so just go inside that http controllers and just open student controller and inside this controller let's create a function here so just write here public function and function name let's say index and here just add students is equal to a student student model and also add here use app models student and now the student column caller order by and just add here the column name id and descending so just write here d e s c and call the get method all right and just return of view uh let's say you name it as students and just write here comma compact and inside this just pass here students okay now save this file and let's create the route for this function so just click on routes and just open web.php and here just clear the route so let's write your route get and uri let's see what i is is and add here the controller name so just write here student controller okay also add here the student controller and just add here the column colon class then add the function name which is index so just write here index now let's create uh this view so just go go inside the resources directory and then views and here let's create a new file student start blade dot hp and inside this file first of all write the html5 boilerplate so just type here exclamation sign and press tab now change the title uh let's say title is hx thread and here let's add bootstrap cdn so this to the browser and just go to the url get bootstrap.com and here just click on get started just copy this css and js just copy and just here now copy the js and paste here all right now just open the google and here just search jquery cdn now click on first link and here just click on minified and now copy and just remove this jquery slim version okay so just remove this line and paste here now save this file and inside the body let's add the table here so just write here section and give some padding so just write your style heading up to 160 pixel pixel and inside this section just add the container then row column md12 and here just add the card then card header okay and just add here the heading add students okay and here just add card body and inside this card body let's add a form here a table here so just right here table id is equal to it says student table and at the class class table and here just add t head and inside this tr ph and first name now copy this and this is last name here email and now phone all right and here just add the t body and inside this t body just add here for each directive so just right here at the rate for each dollar students add dollar student and here just add the tr and add the double curly bracket dollar student arrow first name now copy this and just change here last name then email and here phone all right now save this file and let's check this table so first of all run the application so just write here php artisan and now switch to the browser and just go to the url slash students okay and you can see here the table all right now here just add a link for add newer student so just write here inside the header and here anchor tag href and inside this let's just add the class btn within success and here just add the text add new as student okay now refresh the page all right now let's add a model bootstrap model so go to the bit uh step get bootstrap.com and here just search model and from here just copy this model okay so just click on this link and after the section just paste here all right now add here the model id let's say student model okay now just copy this id and paste here and now select this and cut and paste inside this button okay this link all right now just remove this button okay now save this file and let's check so just refresh the page now just click on this link and you can see the model okay now let's change the title and add here the form okay so inside this model title just right here add new student okay and inside this model body just add a form so just write here form and id id is equal to a student form and inside this form just add your csrf attribute csrf and then create input field for the first name last name email and phone so just write here form group add here the label for first name just write here first name input type text and class form control now just copy this and paste three time now change here the text last name last name okay here last name and here last name all right and just write here the email and email id email and this is for phone just right here phone and also choose the id phone right now just remove this footer and inside the form let's add a submit button so just right here button it is equal to submit and class btn btn primary and just add here the text submit okay now save this uh save this file and this is to the browser and just refresh the page now click on this link and you can see the model and form all right now switch to the project and just go to the student controller and here let's create another function and just write here public function and function name let's say function name is add student here just write request dollar request and inside this function just write here dollar student is equal to new student dollar student arrow set the first name first name is equal to dollar request arrow first name [Music] okay now just copy this and paste here now change here last name last name email and here phone okay now just call the same function so just write here student arrow save and return response as a jsn so just write here arrow gsn and inside this gsm just pass here their student dollar student okay now save this file and now let's create the route for this function so go to the web.php and here just write route post and uri let's say add a student and now add here the controller name a student controller column column class and function name which is add a student so just copy and paste here now add the route name so just write your name uh student dot ad all right now save this file now go to the students.let.php and here [Music] just before the closing body tag just add here the script tag and inside this script here just write here dollar from dollar form id which is student form okay so just copy this and here the site has student form dot submit okay and inside this submit you just add here the callback function and pass e and inside this just write here e dot prevent default and now let's create some variables so just write here late first name is equal to dollar and here just add the id first name you just write here has first name dot val okay now just copy this and paste three time and now here let's change the last name and here last name email email and here just add the phone all right create one more variable for token so just write here underscore token is equal to dollar input and name is equal to underscore and here just add the val function all right now here just write dollar as x and inside this just add here the curly bracket and just inside this just right here url colon and here the required so just right here double crochet bracket then row and just add here the route which is this one student dot and so just copy and paste here type is equal to post just add here the column sign post data and here just pass this data okay so just write here first name colon first name last name colon last name and for the email email and email and also add your token all right and after this just add here success if success then call this function and inside this function just pass your parameter response okay and inside this function just write here if response then just add here table id which is student table so just copy this id and just write here as student table space t body and dot prepend okay and inside this you just create a row so just write here tr and four time td so just right here 80 and just copy this and paste three time two three two three all right inside this td just add here single quote plus plus and inside this just add your response dot first name okay and here at single code plus plus response dot last name and here just add the plus plus response dot email and here just add the single quote plus plus response dot phone all right add your semicolon and after this just reset uh reset the form so just write here dollar hash sign and add here the form id which is student student form okay add here the zero index dot reset okay and hide the model so just write here as and model id which is student model so just copy this and list here and just write here dot model and inside this just right here height okay now save this file all set all right so let's check this so switch to the browser and just refresh the page now click on this link add new student and here just add the first name let's say mark last name is on and email id mark c and create symbol.com and that's your phone number this okay now click on submit all right it's not submitted see the console uh spelling mistake response is not defined okay so just go inside the student.php file and here response response okay here is the spelling mistake if response okay and also here response response now all good all right now save this file and just refresh the page you can see here record added already added okay now just add new and here just add the name let's say smith is on and email id sm and let's say phone number this okay now click on submit and you can see here the record record has been added okay so in this way you can insert records into database table using ajax so that's all about insert record using hx so thanks for watching this video and if you still have any kind of question you can ask me in the comment box don't forget to subscribe my channel thanks for watching

Channel: Surfside Media

Views: 25,443

Keywords: How, to, Program, laravel (Software), laravel, laravel v8, laravel 8, laravel project, laravel setting up, laravel v8 setting up, laravel v8.0, v8.0, laravel 8.0, laravel 8 playlist, laravel 8 tutorial, laravel 8 lesson, laravel tutorial, laravel 8.0 tutorial for beginners, laravel for beginners, laravel tutorial for beginners, insert record using ajax in laravel 8, create new record using ajax in laravel 8, ajax crud in laravel 8, ajax, laravel 8 ajax crud

Id: OOySLaUFFJE

Length: 26min 59sec (1619 seconds)

Published: Thu Sep 17 2020