Hands On Laravel : Ajax CRUD Operations - Part 1 | Create Todo Using Ajax

hello everyone welcome back to programming Fields I'm UMES Rana and today we have an exciting tutorial line up we will be diving into the world of web development with larel and Ajax specifically we will be building a full crud system using Ajax for simless user experience to start off let's quickly recap what crud operations are so crud stands for create read update and delete which are the fundamental operations in any database driven application today we we will focus on implementing these operations in larel with an extra twist ax ax allows us to perform these operations asynchronously and it provides a smoother and more Dynamic user experience but before moving to the example let's understand the importance of Ajax in larel crud why Ajax you ask well by incorporating Ajax into our larel crud operations we can update parts of a web page without having to reload the entire page this leads to faster response times and a more interactive user interface and it is a powerful combination that can elevate your web development skills so the goals for today's tutorial is I am to guide you through setting up a laral project implementing each CED operations handling a Jax request and incorporating best practices for a robust application so by the end of this tutorial you will be equipped with the knowledge to simless integrate larl and Ajax for efficient cred operations so if you are ready let's get started so I have navigated to the system and open the terminal and inside this specified directory I will create a new larel application so I will hit enter composer create project prefer this LEL larel and here I will create ax C so this will be our application name I will hit enter it will start creating this larable application yeah so the application is created now simply I will open it in vs code editor so I will have to navigate to the application folder as CD ax C and I will open it in vs code editor okay so at the very first step we will have to set up our database connection so simply I will navigate to EnV file and here I will give a database name as lar ASX crud and this is my DB password okay so now I will have to navigate to the database and here I will create a new database so I will give a database name as Lille ASX C okay so the database is created now simply open it and as of now we don't have any tables okay now in the next step we will create a model and migration so simply navigate to the terminal and here we will add PHP rtion make model todu and hyphen M so this will create our model and migration for too okay so hit enter and yes we have a model and migration so firstly we will create a database schema so inside this too migration we will add a few columns just like string and here we will add title as we want to do title and by default it will be nullable and the next column we will have description okay and this will be text and uh also we will add this completed flag now after creating this migration let's switch back to model so inside this app we have this to-do model and here we will specify the fillable property so we will write protected fillable and inside this array we will have to define those columns as title description and each completed flag and inside this migration and instead of this text for this each completed flag I want this to be Boolean yes so we will have by default uh there will be default property so we will write default as false okay this is fine now let's migrate this schema so switch back to terminal again and hit enter phpt and migrate yes so the schemas are ready if you will check out to the database and let's refresh it so we have the table created in the next step we will create a view in which we will have a to-do create form so let's switch back to resources folder and inside this views I will create firstly a master layout okay so here I will add layouts folder and inside this layouts I will create a file that is app. blade. PHP this will be our Master layout so here I will include bootstrap 5 cdan so for that I have already one extension bs5 so I will simply write bs5 and if I will hit enter yes it included but strip 5 skeleton so let's give one title as to as XC in Lal 10 and here I will just remove these all things and here I will use this eeld directive in order to extend this master layout in different views okay so I will write ild content and now inside this views folder I will create another folder as too and inside this too folder I will create a view as index. blade. PHP okay and inside this index blade I will extend that Master layout so I will write extend layouts. app and next we will have to write section content because we have used El directive and in between this section I will write our HTML snipet to create view so here I will create one container and inside this container I will create one row and inside this row I will create one column as 12 and one button that will be hyperlink basically so we I will add create to-do button and I will provide class as BTN BTN primary this is fine and just above this row I will pass one title as H3 class text Center and I will provide ASX CR in l 10 and here I will just pass JavaScript void on click on this button I want to open one bootstrap model in which we will have a to-do form so from there we will create our to-do so in order to do that I will simply check out to the bootstrap documentation so I will write bootstrap 5 model so I want this static backdrop simply I will copy this layout okay and let's come to the vs code and instead of adding this model directly to this view I will create one sub view inside this to-do folder so I will create another folder as subview and inside this I will create one file as create. blade. PHP paste it here okay now let's change this ID to too model now let's come to this index blade and here we will include include too. subview do create okay so now we want to open that to-do model by clicking on this button so here I will give one ID as create too BTN and we required cck event functionality so I will create one separate script file inside this public I will create one folder as assets and inside this assets I will create one JS folder and inside this JS folder I will create one file as a script.js and I will be using jQuery so in order to use this jQuery we will have to import jQuery CDN first inside this master blade so again I will have to check out to the jQuery documentation and I will write jqu cdan and I will use this minified Js so I will copy this CDM and I will switch back to application and just above this bootstrap libraries I will add this jQuery CDN yeah this is fine so now we have this jQuery ready now we can use jQuery snippet as document do ready function and here we will have to create one click event just to open that model by clicking on this create to-do button I will copy this ID and switch back to here and I will write this create too BTM do click function okay when I will click on this create to-do button I want to toggle that model so here we have this to-do model we have given the ID as to-do model let's copy this ID and uh use this selector as to-do model dot so here after this selector we will use model function and inside this model we will have to pass Google Now we will have to render this index blade file so for that we will create One controller first let's switch back to terminal and here we will create one resource controller we will write PHP make all on controller and our controller name will be too controller and I will pass one flag as resource okay so the controller is created now let's switch back to this controller and here inside this index function I want to render that view so I will write return view as todos do index and here we can use this return type as view we will have to import this view as huge illuminate view/ this is LEL 10 functionality we can Define the return return type inside this function now respective to this controller functions we have to Define route so let's switch back to out folder and inside this we have this web.php here I will use resource route so I will pass this resource function and inside this I will use this endpoint as Todo and we have to call that to-do controller so we will call that to-do controller as to-do controller colon colon plus that's it here we don't have to Define any function name because we have created this controller as a resource controller by default this resource method we'll determine which functions has to call now let's run this application so open this terminal and enter PHP artion serve yeah so the application is started now let's switch back to browser and let's access this route Local Host 8,000 and here I will specify this toos end point yes so we have this view ready now let's shift this button to this right so switch back to code and inside this index I will write text end class and I will provide some space from top and bottom that's it let's refresh it yeah so our application is running here now let's switch back to code so we have created this script.js inside this asset JS folder so we will have to navigate to this app. blade after these scripts we will include our custom script as a script type equals text SL JavaScript and we will have to pass SRC and the path will be asset assets JS / script.js we will have this a script closed now let's check if a script is rendering so here after this document ready function I will pass one alert as hey if I will refresh it yes a script is rendered now so let me just remove this refresh it and if I will try to click on this button our model is opened now now let's design a basic form here just in order to save to-do list so switch back to this View so here we have this create blade and inside this model body I will create form layout as div class form group okay so I will write label as to do title and we will have one input type as text name as title ID as title and we will pass placeholder as well title and at last we will have class asge form control all right let's close this let me toggle this sidebar and we will give some a space from top and bottom as padding of two and I will just copy and paste this layout for description as well so this is description and instead of this input type text I will change this to text area this is fine and this will be description yes and instead of the self closing we will have the separate closing and I want this button as button type submit and this button text will be save so after this model content I will use this form and we will have to pass action so we will Define action as route too. store okay and Method will be post and after this model footer this form will have this closing tag let's align it yes and we will have to Define this title as create too also we will change this ID as model title okay now let's switch back to browser refresh it and let's try to click on this button yes so we have a basic form ready as to do title and description now we have to create this form submit event okay currently this form is submitting directly with the form request so we have to handle this form submit event using jQuery and ax so that our form will not refresh and it will be submitted asynchronously so for that let's create one submit functionality for this form so let's switch back to code and here we will give ID to this form as to-do form so we have given this ID as too form now we will have to handle this submit event so we will have to create the submit Handler for this form but in the form we have defined this to-do title and description and we want to validate this form before submission so initially we will have one client side validation all right so for that we will be using jQuery validator jQuery provides validator Library so we can simply include that CDN as well so let's search for jQuery validator CDN okay so inside this jQuery validate we can copy this uh minified J so let's click on this copy and come to this app blade and after this jQuery we have to add this validate CDN so now we will be able to validate our form using jQuery library now let's define the validation rule inside this script so we will have to copy that form ID so we have this too Dash form and inside this script tag we will Define as too form do validate function okay and inside this validate function object we will have to Define rules and this will be object because we will have more than one input field so based on the input field ID or name attribute we can define those key so initially we we have this title just like title so we will write title as required okay and similarly we have the description so I want description as required so this validate Library provides different function and rules so for more information we can check out this documentation of jQuery validate plug-in so search for jQuery validate and here let's switch to this documentation so inside this documentation if you'll scroll down then we have this validate function so let's open this in a new tab and uh in order to validate this form we have to pass this selector ID of the form and this validate function okay and also this provides submit Handler that means once this form is validated it will be submitted automatically using this submit Handler and uh here it provides different type of function in order to validate or write validation rules so you can see this is required remote mean length max length mean value max value step email URL and many more so let's open any of the rule here if we scroll down then we can check the usage of this required field rules okay so inside this rules we have to Define this field key field means input ID or name attribute whatever you have we can Define nested object like if you have more than one validation rule then we can Define just like this so this will create a separate validation just for one input as required main Max URL email Etc so let's switch back to this code and here for this title we want a multiple rules just like required all right so we will Define required as true and also we will Define main length so I will write this minan length as three and also I will write this max length so I want max length as 50 characters same thing for description so I will write this description as separate object and I will write required as true Min length as 10 characters and max length will be 255 that's it yeah this is done now we can check out to the application so if I will refresh this form and again if I will open this model now let's try to submit yes so on submit on this form it triggered the required field validation all right and if we will inspect this one then we will able to see it generated label in order to display the validation error message all right so we can change this label color to Red so we will Define on CSS in app blade itself so as of now I'm going to just create one internal CSS and uh just for this error I want this color as as ff00 55 now let's refresh it and let's try to submit this form again yes so this looks nice now now let's check the mean and Max validation rule so you can see this triggered mean and here this minan also we can customize this uh validation error messages here so for that this validate plugin provides custom attribute as message so if we will check out to this documentation and if we will scroll down here yes so we can display the custom error messages by defining this message object so inside this messages object we have to define the key and that validation error message so let's switch back to code and let's add this one so after this rules we have to add messages object just like this and here for a separate object just like for title we have to Define this required message as please enter to do title same thing for mean and Max so we will have to find this minan length to do title must be at least three CS same thing for max length we will have to specify must not be greater than 50 c now let's copy and paste it for description so change this to description description and here description change this to 10 and 25 now let's come to the browser refresh this application and let's try to submit now so yes we can see now the error is customized so we can set different type of validation rules as per our requirement this supports different type of data as required mean Max also we can specify regular expression in order to validate form more specifically so that we will see in separate video like we will Implement those things in advanced way now let's switch back to form and now we have to handle this form submission event all right so for that we will be using this submit Handler we can implement the submit Handler now let's come to this code and after this validation rules here we will write submit Handler function and inside this function we have to pass form as an argument and we will be using this form object serialize okay so let's define one variable as form data and uh we will write dollar form do serialize function okay so we will be using serialize array function so this serialize array function will be extracting all the form input values from this form and after that we will be using dollar. Ajax and we will specify the Ajax way to submit this form data uh let's define URL so the initially we will submit the form on the specified URL and we have defined this route as resource route so we will be specifying too only so this will be submitted this form on too. a store Route and next we have to Define uh type so we will be specifying method type as post also we will have to Define data so we will be passing this form data that we have serialized using this serialized array function so we can write simply form data and if we want to display any loader before this submit function then we can use this before send function that I will come to this later and after that we will have success function means on submit what I will receive from this so I will have to capture that here and I will write the success response I will display console. log as response at last we have to Define error message in case if the form submission is failed then we have to capture that error message so we can write error that is done so before submit we can display any loading text or we can specify any loader here so as of now I will just write console. log loading later I will display this in the form with the loader this is done and uh in order to submit this form we have to pass csrf token as we know lar requires csrf token on every form submit so we are using Ajax way here so in Ajax we can pass csrf token using headers and at this top we have to Define uh dollar. ax set of function inside this exact setup we will have to pass headers object and inside this headers we will have to pass X csrf Das token and this value will capture csrf token so we can pass csrf token in two different ways the first way is meta attribute that means we have to Define one meta field here so for that we will have to write meta name equals csrf Das to and content and inside this content we will be using csrf helper function just like this okay so from here we can patch this csrf token inside this header so in order to capture that meta we have to write dollar meta and name equals csrf token as we defined name as csrf and we have to capture this content all right so we will write Dot attribute that means ATR and we will use this content all right that means whatever csrf token is generated using the csrf token helper function that will be captured here so this is the first way to pass the csrf token now let's come to the browser refresh this form open it f some random value and let's try to submit yes now we can see we have this XML HTTP request that is ax request pass in inside this form okay and from here in this payload this title and description is passed now let's come to the controller first so inside this to-do controller we have this store function so by default this form is submitting to this store function so here we will write dump and die request all okay now let's uh replace this XML HTP request and now we can see we have submitted this title and description that means this form is submitted now and if we will check to this headers and if we scroll down here then we can see inside this cookie it passed this csrf token also we can able to see that csrf token inside this head just like this so this is the first way to pass csrf token through ax request so now in the second way we have to commment this ax setup and what we will do we can pass that csrf token directly from this form itself so inside this form for we will be using csrf directive as we usually do in the form submission so here we have handled this form submission and we have serialized this form data that means when this form will serialized this will capture these input Fields along with this csrf token as we know this csrf directive generates one input type hidden with the csrf token okay so now let's try to submit this form again if I will submit and you can see this form has been submitted so using these two ways we can handle this csrf thing so preferably if you are using ax then you can use this approach or for the Simplicity you can handle this csrf it totally depends on your submit Handler if you are using this serialized function then this csrf token will be captured from this form automatically or else you will have to Define that csrf token inside this meta attribute now let's work upon this form submit Handler so here we can add server side validation as well based on your requirement so we can write dollar this validate request array and uh we will write title as required description as required that is fine for now I'm not going to uh write in-depth validation because that we already saw in the previous video so now let's submit this form and we will make entry inside this database so we have created this to-do model all right so I will be using this to-do model create function and inside this to-do create function I will specify attribute as title and this will come from request title similarly we will have description so I will write description this is fine and we will have to import this to-do model so I will write use app models to do that's it and I will capture this response in this variable too and then I will have to return this response in the form of J so I will write if Todo has been created then I will simply return this response in JS and inside this Json I will create one array and I will write status as success message as success too is created else I will return back with error so I will write status filed message filed unable to create to do yeah this is done now we have to capture this status and message inside this success Handler inside this success function so we already displayed this console response now let's come to the browser and let's check this one I will open this console first let's try to create one to do L cud okay let's try to submit this form yes this form is submitted and here we got this response success to-do is created and before send we added that console log as loading so that is already displaying here so after this form submission we have to display this success response and we have to reset this form all right so that this form input will be cleared and this model will be closed automatically so let's do that so inside this response we are getting a status and message so we will check if a status is Success all right so if response do status is Success uh then I will append one alert inside this index blade because when this model will be closed we will have this index page only because in this background we have this index page only right so we will be displaying at alert success or anything here inside this index blade so I will just come to this code and inside this index blade we had created this column of 12 so instead of 12 I will change this to six first and just above this one I will create another column S6 okay and I will give one uh contain ID just like div ID response this will be empty div and inside this empty div I will append that alert message from here okay so I will write dollar as response HTML and inside this I will create one alert component as div class alert alert success and this will be aert dismissable okay this div will be closed just like this so instead of double codes better we can write a back tick that we can able to append message directly here and we will have to write button type will be button and T will be BTN close just like this and here we will have to display message from this response so we will type response do message okay and uh we will have to write data dismiss property to alert this is fine and similarly for this failed we will write El if if response status is failed response do status equal equals F we can use triple equals okay and I will simply paste it here so this will be a lot danger response. message is fine if we have any error then we can simply display this same ler response and on every form submission this div response should be cleared automatically so here on submit Handler uh before sending this ax request I will just make it empty so I will write response Ash response do empty function now let's come to the browser refresh this page and so we have to Google this model all right when we got this response we have to Google this model and we have to clear this input fileld so we will have to write uh this reset property using this form selector okay we will be writing this as too form the first zero index. reset function okay after resetting this form we will have to toggle this model so our model name is uh yeah this one we have to copy copy this one and uh let's add here when we will get any response our form will be reseted and this model will be closed automatically and the response will be displayed inside this index blade div response now let's come to the browser refresh this application now let's try to submit this form so I will write re ax application re ax application description now let's try to submit this form yes BL is created and we got the success response right now if we check out to the database and now let's refresh and yes too is created and this is not closing okay so I guess I have misplaced this class uh data yeah so we have to write data BS dismiss because we are using boot step 5 okay this is done let's refresh and let's try to create another to-do another to-do list description of to-do list it yes now we are able to close it okay so that's it for this video in the next video we will see how we will be able to fetch those created to-do list and we will be displaying here in this index plate all right so stay tuned for the next video thank you and see you in the next video

Channel: Programming Fields

Views: 265

Keywords: Programming Fields, programmingfields, laravel, laravel tutorial, Ajax CRUD Operations, Laravel CRUD Example, Laravel Database Migration, Laravel Controllers and Models, Asynchronous CRUD Operations, Ajax in Laravel, Dynamic Web Applications, Hands-On Coding Tutorial, Real-Time Updates in Laravel, Laravel Development Series, Practical Laravel Tutorial, Laravel Ajax, Laravel Ajax CRUD, Laravel CRUD, Ajax CRUD in Laravel, Laravel Ajax Todo App, Laravel Ajax Todo, Ajax todo app

Id: R9fSqL2bbj0

Length: 33min 29sec (2009 seconds)

Published: Sun Dec 31 2023