Laravel Livewire 3 Course for Beginners EP1

hey guys welcome to the first episode of our Live Wire 3 course on YouTube so in this video series we're going to be covering all the basics that you need to know to start building your own Live Wire components so for those of you guys that don't know uh what is live Livewire liver is a laurel package that allows us to build uh interactive or dynamic front-end components or uis using just PHP and without writing any JavaScript and what I mean by an interactive component I mean basically something like the search bar where we can just type in what you're looking for and the search will be happening without any page reloads right so if you want to do this using PHP or a lot of all you're going to have to basically submit a form request and then reload the page while with JavaScript you can kind of skip that step and have a much smoother user experience right and normally doing something like this would require you to either use JavaScript maybe use the fetch maybe use jQuery that's what was very popular in the good old days and now for example you use something like view or react right however what liver does is makes it very easy and very quick especially on the time side to build something like this so for simple components building a search bar they have more examples on the website which I like building forms submitting a form doing validation building interactive tables or file uploads Library makes it very easy and very quick to build those so you don't need to go and add unnecessary complexity to your application by using something like vue.js when you only need for example a simple form right it doesn't really make sense to add view.js well you're only going to be using it for one or two simple components so that's the main benefit of using library and again it's also very quick and easy to build your components it's also easier to hire new people on your team if they know PHP and a lot of all then they can build interactive components so I don't want to bore you guys to that let's get started building our first component so let's go on the documentation uh I'll have the link in description the domain is a livewire.larbal.com make sure it's the new dark themed one there is another one for Livewire 2 so don't get confused with that one uh go on the quick start scroll down make sure you have a lot about 10 or above not level 9 or above project and then PHP 8.1 which basically I think everyone nowadays should and I think everything should still stay the same even with when laurable 11 comes out but if there are any changes I will make a video about it so let's go ahead copy this uh composer require Livewire Library command I'm just going to go do that and here I have a fresh laurable Tim project I just made this like five minutes ago before starting recording and this is basically what I have you can see it's the boilerplate larval 10 project super simple stuff and I'm on larval 10.16 as of now okay and I have PHP 8.2 so I'm just going to paste this in on my terminal it's going to go ahead and install library for you Now The Way live wire works everything is done using components so for example this search bar that you have here it's a component okay if you want a table it's going to be a separate component so everything is done through components so to create our first component what we can do is type in PHP art send and there are two ways of doing this you can use you do live wire make and then type in your component name let's say I want to create a clicker or you can do it the other way around and do make a live wire okay both of them are okay you can use whichever you like I'm personally used to live by your make so that's going to be what I'm gonna be using throughout the course so type that in you can name your component whatever you like for this episode we're not going to be building anything complex just a simple component to get started hit enter and by default a Livewire will create two files for us it's going to create a PHP file under app Livewire and this is it if you have used Library 2 this folder used to be inside the HTTP folder it's no longer there so this is going to be our PHP file and it's a very simple file and it's extending the component class from the Livewire namespace Okay so and it comes with a render function and as the name suggests his job is to display our HTML right so and it's going to extend or it's going to display a view file it's a blade file and that blade file is inside our reviews folder Livewire it's going to have the exact same name clicker.blade.php and there's nothing special about this wall it's just a simple blade file okay so Live Wire front ends are basically simple blade files so let's go ahead and I'm just going to type in hello YouTube I'm going to save that in so let's go and see how we can actually display our first component because if I go back to our website we're not able to see our components so to display a component there are actually a few ways two ways of doing it but for now I'll show you guys the easy way I'll remove whatever we have here I'll also remove the Tailwind stuff so to display your component you can just use the blade directive called Live Wire just like that and then pass in your component name in our case it's called Clicker and if we go and we take a look we can see Hello YouTube I'll zoom in a little bit more so that's the first pair you just type in at Livewire there is another way and you can do a bigger than sign and then type in Live Wire colon and then your component name right so for us it's clicker okay just like that and then you can close this in okay so there are two ways it's up to you whichever you want to use both of them are going to work just fine I'm just gonna go ahead and I'm gonna stick to the first one for now and I'm going to save our page so that's it so usually when you're interacting with a component even if you have a basic application there's going to be two type of interactions you have you're going to be clicking on buttons that's one so you want to send an Ajax request for buttons or you're going to be interacting with some Four Element maybe like an input all right so for now we're going to learn how to actually interact with buttons okay it's very simple stuff let's go ahead and create a button on our page I go in on our component blade file and I'll create a button and it's going to be a very ugly button for now guys bear with me and I click on it type in Click me and what I want to happen is when the user clicks on this button I want to send an Ajax request to the server okay so I'll go ahead and I'll open up our component and what we can do is first Define a function to handle the click event so we can say public function handle click and to make sure it is working I'm just going to say dump clicked okay so right now if we click this nothing happens obviously so in order to send a request to our backend what we can do is very simple and in Live Wire these are called actions so it's basically a form of event listening if you guys for example in JavaScript you can say wire click or wire colon click and then pass it in your method name that's going to handle this right so basically it's going to be your event handler or click listener and I'm going to say handle click which is going to be basically the name of our backend method right our component method so I'll reload the page and I'll click on this and all of a sudden we get clicked right and actually if you guys are able to see I'm not sure it's going to be small for some of you guys the page did not reload everything happened dynamically live okay I'll click on it again as you can see the page did not reload and to confirm that we can actually open up our developer tools I'll click on inspect and I'll go on network and I have it on fetch xhr right I'll click on this button and you can see there is actually an Ajax request called update which was submitted by Live Wire and you can see the initiated was library.js and yeah so so the way Library works is basically it will send Ajax request in the background and you no longer need to write any JavaScript so it's very easy to do just like this guys on this episode I just wanted to show you guys how clicks work how you can handle clicks and then also show you guys how Livewire is doing all of these in the background in the next episode we're going to go a lot more in depth this at first I want was just about installing it so if you have any questions you can always ask me in the comments below and don't forget to like And subscribe so you get notified of the latest episode and also liking just the YouTube algorithm likes it so more people are gonna see the video that's all for today have a great day I see you guys on the next episode bye

Channel: Yelo Code

Views: 43,754

Keywords: Laravel, Laravel tutorial, Laravel tutorial beginners, Laravel livewire, laravel livewire tutorial, php, laravel livewire 3, livewire 3 tutorial, livewire 3 in 5 minutes, livewire 3 course, livewire 3 component, laravel crash course, laravel livewire counter, livewire 3 searchbar, livewire tutorial, livewire searchbar, livewire crud, livewire 3 actions, livewire 3 form, livewire form, livewire 3 validation, livewire course, livewire 3 laravel, livewire 3

Id: VyIjDnYviD4

Length: 9min 18sec (558 seconds)

Published: Sat Jul 29 2023