5 Laravel Livewire Projects For Beginners

hello everybody my name is zura and i'm the co-colleague today we're gonna build five laravel live wire projects but what is actually laravel livewire livewire is a full stack framework which gives the possibility to build dynamic interfaces without leaving laravel so you basically write php code which behind converts into javascript and that gives you possibility to write your dynamic code and it also gives you possibility to reduce the time you need to build your application like if you are using react or view you probably need to build an api and then build the interface on top of the api in laravel live wire because you do everything in php you don't leave the laravel area you'd have much you need much less time to build the same things all right let's have a look at the demos what we are going to actually build okay the project number one and you know what we're developers we start counting uh from zero why don't we see first project number zero okay okay so let's click on counter that's a project number zero the simplest application you have seen probably before in other programming language if you haven't seen this in a laravel so we have plus and minus buttons and the counter so i click on plus the counter increases i click on minus the content decreases and as you can see the page is not reloaded that's very simple application but very hard to do in php you cannot actually do this in php if you don't reload your page and in this case we are clicking the commenter increases but the page is not reloaded that actually is done in javascript but we don't write a single line of javascript code everything is done in php using laravel live wire okay let's move on on the second project which is calculator so we have two inputs for the number one and number two and we have drop down for the math operation okay let's just write 14 plus 13 click and 27 or multiply and we have some number or percent and we have some number okay so this is done in laravel live wire the next one is the application which is done billion times uh trillion times i don't know very simple to do application but in this case we are using laravel live wire and the projects are the to-do's are saved in the database so create new to-do you can hit enter or click the add the new tool is actually added so you reload the page and the content is there let's mark this as completed reload the page and the content is there okay and we can of course delete some to-do's let's go on the cascading drop-down like that's a very common problem in my opinion on every website not a problem but common task so you have a cascading drop downs like in this case we have continents and we have countries so when you choose continent it shows a loading indicator on countries it loads them and displays in this demo i don't have countries actually properly assigned to continents so probably you will see countries from other continents into asia and countries from other continent into europe but that's just for demonstration purposes okay but this is how it is done so when we change the continent the request is made and then it updates the country but that's very very easy to do in laravel livewire and we don't write again a single line of javascript here the next one is product search in this case we have data in the products table in the database and we just output the tables we have pagination as you can see we can navigate between pages and the page is not reloaded that's done using ajax using laravel livewire and we can type some text right here now hit enter or just blur and it filters the products based on my keyword okay and the last project is image upload so we have already uploaded images and we have possibility to upload a new image as soon as we upload the image it basically gives us preview and we can click the save photo and the new image will be added immediately right here again that's very dynamic small but dynamic project and that is done without writing a single line of javascript basically any project you see right here is done without writing a single line of javascript and you know what we have seen already five projects actually six one starting from zero and i wanted to do something extra more than five so i created a bonus project for you let's have a look so here we have the registration page we have very simple form with four input fields and we have a radio button to choose whether i'm registering as a customer or vendor if i'm registering as a vendor i have to prepare company name and vat number as well okay when we are on the customer the validation field only happens on those four fields i click and we see the validation right here when i'm on the vendor however when i click register all the fields are actually required and the validation is real time it means that if i just start typing right here then the validation message disappears and finally when you fill up the form and click register we have this success notification and that is done using livewire session flash flash messages all right if you want to see the repository for these five projects plus something zero and sixth you can check the projects right here livewire projects i have right here some demo pictures as well and if you find that useful up i will probably add more projects in this repository or you can add more projects in this repository please consider uh just improving this project okay writing projects sending pull requests i will be more than happy to accept your pull requests and if you want to support my channel first please hit the like button subscribe to my channel if you are not yet but if you want to do more than subscribing and liking the video you can find out my donation pages patreon and the other one which is buy me a coffee okay let's actually start building this project okay let's start everything by creating new laravel projects i'm going to open cmd navigate to the folder i want to create my project in and i'm going to run composer global require laravel in seller so first i want to install laravel in seller and then i'm going to create projects using my laravel installer okay laravel installer is already installed now i'm going to run laravel new and the project name i'm going to call this livewire projects hit enter this will take few seconds or minutes depending depending on your internet and many other things and i'm going to actually pause the recording and get back when this is done okay the project was successfully created next we're going to run php artisan key generate dash a in a n s i hit enter excuse me when to first navigate into live wire projects and then run php artisan key generate a and psi and the key was generated now i'm going to close this and let's open our project using your favorite text editor vs code or php store or something else if you use i use php storm i'm going to open it with phpstorm but you can open with vs code it will be pretty straightforward okay my project is opened with php storm now i'm going to bring up the phpstorms integrated terminal you can bring up your vs codes integrated terminal and i'm going to run right here and we're going to install live wire basically so uh composer require live wire slash live wire and i'm going to hit enter this will take few seconds okay livewire was successfully installed you can have a look at the full output and then we can already create livewire projects but first let's include the livewire styles in javascript in our layout let's go under resources views and we have only one one view right here that's a welcome blade i'm going to actually create a layout first let me create a component php artisan make component up layout that's the component i'm going to create hit enter the component created successfully let's go under up view components and up layout and i'm going to rename this component folder and call this layout and we can just call this up blade php so now in the up layout component file we're going to change the path to the file will be layout up and now let's go in the welcome blade and i'm going to copy everything in the up blade and where we have this content inside the body i'm going to actually output slot and in the welcome blade i'm going to delete everything above what is the part of the layout like this and i'm going to use x up layout just like this okay so i save that and now let's actually bring up the artisan server so i'm going to open the terminal and i'm going to run php artisan surf hit enter the serve is actually running let's check in the browser reload the page okay here is our application up and running now let's create our first live wire component let's open the uh our editor and i'm gonna open new terminal and i'm gonna run php artisan make a live wire and we have to specify the component name the component at index 0 we're going to create zeroth component is the counter we're going to hit enter and it's going to create first it's going to ask if we would to start the project i actually already started the project so i'm going to write no here and the component was created basically it created two files first is the file under app http livewirecounter and the second is under resources and we use a livewire counter okay this is these are the two files we are going to work but we have to do one last thing in the general layout up layout we have to include a live wire styles and live wire scripts so right here i'm gonna type we have two ways to include live wear styles and scripts first is to write live wire styles right here or the second is to write live wire styles using tag approach okay i prefer the second one so i'm gonna leave the second one and we have to include scripts as well so before the closing tag of body i'm gonna write live wire scripts okay now let's open our counter and let's start writing code here so first i'm going to create public property right here which will be count and i'm going to assign 0 to that then i'm going to create two methods one for increment second for decrement and in the increment we're going to simply increase the count with plus plus and in the decrement we're going to simply decrease the count with minus minus we have our counter component ready now let's go in the counter blade and create styles right here so simply i'm going to create two buttons button which will be for increment and another button which will before decrement and we're going to have single input not input but we're going to simply have a span and we're going to output our count so basically in live wire blade file we have possibility to use the methods and public methods and public properties of the component because we have right here count as a public property we can simply output it right here and because we have public methods increment and decrement right here we can use that method on the buttons but we simply have to specify wire column click whenever click happens says this wire column is actually necessary whenever click happens on that using live wire we have to call increment method and whenever click happens on the second button we have to call decrement and it is as simple as that so i'm going to save this and now let's have a look in the browser i'm going to reload the page well actually we don't use that component so let's actually go in the welcome blade and right here instead of that content i'm going to use our live wire counter component and we have to use the counter component in the following way live wire column counter okay this is as easy as that we save that and let's have a look in the browser and here we see so we see two buttons and number so i click the plus button the counter increases i continue clicking on the plus button i click on minus and the counter decreases okay what happens let's actually inspect and understand how that actually works by the way if you want a full live wire course within details and more projects please hit the like button and leave a comment down below definitely tell me if you want a full live wire course with more projects okay let's reload the page and let's click on the plus button what happens whenever we click the plus button the ajax request is sent to the livewire controller livewire module when we click when we increase or decrease basically whenever we do some action which is done through live wire okay and the calculation of the increase the increment and decrement is actually happens on the php side but that's done so seamlessly that we don't know that's done on the back inside so it just increases and decreases so right here if we just inspect the uh request i don't want to go into like that much details because i assume you have a little bit of understanding of live wire how that works and if you have a look in the uh payload this is the um this is the whole payload which is sent through the from the front end we can have a look view parsed if we go in the updates we see uh what method we call so we call a decrement method it is mentioned right here and in the preview we get the updated um server memo we have the data account equals zero so we click right here and then we get the count equals zero right here okay so all these things are done through livewire now i want to install talon css in this project and make the buttons a little bit more nice so let's open phpstorm and let's clear up everything first remember one thing the latest laravel projects does not come with laravel mix anymore it does come with a fight and it's slightly different how you configure invite so first we have to run npm install to install all the dependencies we have in the package.json right here it's going to take a few seconds okay we have that now let me install talon css so let's open the browser and just type laravel tailwind css it's going to open the very first link is what we want we're going to copy that npm install and paste this in our project and we have to generate the talon css config as well so i'm going to copy this npx tile and css init and i'm going to paste this right here as well and this example is a for laravel mix this is what something what we don't want however i'm going to copy the content i want the content let's go in the talon config and replace that content and we have to create right here post css config as well so right click post css.config.js and here we need um the following code module exports plug-in tile on css and auto prefixer and we have to uh so we actually installed talon css and we have to run npm run div that's going to start the vite server on localhost 3000 and it's going to start serving css and javascript files and we have to go into layout where is up blade and we have to include white styles in javascript so here before the live wire styles i'm going to write white and i have to specify here an array and i'm going to specify two resources resources slash css slash app css and resources slash js up js okay and the last thing will be to go in resources css up css and put here talon css talon css directives so let's just copy and paste this that right here okay now let's open let's open browser and reload the page and we see that the buttons don't have any styles anymore let's actually add some styles to the buttons let's open counter blade and right here i'm going to add class and i'm going to paste a few classes and i'm going to explain so we have vertical padding horizontal padding background background on hover borders rounded corners and text white and let's add this right here as well make sure whenever you change your blade files make sure you have npm run dev running and the wide server is running because that's going to build the final talon css files okay so we save that and have a look in the browser refresh that and we see that plus and minus icons right here let's actually put the this in the center to put this in the center on the main div we add the following classes let's justify center we give it a padding and gap and item center as well so i'm going to save that and have a look in the browser okay this is our counter we click the plus button increases click the minus it decreases okay let's create a next component which is calculator i'm going to close all the tabs we don't have to do anything in the layout anymore and let's bring up the terminal and i'm going to create new terminal and run php artisan make live livewire calculator hit enter and let's open those two files calculator which is coming from up http livewire and the second is calculator blade which comes from resources views live wire and let's work right here first we're going to define a few properties right here we need number one property number two property we need action which will be plus minus multiply division and percent we need result the final result where that should be saved and i'm going to also create one additional property for whether the equal button should be disabled or not if we don't write anything in the inputs the button will be simply disabled now let's create methods down below i'm going to create calculate method inside which i'm going to first take those two numbers and cast them on a float because they might be strings then i'm going to write if statements if the action equals minus then we subtract if the action equals plus then we add if the action equals multiply we just multiply if the action equals division we divide and if the action equals percent we calculate the percent we have our calculate function ready then i'm going to add one more function which will be updated hook whenever something is updated some property is updated in this live wire component this method is triggered and you will also receive property right here which property was actually updated and we are checking right here if in whenever something is updated basically whenever number one equals an empty string or number two equals an empty string we set the disabled to be true otherwise we set the disabled to be false using this approach we will be able to disable button in the blade file let's go in the blade file and i'm going to actually create divs with the talon css classes to center everything flex flex call item center create another div with flex and padding and gap as well i'm creating three horizontal components so first we have the number one and it is a normal input with type number and wire model what is that wire model that is a two-way binding between the number one between the basically input value into a php property okay whenever you type something in this input the number one property right here will be updated and whenever you assign something to this number one property from this component it will be updated inside the input and we have right here placeholder number one as well then we have select which has a fixed width and wire model on action okay and of course we need options right here whenever we choose the option the action property right here will be updated next we have number two with the wire model and placeholder and down below we have the button equal sign whenever we click on that button it will call calculate method from the component this method okay which will finally uh calculate the result and down below we output simply output that result in a slightly larger text and let's add some classes to this button okay padding background text color for disabled we give also cursor not allowed and the opacity 90 okay and we also add right here check if the button if the disabled property is set true we add the disabled property to the button okay it is as easy as that and we save everything and now let's have a look in the browser well we don't actually use that component let's open now roads file web php and right here i'm going to create a root so root for get when we access calculator here we can create new view file and use that calculator component in the view file just like we did in the welcome so if we open welcome we see that we are using that live wire counter okay inside the welcome blade we can do the same thing however i want to show you a second way how you can actually use the live wire component you can directly connect road to live wire component in this case we want to connect that to the calculator component so up http line wire class whenever we access the following road this component will be triggered and it will be simply outputted in the main layout okay so we save that and have a look in the browser so we have to access slash calculator hit enter and we have small error and the error basically is because the view file right here the folder file should be called layouts layouts are played and let's open up http uh sorry up view components up layout and we have to change the layouts dot up and that's the default location for live wire so now we change that into layouts the folder now let's reload the page and we see calculate however some styles are missing on the input that's because we have to installed talon css forms plugin so let me actually search for telling css forms let's click on the very first link and we're going to copy that open our php storm bring up the terminal and paste that so we have to install that and then we have to add this in the talon config.js so if we go on the left side open tablet config.js and in the plugins we paste it now this will add additional styles let's let's have a look in the browser reload the page and we see our inputs are now styled properly okay let's change this into three this into four and click equal sign and we see seven right here let's minus subtract minus 1 multiply 12 divide 0.75 and percent is 0.12 okay so we created our calculator and let's let's actually create a navbar where we link to the proper proper applications let me actually open up blade php and right here after the opening body tag i'm going to copy and paste the nav bar so here we paste that format the code and let's have a look so the first one is the counter so we basically have enough with a tags right there however we have added some classes talon css classes to make it nice we have of course the href and we have the following request wrote is so basically using this approach we calculate which application is active and we mark that page as an active in the in the nav bar as well okay however every route needs name so if openweb right here we have to give it name counter let's give the calculator name calculator so we save that and now let's have a look in the browser we reload the page and we see number and the calculator is active so if we click counter counter we don't have actually slash counter so let's go in the web and maybe change that into counter and now we see the counter is active calculator and counter let's actually now create the third or second i don't know application which is to-do list let's bring up the terminal and we're gonna run php artisan make live wire to do list and hit enter it generated two files now let's actually close everything and open those two files to do list and to do list blade file and let's delete this comment i'm going to create also database model for to do to do item and yeah and migration so let's run php artisan artisan make model to do item and i'm going to generate migration as well hit enter and now let's open migration file create to do items and i'm going to add two properties right here first will be string which will be actual with the length of 2000 and the second will be boolean which will be completed whether this studio is completed or not okay so we have that and we have to now connect to the database as well so let's open dot en file and i'm going to change the connection into sqlite and we can comment everything else right here we don't need that and we have to create a file under database folder right here so right click on that new file database dot sqlite so we are basically using sqlite database now let's bring up the terminal and run php artisan migrate hit enter migrations have been run the two items we are also created awesome now let's close the en let's close the migration and we can focus on the component okay first we have to import the modal eloquent model modal to-do item which we're going to use in this component then i'm going to define to do's property and i'm going to define to-do text okay and we're going to use that right now then i'm going to create use a mount function the mount function is used livewire automatically when the component is mount mounted to the blade file and it's called only once okay when it is mounted then whenever the component is updated this is not called anymore and whenever the component is mounted we're going to select to this that function will be created right now down below i'm going to create that select 2ds and basically i'm going to select all the to do items sort them by creating a descending and assign into to do's then i'm going to create add to the function inside ed to do i will create a new to-do item i will assign this 2d text which will be this one and this will be bound to the input for to do and i'm going to set completed to be false finally i'm going to call save and then i'm going to reset the 2d text to be an empty string and i'm going to reselect all my to-do's so that the newly created to-do is selected and it is at the top because we sort by created descending then let's create toggle to do which will which means that when we mark the to do completed or uncompleted so we get the to do item id so we select the to do by id if the to-do doesn't exist we immediately return if the 2 exists we said it's completed to be inverse of what it is right now and then we call if this is for example if this is true the completed will become false if this is false the complete will become true then we call save and finally we're going to reselect our 2ds again because we need that completed state to be inside the 2ds updated in the ui and finally we need delete to do we accept the to do we select the to do by id if the 2d doesn't exist we return and then we call delete and when we call delete we reselect all our 2ds again okay so that's basically all in our component let's go in the blade file right here i'm going to add talon css classes flex flex call with fixed width and margin horizontal margin auto and pointing vertical 16 okay then we i create another div which has gap and space between and i create that input which has a wire model on 2d text and this is the 2d text right here then we also listen to key down enter okay whenever we hit enter on that input field it's going to call aid to do this method we have a placeholder and flex 1 tile and css class then we have right here button and whenever we click on that button it will call added to do as well and we have talon css classes as well to make this button nice down below we have a div with a vertical padding inside the div we check if the count of two does equal zero we simply write there are no to do's and down below we start iterating over our two do's we have for each to do we have flag skip for space between item center padding vertical and we have input type checkbox for each to do and whenever the checkbook changes so we listen to change event using a live wire we call toggle to do and we pass the to do id so whenever you want to pass the id in the toggle to do you simply use that curly braces normally okay and that will call this toggle to do with the id okay down below we have the label we output the two actual to the text and down below we have the button we listened that's a delete button we listen to the click event on that button using livewire and we call delete to do and we pass the id so this will call this method delete tutu and finally down below uh actually we need to listen to uh whenever the two is actually completed we have to uh mark this checkbox as checked and we have to add a line through on that to the label so we check if the to do completed is true then we add a line through css class on that label and we also check if the to do is completed we mark the checkboxes checked and down below i have an svg icon on that delete to do that svg icon is taken from hero icons so if you go in the hero icons search for trash right here and just click on copy svg that is the exact svg i have right here okay so we save that and we can have a look in the browser however let's open web php where is it web.php web.php and add right here new root to do list which we'll use to do list component and the name for that road will be to do dash list so i save that and now let's have a look in the browser reload the page and we see our to-do list component it is also active in the navbar so let's create new to-do and hit enter okay the to-do was edit another to-do let's click the button teddy was edit let's reload the page and to-do's are there because they are coming from the database okay and new to do is add it at the top and let's actually mark this studio as completed now we have that line through so if we reload the page this to do is still there and marked as completed let's delete the new to do and reload the page the new to-do was deleted so the whole crowd for the to-do actually works successfully and we can move on the next project which is cascading drop down let's bring up the terminal and i'm going to generate that new component php artisan make live wire cascading drop down i'm going to hit enter the component was generated let's add right here root which will be cascading uh drop down and i'm going to give this right here name cascading drop down actually what name do i use in the layout let's open up blade php we have cascading drop down yeah i'm using this cascading drop down name right here so we do it like this we have uh we have to change this into cascading drop down and we have to also generate two models one for continents second for countries and we have to enter some seed data for that models okay so let's clear up everything and i'm going to generate two models php artisan make model continent i'm going to generate migration i'm going to generate factory um and yeah i don't need seeder i can do in the default database either so i'm going to hit enter on that and i'm going to generate a country model as well let's generate country dash mf hit enter now let's open those two migration files and write migration so create continents table and another one will be create countries table okay and let's start with the continent on the continents we add new property called name let's open countries and on countries we add name as well and we add foreign key to continents okay now let's open database data base cedar and we have to generate continents and countries from here i'm going to create a variable for continents and add five continents right there just for example and then i'm going to start iterating my continents array and i'm going to run the following comment up models factory up models models continent factory create the given continent and then for each content we create i'm going to go to the countries and call save many and giving right here the country factory make okay and we have to go in the continent continent model as well where it is right here and i'm going to create a function countries and we return this as many country class okay that's basically all so using this approach we create five continents and for each continent we create um we create countries now let's go in the country factory and i'm going to define right here those fields so name will be fake country and continent id will be fake random basically number between number between zero and whatever is the continent continent count okay so let's bring up the terminal and we're going to run php artisan make uh well actually we're going to run seed so db column seed hit enter and we have an error no such table consonants yeah because we haven't run immigration so php artisan migrate okay continents and countries we are created now let's run dbcd and database seeding completed successfully and i'm going to double check what's the content in my sqlite database so i'm going to bring up the database tool of phpstorm go and add sqlite here it is so and i'm going to choose the location for the file that's going to be so we have i have the project in the exam directory ht docs livewire projects and database and databases collide is the file i want i'm going to click ok and let's expand everything and we have right here continents so those five continents are created and we have countries and as we can see there are a lot of countries actually okay 105 countries created why are there so many countries created if we look at the database cedar we shouldn't have that much countries that many countries created but uh that's a just a different topic okay so the main thing is that we have continents and countries now let's open our cascading drop down component and work right here i'm gonna actually close all the other tabs just create that cascading drop down here and cascading drop down is a blade file okay let's start from here and first i'm going to create one div with talon scissor classes and fixed width inside there i'm going to create one select which will have a wire model on selected continents so we're going to have selected continent property in the dropdown class and i listen on change event and i call change continent method from the cascading drop down inside options we're going to have one option which will have value -1 please select continent and then i'm going to start iterating my continents array which will come from the cascading drop down component again and i'm going to create options where the value will be continent id and the display text will be continent name down below i'm going to create one div which will have display flex inside there i'm going to have select in this case wire module will be selected country and then i'm going to have again option with a value -1 please select country and then i'm going to start iterating my countries and display i display the country name and the value will be country id i'm going to also add right here a paragraph which has wire loading so this wire loading this will be active whenever the component is loading in an updating phase and it will display loading these three dots right here and i'm going to add absolute left stop so that this will be this will have position absolute and it will be over the select okay and just like that we have the blade file ready let's go in the cascading drop down and here i create a couple of properties continents countries we need selected continent and selected country and i create mount method as well inside which i select all continents i have okay and down below i have a method change continent and whenever this happens i check if the selected content does not equal -1 then i select countries based on the selected continent id and assign these into countries it is as easy as that we don't need to do anything else so now let's go in the browser click on this cascading drop down and we see these two drop downs so i click europe and then the countries are displayed are basically fetched africa look at this so we change the continent and the countries are updated based on that the the country doesn't actually match to the continent name so for example we don't have switzerland in south africa africa but because we have seed data it doesn't really matter the main here is functionality and the functionality is cascading drop downs okay so i choose the continent and we see loading by the way right here and let's actually increase here the time slip one reload the page and whenever i choose urap we see loading for a long time and then we can choose the um we can choose the country if we want we see loading right here as well okay that's awesome let's move on the next one which is product search okay i'm going to close these two files bring up the terminal and run php artisan make live wire product search i'm going to hit enter let's open web php and right here we need to specify products the component will be product product search where it's where is that product search the component was actually created product it doesn't find that let's go in the app http livewire and i don't see product search the component is there so let's right click and sometimes page form has problems so here it reloaded and now it sees product search and the name will be products i believe that's the name we can check again up blade what's the name for products is products okay we have to create model end migration as well so php artisan make model product we're going to create migration and factory as well so i'm going to hit enter now let's open now create products okay again it has problems in understanding that the file was generated so we don't see it create products right here so right click and reload okay let's open and let's add right here uh let's actually open product cedar as well product factory excuse me so right click and reload product factory okay let's create migration first now here i'm going to add string image on the product i'm going to add title i'm going to description and to 818 price let's open product factory and i'm going to generate a random data for image which will be fake image url we're going to have some random text in the title more random text in the description and we're gonna have random float number between five and one thousand that's gonna be price let's actually open database seeder and we're gonna create products so i'm going to actually run product factory 100 create and we're going to import that product again the product model let's right click on the whole project and reload the from disk okay now it understood that there is a product model and let's bring up the terminal and i'm going to run php artisan well because we have already run cedar that's going to create more continents and countries we can either manually delete the contents and countries and then run this or i'm going to actually rerun everything so php artisan db or actually migration colon fresh so migrate flesh sorry great fresh this will drop everything and rerun and i have to run migrate fresh with dash dash seed as well so this will drop every table rerun migration and run seeds as well and setting database completed successfully now we can check that we have here products table and there we have 100 product items okay so far so good uh we don't need database cedar we don't need product factory um we don't need anything we have the we don't need this one as well but we can have it and now let's open product search and open product search blade file as well and let's delete this comment let's start with the product search so first i'm going to add right here user trade with pagination okay and i'm going to explain what this actually does then i'm going to create a string for search and i'm going to create a protected query string which is uh which is basically the components livewire components property this will watch the qr string search in the url and basically whenever we change something in this search it will affect any url and inside render i'm going to basically make a query so product query and i'm going to check if the search is available if there is something in the search we are going to add where conditions on that query we are title like the search keyword or description like the search keyword and then down below in this view i can pass the products so remember so in other components we had public properties and that public properties are available in the view yeah and that's actually true and the search will be available in this product search played as well but we can pass additional properties from that view and that will be also available so in this case we're passing products and it will be query paginate okay and down below we'll listen on updated hook and whenever the property that was updated equals search we reset the page and reset page comes from that with the pagination trait okay whenever we are on the page four for example and we change something the page number will become one again and finally about we import the product model and we import the live wire with pagination let's go in the product search and right here i'm going to tile on css classes on that div create another wrapper div and inside there i'm going to have input type text with wire modal search but in this case i add a lazy modifier and that means that this will be updated whenever i blur on that input or whenever i hit enter okay it will not update it immediately while i'm typing because i don't want that request to be sent every time i'm typing something instead whenever i hit the enter or iplr and we have placeholder down below i create table with t-head and with th we display id image title and price and then we have tea body and i'm gonna start iterating over my products and the products uh these products will be basically which is sent from here okay and i can iterate my products and each td will be for id image title and price and we update all of them and down below the products basically support links method and we have uh the product links and just like that we have the product search let's open now the browser go in the product search and we see right here and look at this in in the url so we have search equals an empty string that's done by live wire because we're told that listen on the search keyword and effect in the url so if we change something in the url test for example test and hit enter the test is written here okay and if i type right here like lorem hit enter then it is in the url and the filtering also works let's have a look okay so filtering works uh actually fine so we can actually copy this and paste here and we see this product only this product matches the title was found however there there is a problem regarding pagination and that is because of the styles for the pagination is not included in the final build for towel and css talon css basically watches only those blade files which is inside the project it doesn't watch other files so we don't have the pagination blade file inside the resources and in this case i'm going to publish those blade files if you go in the live wire documentation go in the docs and search for pagination here we have that the thing what we need to do is vendor publish so down below where's that yeah we have livewire publish pagination so if we copy this and open the terminal and paste and hit the enter it's going to publish the pagination blade files under vendor live wire so if you go in the resources views and let's reload the project here we have vendor live wire here we have bootstrap simple bootstrap talon css and simple talent okay we don't need bootstrap we can immediately delete them however the talent blade is does contain all the pagination um html and css what we need so now already if we have a look in the browser we should see proper styles you see because white which is listening to the files detected new files and understanding what classes we have been using there and now proper styles are applied now the first link is open if we click on the second we see the url has to and the pagination also changes and that is done using live wire however for me the active page style is not pretty clear so i'm going to scroll down and check find the place where is that so if the page is current page then right here we see we have text gray 500 i'm going to change this text screen to 100 and bg white changing to bgray maybe 800. so i save that reload the page and now this is my active page okay and the publishing uh gives you possibility to easily customize the pagination as much as you want and we have now here pagination and filtering as well so i'm gonna copy this paste right here and we see this only one item let's look for many items here we have 64 results for that word and whenever we are on the third page and search for some word the pagination is resetted to the first one also which is done by us from here okay awesome what is the next the next one is image upload let's actually do that let me actually close all the tabs and bring up the terminal and run php artisan make live wire image upload and hit enter let's duplicate right here url that's going to be image upload the component name will be image upload and the name will be image upload again phpstorm doesn't understand that i added new files there so we have to right click and reload that doesn't happen very often for me to be honest that's a very rare case maybe restarting the php storm will fix that problem okay let's go in the image upload and i'm gonna also open image upload okay let's delete this comment and let's work right here so first i'm gonna import few things i need uh one is trade with file store with the file uploads second is facade storage okay and i'm gonna use that with file uploads on that image upload i'm going to create a public property image right here which will be an array basically of temporary uploaded file okay then i'm going to create a method for save and that save method will have a validation there as well so it will first validate that each image is an actual image with maximum of one megabyte and then down below i iterate over my image and store them inside public folder okay this will save with a temporary name however if you want to save image with its original name you can call on that image get client originally okay you can do like that not actually this image this is kind of wrong it should be image dollar sign image get client originally okay down below uh inside the rendering view i'm gonna pass images which will be all the images which is available on the file system so i'm gonna basically get all the images from the public folder because we save all our images there and then i'm going to filter those images and take only the files which have extension png or jpg or jpg or g4 webp and then i'm going to map each file because that's going to give me a file path i'm going to map each of them into a url okay and just like this we have our component ready let's go in the image upload and right here i'm going to create a form which has wire submit when the submit happens and this dot prevent will prove a call prevent default for me okay inside there we have input type file with a wire model image and with multiple as well and if that image exists this image basically whenever we choose a file we create preview inside preview we iterate over our imp or our image and create image tag where each image has a temporary url and whenever you we choose images that that will be displayed the the images will basically upload it immediately whenever we choose them however they are at that stage in a temporary location okay and then we when we hit save they will move in a permanent location and down below we create the span for errors if there is an error for image we just display them and down below we create that submit button and we add some talon css classes to that and at the very bottom we create a div for existing images so we get all the images and those are the images passed from here the existing images and simply those images are displayed here with the following dimensions and object cover so we actually save that and let's have a look in the browser so we go in the image upload and let's choose an image let's choose only one and as you can see the preview is immediately available and i click this save photo and the image is actually broken so we don't have that why so let's inspect this and have a look it's coming from storage yeah i know the reason because we don't have a symbolic link to our storage so if we open the terminal we have to create a symbolic link let's actually search for laravel storage link and go in the file storage and the let's search for link php artisan storage link this is the comment we need to write php artisan storage column link and this will create now a link from the public directory where is that from the public storage the public storage basically will be linked into storage up public okay and our uploaded image is saved inside storage up public right here well we actually don't see that why yeah we will we will have a look and i think we have to reload our project that's kind of annoying already here is our image and if we go in the storage up public here is our image as well okay so now let's have a look in the browser so we reload and we see our uploaded image now let's choose multiple images click open we see preview of two images and save photo and down below we see all of them and if i reload the page we see all images coming from the disk okay that's awesome and let's do the bonus one so the sixth one which is our seventh one i don't know which one is that uh which is uh registration form validation okay now i'm going to run php artisan make live wire register for okay oops four register form just hit the enter on that actually already generated and now let's open register form and register form blade right here let's start with the component okay in the component i'm going to define the following fields email password first name last name rule company name and vht number role by default will be customer down below i'm going to define protected rules and that rules is a built-in property okay livewire will watch that rules inside the rules i'm going to define first name last name email and password all of them are required with their validation rules and down below i'm going to define company name and vh number which are required if the role equals vendor okay and down below i'm going to create a submit method inside which i'm going to validate and if the validation fails this will throw an error proper error and the error message will be displayed however if it passes then we have a session flag we set the following message in the session customer was created and down below we reset all the properties first name last name email password all of them okay and down below we'll listen to updated hook and whenever update happens on a single property will validate only that property and this will give us real time validation okay now let's go in the form and right here we have a simple form we listen to a submit and we call prevent as well and this submit is called whenever submit happens inside there we display if there is a message in this session we display that message in the green box down below we have a vendor customer radio list so right here we have the input type radio value is customer role is name and wire model is for role that's for customer and second is for vendor and down below we have an input type text for uh wire model first name and right here i'm using the bounce okay and that's really handy also the bounce modifier on livewire so this will give me a possibility that the first name will only be updated if i don't type for 500 milliseconds so if i'm constantly typing it does not update the first name and that will that's kind of uh optimization okay it's not it's not going to re send requests every time when i make some changes okay and i also have right here i also add error class so if the first name has error then i add border rate 500 class on that input and down below now we also display the message if there is an error on the first name and we do the same thing for last name pretty much the same thing and down below we do the same thing for email we display error message and down below we do the same thing for password and down below now we check if the role equals vendor we display the company name and we display message and the error as well normally and we also check if the we do another check if the role is vendor we display vat number as well with error message okay and at the very bottom we have this submit button with talon css classes okay we save that let's open web and i'm gonna hit right here a register root register form and that is register register so i save that and let's have a look now in the browser go in the registration and we see form registration form not found okay that's my bait so this view file is register form register form so i reload the page and here we have that okay so customer vendor so let's actually hit register right now and we see validation errors immediately okay as soon as i start typing the error message disappears okay as soon as i start typing and it doesn't satisfy another rule the message is updated okay test okay example.com password something i click register and i'm registered now let's click register and go in the vendor and i'm going to click register right here as well now all the messages are validated i'm going to fill up the form and click register and we see that flash message all right that concludes our five plus projects on uh livewire for beginners if you enjoy the video hit the like button and subscribe because that means a lot for me if you have any comments please let me know in the comment section down below if you want to see a full course on live wire with more projects also leave a comment down below and just tell me about this okay thanks for watching and yeah see you next time

Channel: The Codeholic

Views: 45,164

Keywords: TheCodeholic, laravel, laravel projects, laravel livewire, laravel livewire tutorial, laravel livewire crud, laravel livewire project, laravel 9 livewire, laravel 9 livewire crud, laravel 9 livewire projects, laravel calculator project, laravel todo list, laravel livewire todo list, laravel livewire todo app, livewire todo list, livewire image upload, livewire form validation, livewire tutorial, livewire projects, 5 livewire projects, 5 laravel livewire projects

Id: aUyZWth4PUQ

Length: 73min 24sec (4404 seconds)

Published: Mon Jul 04 2022