Laravel 9 Livewire CRUD using Bootstrap Modal with Pagination, Search bar & Validation in Livewire

hey guys welcome to my channel so guys in this video we are going to learn with our laravel and livewire crowd application series okay so guys basically we are going to create a crud for the student where we are going to using bootstrap model okay so we'll be using the bootstrap file to create the laravel livewire cred application so guys now let's get started so first uh i have just installed a laravel line flash application here and here is my editor so right now first step let's set up the database so let's go to dot env file and here is my database called laravel line and just update that all done now guys let's get back to the level live wire at here you can see the installation part so let's click on installation so you move it install the package copy and open your terminal and paste that so hit enter okay it's just a warning guys that it's deprecated versions it's ignoring that and installing a live wire so guys our laravel live wire is installed successfully and now let's set up the auth screen foldings so we will be using a laravel ui package for that okay composer require laravel forward slash ui hit enter so guys when you install this laravel ui you will be finding uh layouts and auth inside your view okay once it is installed so okay so it's installed guys now let us php artisan ui colon auth so i'm not going to use any breeze or bootstrap directly i'm going to integrate it okay just auth scaffoldings so once it's integrated it comes over here done now guys we are going to integrate the bootstrap now so let's get back and go to your docs so we will copy the link css and move to your home app and inside app you will find the link okay so just add this cdn link and let's remove this unwanted not required all done and coming to the css i mean script part so here let's get below js copy and paste we don't require this let's remove that all done now let's begin with our live wire done so yep first step let's go to the begin with our migration and the models so php artisan make colon migration create underscore students underscore table okay so we are going to create a students table created migration let's go to database migration and here you find your migration table so now guys in this field we will add just two or three fields where we'll tell the name okay and email and one course okay done so four fields is enough guys and now let's migrate this php artisan migrate so it's migrated you can see that students table is migrated done with all that default tables so now guys let's create the model php artisan make colon model model where student model okay hit enter so you find app models where student.php now let's uh call the table that is students so let's copy the table name students and the fields also so protected dollar fillable is equal to where inside this you are going to tell name then email and course all done so let's save let's close everything so guys let's create a controller php artisan make colon controller where student controller hit enter okay done now you can get back to your controller at student controller where let's create one index function return view inside this you are going to a student folder at index blade file okay so for to call this controller you have to set the route so let's set up the route route colon colon get method where you will call the path and your controller okay so you can just copy from the controller here itself let's copy that namespace path paste here and your student controller let's copy that class name student controller done colon colon class at where index function so which route you are going students students done now let's get back to our student controller at index function so you need to create one folder guys so let's move to resource views and inside this views i'm going to create one folder named student and let's copy this index blade done index.blade.php all set so yep guys and now let's begin with uh extending the layouts so extend which we are going to tell layouts dot app okay and extend the section so here you are going to integrate your live wire okay let's open close and div for this content make sure you have you have your contact section so now guys we are coming to the part of live wire yep let's get back to the live wire and here you see after the installation we have to include the assets so one is your livewire styles let's get back and before the head only okay so after all the link tags and here before the end of the body yep let's get back and this is the script right so after the scripts only we will include it so now guys let's create the crowd of live wire okay so php artisan make colon live wire which is student library we are going to create so let's tell student hit enter okay so this is the first time let's create now done and you can see that one is class and one is view okay so now let's go to the class first app http here is your live wire and inside this live wire you find your student dot php file so which is already created okay so it has already created a view file so let's go to this view file so if you don't find go to resource views livewire folder inside that livewire you will find your student blade okay so now guys let me just remove this and say in a h word tag like hello student all done and this it's called over here and now let's get back and if you call your students what it happens you see that a blank page okay why because we have not included the live wire okay so this live wire should be included where in let me just show you the path it goes to the student controller at index function let's go to there and here you find the student and inside this blade file you have to include your live wire okay so let's open and close tag where inside this live wire colon your student so you just need to specify that livewire colon and then your page name so livewire colon goes to your directly livewire folder inside your resource views and it search for the file so we have got the file and now it's inside the file so yep now you can see your hello student output perfect so here is your data guys so now guys let's uh create the model and the data part okay so let's begin with creating container row column md12 done and card card header export tag where student crud with bootstrap model okay and here you know with card body where you will fetch your table data okay so table data will just keep here before that model we have to pop up the model right so for that case guys you will go to the getbootstrap.com and search for the model so let's search for the model and here you see a demo launch model perfect so let's copy this model copy and paste so where are we going to paste let's create a separate file guys so over here inside the livewire folder only i'll create a student model okay dal okay so now let's get back to our livewire student and here we are going to include that so at include function where live wire at student model done so now that model is included in this yep guys and now let's get back at the model and here is a button so let's copy this button paste here and you can just tell new student okay and this will be a student model so let's tell student model and then you go to your model page here and update your student model all done now guys you can change this create student save it and now let's check the output yep refresh cool and if you click your model comes perfect so now guys uh let me just move that to the left float and done yep and now guys let's get back to our model and start creating the form to insert the data so form begin okay so you can keep the form at the top of your model body and end of the footer margin bottom three label which will be a student name and then your input field so input dot form hyphen control let's create all our requirements over here first so student email and next is our course done yep guys and now let's make this save button and this button will be submit so here we come with the action so at this action you are not going to use the action we will we will see with wire colon submit dot prevent save student all done and now let's uh call the model over here so wire colon model so which will send you the data so this is the name and let's copy and paste for the email and for the course so here you add email then coming to course done and now guys when you submit this you're going back to your student model i mean student life component so first step we have to create all the inputs so what is your inputs is nothing but the wire okay so livewire model this name email and course let's create that public dollar first is name then second is email and then your course let's create one function function which will be save student okay so what we have created on that save student on the form submit you are calling that function and then you send your code over here to save the record so before this we need to check the validation so guys for that uh let's go to a live wire okay so here you see the validation let's click on it so guys we see here there are many type of validation like real-time validation validating with the rules and here custom error validation so let's now let us check with the real time validation over here real time validation which tells directly you have to copy this and let's get back and just paste above your save function okay so this is nothing but your fields so this is the fie lds fields okay so those are input fields so now guys uh before checking this fields we need to validate right i mean we have to give the rules so for that you have to get back and you can just copy any of the rules let's copy this and get back and create paste here done so we are getting the name and it should be minimum of six here is email and we don't require done next one was course so you can add that course and it's required and it's a string okay all set if you require you can add the string for here also all done and now guys once you validate this validate only so what where it will show the errors so for that you have to go to your model and paste under this the error type so how can you paste that let me just show you under the form you can see this the type of code shown over here let's copy this and paste so it's coming under name and then your email and finally one course all set save it and now guys let's check out so here we come and if you directly type anything okay it just exited the model once we typed so guys now we need to add a wire nor dot self okay all done let's refresh once and now if we check yep so you can see here guys this email id must be a valid email address okay so it's not looking that good so what we can do is that let's get back and instead of error add text danger save refresh so here we come back and directly if we do emadi email address so let's give like correct with at gmail.com correct email address so now it's coming fine okay so same process guys we are going to integrate so now yep let's get back to the model and once your validation is done then you are going to take the validated data so let's tell validated is equal to your dollar this of valley dated function okay so you don't need to worry about what data it is getting it's just getting all your rules data okay so now yep let me show you one thing let's get back now so let's get back guys and here uh i think this is getting miss so for that you need to get back to your laravel livewire and let's see under any form save okay oops it's validate not validated so let's keep validate and it's validated data okay so anything you can just keep any variable here let's get back and now let's try to refresh and that submit yep let's click and save here you see name field is required email and course perfect so now guys let's try to save so once you save that you need to create the data so let's call the student model student colon colon where i'm going to create where i will take dollar validated data okay so let's take this so we'll copy and paste here once saved now what we have to do once saved we have to empty all these fields and close the model so for that case guys you are going to empty the fields uh let's create one function called reset input function where we'll tell reset input and the reset input is going to be like dollar this of name is equal to null okay so same concept goes for your course and for the email too once it is saved you can call this function dollar this of a reset input so you are going to empty the input so before resetting this input we need to send the message right so let's use the flash that is session flash so session flash message where i will add a message and the message content like a student added successfully all done and once this is session is stored you have to reset the input and now let's close the bootstrap model so for that guys you need to go to your live wire and let's move at the events here you go to your events and search for the dispatch so dispatch browser event okay let's copy this yep and let's move here we paste we are not going to send any value we are just telling that close model so we'll tell close hyphen model done so when you dispatch this event to your browser add your student add it in your blade file so add this index where you have extended it let's get that add here users script script script and you need to add in your app layout okay so just paste here after your live wire or before the live are not an issue so now guys you are coming back to your index and here is your script code so let's copy this code and paste that so once this even comes of close model okay which model the student component right inside your student component get this dispatch browser event in your blade file okay normal blade file and if you require even keep it or else just ignore it and here we are going to close the model we don't require this let's use dollar and model dl its model and here you tell hide and what is the model id so my model ide is let's get to the model here you find student model let's copy that and paste here so my student model comes and now you can test to the part so once it is saved uh we did not show the message okay so let's get back on the livewire blade and after this i just required the if condition where session function has any data so let's use a message and if we obviously will have once we add the record and we are going to show in a h5 tag with the class alert alert success with the message as session function where you will tell message okay so this message you are sending from your student component over here all set and make sure you import your class guys import class it's my student model i have imported it okay so now let's get back here we refresh oops uh it's already used so it's getting clashed over here from my student model to the component of liver student okay so what we can do is that guys let me rename this file as student of show okay let's copy this hit enter and you can paste that student show so after this what we have to do we need to go below and at this render function we will add a hyphen show and you need to change the livewire component blade okay so let's go to resource views livewire and this is your student blade and instead of student blade you are going to add student show blade okay so let's see and now guys let me refresh perfect so we are getting the output guys and now let me add we are done let's add one student name called wait prakash with gmail.com here we enter the course called bca or mca let's save student and here you okay student added successfully behind you can see the message but the model did not close okay let's check that but uh let me check the database is the record inserted or not perfect so data is inserted guys and now we need to check the model why it's not insert i mean closing it let's get back let's come back dispatch browser event close model it's d a l d a l model find and where's the index it's model okay once let's and we need to add one jquery cdn link so make sure you are adding that to run the dollar symbols okay so which means this dollars okay so that's the jquery part so i've just messed out jquery cdn link okay let's copy it and paste that in your blade here i don't require this save and now guys let's try to save once again okay so here we say that on prakash and omar gmail.com so bca save perfect so student added successfully and model has been closed okay so why did not close we did not add the jquery cdn link and here i have just messed with up and down so the mess was with only the jquery cdn link why because we were adding this dollar symbol right so this dollar symbol works on the jquery not on without jquery okay so yep guys and so guys now how to fetch the data using live wire in our bleed component file okay so right now let's get started so yep let's move to our editor and let me close all the files so first step guys we need to move to our live wire that is model okay liver component and at the render function we see a file and which we have linked from the previous video so now guys let's continue so first step we will move to our component component of so student so here we are going to create dollar this of your students is equal to your model student colon colon all function to get the data okay and we will pass that dollar students okay so this students will be created as a public public dollar student okay students perfect so now it will be sent to that students and then you are storing here and you will get the output in your blade file so now guys in the output let's create a table so here we table bordered and table striped so now guys let's add with table head and table row where table heading th with id name email and one course and one we required for actions perfect so now guys are coming to the tea body where we are going to use the for else to loop the data so what data you are going to get is nothing but the students so this is our data students not we have to send this students okay let's get back and here student comes and your students student data so now let's table row align table row table data with you're going to echo your dollar student of id copy and paste coming to name email course set so now guys you are going to add a table row if there is no record you are going to show no record found so you will be adding call span where column of four plus one five five done and now guys let's see the output so here you refresh perfect so we have got this but uh the table design is missing let's see what happens okay it's not table it's table body tbody body done so make sure your autocorrect now refresh perfect we are missing with one dd which is for edit and update so let me add it that primary and in one is for delete danger so right now we'll keep it null refresh cool so looks fine guys and this is how we display our data so now let me add one more record like um alexa and alex gmail.com where course is omca let's save here you see student added successfully and it's automatically added here so now guys if you want to show up and down wise you can just use the order by let's instead of remove that all and tell order by id that will be descending order the esc either capital or small and after this user get function all done so yep if you refresh here you see from top to bottom good so now you can add one more record a month copy and paste so here we add the email and some codes and save so here you find that data added successfully so now guys uh let us add the pagination in this so yep let's get back and here instead of get let's add pagey nate off um let us keep 33 pagination okay so at once we cannot get so what happens you if you add this directly paginate it will give an error over here if you refresh so before that we need to use with page innate okay so let's get back to our laravel live wire and here you find the page innate pagination okay so you find this use livewire page in it let's paste here all done and then call this use this paginate perfect so once done now if you get back here you refresh you see your paginated data oops it's showing livewire components public show property student okay so you cannot send this directly to your dollar this with the paginated okay so what you have to do you have to just remove this dollar this and just send the student data at what you have to create one variable inside that you are going to pass okay so that is nothing but your students so just create the students and dollar this of students just remove that we don't require any more so let's comment and keep for the reference okay so yep guys and now if you get back let's refresh so we have got the three records but its pagination is not shown so what we have to do we have to go to our and before this table after the table close i am going to create one div open and close curly brace get the dollar students so what students is this nothing but your looped data okay so your students of links function that's it so let's see and here you refresh and you get the page nation all done so let's go to next and here you find that too let's move on but this is not looking good guys so we need to use the bootstrap page in it let's go to the livewire and let's check out required okay bootstrap 3 copy this and get back to your component model at the top let's add that so now if you refresh you find that pagination design cool so yep so now guys so we have successfully done with our pagination so now guys we are going to learn about how to edit and update the data using live wire okay so once we click on this edit a pop-up model should come something like this and with the data and then we will be updating the record okay so guys now let's get started to build this so yep let's move to our form here liver component bleed form so we are on the model livewire and here is our render function and this is our perfect so we have created a separate file to keep our bootstrap model that is student model let's go to that model and let me copy the same file i mean code copy it and let's paste below so let me out and here this will be the update student model and let's change this id name to update student model perfect so we are going to change this model and here you tell edit student all done and this form name we are going to tell update student okay all done and now all the input fields are going to be same with the email course and the button name will changes to update once we submit the data it goes to this so before updating your data what we have to do we have to pop up this model right i mean when you click this button edit button it should pop up the model first then we are going to update it so let's go at this edit button and begin with the process so guys for that let's go to our for each loop at the table and here is our edit button so you can make this as a button type button we don't require a tag so let's make it button itself and here we will be adding a wire colon click ok is equal to where you are going to tell edit student function and inside this function you will be pasting your student id so let's send that student id perfect so here you find the student id so now guys let's copy this function name and go to the wire click so wire click means it goes to your student component of livewire so nowadays you can create a function with the name edit student and inside this you are going to get the id so what is that id its student underscore id and its type of integer okay and here when you come let's find the students not student is a single record so let's keep a student and here is student model colon colon find function so where you are going to send the student id from this top you are sending the id and from this you will take the student id data okay you have to check it is correct or not okay so and it doesn't found so you can just check it in if condition either you redirect or just add a 404 or okay so yep if it is success means you are going to send this in a like dollar this of student underscore id okay so we need to create a variable with dollar this so dollar this is i have to just add after this okay dollar student id so student id is added and now missing with the semicolon let's add the semicolon done and if you just want to so how to redirect yourself over when id is not found you can just go back to your pagination i mean live wire and you find that redirecting over here okay so return and redirect to add this just redirect back to students so now guys uh when you click that i mean when you click this edit button you need to pop up the model so for that case guys uh we can directly use in the button itself so let me just tell you over here let's add a data let's copy from the top copy and paste so here is my update student model so copy and search for in your model here you find update student model id copy this update student model id and paste that over here all set so guys back to your edit function so once you find this data right so you are going to call all the input fields so what input fields is nothing but name email course okay so name which from the student name you will get that and then email and from your backend database email and then coming to your course and here you get your course in the input fields so you are saving all the data in your all the input fields save and now as you can just get back and let's test refresh so let's click on id number five edit perfect so the data has come guys now let's close and let's go to pagination 2 and let's check with the with request details so when you click on this here you get the data okay so before this when we close this we need to set this to null okay so what we have to do guys for that let's create one public function where we will tell close model so when we close the model we just reset all the input fields that's it so you can use this wherever we are using our close button i mean to settle this one okay so add this into our close button if we are using it any model we can just paste that so this is my close button and here i place with wire coolant click is equal to the space states yep and here is my model close model and coming to your model case also close that done yep and now let's refresh and check once again guys so okay so data has come let's close this and now if you edit here it's empty perfect so yep guys and now let's try to update this record okay so i'm going to update with id number five which is hemanth let's edit so here we get data and once we click on update what happens let's check that in the code so let's copy this update function on fob submit and go back to your component let's search for the update student okay we don't have so guys let's uh create the function and create a update student function name let's leave it empty and here we are going to update the student so let's create our student so let's use a where condition over here and with the update function okay so once you use the where condition of id and here you send your dollar this of the student id so where is the student id let's copy it need to copy at the update function student id and then you are going to update the records so what records it's a name and that comes from your dollar this of name when you edit you are storing the data into this dollar this of name right so that data only we will get and update it so we cannot directly update that but we need to validate it so before that you just need to take the validated data let's get the validated data and from this validated data you are going to update the records so for the validated data you are going to call in this method okay and coming to email and this is your column field email and next is your course so course set that's it so now guys you can once it's updated you let's show the message and reset all the input fields and close the model save here so let me update the status as updated successfully and reset the input and close the model guys so make sure you are when you're closing the update model okay let's get back to our model and this is our model id and from where this model is called okay it's called from the student index okay so this is our student at this bottom only we have to call it okay so let's copy this and on the event listener we are going to hide this model okay when close model comes we have to hide the update student model also done and where is our student component all set guys and now let's try to update the data here we come once refresh guys before making any changes let's update and instead of payment let me add to kumar here we update the name mohan gmail.com and let's update the data so it's totally different data guys here you see student updated successfully and you see the record has been updated okay so all the data is changed so guys so we have successfully done with our edit and update the data in laravel livewire cloud application using bootstrap model so guys as we have seen that how to add and how to edit and now guys we are going to see how to delete the data using livewire okay so guys now let's get started so let's move to this table view at the live our blade file so here is our livewire show student and here is my delete button so now guys once i click this button i need a pop-up model so let us copy the code for popping the model and here let's tell delete student model okay so you need to create one model so we have extended the file i mean included the file and in that we are keeping the model okay so as we have kept the let's copy and here i paste the model let's copy this student id i mean model id here i replace done and let's tell delete student and we have to submit the data okay so what submit data you are going to do you will tell delete student okay so yep and we don't require any of this input records let's remove that instead we will add h4 tags are you sure you want to delete this data question mark okay and tell your yes delete okay all done so once you submit you're going to student delete and delete the record so before that we need to pop up the model right so what what model this delete model so let's get back to our blade livewire blade add this delete model okay so with this when you click on this delete we have to take the id also okay so like when you click on this delete button a pop-up model should be sent with the id so guys for that we have to check out with our wire okay live wire thing so before that let's create this input type of button paste here and instead of a tag let's use a button perfect yep and now you can create a wire colon click is equal to delete student where curly bracket and here you are going to send your student id data so let's send that all done and now you let's copy this and go to our model component let us create a function with named delete student where we are getting the integer type id and that is nothing but your student id okay so student id perfect so now guys you are going to send this id download this of student id is equal to your student id you will send in that and then you are going to destroy the data okay so before the let's get back to our model so once you click on this yes delete you are going to delete student so we have already created a delete student function instead we will tell destroy destroy student so let's copy this function name and get back so yep and now you can create another function function with destroy student let's remove this and here our code comes for deleting the record so let's create one variable called student is equal to where a model student colon colon find function your finding and then you are going to delete that record as simple so what data you're going to find dollar this of student id so this student underscore id is coming from your the variable we have already declared okay so when you select that student delete it sends to that and from this student id we are calling that student id and then deleting it so once deleted we have to what to do uh we need to send a message and the dispatch code too let's copy this and paste here we don't have any input let's remove that instead and here is a closed model okay student deleted successfully perfect so now guys uh when you close this model it goes goes to your index blade okay so here you copy and paste and get back to your model copy your model id and paste that that's it so once you done with that you are going to close that model yep so now guys let's uh test it let's refresh and now let's delete the fourth record alexa yes sure delete and let's see what happens student deleted successfully and that data has gone guys perfect so so guys we have done with our confirm and delete option in laravel live wire using bootstrap model okay so guys how to make a search box okay so as we search that record should be filtered with the pagination okay so if any record exists more than 10 it should be paginated also according to that filter so guys now let's get started so yep let's move back to our model so component model here and here we render it right so we render and we are showing the data in the for each loop yep so now guys uh let's get back to our model at this page only we are going to add a where condition so to use how to use that let me show you code over here so inside your laravel livewire.com there is a pagination option so inside that pagination you can see reset pagination okay so this one let's go to that and here you see the code let's copy this and get back so let me add it at the top of the page okay so here we add search option by default it's null and this search only will be using in our model now at the render function yep let's get back and here is a updating search so we will be seeing what happens for this so before that let's set up this in our model so you can copy this where condition just copy that and get back here and let's paste it so after where order by done guys and now let's get back to our model i mean blade file of laravel live wire and at this button only i want to create a input field so let's add the search and let's give a wire model model is equal to where you'll tell search so this search term will go in your model show okay at the beginning so in this search it will come and that search we are filtering over here and searching the data so on what thing we have to search we'll search with the name okay so inside my student model i have created a column name and that name only we are going to search so now let's let's see and let's check it once again yep now let's see the output once refresh here you get your input field okay it's like too lengthy so you can just add one let's make it to 230 pixel or yeah 230 is fine and let me just add a float and let's give him mx 2 and oops i have missed that guys so please don't miss this over here model wire model okay or else the code will not work properly done guys so this is a step one and step two we have assigned the condition and this step three with the search okay which we have declared it so these three things are very mandatory for this search option let's get back refresh perfect so we have got here uh let me add a placeholder so we can see something over there okay let's add placeholder um search dot dot save it and now refresh looking cool and now guys let me search for the simply r2 record a here we find everything again a no record found let me find oem ohm so you find on prakash here mo you can find two records one record let's find for the m only so you find that m is over here and m is oh yeah perfect so let me make it empty no record and now if you directly clear this here you get your output so guys we have successfully built with our search option in our laravel livewirecrud application so guys if you want to know about this page edition please watch out the part two which is fetch the data with the pagination okay link given in the description so guys in this video that's it thank you for watching this video guys please subscribe like and share

Channel: Funda Coder

Views: 8,805

Keywords: fundaofwebit, funda coder, Livewire CRUD using Bootstrap Modal with Pagination and Search box, livewire crud tutorial, laravel 9 livewire crud tutorial with bootstrap modal, livewire crud using bootstrap modal, livewire tutorial with modal using bootstrap, insert data using modal in livewire, pop up box insert data in livewiire, livewire data insert, livewire bootstrap modal, livewire bootstrap, laravel 8 livewire bootstrap, pop up modal in livewire laravel

Id: HtoUB1rNV6w

Length: 59min 15sec (3555 seconds)

Published: Mon Apr 04 2022