ADD, EDIT, DELETE, LIST using Livewire | Livewire CRUD Operation with Laravel 8 | Learning Points

hi friends welcome back to livewire tutorial with laravel 8. in this video we will going to create a crude application using library so let's start so let's create a component first so we'll create a component and we will get the component view file and we'll create a form inside the component view file okay so if you go to the terminal and just close the server now so create a component so to create a component where to use php artisan make livewear basically library is the syntax to create a library component and after that the name of the component suppose my component name is froms so if you create a component we'll get two files one is class file and one is view file and now if you go to the project directory inside the app http live will get the froms.php so basically this is the class file of the component and just go to the resource and inside the resource views we have the library folder inside the liver folder we will get the forms dot blade dot php so this is the blade file of the forms component now here we will create a forms so here i am creating a very simple forms that is using the from tag and close the from and here we will write the input field that is input and type equal to text okay and just use the beer to see it in new line and write here suppose name okay so add this video also so it will print new line and copy the same things and here write the email okay so we'll add these two things for now and step by step we'll get all those fails and we will use all those fields so first we need to create a from and we will add this form data inside the database okay and we need to create a submit button so right here button and close the button and here the label is save and the type of the button is submit okay so when you click on this button basically it will submit the page and if we go to the class file we can see a default function that is the render function and inside the render function we'll get the return view live word dot forms basically this forms is calling through the render function and we don't need to call this render function separately so when we will call the component will automatically get the access of this render function and we can view the blades file of this component okay and here to call the class file we need to call this class from the route so our route says inside the routes folder we have web.php okay and now we need to register the trades into the routes so use app http libre and after that the class name that is froms okay and we need to create a link so here we will create a link that is route get and suppose my link is also from you can add your own links no probably on that and then the class name sorry the class name means forms and colon colon after that the class okay so now if we go to this link we will get the access of this view file so first go to this link and before that we need to start the server so right here php artisan serp okay so starting laravel development server so now go to the this link so here write forms so here we can see a simple from that is name email and a save button so basically this form is coming now we need to submit the from so when you click on this save button basically it will call a methods so the method will be inside the components file so just go to the component so here suppose i am creating a method that is public function suppose the method name is submit okay and let's call this submit button from the action so how we can do this very simple just use the where and colon submit so basically it will call the submit and after that the name of the method that is submit okay so now if we click on this method so just to refresh this and click on save so basically it is refreshing the page but here why we will refresh the page we can save the data without refreshing the page but to prevent the submission we want to use the prevent so here write dot prevent so basically when you click on this save button now it will not refresh basically it will submit through the ajax so now create two property for name and email and let's use inside the blades so just go to the class and create two properties suppose public dollar name and another is public dollar email so basically this is two property and we to bind this property from this view so just write here the where colon model so here for name we will use the name and just copy this and paste it here for email and change the name name to email okay so now go to the browser and refresh this page again and click on save so we cannot understand whether the data is coming or not or we don't need to submit this data without validating this page so if we check our network section so just go to the network and just delete all these things and if we click on this save button we can see a request is calling that is the library message from so click another so basically it is a request calling so basically the summit is calling using the ajax so here we'll add the validation so that we cannot submit a forms without filling the value so very simple just like laravel here we can use also the validator so just go to the class and here just write the suppose i am taking a variable that is validate data so you can take your own variable and here we'll call the validator method okay so right here this validator okay basically using this validator method we will validate our input request data okay so here we will create a rule for this validator method so here write protected and rules okay and here i am creating array so that we can validate multiple at a single time so here write name and here for name i am creating a rule that is the name should be required and i am creating another rule the minimum length of name is 3 and maximum rule is 10 so this is your choice you can add 20 here also and if you don't add this minimum or maximum it will not validate the length of your input data but it will be required if you just use simple required okay and for email just write email and also the email is required so here right require and here i am adding the another validation that is email that means the email will always be validate email means proper formatted email data so that's it to validate so now again go to the browser and refresh and click on save sorry the method name will be the validate and wrongly i am using the validator okay so just go to the browser and refresh this so click on the save so basically this is not submitting so now we need to show the validation message properties so here we want the names should be required or email should be required or email should be proper email formatted so how we can do this so just go to the blade file and here just write suppose i am printing the valuation message after the name so here right error and the error is the name so if the error in name then we will see the validation message so right here end error okay and inside this block we will add suppose i am creating a span to display more better and inside this pen i am adding the message okay so just like laravel dollar message okay and i want to see the validation message into the red so right here style and right color red so very simple okay and copy the same things and paste it under the email and change the name to email okay so validation message edit so now refresh this and click on save so the name field is required and email field is required okay so here i need a beer tag to display more better okay so this is the validation message so just refresh the and now if you add a name that is a b and click on save so the name must be at least three characters so just write here john okay so here the name message is not showing and it's still showing the email field is required so right here any things and click on save the email must be a valid email address okay so right here john at the rate gmail dot com so click on save so now the validation message it's not showing okay so here also right appear so that the email will be always in new line so if i want to save this data into database how we can catch these name data or email data inside the class file so very simple so here when we click on the save function basically inside this function will get all data and we are saving this data into the validate data okay so before saving data into the database first we need to connect the database with my project so just go to the env file so here is my env file and this is the database name suppose here i am writing the live tutorial so this is my database name and my username is root that is ok and my password is also root okay so now go to the php my admin so localhost phpmyadmin and login here so write login and this is my database and click on the database and create new okay and we need to create some tables so why we create table manually we have a migration we have a laravel features so we will use these features so now create a model for these forms so just go to the terminal and i'm temporary stopping the server and i'm creating a model so to create a model we need to use php artisan make colon model so here my model name is register okay and i am creating the migration along with this so write minus m so here model created successfully and a migration also created okay so where we will see this migration file so just go to the database and inside the database we have migration files and we have the register migration okay so just add this to table that is name and email so basically this is responsible for id that will be automatically incremented and this is the timestamp so when we migrate our table basically it is responsible for two columns that is created and updated it and now i am going to create two extra columns for name and email so just write here table and first string so basically the name is small amount of character so right here name and for email also i am taking the string okay so for large we can use the text also so we have lots of things we will discuss in later and you can see my laravel 8 tutorial from my playlist okay so now the column added into the migration file so let's migrate this file to add this table into the database so write php artisan migrate so it's marketing so now if we go to the database and we can see there are some tables so basically the user password resets migration fail jobs this is a default table so first i am migrating there's a reason the along with the registers all uh tables are marketed so here my table is registers okay so i am creating this so name email created and updated it okay so i already told it why created that and updated it so now we need to add some data using these forms so how we can do this so very simple so just call this model from the component so just write here the models namespace so here if we go to the models so we'll get the register model so write app models inside the class of component so use app models and name of the model is register okay so let's add the table name inside the model so here write protected table and right here the model name that is registers sorry this is the table name registers okay and add the fillable here also so right here protected dollar free level equal to here i'm adding two columns that is name and email okay so that's all about um register model so now we need to save this so to save this we need to just call this model that is the register model and here write register and call the create method okay so using the create method we will create data into the database and pass the variable that is validated data where all the information are there okay [Music] so now go to the browser and click replace sorry i'm going to start the server php artisan sir okay so now refresh this page so here i am writing the name that is john clark okay and email john at the red gmail.com so if you click on the save it will save into the database so click on save so if you go to the database we can see the one record inserted into successfully but here will not get any message for saving that is i want to display message after save so how we can do this and just use a flash message on the top of the forms and we can see the notification that my from is saved successfully so just go to the editor and here we will use the flash message so basically this is the session class message so right here session function and here write the flash so we have the two parameter for flash so first we will add the session name suppose here i am writing the session name is success and the text is from is submitted okay so that's cool so now if we print this success message from the blade we can see the notification okay so here just write the condition to display the success message so here right if session sorry spelling mistake session has the variable that is this success so just paste it here and i'm using the end if okay so if session has the success so we will print the session so how we can print this so here i will create a span so we can add the div also so i am adding the div and inside the div we will just print the session so basically right here session success okay and i want to display the success message into the green so same like previous we have right the color is green okay so now go to the browser again and refresh this so suppose here i'm writing the david greek so basically this is a valid name and email is debi at the red gmail.com so if you click on the save will get the form is submitted so basically this is a flash message and if you check our database we can see the another data inserted into my database okay so if we just replace this will not get this message so now i want to see all the data which you have inserted into this database so how we can do this so we need to write a select query so if we go to the project directory inside the class file we have a model that is a register and now we will create another property where we will store all the database records so here right public and suppose i am writing a property name that is all data okay and this will be the array type because all the database result will save into this okay and we need to call the model that is the register model so just go to the render method and write this and the variable that is we have just declared that is all later and inside the all data we will call the register model so write your register model and column column also basically using this all method will get all records and we know that inside the library component class file whatever variable we are using all the variable can be accessible from the blades file so we can use this all data into the blade file so that using all data will get all records from the database so how we can display this so we will display with the use of loop so right here for each and inside the 4h use the all letter as suppose i am taking or a d ok so all data for ad and a for each okay so inside this we will create a table to show all records so before that we will create a table heading so right here table and just here close the table so here write table and here we will create a tier and inside the tier we will create th for heading okay so here write th and here i want to display three columns that is one for serial number and another's name and email address okay so first write serial number so just write ether number you can add your own text but here i am writing serial number and the next is name and then email okay so just change the label so here write name and email okay so here we will get the heading so we need to create the rows so just copy and paste here and change the th into td okay so copy this and right here here and all those place okay and here inside the 80 will get the all data so right here for name so here right dollar 80 and name of the column that is name so right arrow name and same like inside the email we will write dollar a and email okay so here i want to add another things that is i want to display the serial number so basically serial number will be the auto increment so here right dollar i okay and define the dollar i before the loop so right here php and dollar i equal to suppose 1 so it will start from the one and here close the php so end php okay and then same like variable declaration so here just before the closing of loop i will incrementing the i value by one so right here i plus plus okay so if you go to the browser and refresh this page we can see the serial number one and two so named john clerk and david greek email that is okay so now it's not look like very good so i want to add some styles into this so how we can do this so we have a layouts page for live view file so just go to the app.blade.php okay so here we can see we have already included all the library styles and all the library scripts so just write here some styles so open the style tag and inside the style tag we will write our style for table so here i am writing a table and table should be border collapse so right here border collapse and type is the collapse okay and i want to add another property that is the table width so here right with equal to 100 okay and now i want to add a style for td and th so right here td comma th and inside this i want to set a border so right here border 1px solid okay and another things i want to see a heading before the table static so just right here the suppose i am taking in h3 text so right here h3 and inside the http will write list okay so now go to the browser and refresh this page so it looks like cool and it's the list and basically it is coming from the database so now add another data so just write name so in the name section i am writing john cena okay so here write john at the rate gmail.com and click on save so very simple without refreshing any page without writing any single code of js this is the power of library so we just save this and we can get the result in stanley so if you go to the browser we can see the result is also added now here i want to add the pagination in this list view suppose there are lots of data and if you have lots of data if you scroll down and it will be difficult to manage all the list so we need pagination for this and also we have a libra pagination and this is super cool so if you go to the project directory and inside the class file we can use the library pagination class so just use here the library and write the with pagination okay and just use this inside this class so just copy here and use inside the class okay and in select query instead of all just write paginate and suppose i want to display two records in a single page so right here 2 and here i am adding the all data into the variable and i am closing this for now and we need to pass this all data inside the forms so right here a array and here write all data and arrow our variable name is dollar or later okay and now we need to add the links inside their forms so here the table are closing and after the closing of table just add the links so right here dollar or later so we have the variable and inside this variable we will write arrow links okay so basically this function so right here and if you go to the browser now we can see if we refresh the business is coming so if you click on the next so it is coming so i want to add some more data so suppose here i i'm adding data test at the rate gmail.com for email and for name just write test and save this okay so from submitted i want to add a taste to and taste two at the gmail.com and write taste three and test three at the gmail.com okay and sorry save this and to write here four and four at the right gmail.com so if you go to the go to the database we can see all the data inserted and here we can also see the seven results so just click on the previous so this is the first record and just click on the three two four five two six and the last there is one records so now if we change the value from 2 to 5 so i want to display the 5 records at a time in a single list so just refresh this so just go to the previous you can see there are five records and the next is two records okay so super cool we can use the pagination very simply in liver listing page we can see here our link is also changing so when we have a page two we can see the page two so the advantage is this when we repress this and it will stay in that page only okay so it will not go out in the first page or anywhere so this is the power of liver so now we can understand how to create from and how to get the list so now i want to add another features that is edit and delete so first we will add a delete so before that we want to add a column for action and i will add a edit link inside this okay so just go to the froms.play.php so this is the blade file of my component and here just write th and write here action and close the th okay so here i will create a link so inside the td we will add a link td so first i will create a link for edit and after that we will add link for delete so step by step we will do okay so here we will write edit as a label and here is the anchor tag close okay so i don't want to redirect when we click on the edit so i don't need any redirection when you click on the edit so here just write h ref equal to javascript void 0 okay and here i will call a action from component so just right where and we'll add a click function so right click and she will call a method okay so suppose i am creating a method so method name is edit from okay and we will pass the id so where we can edit so just write dollar a d and id so we know in the dollar ready we have all the rows so if you go to the browser and refresh this so here we can see the action and edit okay so now if we click on the edit basically it will call a method so this method is calling that is edit from so just create the edit from inside my forms component so right here public function edit from okay and also in the argument i am taking the id which i want to edit okay so first we need to fetch the record to edit so just right here single data so here i will page the single record with respect of this id and will use the model that is the register model and colon write find to fetch the record for particular this id and pass the dollar id so inside the single data we will get the records for this and just pass this into the froms.blade.php so we know we have a property name and email so right here this name ekl2 dollar single data name basically this name is the column name so if you go to the register we can see the name and also we have an email so right here this and email equal to dollar single data arrow email okay cool so now if we go to the browser and refresh this so we can see if we click on this edit we can see this and if we want to edit the test 3 click on this so we can see the result are populating in the field now the interesting thing is we are using same forms for add and edit so how libra will detect when you want to edit or delete okay so we will just pass a id when we update okay so here we will pass the id so write another property that is public dollar hidden id so basically you will use the hidden id as hidden okay so here just write dollar this arrow hidden id and right here dollar single data arrow id okay and print this id inside the blade so here just go to the top of the forms you can add any place in the prompts but i am adding this in the top so write your input type equal to hidden and to write where model hidden id so just a binding these things okay and write your value dollar hidden id okay and close the tag so just go to the browser and replace the page so now the problem is when you're going to edit these things is coming but but we cannot add this anyway now so how we can add this so just click on the add link so when you click on the add this field will be blank so just add the add button here so inside the forms so just like edit we will create a link for add so here after the list will write the add from okay so basically this will be the method of component and just write the level as add and create a add prompt inside the forms so here write public function add from okay and pass these properties as a blank so copy from the edit and paste it here so right this way and for also hidden id also so now if we go to the browser and refresh so we can see the add from so just click on the edit so the option is as fail now click on add so it's gone so this is cool and without refreshing the page we can manage all those things with the power of library okay so now i want to submit so when we click on this ad we'll call the save function so basically when we click on the save button it will calling the submit from okay so basically submit is the method from the component so here is the submit method so we need to modify the submit button so when we have a value in hidden field we will update this and if we have no value in the hidden id we will add this so we know in the validated data we will get all the fields that is name and email so for here i will add the another things that is updated id okay and in the update id i want to store the hidden field id okay so write this and hidden id okay so if updated id have a value so we will update this so just write update id is greater than zero that means we have a valid record so here we will update or else we will add okay so we already added our add code so just cut from here and paste it here so it will add and now we need to write the code for update so first we're going to create a array to update data so right here update array okay so here we'll store all the input fields okay so right here name and here name will get from the validate data and in the array that is name and in the same way we will get the email and arrow dollar validate data and email okay so we need to pass these two things when we update so basically we can update name and email from this from only okay so this is my updated array and here we will use the db so here write the db and table so here we need to pass the table name so my table name is that is registers okay so just write it here registers and she will use the where condition so i need to update and we need to write the update method so inside the update method will pass the updated array and we will write the condition for update so where id equal to the update id okay so write it here and if the updated so basically it will print the from is submitted and one things here i am using the db so we need to use the db from here okay and now go to the browser and refresh this page so if i want to update these things suppose i am click on the edit so basically this is my edit option and here i want to add a text that is again okay so if we click on the save it is showing from is submit it and it is also updated without replacing page and we can see inside the browser will get the test again so within a second we can update without replacing the page and also we are getting the listing with the updated data so how powerful library is working so now the one thing is left we need to add the delete option so just right here inside the forms we'll add like edit will add the delete so here write delete and we'll add another method for delete so right here delete and we will pass the id to delete so call this from so create this method inside the components so add a date and after that public function and delete from okay so here just write dollar id and we will delete this record with this id so just copy from here and instead of update we will write the delete so right here delete and we don't need to pass the array to delete and so here we need to pass this id to delete the records okay and after delete we will see the flash message so basically it will show the records deleted so right here session and arrow the flash and we have already a flash sessions printed in the from so here the session name is success so i am passing the success from this here and here right the records delete it so now just refresh the page and suppose i want to delete the test one from this list so here you can see the total is seven result and click on delete we can see the six result and one record is deleted so if you go to the browser and we can see the test one is deleted so very easily we can create a crude operation using library so this is the power of live viewer that is we don't need to write any single js code we don't need to replace the page but we are getting access from components method from blade file directly okay so this is all about the crude application using liver and if you have any queries about this video please comment in below comment section next day we will going to show you image upload functionality using liveo so this is cool and very useful things when you create any single project or any application so please like and subscribe this channel for upcoming video thanks for watching this video bye you

Channel: Learning Points

Views: 4,928

Keywords: Livewire CRUD application, Single page CRUD application, livewire tutorial with laravel 8, add edit delete operation, one page application, add edit in a single page, ajax crud application, delete data without refreshing the page, add date without refresh the page, flash success message, what is livewire, how livewire working, advance technology, basis of livewire, simple crud application, learning points, laravel 8, livewire full tutorial, trending technology

Id: 4M3oHzR32wA

Length: 45min 21sec (2721 seconds)

Published: Wed Feb 10 2021