Laravel 7 Tutorial - Insert Record Using Ajax

hi everyone welcome back to the laravel 7 tutorial in this video we are going to learn about insert record using ajax so let's see how we can insert or add record into database table using as x so first of all let's create model migration in controller okay so switch to the command prompt and here let's create the model so right here hp artisan make model and model name let's say model name is as student okay also create the migration so right here dash press enter now create the controller so right here php the space controller name 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 migration and just open this get a student table migration and here add some column so just write here dollar table and string and column name let's say column name is first name all right another column table the string and last name all right table string email and paper a string phone okay all right now save this file and copy this to table name and now just go to the student model so just open app directly again http no here you can see here the student model okay now just open it and here just add the table name so right here protected dollar table is equal to students all right also add the label column so right here protected dollar fillable equal to create an array here and add the column name first name last name email and phone all right now save this file and now let's migrate this migration so this to the command prompt and here just type hp partisan migrate all right now press enter table migrated so let's check so to the browser and just open phpmyadmin and this is the database now refresh the database and you can see here the students table okay now click on browse and this is the columns okay now go to the controller so just go inside the http app http then controllers and just open a student controller okay and here at a function so just right here public function and function name it's a name is index and here just first of all add model here so just right here use app slash model student okay and now dollar students is equal to a student order by descending and okay okay and simply return here of view student and contact and just add this variable name all right now save this file now add the route so just to go to the web.php file inside the routes directory just open it and here just add the route to get students student controller and the rate function name which is index okay now add the name here student index all right now let's create uh this view so just copy this name and go inside the views directory just open resources then views and here you just create a new file student.blade.php all right now here add the html5 boilerplate so just type your exclamation sign and press tab all right now change the title students okay and now add the bigquery cdn so in google search here jquery ddn okay now just open first link click on minified just copy and paste here all right now add the bootstrap cdn so just go to the get go to step.com click on get started now copy the css then paste here now copy the js heading and after jquery just paste here all right now remove this slim dot mean.js cdn so just remove this line all right now inside this body just add the table so here just write create a container container all right then row column and 12 all right and here just add the card okay so just write your card then cut a header and add the data it says student and hard body and inside this just add another table okay so just write your table type the id let's say student all right class okay and just add here the t head here the edge and add here the first name last name email and last one home all right now add the tea body and here first of all add the forage so just right here here pd and inside the double quantity bracket just right here is student dot student arrow first name all right now copy this change here the student arrow last name all right then email and here phone okay now save this file now let's check this view so switch to the browser and here first of all run the application so just right here php partition server now it's running so just refresh the page now go to the students route enter all right column not found so let's check just to go inside the trend controller and here okay add here the column name so just write here the id comma this okay now save this file and now redone refresh the page okay now it's showing this table all right now switch to the project and inside the blade file student.blade.php file here just add the button okay for creating new record inserting the new student record okay so just right here button or simply right here button type is equal to button class btn btn primary all right and here just add the text add new okay now save this file and refresh you can see here the button all right now let's add the model okay boot rester four model so inside get bootstrap.com just search here model all right now press enter and from here just copy this model so just copy and paste here okay now change the id let the id is a student model okay so just right here as student model now copy this id and paste here and data toggle and data target just cut cut this and paste inside this button all right now remove this button and here is the title add new student okay and inside this body just add the formula okay so just right here and also remove this footer okay now add here the form so just write here form and get the id the student form all right now add the input field so right here form group and inside this form group just add here the first name uh input text so just write here label code first name and write here first name okay input type is it text name first name and class form controller all right now copy this and paste here for the last name phone email and phone okay right here the last name last name email all right and here now add the submit button so again just right here button is equal to submit class btn btn that's success all right and and here the text submit okay and inside this form just added the csrf so just right here at let's check this model so switch to the browser and just refresh the page now click on add new and you can see here this model okay name last name email phone number and submit button all right now inside this blade file just add here that's click the script tag and inside the script tag download uh this form the student form and here just call the event submit inside this submit function call of action function add here the callback function function and pass the parameter e e dot prevent default okay where first name is equal to dollar input inside this double quote input and name is equal to first name all right now copy this line and this one last name so change here the text last name then email and here phone and this is for token underscore all right now add the ajax method here so let's write your dollar dot eject and then find this add here the url and type is equal to post type colon all right host and set this data just past okay so just write here first name colon first name last name last name all right email email phone phone and last one token underscore okay and here is success then function response and here simply print the response so just write your console.log okay now go to the controller student controller and here let's create another function public function let's say function name is add a student okay and also pass here the parameter request dollar request this argument okay and here dollar student is equal to new student dollar student first name is equal to caller request arrow all right note the students only student all right this variable now copy this time here last name last name message for email and form all right now student arrow same okay and simply return response jsn and inside this just pass here this student object all right now save this file now create this uh the route for this function so go to the web.php file and here just add new route route post and uri and student controller name student controller and create function head student okay i also add here the name that student dot add all right now add this route name to the blade file so go inside the blade file and here just add the url so just right here double curly bracket route and just place here the student dot add all right now all done so save the file and let's check so switch to the browser and just refresh the page all right now visible that make visible the console okay now click on add new add here the name let's say here so on email p john gmail.com and phone number let's say this one all right now click on submit okay it's not working okay let's take the switch to the student.great.php file and here okay and here the hash sign because i am just using the form id so just right here the hash sign now save this file and try one more time so switch to the browser and just refresh the page okay now click on add new add the name first name last name email phone number now click on submit all right just close close this model and refresh the page okay record inserted but uh result not showing here on console so let's check inside this success uh respon okay spelling mistake here so just write here response and response right now save this file and try one more time to just refresh the page and now click on add new name now enter the first name let's say peter john now click on submit okay you can see here the response stream id last name phone and this okay and if i click on and refresh the page you can see here the record okay now here just update record into the table so for that just right here has table id which is [Music] student table okay so just copy this id and just paste here all right let's face the body dot okay and just append a row so just write here er and add here 40dt okay first last email and phone number so just right here td tv one two and three one more td all right now add here the name so just write this first name last name email and last one phone all right and also the close the model so just write here model id which is a student model dot this okay and and for resetting the form for just and student form okay and zero but reset all right now save this file now let's check it so switch to the browser and just refresh the page now click on add new now enter the first name now let's say soft here gmail.com and phone number like this okay now click on submit and you can see here the new inserted record okay one thing just a new recording set on the top okay so for that just add here keep paint okay this one okay pre-paint now save this file and insert one more record so just refresh the page now click on add new and enter the first name let's say email email aliva and email all right now click on submit now you can see the new record on top all right so in this way you can insert record into database well using ajax so that's all about insert record using ajax 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: 5,071

Keywords: How, to, Program, laravel (Software), laravel, laravel v7, laravel 7, laravel project, laravel setting up, laravel v7 setting up, laravel v7.0, v7.0, laravel 7.0, laravel 7 playlist, laravel 7 tutorial, intro to laravel 7, laravel tutorial, laravel 7.0 tutorial for beginners, laravel for beginners, laravel tutorial for beginners, insert record using ajax in laravel 7, ajax crud in laravel 7, create new record using ajax in laravel, insert record using ajax in laravel, ajax

Id: 1F_Md_5ae4o

Length: 36min 33sec (2193 seconds)

Published: Sat Aug 29 2020