Laravel 8 Tutorial - Livewire CRUD

hi everyone welcome back to the laravel in tutorial in this video we are going to learn about live wire crud so let's see how can we perform crud operation in libov so first of all let's create a new model so switch to the command prompt and creating the model just type here the command php artisan make colon model space model name let's say model image is student and also create the migration so just write here dash name now switch to the project and just go inside the database directory then migration and from here just open create a student table migration okay inside this migration let's create some columns so for that just write here dollar table and data type let's say string and column name that's the column name is first name all right now just copy this and paste here three time now change the column last name and email the phone number phone all right now save this file and now just copy this table name and just go inside the student model so just click on add models student and here let's add the table name so just write here protected dollar table is equal to student and also add here the label so just type your protected dollar file and just create an array inside this array let's write here column name okay so first name another column which is last name email and last one is phone all right now save this file and let's migrate this migration right so switch to the command prompt and type here the command php artisan migrate open center all right migration complete now let's see the table so just go to the php my admin and from here just open the database which is livewiredb now you can see here the students table so just click on browse all right now let's insert some dummy record so for that let's create a factory so just right here php artisan make colon factory space factory name let's say factory name is student all right now press enter factory created now search to the project and just open the factory student factory so just go inside the database factories and just open up factory inside this return array just right here first name narrow down this and just call here first name all right and now just copy this and just here last name last name and here email id so let's write your email and email and phone and here phone number all right now save this file and just go inside the seaters just open database theater and inside this [Music] just copy this line and paste here now change the model student and let's create 10 records so just write here in all right now save this file now let's run this header so just inside the command prompt just type here php artisan db colon seed and now press enter database sitting completed just refresh the table here you can see that can record all right now let's create a livewire component okay so this to the command prompt and creating the live work component just type php artisan make colon live wire space component name let's say component image is students now press enter component created now since the project and just go inside the student component class file so just click on app http livewire and just open the student.php file and inside this component file uh let's page these all records all right so for that just write here inside surrender method dollar students is equal to model name student and also add here this 20 model path model path all right like this and now just write here column colon order by and added the column name that's id and i'm just going to retrieve the record in descending order so let's type here ea ssc and now just call the question right now inside this view just pass here this student so second parameter just array now go to the students component view file so just click on resources directory then use livewire and just open students.get.php file right inside this file let's create a table for displaying the records all right i have already created the layout file now you can see here inside the layouts folder this is the app.php file all right and i have already added the bootstrap cdn okay and also the livewell styles slot and liver escape all right now inside this restaurant.php file uh first of all add the section so just write your section and container row and now just add the card card and inside this header just right here state tag and inside this body card body let's add the table so let's write here table class is equal table and enable dash trip inside the tr here all right now add the body and inside this uh just add the forage directive and create for each dollar the students as dollar student and inside this for it just add here the tr tag then td now let's copy this and paste here also here and here i'll choose the column last name and here email id email and your phone all right now let's create the route for this students component so just go inside the routes directory so just click on routes and just open wave.php and inside this let's create the route just right here route it and add the uri let's see what is students and then component class name which is the students students all right and also add here the path of the component print complete class file all right and now colon column class now save this file all right now let's check this so couple run the application just right here php artisan sir now switch to the browser and just go to the url local list 3000 plus students and here you can see the records what is the column length which students blade and all right just add here the column so just [Music] from here to here let's cut this and add here the column empty 12 and now just paste here now save this file and refresh the page all right looking good now let's create a internet view file for creating the new estimate okay so inside this uh library directory uh resources views and library directory let's create a new file component view file uh and filename is create dot dot php all right and inside this file let's add here the boot stripe model so for that just go to the gatebooktuberstrap.com and now just click on get started and inside this search box just search here model now just click on this link and from here just copy this model okay so just click on this link and just go inside this create.php file and here just paste here all right now just uh here the title title is solid id it is add student and student model all right now just copy this id and paste here all right now just to remove this just cut this button from here and uh just go inside the students dot hp file and inside this card header just paste here all right now change the text here add new student add new student all right id name is model okay now save this file and now inside this students.php file uh let's include this create uh complete view file so for that just right here after this tip and then include and inside this just add here the livewire dot view name which is create so let's try to create all right now save this file now let's check this model so let's go to the browser and just refresh the page and here you can see the button inside this card header just click this button and paste inside this h3 tag all right now save this file and refresh the page all right now just click on this add new student and here you can see the model all right now inside this model let's add the form some input field for the first name last name and phone number okay so let's go inside this view file and first of all change the title here so just right here and new student and inside this body let's create the form so just right here form and inside this form add the input text field for the first name so just type here form group and then label for first name and add here the text first name then input type is equal to text and name first name also add the class class form best control all right and now just copy this and paste here three time now change here the name just add here the last name and also change here last name email and here i mean and just add another phone and here also phone all right and now after this just add here the subject [Music] i have already already this add this button so there is no need to put submit button now let's check this so just save this file and replace the page and just click on add new student all right okay now here just change the text add student all right now just go inside the student's component class file and let's create the property so for that just type here public property name first name and now just copy this and here last name email and phone all right now let's bind this property with the input input field so for that just write here wire column model and the idea of the property name which is first name now just copy this and just insert this last name and email number now change the text last name email and here phone number phone all right now is set this students.php file uh let's create a function first function for the reset all the input field so just write here public function and function in reset input fields and inside this just reset all the field so right here this arrow first name and just put here the blank all right now just copy this and paste here this is the last name and here email and now okay now let's create the function for storing the record so we'll just write here public function function name store and inside this uh first validate the record so just right here validate validated data is equal to this validate inside this just pass here the field name okay so just filled his first name and just idea the validation required now just copy this and here last name required email and just add here email for the phone required all right and after this validation just add here the model name student all right then column column call the create function and inside this create just pass this this one all right and after the this just add here station and inside this session is called the flash and here add the key message and now just add here the message the student created successfully okay and after this just call this the reset input fields function so for that just right here dollar test arrow to reset this one paste here all right and also hide the model after the adding the student so for that just right here dollar yes and generate for events i'll just write here a student added all right and now just to go inside the layout file we just open app.php from the layouts folder i have documented php file and after this just add here the step tag now inside this just right here window dot on and just add here paste here this student added and in this callback function just hide here the model will add here the model id with this this one add a student order so just copy this and add here the hash sign and paste here and now model and inside this just called the idea the height right it will hide the model now save this file and now let's let's bind this store function inside this model so on the button click in this button just add here wire colon click dot prevent equal to function name which is stored all right now save this file and one more thing just inside the students.great.php file let's display the message after this adding the student so inside this just add here okay this thing alert success and inside this just print the message just write your dollar message and now just close this so just right here all right now save this file all done so let's check this so switch to the comma browser and just replace the page all right now just click on add new student and here let's add first name all right here model is hiding so for that set the create.get.php file just right here inside this listing required colon ignore dot self all right now save this file and let's check again so just refresh the page now just click on add new student now just enter the first name let's say smith all right now it's not hiding now just enter uh add here the last name let's make john main id this is on sale.com phone number like this all right now let's click on add student undefined variable message all right let's check so to the project just inside this students.blade.php file alright i am doing a mistake here uh let's write your session okay and inside this session just call this message all right just pulsate the message session message okay now save this file and now let's check so just refresh the page and you can see how the record already added all right now let's add a new uh try one more time so just click on add new student and here is on and twitter.cml.com now add the phone number now click on add student all right record added but models are not closing okay so for that let's check this inside this app.php file all right here is the mistake window.livewire all right and then just write here dot on window dot livewear.com okay now save this file and now let's check again so just refresh the page and now just click on add new student and here first name is on an email id mark and there it is this one okay now just click on add student and here you can see the record edit and here the message all right now let's see the update operation so for that inside this live wire uh let's create a new component to be file so let's create a new file and the file name let's find file image update dot hp and inside this file uh just copy from all text inside the create.php file all right so now just copy this copy all the text and let's paste inside this dot dot php file and inside this file let's make some changes so let's right here edit student and just add here the one with an input field for the id so just write it in type is equal to text sorry type is equal to hidden and name is equal to id and inside this [Music] just add here wire column model and and here the property name that's the property name is ids and now let's create this property inside the students.php file so just right here download it here here click all that ids okay and inside this substance component class file let's create another function for updating the record so let's create the function for edit so just right here public function and function name let's edit and inside this just pass here one parameter which is id and inside this just right here you call that student is equal to model name student column column where id is equal to dollar id all right and just call here the first function and now just write here dollar this ids is equal to dollar student hello id all right now just copy this and paste here 14 and now just edit the first name and also here first name and here last name email then phone number okay now let's create another function for updating so just write here public function and function name update and inside this first validate so just right here let's download this validate and inside this just copy each text and paste here all right now just right here if you follow this arrow ids then update so just right here that is equal to a student column caller find dollar this arrow ids okay and after this just head here and follow the student arrow call the update function and inside this update just pass here the array and inside this you just write here first name header shine like this arrow first name now just copy this and add here the last name email and here phone all right and after this let's call the session and flash and successfully all right and now reset all all the fit so just call here down like this and reach it you could fill this function all right and also hide the model so just try to download this and inside this just right here a student update okay now just copy this and just go inside the layout file app.php file and here just copy this and paste here now just copy and paste here right just add here the model id so set this update.later.php file first of all change the id here so just right here update student model okay now just copy this and and here just paste here okay now save this file now just call this edit and application inside this students.php file let's add here a heading th and inside this is right here action and here let's create a link for edit so just write your button class type is equal to button and class let's say classes begin vtn info and inside this just add here a text edit all right and on clicking this button uh just to show here the model so for that you just write here data that's model data dash toggle all right just add here the model copy and paste here and also call this function edit function so for that just right here wire colon click dot prevent is equal to function name which is and inside this edit just pass here the id this is right here double curly bracket dollar student arrow id okay now save this file and set this update dot play dot php file this model uh just call here can you have the text update student and now save this file and now one more thing just uh display here the error message okay i'll just error message so for that i'll just write here dollar header and inside this just added the column name first name and inside this just write your span and class is equal to text condenser all right and then set this just print here that message dollar message and now just close this error directly so just write here and error now just copy this and list for the last name email and phone number okay and just copy this text and also paste inside the gate model okay for the last name email and phone number okay let's add here the last name email and here boom right now save this file all done let's check the switch to the browser and just refresh the page and here you can see the edit link so let's click this edit all right model is not showing because i am not i'm not headed here it's at this student.php file i'm not added here the update view file okay so first of all just add here create include inside this idea livewire dot update okay now save this file and just refresh the page now click on edit and you can see here the edit model and the first name last name email id and remember okay if i click on this record you can see here okay now change the name now let's say submit two zone two and now click on update student and here you can see the record updated okay and you can see here the update message try one more record so just click on edit and if i remove all the text from the phone number now just click on computer student and here you can see the validation leader okay so validation also working now just add here the phone number and click on update us today record updated okay now let's see the delete operation so for that uh inside this trends component class file uh let's create a function for deleting the record for that just write your public function and function name let's say delete and just add this just pass in an argument id and here just write down that just enter the column name id and dollar id and just call here the delete function for deleting the record okay and that station has it successfully all right now save this file and just go inside the student's component view file and inside this table after this edit button let's create one more button for delete record so just write here return type is equal to button and plus all right and here just call the delete function this function so for that just right here wire calling click drop event is equal to just call this function now this delete function so just right here delete and then set this and just pass here the student id so instead of double curly bracket just write here a student arrow id all right now save this file and let's check this so switch to the browser and refresh the page and here you can see the delete button and okay now just click on this button deleting this record so you just click and you can see it deleted okay and delete one more record and let's say this record just click click on this record record delete it okay so in this way you can perform cloud operation in live web so that's all about live workload 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: 28,559

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, intro to laravel 8, laravel tutorial, laravel 8.0 tutorial for beginners, laravel for beginners, laravel tutorial for beginners, laravel8, livewire crud in laravel 8, livewire crud, crud in livewire, livewire, livewire in laravel 8, livewire 2, livewire 2 crud

Id: nnK1PdtAX_M

Length: 46min 34sec (2794 seconds)

Published: Fri Oct 09 2020