Laravel Livewire v3 Course for Beginners - Laravel Livewire v3 Crash Course for Beginners

thanks to hostinger for sponsoring this video are you looking for a reliable and affordable VPS hosting hostinger offers an exclusive Black Friday deal under VPS subscription plan you can get a 12mon VPS hosting plan for just $6.99 per month which is a whooping 63% discount but wait there is more you can also use my code which is code with Ari to get 10% discount on top of the discount that hosting or offers don't miss out on this amazing offer and take your website to the next level with hosting or powerful VPS hosting what's up developers this Dar here and welcome back to a new video series on my channel where we're going to have a look at probably the most requested video series on my channel which is larel lifewire now lifewire is a powerful fullstack framework that allows developers to build Dynamic web interfaces it is built using larel and Aline JS for me as a backend developer using lifewire is a huge plus because I don't need to write a lot of logic as you do need to do with Frameworks such as react or view one of the key advantages of using live warrier is its ability to handle server side rendering which means that the UI components are rendered on the server and sent to the client as HTML this not only improves performance but also enhances security by reducing their risk of client side vulnerabilities now most of you probably know that life fire integrates seamless with LL if you think that view and react integrated easily you probably haven't used lifewire before lifewire Leverage purches robust features such as routing authentication and database management this makes it a perfect choice for larel developers who want to build Dynamic web interfaces now I did mention Alan JS a moment ago so let's talk about that for a moment Aline JS is a JavaScript framework that works alongside larva lifewire it provides interactivity to lifewire components without the need of writing separate JavaScript codes it is lightweight and it's very easy to use one of the key key reasons why iPhone JS is powerful is its Simplicity it allows developers to add Dynamic behavior to their UI components using only HTML attributes which is also the power of Life wire this means that you can add features like conditional rendering data binding and event handling directly in your HTML markup one personal Advantage I think that Al and JS has is the fact that it has a small file size making it FAS to load and perform it focus on providing the essential features needed for interactivity without adding unnecessary complexity now most of the stuff that I will be doing will come from the documentation on life wi's incredible website but before we can start the installation process we need to install a larval project because Livewire is installed inside a default larel project so let's navigate to the CLI for a moment and let's create a new larvel project through composer so let's say composer create D project-- prefer DD larel D larel and let's name it hostinger lifewire once we had enter give it a moment because our project is currently being installed all right now let's change directories into our project by saying CD into hosting our life wire now before we perform any other command I want to quickly open my project inside PHP storm so pause the video and I'll see you back once you have done that as well now the reason why I wanted to open my project inside PHP storm already is because I want to show you something inside the composer. Json file once we open it and try to search for lifewire you won't find anything this means that we need to install lifewire as a composer dependency package so let's navigate back to the CLI for a moment and let's perform a clear right here we're going to perform the composer require command it's a package created by lifewire where the package name is life wire as well once we hit enter you'll see that it's pulling in the composer package all right let's navigate back to PHP storm for a moment and well I can already see that lifewire has been added right here where the version is compatible with version 3.0 or anything higher which is basically being set by the carrot right here which indicates that minor and Patch versions can be updated automatically when running the composer update command inside your project but major version update will not be automatically installed to prevent breaking changes now the magic of lifewire needs to happen inside the Resources directory well basically the view part of it and what you want to do right here is basically open the views directory and create a new application structure so in My Views directory I want to create a new subd directory named a layouts and in my layouts directory I want to create three files the first one will be app . blades. PHP that was a typo give me a moment all right the second file will be nav blades. PHP while the last file will be named footer. blades. PHP now I have created a GitHub repository let's open it for a moment where you will find the templates inside the resarch directory views directory layout where you will find app fter and nav so what I want to do is to B basically copy them real quick so this is my app page inside my app. blade navigate back open the footer copy it paste it in here and we have the nav so let's copy this one as well and paste it inside a f page all right now let's close off the files and I have added my GitHub repository in the description down below now when you add lifewire true composer you don't need to add any additional configuration everything is already set up for you to start using lifewire in your project pretty cool isn't it we're not going to create a working application well we're going to create one without errors obviously but I simply want to show you the important features of lifewire so I'm not going to create a application from scratch so what I want to do right now is basically set up something very simple so let's navigate to the see live for a moment and let's perform a clear right here and I want to create a new migration and model and once again I'm not going to follow best practices by creating Separate Tables for certain columns I simply want to create a table and model which I can use to interact with the database so let's create a new model immigration let's say PHP artisan make colum model let's name it task and let's add the- m flag to it once we enter you'll see that our model immigration have been created let's navigate back to PHP storm let's open the databases directory migrations and let's open the task table and right in between my ID and timestamps I'm simply going to create a new table through the table object it's going to be a string where the name will simply be name now let's navigate back to iterm one more time because I want to create two ceders to have some dummy data so let's say PHP on Artis make colon Cedar let's name it user Cedar and let's also run the PHP artison make colon Cedar name to task Cedar I just personally prefer Cedars over factories don't ask me why it's probably something I just got used to very quick when I started using larl now the last thing that I want to do right here is run the valet link command so I can open my project inside a browser now let's define our sees real quick let's navigate back to PHP storm let's close off our task table see this directory and let's start inside our user Ceder right here I'm going to make a call to the user model the create method going to pass in an array simple stuff right here where the name is equal to code with DAR the email is info@ cod with.com and my password will actually come from the where is it the user Factory where you will find the hashed password so let's copy it paste it inside my password value which will basically have the value of password now let's close off the user Cedar and open the task Cedar and what I want to do right here is first defining an array named tasks set it equal to an array pass in an array inside of it where the user ID column will be one and give me a moment I actually forgot the user ID column so let's say table foreign ID the foreign ID will be user uncore ID it is constrainted on the table users and it is Cascade on delete now inside my task seed there I'm going to pass in a name of simple task one and then right after my array inside my tasks array going to pass in another array where the user uncore ID will also be one and the name will be task 2 now right below our array of tasks we need to Loop over our task array because we have multiple task and insert them into the database so let's say for each because we're going to Loop over our tasks as one single task then right here we're going to use our task model and we're going to use the insert method where we're going to insert our task itself since we haven't defined our guarded or fillable property inside our model we can't really run this so let's open our app directory models and task model and for this example I'm simply going to use the fillable property where I'm going to set the user uncore ID but also the name now let's quickly register our ceders inside our database Cedar let's get rid of the comments that we have right here we're going to use the this call method passing an array of Cedar where the first Cedar must be our user Cedar where the second Cedar will be the task Cedar now we're almost done with this part since we do need to set up our database credentials create a new database and migrate our tables so let's close off the three files that we have open open the EMV file scroll down because my database will be named hostinger lifewire my username is root and my password is Dar 1234 let's navigate back to iterm perform a clear let's say PHP Artisan migrate all right Artisan is asking us whether we want to create our database so let's say yes so it has created our database and it has run the migrations and and finally we need to run the PHP Artisan DB column seed command where you will see that our two seeders have been seated now there's one more thing left and I'm not really sure whether I want to use it within the course but I'm still going to Define it let's navigate back to phb storm and let's open our task model and let's quickly Define a simple relationship let's say public function user we're going to return this belongs to and it belongs to the user model class let's typ Hint it to a belongs to and I think we're set right now before we wrap up this video I want to show you that life areer allows you to publish configuration files and if you have used larel before which I actually expect you have you most likely know that you can publish any configuration file or package and so on this needs to be done through the CLI so let's navigate back to iterm Let's perform a clear and let's say PHP artisen lifewire Colin publish and the lifewire command is something we have pulled in true composer which is a new set of Artis and commands that we can use now let's add a D- convic flag to it now as the command implies this will publish the configuration file of lifewire to your larva project so if we navigate back to PHP storm let's open our convic directory where right here here you will find a lifewire configuration file now in this file you can customize the configuration settings of lifewire according to your needs now once you create a component larel will store the component inside the app directory where it will create a Livewire directory for you this also will be the name space which you can change right here now next to creating a live value component class Artisan will also create a view for you and right here right here you will see that the view is stored inside the components directory layout directory and app directory now I'm not going to cover all these configurations but I hope you understand the point of how you can make configuration changes right here in the last episode I mentioned components a couple times if you are a pure backand developer and have never worked with any other JavaScript framework I got some explaining to do components in LIF fire are essentially reusable UI elements that encapsulate logic and presentation they allow you to break down your user interface into smaller self-contained units making your code more organized and maintainable one of the main reasons why we use components is to enhance the interactivity and responsiveness of our web application by encapsulating both on the server side logic and the frontend markup life VAR components provide a seamless and efficient development experience react and view or pretty much any other front-end framework uses the term components the main difference between components in lifewire and components in react or view is the underlying technology lifewire is a server side framework which means that the components are rendered on the server and sent to the client as HTML while react and view are client side Frameworks where the components are rendered on the client's browser using JavaScript while react and view components provide a more Dynamic and interactive user experience Livewire components offer the advantage of easy integration with larel server side functionality now components needs to be created through the CLI so let's navigate to it for a moment and let's actually run the PHP Artis command before we create a component and if we scroll up a little bit to the section where all the life wire commands are right here you will see that there is one command named a life wire make which is to create a new life wire component so let's perform it let's say PHP AR a life wire call in make and then you need to define the name of your life wire component now lifewire recommends two naming conventions the first naming convention for live V components is to use pasal case where each word is capitalized and there are no spaces or special characters so if you want to create a lifi component for a task create you can name it task create the second name of convention is to use keop case where you name it with dashes so let's say task Dash create now since pretty much all classes and files in Lara are built using Pascal case I recommend using Pascal case for your life VAR components as well so let's say that our component will be named task create now once we enter you'll see that artisen has prompted us with a message saying that two files have been created for us right here now like we have briefly discussed in the first chapter it has created a component class for us inside the app back/ lifewire namespace named task create and it has also created a view inside the resource directory views directory a new directory named lifewire where it is created a blade template named task Das create so let's start inside our component class let's navigate back to PHP storm where you will find our livei directory inside our app directory with our task create file right here you will see that our class is extending the component class and the component class in lifewire is used as the base class for creating a lifewire components it provides various methods and properties that allow you to define the behavior and presentation of your lifewire component we will cover these along the way there's no need to open the component class and cover them individually by extending the component class you can add custom logic as well handle user interaction and render The component's View by default live wi provides one method out of the box inside the components class and that's the render method the render method in lifewire is a built-in method provided by the component class as the name applies it is responsible for rendering the lifewire component view which it has already set for you because it's the lifewire subdirectory inside of views directory where it has created a task that's creates. blade. PHP file now let's open our view actually rest scroll down Down live VI directory task that's create that. blade. PHP right here you will see that it has added a simple div with a comment inside of it nothing special now if we replace our comment right here with let's say a string of task create navigate to the browser change your endpoint to task Das create you will see that we got prompted with a 404 meaning that the page does not exist and that is right because lifewire does not magically register the route before we register the route I quickly want to make a small adjustment to our project right now we got a simple project with just one model right the task which works with the task functionalities what I recommend doing what I recommend doing is adding the components class as well as the view in a subdirectory named task we don't need to do this manually because artisen can help us a bit so let's navigate to PHP storm for a moment let's delete the life wire directory and let's also delete the task create component class let's navigate back to iterm perform a clear hit the arrow up to create our task create component but this time I'm going right in front of the class name add the keyword of tasks and the dot notation which will tell artisen that a subdirectory name tasks need to be created if we enter you'll see that right inside of the output it has created a task subdirectory for the component class and also over the view now let's talk about routing let's think about it for a moment we have created a view named task Das create this isn't a small component that you will use on multiple places on different pages what we have created right here and well the view as well let's scroll down right here is called a full page component these can be used to build Standalone pages with logic and Views and these needs to be registered inside the routes directory web.php file and let me get rid of the comments right here later on we will create a component which will be a popup message whenever a task has been created these components do not need to be registered as a route because it isn't a full page component it's simply a component which will be called once an action has performed so inside our web.php file we need to register a route pretty much in the same way as you register a route from a Lara controller but instead of importing the controller class we're simply going to import the lifewire component class so let's say route colon callon get the endpoint will be tasks create then we're going to add a second parameter which is the task create lifewire component class class and the class itself now let's Ru place it put an import all right this looks a little bit cleaner now let's navigate to the browser let's change our endpoints to tasks for SLC create and right here you will see that we have impr prompted with another error message well this one was actually on purpose it's telling us that the layout view has not been found inside the components layouts and app directory where app. blade. p P file needs to be shown now what is going wrong right here well full page components will use a default application layout and by default let's navigate back to PHP stor open our live wire configuration file and where is it let me scroll up a little bit right here in the layout you will see that it has been set to components a layout app but in our application let's scroll down a a little bit we haven't stored it inside a component's directory so we could remove that from our route so let's remove components and just use layouts. app navigate back to Google Chrome and refresh it where you will see that the error is gone but the task create string is not visible yet so let's fix that let's navigate back to PHP storm and open the f. blade. PHP file and right here you will see that we're yielding content but this only works in Blade and not in lifewire in lifewire you need to ensure that you have created a blade file at this location and include a slot placeholder slot is a special variable that is used to define the content that should be rendered inside a component's layout it acts as a placeholder for dynamic content that can be customized for each specific instance of the component if we navigate back to the browser for a moment and refresh it you'll see that it is still not printed out and that's because we haven't created the Tex here so let's say task create navigate back and refresh it you will see that task create has been printed out now there's still a small issue right here with the slot variable because the slot variable right here only works with life Fire And since we're trying to access our layout for both blade and lifewire we need to perform a check to only show the slot when the slot is defined so the way we could do that is basically getting rid of it adding the at is set directive where we're going to check if slot has been set if slot has been set we're simply going to print out slot and we're going to close it off with an end is set if we navigate back to Google Chrome refresh it you'll see that task create has still been printed out and that's because our slot has been defined now this looks awesome awesome and I hope that it's starting to click now let me show you a little bit more component configuration now let's open our live fire configuration file and let's add components right in front of the layout again for a moment which should throw an error inside the browser all right but the issue with this now the issue right here is that layout will change it for all of your views and maybe you don't need that and you simply need to add the app. blade. PHP layout for one specific View lifier allows you to register different layouts for every single component let's open our component for a moment so our task create component all right and right above the render method we can add the hashtag brackets and add layout inside our brackets and don't forget to import Livewire attributes which is called whenever you want to load a custom layout so inside the layout method you simply need need to pass in a string where you can add the relative path view to your custom layout so let's say layouts. app now let's navigate to the browser for a moment refresh it and you'll see that our custom layout is visible again now let's actually navigate back to it for a moment and create a second component so let's say PHP Artisan lifewire call and make tasks. task index all right right navigate back to PHP storm let first register the route right above the create route so route col and call and get it is for tasks we're going to use the task index class component and let me actually replace it with a qualified import all right scroll down and open our task index replace our comment with task index navigate to the browser change our endpoint to just tasks and you will see that we have been prompted with an error because the view that we're trying to render does not exist and this is happening because inside our task create component where is it again let me scrw up we specifically said that this class should only use a different layout now there's even another method of changing the layout and that's using the fluent syntax let's get rid of our attribute right here and right after the view method you can change the layout method and right here you can pass in the same layout so let's say layouts. app if we navigate to the browser refresh our task create endpoint you will see that this page is visible again for now I want to remove the layout method that we have changed right here and I want to change the layout inside my life wire configuration file where I want to remove the components now since we're using the layout of the app. blade. PHP file let's open it for a moment again right here scroll up you'll see that right here we have set the title of the page to hosting our Live Wire now this static piece of text right here works on Local Host but do you actually want to show this on all the pages that you have technically no because the title says a lot to your page visitors life fire allows you to assign unique page titles to each page in your application using the same two methods as I have showed you as setting the layout of your component let's start insert our task index first right here quick note we just added it right above the render method but you can also add it right above the class declaration right here one method is not faster than the other so just choose a method that you prefer so let's say hashtag bracket title and the title will be tasks hostinger lifewire now behind the scenes lifewire will create a new variable named title that you can use inside the layout that you have defined so let's define it inside our layout first so let's get rid of Hosting our lifewire add curly braces and we're going to print out the title but if the title has not been set we're still going to print out hostinger life wire if we navigate back to the browser and refresh our task endpoint that went wrong you'll see that the title has been changed to task D hosting or lifewire the second option is the one that I want to show you on my task create is simply changing the title method to the view method where the title will be set to create task hostinger life wire if we navigate to the browser change our endpoints to task back SLC create you will see that a title has been created named create task D hosting or lifewire now I want to stick to one method so let's navigate back to PHP storm and I personally prefer changing the title method so let's open the task index get rid of our title attribute now let's chain the title method to the view method of tasks hostinger life wire properties and life wire are essentially variables that are defined within a lifewire component properties are very essential in lifewire as they allow us to store and manage data specific to each component they allow you to create Dynamic and interactive components by binding properties to input fields or other elements in the components view with properties we can easily capture user input display data from the the backhand and manage data within lifewire components they play a crucial role in building powerful and interactive web applications using lifewire when you want to define properties you'll basically Define them in the same exact way as you define properties in PHP right below the class definition so since we're already in the task index let's define one right here right below the class definition you use the keyword public protected or private but when it comes to properties in life wire they always need to be public because they need to be accessible outside of the class followed with a name let's start with the name of dollar sign tasks you do want to assign some kind of value to tasks and in most cases you want to make a database request to retrieve data which you can then assign to a property task if we once again think about how this is done in lell I would say that you can define a Constructor right in Livewire it's named a little bit different but the idea behind it is exactly the same since we got to make use of a special method which allows us to perform initialization logic when a lifewire component is first loaded it's the same methodology as a Constructor but then Livewire it's called Mount so let's define a new function named public function Mount once again the amount method will be automatically called when the component is rendered now now inside the amount method you can perform tasks such as retrieving data from a database setting initial property values or performing any other necessary setup for your component now what do we got to do right here well let's make a database request to retrieve all tasks so let's say that we want to set the value of this tasks so we're referring to our public task property equal to the task model where we're we're going to use the width method because we're going to add the user relationship to it and chain the get method to it quick note remember that the mount method is only called once when the component is initially rendered now here comes a pretty cool feature that lifewire has to offer in lifewire you can automatically use variables from the amount method in your views by simply referencing them directly lifewire handles The Binding of these variables to the view for you so we have to find our property name tasks if we then open our task index page replace our task index with curly braces and our variable named tasks larvel will automatically pass the task variable to the view allowing you to access and display the data so let's navigate back to the browser let's change the endpoint to tasks and right here well it's not that clear but let me select it for a moment you will see that our task variable has been dumped on the screen now if we navigate to my GitHub repository for a moment you'll see that I have created the lifewire directory as well and the task index as well so let's copy the entire div navigate back to PHP storm and paste it right here and I need to get rid of this pan right here all right navigate back to the browser our Local Host refresh it where you will see that we have outputed a simple box which should represent a task so follow along for a moment because what we're going to do right here is a bit of larel magic not really related to lifewire so inside our views directory I would like to create a new directory named components and I'm not going to cover everything regarding to components I have a complete tutorial available for that which I will link in the description down below and inside of my component directory I'm going to create create a task D item. blade. PHP file and I'm actually going to paste the entire task Index right here once again get rid of my span all right then inside my task index I actually want to get rid of everything what I just copied create a for each directive where we're going to Loop over our tasks as one single task and inside my loop I want to call my task item component that I have just created by saying x- task Das item and we need to close it off if we navigate back to the browser and refresh it you will see that we have received an error message which you will see quite a lot so I got some explaining to do the error message Livewire only supports one HTML element per component means that inside the task index larel found multiple root HTML elements live fire components can only have a single root element meaning that all HTML content within the component must be wrapped within a single parent element now let's solve this issue first let's pass in a variable to our component by saying colon task is equal to our dollar sign task variable what we then need to do is copy everything in this file for a moment create an empty div and paste what we just copied inside of it then inside our actual component which is the task item we need to add something new which is right after the class and that is called wire colon key which needs to be set equal to a string now follow along for a moment and then I'll have some explaining to do we're going to pass in curly braces right here and we're going to pass in the task ID now in larel lifewire The Wire column key is called an attribute is first off required and it is used to track and manage the state of dynamic rendered components of elements within a larvo component it helps lifewire to identify and update specific elements when the component is rendered the wire key attribute assigns a unique identifier to each rendered element of our component in our code snippet the ID is used to assign a unique identifier to each task item component based on the ID of the task if we navigate to the browser refresh it you'll see that our error is gone and since we have added two rows inside our Cedar you'll see that two rows have been printed out I need to add a little bit of margin right here so let's say marger bottom is four I think that should be all right yeah I'm happy with that now let's change the dynamic data for a moment just like it's larel so let's say right here we want to print out the task name and well that was actually it if you refresh it you'll see that task one and task two have been printed out now we set that the mount method that we have defined inside our let me actually close off a couple tabs right here it's getting quite messy inside our task Index right here is a special method that allows us to perform initialization logic when a lifewire component is first loaded but sometimes you simply want to pass in additional data to your view without actually defining a property for it and it's pretty simple to do so since you have used the same method in larl controllers let's go right below our render method the title actually or we need to change the width method to it we're going to pass in an array right here because you can pass in multiple variables but for now let's say that we want to create the text for our button which will be new task now let's navigate back to our task index page and let's say that we want to add a new button right above our Loop so let's say div it has a class of text Center and the padding bottom is 10 we're going to create a button inside of it with the text of our variable button once again coming from the width method and we're going to add a couple classes to our button or let's say rounded MD the BG is pink 600 padding X is 4 padding Y is three text is small the font is semi bold the text is white shadow is MD and when it's hovering the background will be pink 500 finally don't forget to hit the don't forget to add the type of submit to it now if we navigate to the browser and refresh it you'll see that we have added a new button right here named new task now let's quickly up upgrade our code a little bit by creating a new component inside our component directory where we're going to name it button. blade. PHP we're going to copy the button that we have created paste it inside of it and then inside our task index we're going to make a call to our x button we're going to pass in one variable which will be button which is equal to our variable button if we navigate back to the browser refresh it you'll see that we have not been prompted with an error message now let's move on to the next topic which is datab binding data binding in larvel allows you to establish a connection between the data in your life fire component and a user interface element in your view it basically enables you to easily capture user input and update the component data without manually handling the input events now in larl you can basically see this as something like the request object class where you perform a request and you can use the data in your controller the idea behind it is the same but data binding is what I just explained times 10 let's navigate back to PHP storm and right above our button we're going to create a new input field the type should be equal to text we're going to add a class to it which is rounded MD the width is 1-5 the border is zero py is 2 text Gray 900 for the placeholder the text will be text Gray 400 on small SM colum text SM SM colum leading six then once again follow along because we're going to add a new wire directive which will be wire colon model which is used for data binding it establish a connection between a user interface element which is our user user input field right here and a property in a lifeu component which we will Define but first we need to set a value to it which will be name so let's open our task index for a moment and right below our public task property we're going to create a public name property so right now whenever we Define anything inside our input field it will be also linked to our name property right here well not exactly but we got one more step missing because we somehow need to submit the input field to the browser which makes sense right so let's open our button component and let me align this on the line below and right below our type submit we're going to add another wire director which will be wire colon click which we're going to set equal to a string the wire click directive in Live Wire is used to bind a JavaScript click event to a live wire component method it allows you to define a component method that will be executed when the associated element is clicked by the user so whenever a user adds a new task clicks on the button we need to redirect it to our component which is usually to a function so let's say add right here so the same flow as before let's open our component class then right below our Mount method we're going to define a public function add and what I want to do right here is simply add a DD of our property of name if we navigate to the browser refresh it you'll see that we have added an input field so let's add a task tree click on our button to trigger the wire click functionality where you will see that our die dump has been outputed all right this is Step number one of showing live wir power we're going to Advance step by step so what will be the next logic well you would say that we should do something with the name that we have sent to our lifewire component and to be specific probably persist the data into the database well you are right but that's something we will do in the next episode where we will work on actions for now I want to move on to Route parameters which is also something pretty useful when it comes to components since what we have done right now was not working with a full page component and that's something we will continue on doing later on I want to have this screen right here where we could add new tasks but let's say that you want to show a detailed page of a task then you need to start working with route parameters so let's navigate to the CLI for a moment and let's create a new life VAR component for a full page component which will show one specific task so let's say PHP artisen lifewire colum make tasks back slask show if we then navigate back to PHP store open our web.php file and right below our create route we're going to create a new route which will be to tasks back slash a route parameter of ID from our task show component and we're once again going to import the now each ID right here will represent a unique task so let's open our task component for a moment so task show we're going to define a new property so let's say public task but we're going to type in it to specify that the task property right here should be an instant of the task model then we're going to define a public function Mount method inside of it which accepts an ID which is coming as a rout parameter as we have set inside our route and then we're going to set our property of task equal to our task model use the find or fail method and it should look based on the ID so let's scroll down a little bit because we need to open our task show let's once again get rid of the comment and what I actually want to do is basically say well H1 give it a class of font bolt tracking is tight the text is white as M will be text 6xl and the text needs to be centered and we're simply going to print out the task name and once again the task is coming from our property that we have defined so let's navigate to the browser let's change our endpoint to let's say 4/1 where you will see that task one has been printed out if we change it to task two you'll see that task two has been printed out now one more thing and I'm a huge fan of Route model binding in larl and that works in lifewire too so let me quickly show you how it works starting inside our web.php file instead of passing in the ID we're going to pass in the actual task where we need to make a small change inside our Mount method because instead of accepting an ID we're going to typ hint our task to a task object or we're not going to set our property equal to our model anymore because that will be done behind the scenes so we're simply going to set it equal to our task coming in if we then navigate to the browser and refresh our endpoint you will see that the output is still visible but we have used route model binding over a simple route parameter now let's see a little bit more lifewire magic in Live Wire the wire object refers to the instense of a live wire component itself it provides access to various properties and methods that can be used within a component in any lifewire component view a magic wire object will be exposed to Alan JS which you can access inside your component so let's say that if a user well let me change the endpoints to tasks all right so let's say that if a user adds a name inside our input field right and we want to show the number of characters inside of it just imagine how long that would take in a framework like view or react now let me show you how long it takes in Live Wire start your counter and tell and let me know in the comments down below how long it took let's navigate back to PHP storm open our task Index right here and let's define a span right after our input field let's give it a class of absolute Das ml- 6 and the margin top is two we're going to define a span inside of it where we're going to add a x- text which will be the wire object we just talked about so dollar sign wire do name. length if we then navigate to the browser and refresh it let's type in a task name so let's say task five where you will see that the wire object is counting the length of the name and it's outputting it directly which is pretty cool what I want to do right now is creating a new task through the input field that we have and the button that we got right next to it so let's navigate to PHP storm for a moment now let's open our task index and what I want to do right here is replacing ad with Save which says a little bit more than ad and naming methods to their action is very important now quick note we could create a completely different View for the task create page but I think that that is not really necessary in this case since we simply got one input field but if we had more I would recommend using a full page component for it now we have linked through our input field right here using wire model the name property to our where is it name property right here excuse me then for our button we have said that it should trigger the ad method when someone clicks on it but instead of add we're going to say save now this is static and this means whenever we use our button component all life bar components should use a s should have a save method defined so let's get rid of it and let's pass in a variable named click and then inside our task index we could pass in a second variable which will be col and click which will be a string of Save which will trigger the wire click right here let's test it out real quick let's navigate to Google Chrome let's say task three click on new task task three has been triggered inside the save method now let's define the save method inside our component let's navigate to our task index get rid of our DD and first right here we're going to use our task model and then we're going to access the static method named create now we only need to retrieve the value of the name so we could pass it in as a string but since we have the user ID as well which we actually have to add static I'm going to pass in an array say that the user ID should be one and the name should be coming from our property named this name then I'm also going to add a simple redirect by saying return this redirect to the route method well we actually haven't defined the named route we're going to name it tasks then inside our web.php file on the first route we're going to chain the name method to it and the name will be tasks so let's give it a try let's navigate to the browser refresh it create a task three click on new task and as you could see it has redirected us to the task Sendo so it's basically refreshing the page but in most cases you want some kind of magic which will add a new row without a refresh that's something which we will do in the next episode where we're going to have a look at Act for now you will see that the task has been inserted but without any validation so let's have a look at that since we're kind of getting used to the flow of lightwire if we navigate back to PHP storm and open our task index you don't add validation in Livewire as you do in Lara controllers where you basically can say well the request object that we have change the validate method to it and validate let's say the name name on a string or it should be required in lifewire you need to go right above the property that you want to validate and in our case it will be the name and you can add a attribute to it so once again # brackets and the attribute name is Rule let's pull it in and once you add the rule attributes the validation will automatically be applied to the property value anytime you update the server site so let's for now say that the name should be required we're not done yet because we do have to tell our save method that it should enable the validation rules that we have added right above our property so inside our save method the first thing that we're going to do is say well this validate so it should basically validate everything that comes in first now we're not done yet because we do need to make sure that we output our error message in case there is one right below our input field so what we could do is navigating to our task index and right below our button component let me align this for a moment we could create a new div where we're going to say Well it has a class of text red 500 we're going to add an error directive in Blade named name so it should check for the name if it has we're going to create a new span let me actually align this on the line below of the the actual message that is being passed through and we're going to close off our error directive by saying at end error if we navigate back to the browser refresh it try to create a new task without adding a name you will see that we have been impr prompted with an error message without a page refresh now if we open our task index for a moment you will see that we have passed in a string inside of our rule method where we can only pass in in a one rule now don't worry because just as working with laral forms you could pass in multiple validation Rules by passing in an array so let's say that it should be required it should have a maximum of 10 characters and it should be a string or you could use another method which is completely removing everything that we just added including the array pass in a string again and add pipes to Define separate validation rules so let's say required pipe Max of 10 and it should be a string so let's navigate back to Google Chrome refresh it try to create a task you'll see that the name field is required but let's say that it has more than 10 characters click on new task you'll see that the second error has been prompted which says that the name field must not be greater than 10 characters now before we move on to the next topic I want to show you how you could easily show validation errors as the user fills out the form so let's navigate back to our view for a moment so our task index now let's look for our input field right here and there are two methods in how you could do this the first method is adding the dot live right after the wire model attribute what this will do is sending Network request as the user fills out the form if validation fails the property won't be updated on the server and a validation message will be shown to the user if we navigate to the browser refresh it click on our input field add a long name so let's say again this is a very long name you will see that while typing lifewire has added a validation on the input field without refreshing the page and if we hit the arrow back until we hit 10 characters you will see that the error message has been disappeared now the second method is replacing the life with blur and blur and lifewire is an alternative to the life method for showing validation errors as the user fills out the form by using blur onwire colon model lifewire will send Network requests and run the appropriate validation rules when the input field loses Focus this allows for real-time validation and immediate feedback to the user if there are any validation errors same thing just slightly different now let's move on to the next method which is showing a loading indicator now since we're on Local Host and we only submit a couple columns which is the name ID and timestamps the loading time isn't that much but lifewire allows you to easily add a loading indicator once you submit a form by default lifewire will automatically disable submit buttons and Mark inputs as read only while a form is being submitted this prevents the user from submitting the form form again while the first submission is being handled however it can be difficult for users to detect this loading State without extra affordance in your application UI so let's navigate to our button component for a moment because we do need to add it right here and let's actually navigate to the browser for a moment and let's search for flow bite I'm simply going to use a component from flow bite right here let's search for spinner now let's open the first one where you will see a spinner right here so let's copy the entire div now we're not going to paste it right here because I'm going to create a new component so let's say x spinner and let's close it off let's create a new component let's name it spinner. blades. PHP paste it right here and the only thing I want to change right here is the F blue to Pink now let's navigate to our button component because we're not done yet let's copy it create a div paste it inside of it then we need to add a trigger so right inside of our div we're going to say wire colon loading so let's navigate back to Google Chrome Local Host refresh it let's create a new task name task for and pay attention to the right side of our button where you will see that a loading indicator has been shown for a millisecond AIS and lier are an essential feature that allows developers to handle user interactions and perform surface side logic without refreshing the entire page now we have already defined a very simple action in the previous episode where we have said that once a user adds a name clicks on the new task button a new task is created through the safe action and technically that's all you need to know about actions on a very basic level now let's see how we could extend our action by adding an alert confirmation to a user when they try to create a new task so inside our button component we're going to define a second action which is right after our wire click named wire colon confirm now the wire confirm directive in larvel is used to display a confirmation alert to the user before performing a certain action when the user triggers an action that has its wire confirm directive Live Wire will display a conf confirm dialogue with a specified message well a message that we have to Define so let's set it equal to a string of are you sure you want to add this task a user can then confirm or cancel the action based on their intention now behind the scenes the wire confirm directive is called as an event listener because it allows you to respond to various types of user interaction and the same actually goes for the wire click directive out of the box lifewire supports a total of seven different event listeners so let's actually navigate to the browser and test this out before we cover the other five let's navigate to the browser let's refresh the page and let's try to create a new task named task five click on new where you will see that we have been prompted with an alert saying are you sure that you want to add this task with a typo let's say okay and as you can see it has been added and let actually never at back and get rid of my typo right here all right and the third event listener is the wire key down directive the wire key down directive in Live Wire is used to listen for keyboard events on an element it allows you to define a method on your live fire component that will be triggered when a specific key is pressed so let's say that once a user clicks on the enter of their keyboard the task needs to be saved so we basically don't need the button so let's actually quickly delete both click directives that we have then insert our task index for our input we're going to add the wire column key down and I'm actually going to navigate to Google Chrome for a moment open the documentation and click on actions where you actually will where is it see the key down options that you have available right here show do so. shift enter space and so on so let's navigate back to PHP storm let's say dot enter and then it needs to trigger the save method inside our task Index right here so let's navigate back to Google Chrome Local Host start typing let's say task six and if we then hit enter you'll see that it has automatically inserted our task now the next event Lister that I want to show you is the wire colum key up which we could also add inside our input field so instead of saying key down we're going to say key up and we're going to keep it as it is because the key up directive is used to listen for the key up event on an element so it will basically trigger when a key is released on your keyboard if we leave it as it is right now it will basically trigger the safe method every time we hit a key on our keyboard so let's give it a try let's navigate back to Google Chrome let's refresh it or let's say t and it has already added a row for us let me actually navigate to PHP storm quickly connect to my database so let's say my SQL where are you all right root d 1 23 4 and my database is hosting or life wire apply okay I just need to clean it up a little bit because I don't want to scroll every single time we have a new task all right now what we could do next is right after the key up say well whenever it triggers the zero on my keyboard it should save our new task so let's navigate to the browser refresh it say task two but if we hit zero you will see that it has triggered it and it has saved our new task then we have the wire Mouse enter directive and the wire Mouse enter directive is a pretty cool directive because it is literally used to listen for the mouse enter event on an element now you might wonder when this will be useful think about the use of a directive when you want to create interactive elements that respond to Mouse hover events to use the mouse enter directive you specify the method that needs to be called in your larel component so let's say that instead of saying wire key up we're going to say mouse enter and it's going to trigger once again the save method if we navigate to the browser refresh it hover over the input field and right here you will see that the save method in the Live Wire component has been triggered where the user Mouse pointer enters the boundaries of the input element flash messages are temporary messages that are stored in the session and displayed to the user after a specific action or event has been performed think about our current example once we create a new task we should prompt a user with some kind of message which will say that a task has been created they are commonly used to provide feedback or notifications to the user such as success messages error messages or or informative messages us developers will understand coding wise when a request was successful or not but users will use our website probably don't now using flash messages in Live Wire is extremely easy actually just as easy as you use them in lvo itself we need to store our flash message inside a session so let's navigate back to PHP storm and let's open our lifewire component for a moment which is the task index and WR after our task creation we're going to make use of the session method and the session method is a helper method that's allows you to interact with your session data the session method provides various methods to interact with the session such as storing values retrieving values checking if a value exists and removing values from a session what we're going to do right here here is chaining The Flash helper function to it which allows you to store a value in a session for a single request it accepts two parameters the first parameter is the key or name of the flash message which in our case will be message then the second parameter is the value of the flash message which in our case will be task successfully created all right we need to show our task some way to the user on the front end and once again let's create a new component inside our components directory named alert. blade. PHP and right here let's define a div let's add an at if directive because we're going to check if our session has a message which is the message that we just defined if it is we're going to create a div right here with a class of pading four margin bottom is four the text is SM the width is 2-6 MX is auto the text is green 800 it's rounded LG the BG is green 50 and that's basically it then inside our diff we're going to create a span where the class is font medium it's going to add a success alert and then right below of it it's going to print out the session message all all right now let's finally call our component real quick let's navigate to our task index and well let's actually delete the wire Mouse enter we need to navigate to our button real quick otherwise we can't submit it and we don't need to confirm let's open our task index and right above our input field we're going to make a call to our X alert close it navigate back to Google Chrome refresh it create a task number three click on new task where you will see that a new alert message has been prompted to US events and laral life fire are essentially a way to communicate between components and Trigger actions based on user interactions or other events while Lara also has its own event system Livewire events have some differences in Livewire events are specific to a Livewire component and are used to handle component specific actions when an event is triggered within a Live Wire component it can be listened to and handled within the same component or by other Live Wire components now let's have a look at how we get fire events in Livewire version 3 the dispatch method is used to trigger an event from a Livewire component in previous versions events were defined through a listener's property so let's navigate back to PHP storm for a moment and let's open our task index and right inside of the save method right below my session flash message I'm going to use this dispatch when you call the dispatch method you need to pass in the event name as the first parameter so let's name it task Das updated when the dispatch method is being triggered the task Dash updated event will be triggered as well and every other component on the page that is listening for this event will be notified now what we have done right here is simply dispatching the event so let's see how we could listen to the event we first need toate create a new component which will update one or multiple tasks so let's navigate to the CLI and let's perform the PHP Artis lifewire colon make a tasks slask update component class and let's open our task update class that we have just generated and right above the render method I'm going to define a public function update timestamp method and in here I'm going to make a call to my task model the static query method and I'm going to change the update method to it and what I want to update is an array I want to update the updated uncore add column where I want to set the value equal to now then we need to tell our update time stamp method that it needs to listen for an event this can be done by adding a property right above our method so let's say hasht brackets and inside our brackets we're going to use the on methods and then we need to make a call to our event that is dispatched which is T task D updated all right now when the task D updated event is dispatched from the update timestamps method a network request will be triggered and the update timestamp action will be invoked now we're not done yet let's open our task item for a moment then right after our task name we got to Output the time stamps of each event to make sure that we see an updated timestamp so let's say backlash a blade directive right here we're going to add carbon/carbon and we're going to use the static parse method where we're going to parse the task updated uncore at and we're going to format it to a D- m-y hours colum minutes now the last thing that we need to do is opening our view so our task Dash update well not the last thing there's one more task left let's get rid of what we have defined in here here let's add a class of text Center we're going to add a button right here with a give it a moment wire colum click which will be equal to update timestamp we're going to add a type to it of submit and a class as well of whites space- no WP font is Media the text is pink 700 hover text pink 600 and and the text inside of our button will be refresh me now the final thing that we need to do is opening our web.php file because we need to define a new route which is Route colon colon get tasks update from the task update component class and let's replace it all right let's navigate to the browser and let's change the endpoint to update if we click click on refresh me navigate to our hosting or life wire you will see that the you will see that the Tim stamp of all of our task have been updated to now life cycle Hooks and larel lifewire are special methods that allow you to perform certain actions at different stages of a lifewire component's life cycle these hooks are executed automatically by lifewire providing you with the ability to interact with the component's life cycle events we have already worked with one life cycle hook so let's navigate back to PHP storm for a moment and let's open our task index because right here you'll see that we have defined the mount method which once again is called when the component is first instantiated and mounted in addition to the Mount method lifewire support six other life cycle hooks once you become familiar with them you will find yourself using them frequently now let's cover all of them right inside of our task Index right below the mount method the second life cycle Hook is called public function hydrate this Hook is called when the component is hydrated with data from the server the third life cycle hook that we have is the public function boot method which is called at the beginning of every request both initial and subsequent we have the public function updating which is called before lifewire updates the components data properties with user input then we have the public function updated which is called after the components data properties have been updated we have the public function rendering which is called before the where is it render method is being called and then we got the public function rendered which is called after the render method is called and finally we have the public f function dehydrate method which is called at the end of every component request these hooks provide a way to perform accent such as initializing data making API calls manipulating data and way more at specific points in the live fire component cycle now let's scroll up and let's start inside the hydrate method first now once again the hydrate method is a life cycle hook that is called when the component is hydrated with data from the server life fire basically need to send data back and forth between PHP and JavaScript for it to work with the way it does as part of the messages that gets sent there is information about the component and information about the properties but for the information to be accessible and usable by JavaScript it needs to be in the right format the process of hydration is taking the messages and converting its value back into PHP creating the life VAR component and creating any of the properties that components has now let's actually add a simple DD right here for a moment of okay let's navigate back to the browser let's refresh the page and try to create a new task so let's say task two click on new task and right here you will see that the die dump has been printed out because the Hy rate runs at the beginning of every subsequent request now the second method that I want to cover quickly is the boot method so let me comment out the DD and the boot method in liary is a life cycle that is called at the beginning of every request both initial and subsequent it allows you to perform any necessary initialization or setup tasks before the component starts processing their request now you probably might wonder what the difference is with the amount method as helpful as the mount method is it only runs once per component life cycle and you may want to run logic at the beginning of every single request to the server for a given component so what you could do right here instead of initializing in the task property in the mount method is basically copying what we got right here commenting it out pasting it in the booth method if we navigate back to the browser and refresh it you'll see that the tasks are still visible and this can be especially useful when you need to perform certain tasks before every request regardless of the specific action being performed now well we want to specify the tasks property that we have to find before any action is being performed now the updating method in larvo life wire is a life cycle hook that is called before life wi updates the components data properties with user input this hook allows you to perform any necessary actions of validation before the component's data is updated now I currently don't have any updating data so I will skip this one but the name of the method basically says what it does then we have the updated method which is a life cycle hook that is called after the component's data properties have been updated it allows you to perform any necessary actions or manipulation after the data has been updated this Hook is particularly useful when you need to react to changes in the component's data and perform additional logic based on those changes now once again I'm going to skip this one as well and I'm going to continue one with the rendering methods like I've mentioned before this is called before the rendered method is called it allows you to perform any necessary action or manipulation before the component is rendered The View method has two arguments that we can Define the first is view while the second one is named data both represent data that have been added inside the render method The View argument is the actual view that's going to be rendered while the data is the data that is being passed through the view so let's quickly add a DD right here of view if we navigate back to Google Chrome and refresh it and right here you will see that task index. blade. PHP has been rendered if we open the data you will see that we're passing in a button our tasks property our name property and the layout configuration we navigate back to PHP store output the data you'll see that the properties that we have to find are all printed out so what the rendering method basically allows you to do is modifying the data since the rendering method is being called before the view is rendered so let's actually modify the name property because right now it has been set equal to n so what we could do is basically say well data bracket name is equal to di now let's then DD the data if we then refresh the browser you will see that name have been set now let's move on to the next method which is the rendered method which is a life cycle hook that is called after after the render method has been called and the component has been rendered in the rendered method you can access the rendered View and the data pass to the view so we need to pass in once again two arguments but the first one is view while the second one is HTML now I'm not going to Output The View because it's the same view variable as in the rendering method but if we DD let's say HTML refresh it you'll see that the entire HTML of the page has been printed out which is pretty cool and finally we have the dehydrate method which is called at the end of every component's request it allows you to perform any necessary cleanup or finalization task before the component is finished processing their request now after a request has been performed I want to convert my collection to an array so what we could do right here is basically say well this tasks is equal to this tasks but we're going to add the two array method to it if we then output this tasks refresh it you will see that the output is an array right now now what is a VPS hosting a VPS stands for virtual private server which is a web hosting type that uses virtualization technology to create several virtual servers on a single physical server each virtual server works independently with its own operating system CPU and ROM allowing you users to have more control and customization over their server environment compared to Shared hosting now you might wonder what advantages hosting are allowable application on a VPS hosting has since there are so many different hosting options firstly it includes great control and customization over server environments as each virtual server works independently with its own operating system CPU and rum this allows for more efficient resource utilization and better performance compared to Shared hosting VPS hosting also provides increased security and flexibility with the ability to scale resources up or down as needed now as you might have noticed throughout this entire course we're going to use hostinger as our hosting provider hostinger is a web hosting provider but it even adds more to that you could set up a shared hosting Cloud hosting VPS hosting email hosting and SSL certificates but those aren't specifically the reasons why you should choose hostinger since there are tons of other web hosting providers available on the web one of the biggest advantages that VPS hosting on hostinger offers is there well let's open it for a moment scroll down to the bottom right here is there storage and processors with the cutting Ash technology you can experience Rock Solid performance for your Web projects and the best part it's available on industry leading HP and Dell servers spread across four continents you'll have full ownership of your Hardware resources thanks to the industry standard KVM virualization platform so if you got an exciting project idea hostinger has the technology to make it happen secondly hostinger offers lightning fast speed and reliable uptime with their fiber connected infrastructure hostinger offers a blazing fast 300 MB pers second network speed this makes VPS hosting a pretty solid Choice when it comes to building ecommercesport or pretty much anyone who needs lighting fast website loading speeds finally backups and snapshots at hostinger your data is safe with your automated weekly backups this means that you can rest assure that your data is protected in case of any unexpected errors or issue but what if you need to perform major changes to your system this is where manual snapshots come in with hostinger you can easily create a manual snapshot of your system at any time this gives you the ability to revert to a pre previous version of your system with a minutes in case anything goes wrong overall having backups and snapshot is crucial when it comes to VPS hosting with hosting is reliable and easy to use backup and snapshot features you can ensure that your data is always safe and secure now at the moment you will see that I'm located on the official website of hostinger on their VPS hosting packages as you can see because of Black Friday hostinger is offering a 63% discount so let's scroll down and cover the different packages that they have available now looking at the prices I got to say that the prices are pretty affordable when it comes to hosting if you host a larel project on cloud hosting you most likely pay a little bit less or maybe even the same depending on where you're going to host your project if we take a look at the features that they have to offer you will see that the bottom five right here are on all packages it offers AI assistant it obviously offers full route access it offers a dedicated IP address which basically means that an IP address is assigned to a single virtual private server instead of being shared among multiple servers this has tons of advantages because it allows for greater control and customization over the server environment as well as increase security and flexibility and it finally offers a weekly backup dependent on the price you will receive more bandwidth and bandwidth refers to the amount of data that can be transferred between your website and your visitors within a certain amount of time typically measured in gigabytes per month this completely depends on whatever you need for your application a website with low traffic and small files may be fine with just 1 GB or bandwidth but a website with higher traffic or larger files may require significantly more bandwidth to function properly secondly it offers a different nvme dis space nvme SSD storage is a type of high performance storage Tech technology that uses nonvolatile memory access they also offer a variable of rum and rum stands from random access memory which is a type of computer memory that allows data to be read and written quickly it is a crucial component for running applications and programming on a computer now finally they also offer different vcpu cores vcpu stands for virtual Central Processing Unit it's a number of processing cores that are available to your virtual server the amount of vcpu course that you will need will depend on the specific requirements of your project such as the amount of traffic that you expect as the complexity of your application that you will be running a good starting point is to choose a hosting package that offers at least two vcpu cores and then scale up whenever that's needed which kind of brings us to a dubio the live VAR project we created can easily be hosted on a KVM package but personally I would choose using 2v PCU cores by default so for now let's choose the most popular package which is KVM 2 let's add it to our cart now right here you can see that we could EAS choose to pay for 12 months for a single month which will increase the price significantly and for 24 months now quick note hostinger offers a 30-day money back guarantee which allows you to test it out and see whether any type of Hosting suture requirements for now I'm going to choose the 12-month deal which will save me1 140 $4 and if we scroll down you will see that for the second step we need to create a new account now once you have created your account you can continue on to step number three where you could choose the payment methods you'll find an overview of the services that you're going to purchase so a KVM 2 12 Monon plan for $83 but with taxes and everything it will turn out to be $149 but right under total you will see that you can add a coupon code Cod so let's click on it and let's add the coupon code of code with DAR and once we click on apply you'll see that we have received a $10 discount and the price for a VPS hosting for one year comes down to $91 and trust me that's a great deal to have for now add your payment credentials right here and I'll see you back once you have created your account all right after purchasing my VPS hosting I've been redirected to this page where I can start the setup so let's click on start now and right here you will see that it's prompting us with a question asking us to select the location for our VPS hosting the location of a VPS hosting server can and will have impact on website loading speeds and overall performance this is because the physical distance between the server and the user can affect the amount of time it takes for data to travel back and forth so you basically have to select a location closer to your target audience so it will ensure faster loading time and better user experience since I'm currently located in the Netherlands I'm going to choose the Netherlands right here now let's click on continue all right and for the next step it's asking us to choose an operating system there are three options right here and one of them is an option that we're not going to use which is the one to the right because it's for WordPress so we're left with the OS with control panel and a plane operating system now come on we're developers I completely understand that you want an OS with control panel but I personally prefer to use a plain OS so I can use a VPS manager that I want to use to connect later on so in our case let's click on Plain OS the next step is for the type of control panel we would like to use and right here we need to select the operating system for our VPS hosting you will see three recommended options but you have a complete list of other options you have Debian Rocky and Ubuntu regarding Linux and Ubuntu they are both operating systems based on the Unix operating system Linux is an open-source operating system that is available in many different distributions while wuntu uses specific distribution of Linux the choice between Linux and ubun would depend on your specific needs and preferences as well as the compatibility of the control panel you choose I personally have always used with Ubuntu and I don't really have a specific reason for that so I just want to stick to that as well so let's click on Ubuntu let's click on continue for the next step we need to set up our VPS host name our root password and we have the option to add an SSH key so we can change our VPS host name we can do that later on let's create a secure root password and I'm going to leave the SSH key option open right now so let's click on Save and continue it's showing us an overview of what we have selected the VPS location is in the Netherlands the operating system is Ubuntu and the host name is well generated by hostinger so let's finish our setup and this will take a moment or two so pause the video and I'll see you back once that's done all right as you could see we're located on our H panel where you will find an overview of the server on the VPS information tab you will find your dedicated IP address right here the status which is currently running the VPS op time which refers to the amount of time that a VPS has been running without interruption this is an important metric for assessing the reability and stability of a server currently it's nothing since we have just installed our VPS now we have covered the current operating system and the location and the node version now let's click on the second tab which is SSH access you will find information on how you can access your application through SSH and in the final tab which is plan details you will find some information that we have covered before now one pretty cool feature about VPS is that you can upgrade it on the go right at the bottom well in other words it's scalable meaning that you can upgrade your plan without having any trouble this needs to be done right here where you can upgrade your VPS now I don't want to cover everything in my VPS because we need to continue on with the installation part as well which needs to be done through a server manager the VPS manager that I recommend is server Avatar and I'm not going to cover the setup part because it's pretty straightforward just create an account add your payment credentials and you have access to server Avatar I'm simply going to log into my server right now and continue on so pause the video and continue on when you're ready as you could see I'm currently logged into my server avator accounts where I can connect my VPS hosting server like I just mentioned server Avatar is a VPS manager tool that allows you to manage your virtual private server through a graphical interface and I think the screen right now should make a lot of sense for most developers you can connect to a custom server which we need to do but you can also choose between all those other hosting providers then you need to add your details right here you need to select the text tack that you want to use the database time and you have the option to install note makes sense right the typical setup when you want to deploy a larvo application but this time on a VPS server so let's see how we can connect by default the custom option is selected which is the option that we need if we click on digital ocean you can see that we can simply link our account to it but since we're using VPS on hosting eror we need to set it up manually so first we need to to add our server name which is the server name that hostinger has generated for us so let's navigate back to our overview let's copy the server name and let's paste it inside the server name field then we need to enter our ipv4 address so let's navigate back to our overview click on VPS information and copy our IP address let's paste it in right here we need to add our root password which will have set when you installed your hosting server but if you forgot it you can simply change the SSH password right here I'm going to leave it empty right now because it is not hidden otherwise you will see my password the port needs to be 22 the text tag that we're going to use is a lamp the database that I want to use is my SQL as well and I'm also want to add node.js to my server so I just cut out the part where I've have added my password so let's click on connect now all right as you could see we're connected to our VPS now the installation part might take a bit so once again pause the video and I will see you back once this is done all right as you could see our environment has been set up and there are so many configurations you could see and configure right here from databases to server loads to memory usage swap memory application users and way more I can't cover these all so I want to continue on by setting up our project I want to deploy my project for git so let's click on back to servers because I want to click on Integrations right here because I want to deploy my project through git so let's click on git where right here you can link your GitHub account so let me actually quickly delete the previous one that I had all right now once again let's click on link GitHub all right as you can see see my account has been successfully linked to server Avatar the next thing that we need to do is to create a new application so let's first click on our server let's open the server let's click on applications in the sidebar and let's create a new application so I'm going to make a test domain where my application name will be hostinger live wire the test domain will be hosting our Live Wire as well we need to select a method in how we want to deploy our project into our application so we just linked our gup repository and I have added my project in git so the most obvious reason for me is to use the git option then we need to select the provider which will be GitHub in my case the repository type for me at the moment is public so let's click on public where we simply need to clone the http s URL so if we navigate back to our repository click on code say https copy it navigate back to server Avatar paste our htps URL right here select the branch that we want to use which in our case will be Master as well now we can add a deploy script right here but I simply want to continue one because it's a simple deploy so let's click on create application we o I think I just made a mistake I had to add a dash right here all right create application well apparently I need to enter the branch as well I thought the default one would be Master create an application all right it's finally loading meaning that we did something right all right it has prompted us with a message saying our git application has been cloned successfully but if we think about it for a moment there are some steps we have missed right right we haven't created a database and we most definitely haven't set it up so the way we can do that is clicking on file manager in the sidebar let's scroll down for a moment open the public HTML where you will see that our larvo application has been cloned successfully because well I'm actually seeing a larvo project right here so the next thing that we need to do is setting up a database and adding the EMV file for the credential let's navigate back to our application let's click on databases in the menu and let's click on create a new database so the database name that I want to give it is hosting erore lifewire I'm going to set a custom username and password where I'm going to copy the username and I'm going to keep it as it is and I want to give it a password of something very secret now let's click on create a database and give it a moment as you could see we have impr prompted with a message saying that our database has been created successfully so what we could do right here is navigating back to our server open our application click on the application that we have cloned open the file manager scroll down open the public HTML and I'm actually going to toggle the show hidden files checkbox because I need the em. example file right here so the first thing that I want to do is selecting it and I want to rename it Tov let's open it and let's change up a couple credentials the database name was hosting oror lifewire the username was the one that I copied and my password was test 1234 explanation mark then we need to change the application name which is is hosting our Live Wire and let's actually open a new tab for a moment because we need to set our _ URL as well which you will see as our primary domain right here so let's copy it navigate back to the file editor paste it right here and let's scroll down and or up excuse me let's click on Save changes give it a couple seconds all right let's save it if we open a new tab and open the URL that we just copied you will see that we have been prompted with a forbidden message this is happening because larel doesn't really understand our project structure and we can change that by creating a new hidden file inside our project named HD access so let's open our file editor again let's go back open the public HTML folder again let's create a new file let's name it HD access all right give it a moment let's toggle the show hidden files let's open the HD access file and right here I'm going to paste a piece of code which I will add as a comment as well since it is very easy to make mistakes within HD access file so just follow along or copy it from the comment or from my repos story so let's save the changes click on yes I'm sure navigate back to our local host and refresh it you will see that we have received a 500 error and I can tell you why if we navigate back to our file editor for a moment and go back once again open the public HTML show the hidden files in the EMV file you will see that our app key has not been set and that's why we can't open our project so what I recommend to do is simply navigating back to our H panel overview copying our IP address navigating to the terminal say SSH the user root at the I I do want to use a fingerprint so let's say yes my password is a password that I have added myself and as you can see I have been connected so what I need to do right here is change directories into my home directory if I perform an LS you will see a code withar directory so let's say CD code with Ari if we perform another LS you will find the directory that we have created ourselves so let's say CD hostinger another LS open the public directory perform another LS where you will see a larel project so pretty straightforward right here let's say composer update all right it's installing all packages that are required then we need to run the PHP artisen key colon generate command finally we can run the PHP Artis optimized colon clear command once we navigate back to the browser we are right here you will see that our project has been opened inside the browser now this was it for the final video of My Life forer video series once again don't forget to use my discount code of codari when you're going to subscribe to a new to a New Black Friday hostinger plan where you will get an additional 10% discount if you do like my content and you want to see more leave this video a thumbs up and if you're new to this Channel please hit that subscribe button

Channel: Code With Dary

Views: 6,757

Keywords: laravel livewire, laravel livewire tutorial, laravel livewire tutorial v3, how to use livewire in laravel, introduction to laravel livewire, how to setup laravel livewire, how to install laravel livewire, laravel livewire 3, laravel livewire 3 for beginners, tips to improve livewire performance, laravel livewire for beginners, laravel livewire crud application, livewire full page component, laravel livewire crud with bootstrap modal, laravel livewire pros and cons

Id: PzPo5Ky2mRc

Length: 102min 32sec (6152 seconds)

Published: Wed Nov 22 2023