Laravel Livewire Complete Tutorial for Absolute Beginners

hello everyone this is diamond and original Library tutorial for beginner in this tutorial I am going to show you how you can install live or in your laravel project so let's go and fast create our label project first so I'll just open a command prompt over here and create a laravel projects so in order to create a laravel project we need to write this command laravel new and we need to mention our project name let's our project will be live or tutorial next press enter and it will create a larval project and I'll just fast forward the video for now and here you can see our project is created and here you can see Library tutorial photo here and Facebook inside you can see this all larabelle projects so let's run this project so for it uh here we need to go to this Library tutorial project directory so body will see over here CT like wire tutorial let's press enter and currently we are in the library tutorial directory so let's run the project so for it we'll just over here PHP are t-sun sir let's press enter and here you can see our project is running so let me just copy this on both C and paste it here and there you go this is a lot of watching that you just created and I also opened the project using Sublime Text over here you can see live or tibial written over here and right now directly we will go to Resorts use and then welcome.blade.php and I'll remove everything from here and let's just over here normal HTML and inside the body I am going to say a h on tag let's say here Live Wire tutorial let's save it Ctrl s and right now if we refresh over here here you can see library t2l and up until now we haven't done anything related to library we only just created liable project so right now we'll install library in our laravel projects so let me just open a command prompt over here uh and here you can see this is the command prompt and in order to install library in our laravel project we need to write this command composer require Live Wire slash Library let's press enter and it will install library in our project and there you go and here you can see our libraries installed over here so right now let me just so right now what we have to do is that we need to go to the Head section and here we have to write our head and write off Live Wire capital s t y Styles and then we need to go to at the end of our body tag and here we say at the rate of live or capital is skipped scripts capital S and Skip so right now we are ready to write our library report inside this body so right now let's say we want to show a specific view for Live Wire uh over here in ellipse after live or tutorial so for it first of all we need to create a library View and you know treat Library view we need to write a command in our common prompt so in the common problem we are going to say PHP artisan make name you can mention any name you want a list server here hello or w o r l d hello all and then let's press enter and here you can see it is telling us something that class this one is created in the app HTTP Library there is hello.php is created and also in The View in the view there is a folder called library and inside that folder hello.blade.php is created and after that it is asking us something would you like to show some love by staring the repo we'll just server here know and then press enter okay so right now uh let me just minimize it so right now if we go to our views here you can see we have a library folder over here and inside the Library folder here you can see Hello World plane dot PHP and then if you go to our app then HTTP and inside HTTP here you can see we have a folder called liver and if I go inside here you can see we have something called alord over here lol.php so you can think of this Library as a controller and you can think of this actually this is a blade view hello.blade.php so Auto 11 is that uh this is this will all guess the controller it will return as a view a Library dot hello which is this song okay so let me just write it over here like this will serve on here Live Wire Live Wire clone and here we are going to mention hello all and we'll close it like this and let's say in the hello.blade.pc you will write something over here let's say hello form Live Wire and right now if we save it over here then it will now refresh here you can see hello Paul Library so what is happening uh is that we are saying about here Library hello also it is calling this Library hello and our this liver hello alt is returning us which is this one in the view so you can see a folder called library and inside Library we have hello.blade.php and let me just show you one more thing and that is let me just open it like this let's go to use layouts and column two and here let's have this hello this site and here you can see Hello bomb library and this is the hello.php which is this one a library this one in the HTTP so here uh what we'll do is that if we just mention over here Public public let's say dollar name equal to let's say leave your life so if you write it like this uh public dollar maybe call something like this it means we'll be able to have access to this dollar name in our Hello dot blade dot PSP over here okay because we are returning the view from here this group so here if you just give two second bracket then you create a server here dollar name just like in the Lara below we need to give two second bracket and inside it we need to write the variable just like we write in the Lara bill so if we save it and then if we just replace share there you can see we can see something called libyo live so this is all for this tutorial and in the next tutorial we'll learn data binding in library so thanks for watching and if you learned something new then I would actually really appreciate if you subscribe to this channel in the previous tutorial we send the name from here to our blade view over here and we show it over here like this leave your life here you can see so in this tutorial I am going to show you data binding and please stop explaining what is data binding as the status show you the example so here let's just have a input field over here let's say input field and here you can see type and type will be text and let me just remove the name from here and stop name we are going to server here fire clone model equal to will give two single quotation and here you can see that we are sending the name from here so we just over here Main and if we now save it then if we just refresh over here here you can see in the input field we have leave your like and here what will happen is that here we mentioned name and whatever we write in the input field it will change this change the name that over here as well and here only we just write over here leave your light let's say happy and here you can see it is also changing over here as well okay let me just write it anything differently now let's just put it inside a div you'll just understand it uh it will just look a little bit clear and let's just replace here and here you can see and if I write anything over here here you can see it is also changing the data cover here and if I just remove everything over here and here you can see the data for the name is Con as well so whatever you write over here you'll just see it over here and that is something called Data binding so we are basically writing in the input field and here we are just mentioning the name over here which is coming from here and whatever we are changing over here it is updating the name data over here as well and this onward thing I would like to show you and that is here and whatever we are writing it is immediately making the changes over here and what if you don't want it or if you want to uh make the changes after on second after you type so for that case what you can do is that in the wire model uh you can just say one here Dot debounce Dot and here we can mention a second over here uh how many seconds let's say here 2000 millisecond it means uh 2000 millisecond means two second actually so right now if we just refresh here and if we just server here happy and after two seconds it will update here you can see uh so basically we will not uh use this but there is one more function uh that I would like to show you and that is called lazy so let's say over here lazy let's save it so hot uh lazy will do is that uh whenever we let's need a sleep fresh here and wherever we just write something over here here you can see nothing is happening but if I just click away it will show us the data or if you just press enter then it will also just start over here as well so you can do this for not only the E2 type text you can also do it for the check box or select option as well let me just show you the for the check box here let's say over here input type it will be object check box and here we are going to say wire model let's say IR model equal to and here we're going to say let's say check me and here in the hello.php we are going to say about here public dollar check me uh equal food by default at the beginning it will be false so right now let's save it here and here as well and right now if we just refresh here and you can see we have a bit shape option over here and if I click check nothing is happening so uh let me just give a condition over here after the check me so here what we'll do is that just like we write condition in laravel the same way we write condition in library as well so we'll just say over here at that of e then 2 Fast bracket and here we'll say dollar check me it means if we check the data then we'll show something and we also need to pin the if condition so we'll show over here in the and here let's just say normal thing in the P tag let's say I am checked and let's save it now and let's go to our browser let's refresh and if I now check this option here you can see it is showing us iron checked so you can do the same thing for the select option as well so let's just have a uh select option over here list over here or select and inside the select will have some option obviously and let's say here option let me just copy two times Ctrl C alt B and Ctrl D so in the scenic we see here wire model equal to here we'll say let's say talk and in the option let's say here goodbye and in the option two we say see you again and in the option three let's say Ave nice day so here let's save it and right now we also need to mention this top variable over here in the hello.php as well if you not uh do not mention the this variable over here then you will get a error let me just show you let me just refresh here here you can see we have a select option over here but if I click select and if we just select any data over here it will give us a error that property top or found on the component hello world so here in the component over here hello Dot PHP will reset the variable probably taller talk equal to let's say at the beginning the data name will be let's say goodbye and let's save it now and let's test we pay share and if I just select anything here because we are not getting any error but nothing is 70 right so for the what we will do is that after the select here let's just give another if position let's say here if and we are going to mention this top variable uh let me just pop it and here we'll set all our Raw and we'll give the pin condition over here so we'll see over here indeed and here we'll just say dollar talk and here you can see dollar talk and just like in laravel in order to print something we need to give two second bracket so we need to keep this taller Talk inside to Second bracket and it will now save it then if you just see pressure and here you can see at the beginning it is saying goodbye because we mentioned over here the laptop will be at the beginning it will be put by and right now if I just change the value over here and here you can see save again and if I just click over here again have a nice day there you can see have a nice day and if I check me here you can see Iron check you can change the data over here as well so right now let's say you want to select multiple data over here so for that case what you can do is that in the select option we can just over here multiple and then since a multi balls we are selecting multiple data then this would buy it will be a array so we need to give this our third bracket at the beginning and at the end and then here you can see talk so since we want to select multiple data so here uh we need to say one here import then we'll give Fast bracket opening and pass bracket will close over here then here we'll give a single quotation comma single quotation and another format so for every single position uh we'll be able to show a single data so right now if we save it they need to refresh here here you can see it looks like this and we can select it like this and if we press Ctrl and then select some something then it will show us everything over here like this so yeah this is all about this tutorial and and in the next tutorial I'll show you method and action in library in that PBS tutorial we saw data binding in library and in this tutorial we are going to see some method and action in library so here you can see we are showing the name over here and we are sending the name over here this all leave your light data work here and we're showing the name over here which is uh this on leave your light so here uh what we will do is that we'll have a button over here next to name and if we click that button it will reset the name to something else and let's just add a br T cover here uh just so that we can understand that name properly we pick this refresh here okay this is the name and stop leave your life let's over here in name let's see here Carlos we can save it and we can refresh okay we have the name Carlos award here and next to the name we have a pattern over here let's say button and we'll show on here reset name in the button we are going to say IR clone model sorry not model uh wire clone click default to we will give two double quotation and inside it let's say here dollar set will say to five four eight inside two five bracket with seven here name then keep it comma then we single quotation and let's say We'll change the name James so what will happen is that if we click on this reset button uh reset name button then it will set the name to James so at the beginning the name is Carlos and on clicking on this button the name will change to change because we are setting the name over there so let's save it and it will now refresh here you can see we have a reset button over here and if I click reset over here and here as well in the input field because also in the input pin we have our model name so this is the easy way to update or reset the name but this is not a recommended way so Auto will do is that we will mention a function name over here so let's over here reset name we are calling a function over here which is reset name so this is a function and we write this function over here so here over here we are going to say public function reset set name which we just mentioned over here then we'll get to first bracket then we'll just hit second bracket and inside it we say we want to change the reset the name to a different thing obviously so here we just say dollar this this Arrow sign will say name equal to and let's say uh by default the name is Carlos and we'll change the name from Carlos to let's say this time it will be met and let's indeed with a clone so right now what will happen is that let me just write it like this so that you can see it properly so what will happen is that if we click on this reset name button then it will follow this function which is reset name and will come over here and we'll change name to Max from Carlos to math so let's save it here and here so let's just replace and here it will click reset name it will change the name from Carlos to Max so if I click reset here you can see math we can use a few more event like we can say the mouse enter so a mouse enter like this and if we now save it so Auto 11 is that you don't have to click this stand if you just take your mouse to the reset button it will automatically change the name from Carlos to math let me just show you let's refresh and if I just click my cash store or Mouse to the button it will change the name to Max I didn't click it okay let's refresh again let's take my mouse over here again you can see it automatically change the name you can use a few more feature like key up key down or key right key left a lot of feature so we'll just make it Mouse click over here and you can do onward thing that is we can send a name from here to here so for it we'll just keep two fast bracket here then to single position and here uh we sell the nail and let's say here the name will be row null though and here we need to catch this name so body will declare a variable we serve it here dollar name and here stop Max we see over here dollar name which is this name okay so we are sending this name to over here and we are saying that set the name to this one okay so let's save it here and here let's refresh and click reset name and here you can see Ronaldo you can do a lot more things over here okay I think I did not show you one more thing and that is Str to Upper will give Fast bracket opening and closing over here if I not save it then if I just refresh here you can see all the data is in Upper you can do it lower or anymore anything you want and I just did not mention this hdriver in any PBS tutorial that's why I am just mentioning this and if I just click on reset name it will keep the role download name upper elsewhere so this time let me just show you the submit form so here we are going to mention a form uh we'll see here reporting form form will open over here and this form will end over here and in the form we'll see here action action will be hash uh for now we do nothing and here we say wire it will be it is a submit right it is a form so we need to submit so it's over here submit equal to to double quotation and from this button we are calling this a reset name function so this time we will just let me just cut it from here and we'll paste it over here and let's just remove it right click from here so right now if we save it uh there is a little bit different here we are seeing wire submit so what will happen is that it will submit the name data Ronaldo so the name on chains the name will stay the same because uh the page will be reloaded because let me just show you let me just refresh over here and if I click reset name here you can see the name is still Carlos because we submitted the form over here here you can see hash which we mentioned over here action equal to Hash so what we'll do is take with server here prevent so it will prevent pump submitting the form so let's save it now and this time let me just remove this let's press enter and this time let's click reset name and here you can see the name change to Ronaldo and it did not submit the form so those are the basics of a like method and action so those are pretty simple so this is all about this tutorial and in the next tutorial we will see lifecycle book in library in this tutorial we are going to talk about life cycle 2 in live work so in the previous tutorial we talk about some method and actions so first of all let me just create some code about here so that it becomes easier for us to read the code and understand so here this is what we have right now over here you can see so we are going to keep this name over here and but we'll remove this form over here on here then we'll keep this input type text but we'll remove the input type check box and the select option and this this one as well and let's just keep only on div over here okay so this all we have in this hello.grade.php and let's also remove this hello from library as well and from the hello.php we will remove this check me he called pulse then this stop function and also this uh reset name function as well so let's save it and if we now refresh here so here you can see only car loss and over here in the input field we have Carlos and here this Library tutorial this text is coming from the welcome.blade.php from here so first of all we are going to talk about the function called Mount over here so let me just write the function over here probably function mount with two flash bracket then to Second bracket and here we're going to say dollar this L sign name equal to we are going to mention a name let's say the name will be add-on so what will this Mount function so here in the amount function we are mentioning our name equal to Adam so here you can see in the public we have a name equal to Carlos but what will happen is that because of this one function the name will change form Carlos to Adam so right now if we refresh here we will not see over here power loss it will be Adam if you just refresh here you can see Adam and you can also pass name data in the mount function as well let me just say over here dollar name and here you stop Adam we are going to see here dollar name and we are going to pass this name from our welcome.blade.php from here here you can see uh Library hello also here after this LOL we did this clone over here then we saw it here name equal to I will give to double position and inside it we can say any name let's say here yummy let's save it then right now what will happen is that this name will pass over here and it will show us this name yummy okay so right now if we refresh we see over here yummy as you can see so right now I am going to talk about a function called update update it so let me just write about here public function updated and we give to Second bracket and here uh let me just show you instead of explaining then we will expand first let me just show you the example I will just pop it and paste it here and here in the name over here let's just remove this let's keep to single position and inside it let's say here I am updated so uh what will happen is that if we make any changes um in the input type paste over here then the name value will change to I am updated so let me just save it and let's refresh over here and if I just change anything in the input field over here here you can see it is saying I am updated so the name value is transformed from the name Tool I am updated so there is uh there is one more function call like updating and hide it uh hide it kind of or similar to updated but um I don't remember using iPad in a actual project app until now so yeah this is all about this tutorial and if you have any question you can let me know in the comment section in library [Music] password this video for now there you can see our publication is done and here you can see this is the library tutorial project that we just created so let me just go to the project directory and write over here CT project that we just created so let me just run the project I'll see over here PHP artisan so let me just copy this and I'll paste it here so this alignment project that we just created and I also opened the project using Sublime Text over here you can see live art tutorial so I'll just take it go to Resource Heroes then welcome dot plane dot PHP and I am going to remove everything from here and in the body let's say here h on bag inside Asian tag will say light wire deeper real so right now we save it then it will refresh here you can see live tutorial which is coming from the welcome.d.php but up until now we haven't done anything related to library so for writing the library first of all we need to install library to our laravel project so for it let's go and install library to our project so for that case we need to go to our project directory again and we open another common prompt and we'll install our library and for installing Library we need to write this command composer require live or slash Live Wire and let's press enter and it will install library to our laravan project here you can see it is installing and it's done so right now in order to write the library code we need to write something in the head section and also in at the end of the body section so in the head section we write over here at the rate of Live Wire escapes s-c-r-i-p-p-s and ACB capital S and over here inside this style and skipped over here we are going to write our library book so first of all uh we are going to create a view for live so let me just write it over here first like this like wire clone and let's say We'll create a view and that new name will be uh we want to store data right so let's say here store hyphen student we create a student table and we will store the student data so we need to create a view for Library like this store student so for it again we need to go to our common prompt and write a command so we'll just directly go to our Command Prompt and here you can see that we want to create a view call store student right so for it we are going to say in the command prompt over here PHP RT sun make loan Live Wire and then we're going to server here this store hyphen student so let's say store type in stream student and if you now press enter here you can see two file is created for this single command so uh on file is inside the app then HTTP and then Libor and inside that Library product we have this and another file is in the viewing folder so let's go and first check this one but before that here would you like to show love uh show some love with the server here no space enter so let's go and create uh check this one if you just directly go to app then HTTP then inside HTTP Liber and inside Library we have store student dot PHP as you can see and again another one is inside resource payables and inside views here you can see librar and inside Library store student.blade.php so right now here you can see in the welcome.play.psc we already included store student which is this on so whatever we write inside this will be able to get in the welcome.blade.php so here we'll just say H to tag and we'll say store student data so right now if you save it then if we refresh here you can see we can get the store student attack on the PHP so right now we'll make some right some input field over here inside the store student.blade.php and we'll upload it to a table so first of all let's go and create a table uh so that we can upload the student data so for it let's go to command prompt and here we are going to say the PHP artisan make clone model and here let's say we create a model ball student and table for students so we serve here the student minus M it will create model and migration at the same time just press enter so you can see model and migration is created so we'll directly go to our database migrations and inside migration here you can see student table so inside the school and email let's add some infinix dollar they will this Arrow sign string to pass rocket to sing in position let's say this one will be name just keep this Arrow sign and let's also make it null owl so after name let's say student will have also like email and emails so let's say this one will be email and this one will be image let's say right now we need to migrate this table and here if you go to our DOT EnV here you can see Library tutorial and here I also keep the library tutorial database in like this man pin so we can just make it our table so we'll just give the comment over here PHP or T Cell migrate let's press enter and here you can see migration is complete so right now if we just go to our database and if we just refresh here you can see we have student table over here and inside student we have name email add image so let's go and insert data using library to this table so for it we need to make some input fill let's just close those two and here in the students.blade.php okay write it like this so welcome.blade.php is not required so I'll just close it for now and let me just go to views layouts and column two let me just write it like this so that you can see properly this one and this one so here uh this is the blade file store student.blade.pht so here we are going to declare a form and inside this form we'll have our input field so first of all let's just have a div and inside this tip we selevel never will be named and for input for level nav we need to input field so let's say type will be text and in the library we do not write name like this we write over here wire clone model equal to Main so here you can see wire model name in library we use wire model equal to name like this and whatever wire model equals something we have over here we also need to mention it in the store student.php which is inside uh which is inside the Library HTTP then Library over here this one okay so in this function we are going to mention a public variable we say probably dollar name and here it is dollar this name is this song okay so let me just copy this song and I'll paste it three times so this one will be for email let's just select everywhere and let's check our email and this one will report the image so let's say here image and Body Image the input type will be file and here you can see all model listing the word model will say image and we also need to mention this email and emails over here as well so let me just select it copy and paste it here then we'll set image so right now we need a submit button to submit the form so for submit button we don't require level and also do not trigger oil model so here the submit button it will be for Sub in button input type will be submit and we'll say here value will be let's say just say and here you can see in the form we need to write over here like this where clone submit dot event equal to let's say here you can name it anything so here we are going to mention a function name which will write over here in the store student.php so let's see here save data you can give it any name you want I'll just go with save data so let's say B and right now we'll go to this side and here we're going to mention a public function save data which is this one so we say public function save data your password okay and then do second bracket and we want to store those data in the student table right so first of all in order to upload data to the student table as always like laravel we need to add the student model name at the top so here we'll say use app backslash models backslash student so right now we'll be able to upload data to the student table so let's declare a variable in this function set data will say dollar student equal to new student and after it we will say dollar student this Arrow sign name equal to and you can see dollar student name this is just like before we write in the laravel dollar student name and here this name will be uh exactly like we have in the column over here name and this time uh in the laravel we normally request a data from the form but in library this is a little different here you can see wire model name so whenever we write anything in the input field then that data will be stored in this public name variable so same goes for the email and also for the image so whatever we have in the input field it will be automatically a store or this public variable will automatically locate that data so we'll just see over here taller this Arrow sign name so we'll get this name over here so let me just copy this on and I'll paste it here and here this tag will say email and after it will just store the data so pause doing data we need to server here student this Arrow sign say so this is really simple as you can see so right now let's save it here and here so let's go back and list SRI fish here and here you can see we have some input fill over here let's give a name let's just say the random thing and let's let's not to choose the image we haven't done the image spot up until now we'll do it after a little later let's just do it for normal input field at the top gmail.com and let's click save and here you can see it did not reload because in Live or it doesn't reload to store data but if you go to our database and if we refresh over here here you can see we have the data over here so whatever data you would try to store over here it will not reload because this is live or let's say here I mean let's say and let's say here yeah I mean at that of gmail.com and let's click save again and here you can see it did not reload but if I refresh over here we can sit up into our ear but that thing is uh once the data is safe those input field should be empty right that is the most logical on so for that case what we can do is that after storing the data we just serve on here dollar piece then his Arrow sign we say here reset then boot half bracket then to single quotation and inside single position here we have this name right this name variable over here as well so we'll see over here name then comma the single position image so what you are saying is that after storing the data just make the name and email input field MP reset okay so let's save it and let's try it again so let's say here uh this time sales and email will be James at the top gmail.com let's click save and here you can see after storing the data the input field is reset so if I now refresh here here you can see James so right now um okay the but before we move to the US part here this is not the proper way to like reset the entryway would be anything different and let me just decide a function over here we say public function uh let's say reset data to pass rocket to Second bracket and he said this public function reset data let me just start it from here and paste it here we'll uh have this reset name email over here and we'll just call this reset function from here so we'll just say over here like this this Arrow sign reset data so this is this is basically all the same okay let me just show you again let's do this refresh and let's say here this time John John at third top gmail.com let's click save and here you can see it basically or the family you can see John at that gmail.com so right now let's go and store the image so for storing the image here first of all uh we'll declare a variable over here let's say here dollar image name equal to we'll say dollar piece this Arrow sign image and this image variable is this on okay he missed then we'll give another arrow sign we'll say store with fast bracket to single quotation and here we are going we need to mention the folder name uh where we want to store the data I mean store the image so we say let's say photos then but before that let me just show you one more thing and and this use layout angle okay if I just go to my so here you can see after a route we have a folder called shortest and inside shortest we have a few more file app in public so here in library if you just write this on and if we upload a photo it will create a folder in the shortest folder call photo and all the images will be stored in the photo folder but how to be on is that we want to store the all the images in the public folder so for it we'll give a comma 1 here and we need another to single quotation and we will server here public so in library all the images are stored in the shortest folder okay so after the what you will do is that will serve on here taller student this Arrow sign image equal to Dollar industry image name so here let me just explain it again so here uh for now just ignore this image then part here 47 is that we are getting the image and we will store the image in this location in the photo folder which will be in the public folder and then we are creating that location for our folder name I mean the okay you can say we are getting the path name of the image and we are storing it in the student table image column over here you can see student image equal to investment so I hope you are clear so right now it is Select and if it refresh here let's say here name yummy email yummy drop gmail.com and let's choose the emails from here let's choose this on open and if I okay uh I forgot to add add onward thing and that is uh in the store student.phc we need to add something else for file upload so it's over here use Live Wire backslash with file upload this is at the end of uploads and again we also need to use this with file uploads over here inside the class so we say here use file uploads like this okay so right now let's go and let's just refresh here again and let's say here yummy yummy attack gmail.com and let's choose the image and let's choose install again let's delete save and here you can see everything reset it except the image because we haven't received the emails over here in the reset function but that's fine right now if you go to our database table and the previous over here here you can see we have name email and we have also the location of the image over here as well if you go to the shortest location here you can see in the shortest we have app and inside app we have public folder and inside public folder we have a new folder called photos and here this is the photo that you just uploaded but right now uh what we should do is that we should uh link this public folder with our uh with our uh this public folder okay so for it we just need to write the single command and obviously link our the shortest public folder with this one uh with this tablet for that will be able to get the image from the data is table and show it in our view so we just need to write a command which is PHP Artisan Str shortest stromag shortage link we just need to write this command to link our this shortage uh to our this actual public folder so if I just press enter okay there is either okay I did a mistake for the shortest spelling then let me write it properly HD shortest so let's test this enter again okay I did a mistake again I think the spelling will be s t o r a g shortest let's press enter okay this time it is done here you can see that uh let me just make it a little bit bigger here you can see that Library tutorial public shortest link has been connected to library tutorial shortest app slash public so a connection is uh done in the database table and we link our shortest to our actual public folder so we'll have to get the image and show it in the laravel OR Library view wherever you want so yeah this is how you can insert data in library I try to make this digital as easy as possible I both you now know how to insert data in library in the previous tutorial we insert some data to a table called student which is this one over here in this table we insert the data for student so in this tutorial I am going to show you how you can show all those data from this table to our hair in library view so right now let's go and show the data for student over here uh so for it let's go back and here you can see in the welcome.plane.php uh this is the blade View From Here we are calling this Library function store student this is the blade view for library and which is this on store student.blade.php from here we have some input field for adding data so after this form we are going to write some code so that we can show the data of the student table and here you can see store student dot PHP and this is kind of controller for Live Wire and this is inside the app HTTP Libor and here you can see store student.psp and this Arc as a controller for Library view which is this one so over here in this store student.php we're going to write a function over here which is public function Mount and here you can see this Mount function will automatically call by Library view always so whenever if he is loaded in live world this Mount function will be automatically called so you do not have to explicitly call this function so inside this Mount function will say over here dollar this this Arrow sign student so dollar this student this will act as a variable and equal to we will mention our table name which is study student double clone all so here we are basically getting all the data from the student table and we are storing this inside this student variable and one more thing that is we also need to mention the student model at the top as well so on sale just write this it means your daily do get the student data in your library view so let's go to our store student.blade.pht and over here just after this form just like laravel will mention a forage Loop over here for each week to fast bracket then we'll say dollar student and this dollar student is actually this one okay because of this dollar student s dollar student and we also need to in the forage Loop we will say here at the top end for each and after this uh just like in laravel we get the data the same way we will also get that over here as well let's just mention a b tag over here and here if I go to the Tata race table here you can see in the student table we have name email and images okay so first of all let's uh Go and show the name and email first so here we give two second bracket and inside it we are going to say dollar student this Arrow sign name so right now okay let me just copy it and paste it here and this time we say here email so it is save it now then if we just refresh here here you can see the data from the table and you can also write the name and email edited different as well let me just show you like this so to third bracket then name and for email also the same way to third bracket email if I save it then if we refresh here you can see nothing just we are still getting the data or we are able to show the data so right now let's go and show the image and here you can see that in the previous tutorial we upload the image and we upload the image in the shortest folder and we also at the end of the video I also showed you how you can link the shortest with the public folder so here in library in order to show the image we'll mention the image tab over here and in the source we'll give two second bracket then we will server here short is htro s t o r a g shortage then double clone URL to first bracket will save in dollar student let's give two third bracket and inside the C involution we'll say image so like this we'll be able to get the image and so let's just mention the image height and width let's say height will be 200 and width it will be 200. so right now let's save it and if we just refresh here here you can see you are able to get the images so we need to mention the shortest because we are storing the images in the shortest folder that's why and here you can see photos folder and this one we are not mentioning it because uh in the image section here you can see photos slash the image them so that's why so yeah we are able to get a few over here now let's say you have you need to return multiple view from here you can do it as well for it all you have to do is that just copy it and let's say you have another table where you want to show The View and the table name is user you can just see over here user like this and you also need to mention the user model at the top and then all you have to do is that you need to write a for each Loop to showing that user data okay so that is all so this is how you can show data from table in library so I hope this tutorial was useful to you if you have any question or if you face any problem you can let me in the comment section hello everyone this is Yamin and welcome to labor tutorial in this tutorial I am going to show you how you can relate data using Library so in the PBS tutorial I showed you how you can display data in Live or and I made a table for displaying the data and in this tutorial we'll have a delete option over here and if we click the delete option it will delete the data without reloading or refreshing our page so let's go back to our code and here you can see that I created table over here name email and image and in the forage loop I showed the name email and image so here this is the table header so here we are going to mention a 88 table header and let's say here delete and in this for this Loop we are going to mention another TD over here and inside this TD we'll mention a anchor tag and inside this anchor tag we are going to say delete so right now if we save it then if we refresh here you can see we have a delete option over here right now so right now we'll write some code to delete data in library so here in library we do not require to use href so here in library we are going to say over here IR click or click means uh if someone click on this then we'll do something it means we are going to call it function and let's say our function name will be delete student and will give to first bracket so right now uh we need to mention that which data we want to delete and here you can see that we have a lot more lot of data over here and and a b data has a unique ID over here you can see so we need to send the specific ID for a specific delete button so how can can we do it so you can get the name just like this we can also get the ID as well so in this two first bracket we'll just paste it over here and stop name we are going to server here ID so right now let's save it and this time uh currently we are in the store student.blade.php so this time we'll go to our store student.php which is early inside the HTTP Libor this one okay so here we are going to write this function delete student so here we'll just see over here public function delete student let me just copy this on Ctrl C control key we'll give two files bracket then to Second bracket and here inside this we are going to Cache the ID right so we'll just have attached all our ID so whatever I do you are sending from here will be receive over here and then we'll just declare variable let's say dollar data equal to here we are going to measure our model name or table name and here you can see you you also need to mention the model name at the top as well so here equal to will say student double clone fine to pass bracket dollar ID so we'll first find the ID and then we'll just show our here dollar data this Arrow sign delete so right now let's save it over here and here you can see in the anchor Tech HF we cannot keep each step for Live Wire we only need to give or click so let's set Power here as well and let's refresh here and right now let's say we want to delete this data so since we remove the hrf so the hand icon is gone but that delete should still work so here you can see there is no hand sign over here as you can see because we removed the H rate so let's just say over here Style and we'll say here car short clone pointer so let's save it then let me just refresh again and here you can see there is now the hand sign over here so right now if I just click over here here you can see nothing happened part the data is actually deleted because in library it doesn't refresh so if I just go to our database table and you are refresh over here here you can see there is on let's start over here so right now obviously this is in the solution if I recres here here you can see that data is gone so what we'll do is that here after deleting the data we want to reload the data so for that case here you can see the mount function we send this student data all the student over here to show so what we'll do is that after deleting the data we'll just see over here dollar this Arrow sign mount we just call the mount function and it will reload our view over here without refreshing over here okay so all you have to do is that you need to call this Mount function over here and that's all so let's save it again let's see if we share and this time let's say we want to delete this data if I click delete here you can see the data is Gone without refreshing the page and if I go to my Tata stable and reload there you can see only two data is available over here so this is how you can delete data in library I hope this tutorial was easy and useful to you and I actually really appreciate if you subscribe to my channel in this tutorial I am going to show you how you can update data in Live Wire so in the previous tutorial I showed you how you can delete an in library so in this tutorial we are going to see how we can update data in library so first of all here we are going to have a update option so that we can update a certain data so let's go back to our code and here you can see uh store student.play.php here you can see the delete option for the table header so let me just copy it and paste it here and stop delete we're going to see over here update if I save it now then if I just refresh here you can see you have the update column so let's go back and here you can see the dear option having the delete button for the delete let me just copy it and paste it here and here in stop delete we are going to say update and for update we also need to mention a function over here as well so instead of delay student let's hear update student and we also required to send the specific student ID for which ID you want to update some data and will cache that ID over here in the store student.php over here we'll write a function for update so let's just write over here public function update student will give two parts bracket then with our hair dollar ID so here from here we are sending the ID so we need to catch the ID over here so we'll give to Second bracket right now and over here first of all we are going to declare a variable let's say dollar student equal to will mention our model name or table name which is student double clone find dollar ID so first of all we're going to find the specific ID okay but before that let me just refresh over here if I refresh here you can see you have the update option over here so let's say if we click update we want to get the ID first so for it uh let me just go at the top and here let me declare a variable over here we'll say public let's say dollar is underscore ID then we'll go down and here will say dollar this Arrow sign is underscore ID equal to here you can see that uh dollar student right we mentioned this dollar student over here then we skip this arrow and ID so we are basically getting this ID from the from the student table from here from this student table okay so right now if we click update nothing will happen because we did not mention anything so here you can see uh we are getting the ID and we are storing it in this case underscore ID so right now if we just see over here to Second bracket will say here dollar is underscore ID we should be able to get the ID because whenever we click this update button it is calling as this function and then we are finding the specific ID then we are storing that ID in this variable and we mention this is undescribed over here so right now we should be able to get the ID whenever we click on this update button so if I now just refresh here and let's just click on this update and here you can see okay 666 with the id6 but it came fourth time okay the reason is I write this inside the orange Loop let's write it over here let's refresh again let's click over here and here you can see six so just like the ID we can also get the name email and the images as well so let's go back and here let me just copy this and I'll paste it on two and three times so here okay let me just get the top and here you can see you already mentioned the name email name email and the image over here so we are not going to mention it again so here we are going to say name and here this Arrow sign name is this one okay and here you can see student here we are going to also mention name but this name will come from the database table which is this one okay so after name let's say here email here email as well and this one will be for image student image so right now just like the same way we get that we can also get the name and email let me just show you let's just say over here email if we save it then if we just read the share let's click this one and here you can see the email for this one is yummy at that of gmail.com here you can see yummy at the top gmail.com so but what we need is we need some input field so that we can update the data so on that case obviously we do not want to reload the page because this is liveware otherwise that won't make any sense or that on football or purpose for an using Library so what you're going through is that we are going to mention a variable over here we'll see here public will say dollar update equal to at the beginning the value for the update will be false let's say so here um we are mentioning that update equal to pause so here you can see scroll student data so inside this tip we are going to mention a if condition so we will see here at that of if to first bracket we'll say here dollar update double equal to false if update value is false then we will show the table and the insert form and the table over here so that will end over here so that if condition will end over here okay let me just write it like this uh at the rate of else and at that top end if so let me just copy this store student data from this H2 tech2 up until this table so let me just cut it from here Ctrl X and I'll paste it inside this it condition and here you can see that if condition started over here and it ended over here else and inside this else let's just say something else let's say uh update so right now if we save it then if we just refresh here and if we click update the table still would be here because uh what we want is that when we click the update button uh we on the value of this uh dollar update change pump Falls to update Falls to uh true okay so for that case here you can see this is our update function so inside this update function we are going to say dollar this Arrow sign update equal to here we'll say true so when the value of update is true then it forces the S condition so it will calculus collision and show us this update option so right now if we save it then if we just refresh here and if we click update here you can see it is showing us update and this Library tutorial is coming from the welcome.blade.php and let me just show you so that you don't get any confused here you can see Library tutorial okay let me just close it we do not regret that so right now audition is that inside this in else condition we need some input field so that we can update the data let's say here update student data and let's mention a form over here and inside this form we are going to see over here we will say wire clone submit dot at the beginning will prevent from uploading equal to we need to mention a function name which we'll write over here let's say function name will be update data okay and inside this form what we have in this or do you want to update in the update form and that will be it will be name email and the image right so here let's say level level it will be name and here we are going to say input type it will be text and we do not require name equal to this one instead of this for Library we need wire model equal to will give double quotation and this time a font name you cannot just declare any variable for wire model so here you can see that we are getting the update value name in the in this variable uh which which we have over here we have name email and emails and here you can see is underscore ID so here we need to in inside this or model we need to mention this dollar name 10 dollar email then dollar image because we have mentioned that uh same variable over here if you want to declare different variable for update you can do it over here then you need to mention it over here and then here but let's just keep it simple so here we are going to send name so let me just copy this one so after name will have the email and this one will be for the image and we also require submit button so here we are going to say email input type it will be email and wire model email and here you can see right now we have one more thing that is image so let's say here choose New Image and inside the r model will say image and this one will be the submit button so we do not required name so instead of input type it will be submit and for submit button we do not require or model so we'll just server here hello it will be update so right now if we save it then you could just refresh here and we'll click on this update option and here you can see we have the name email and the photo like this okay let me just go back and here for image input type will be file again let's click update okay no file chosen okay don't worry we think this image part later but let's just update the name and the image first name and the email first so let's go back and right now here you can see in the form or submit event we mentioned this function update data so we are going to mention this update data function about here in the store student dot PHP so we are going to server here public function update data then we'll give to fast bracket then we'll get to second bracket so right now what we will do is that we'll declare a variable uh we'll say dollar student okay let's just start here dollar data equal to student which is our table name and we'll say here Point dollar is underscore ID and then we'll show our here dollar Tata it is Arrow sign name equal to and here you can see this name now this name will come from the data is stable okay from here equal to we are going to say dollar this Arrow sign name so after name we have the email and the image so let's copy it paste it here and here we are going to say email okay for this image part okay let me just copy the code from the top about here we insert the insert the image or adding data in the database table so let me just copy this only these two line okay only this two line so let me just copy it and I will paste it here so here let me just explain it uh we are declining this variable image name then here we are saying dollar these emails just like uh the email and the name part then we are showing the image in the public folder in the public photo folder and here instead of dollar student we need to say dollar data image then equal to image name so we are showing the emails name in the image variable so after this we will just need to server here dollar Tata this Arrow sign save so right now let's save it here and here so let's just refresh over here let's click uh update for this Cola email let's click update let's say pull out 2 and color 2 let's do the image we need to choose the image font now Let's test through the emails let's say let's choose this one click open and if I click update okay unable to find lifecycle method update data uh directly on the component I think we cannot use this update data variable update automatic we need to mention a different name okay let's say Here app data and here up data I think Library these are this update data for some reason again let's click update let's click holder two caller 2 let's choose the image or this one click Open click update okay undefined variable or is underscore ID Okay the reason is we are sending the name email and the image but here we mentioned dollar is underscore ID so we also need to mention the idea over here so let's say here input type text uh it will be text and name stock name we are going to say IR clone model equal to double clone ID sorry it will be S underscore ID and we'll make it hidden let's say hidden let's save it so we'll be able to get the idea over here and okay stop Yes understood right we need to mention over here dollar this Arrow sign is underscore ID okay so let's save it here if you do not mention this T this Arrow then you'll get a error the same error let's just refresh again let's click update all our true color true let's choose the image just click update okay I think that data is updated if I just check my database table and if I just refresh here here you can see color 2 if I just refresh here you can see Cola 2 Cola 2 and there is a new image as well so if I now refresh over here here you can see the new image over here but the thing is what if we do not want to update the existing emails so for that case what we can do is that here you can see the email part so after this and this two line is for the image so after this email or before this image score this two line of code will give this if condition and inside this each condition we'll say over here dollar this Arrow sign image and this if condition will end over here and okay I forgot to give the second bracket opening over here okay let's so here uh what is happening is that we are checking that dollar this emails it means if there is any new image is chosen from here so if it's choosing only then we'll come to this if condition otherwise we will not come to this if condition will keep the existing old emails okay so right now let's save it and let me just refresh again over here and let's click the update option let's choose yummy let's say yum and M and this time we will not choose any image and we'll just click update okay quality member function store on Stream So for this case what we can do is that I think we need to uh mention it different name or model name for the image let's say here image up over here and let's go at the top and here we are going to mention that variable which is image up here at the beginning of our store student.php and let's go down and here insta download this emails will say image up and here download this image stop this image we need to mention image app means update just a short term let's save it I hope everything will work this time let's refresh again let's click this one let's say yum yum unless not choose anything let's just click update iBook the data is updated let's refresh here you can see um em and the old image is and the old image is still over here as you can see if I now refresh here you can see the name and email is updated but the world images still here but if I choose a new image okay let's choose let's choose uh let's update these emails only this image so let's choose a image over here let's choose this image let's click update I hope that is updated to here you can see the image data is updated if I just refresh here you can see the data is updated but right now one more thing that we should do is that on C update the data it should automatically take us to the table okay at the fast page okay so for that case what we can do is that here you can see that in the at the beginning we mentioned here update equal to false and here we mentioned that if update equal to false will show this input fields to student data and the table and if the update data is to update is to develop this update is true then we'll come to this else condition where we will show the update student field so right now what we'll do is that let's just go down and here you can see after the update data what we'll do is that we'll mention that dollar this L sign update equal to will make it false so if the update value is false then we'll come go to the at the beginning over here we mentioned if applicable to false will show whatever we have in this if condition so that's why we are making this update equal to false so it will automatically take us to the path space after this false okay after saving the data we'll make the this image up equal to null so let me just copy it and paste it here and we'll say Auto equal to now and let's also do one more thing that is dollar this this Arrow sign Mount to flashback so after updating the data we'll just refresh our table for the view okay then we'll make the update false so let's save it I hope this time will not get an error let's click open this okay let's just refresh here just click update let's choose the image on now first let's choose this get image update okay now let's update this so let's not this time will not happen the image let's just say jam and jam and let's click update okay the image is not updated but the name and email updated properly so I hope this tutorial was useful to you and if you have any question or any problem you can let know in the comment section so thank you for watching and I'll actually appreciate if you subscribe to my channel so stay tuned and stay healthy

Channel: Web Tech Knowledge

Views: 4,748

Keywords: laravel livewire tutorial, livewire tutorial, laravel tutorial for beginners, laravel livewire, laravel livewire crud, laravel livewire for beginners, laravel for beginners, livewire tutorial for beginners, livewire crud, livewire tutorial for beginners step by step, livewire tutorial for noob, livewire tutorial for absolute beginners, livewire tutorial from scratch, livewire tutorial in english, laravel livewire project, liveware, livewire laravel, laravel livewire examples

Id: Tlj8VBeEDdY

Length: 85min 2sec (5102 seconds)

Published: Sat Jul 01 2023