Laravel 8 how to create Livewire component - Contact form (PART 1) Livewire componentin Laravel 8

hello guys and welcome back to the channel it's been a while since my last video and now i'm coming back with a laravel live wire series i already recorded few videos so you can expect videos every week about live we will learn how to use it how to create forms how to save data how to validate data and how to instantly validate data so you can give instant feedback for users and if you're interested please subscribe and today we start to create a form a contact form and we will save it into the database and in the next series we will in the next video we will learn how to validate this form okay so stay tuned and please subscribe okay so first of all for this tutorial let's create a new laravel project we will use jet stream during the installation so open up a command line and let's use the laravel new command a lot of new and your project name in this case it will be live test and in order to use the jet stream scaffolding we need to use the dash dash jet flag okay we would like to use live virus so press 0 and enter and enter again because we don't want to use themes in this project okay while it's working let's set up our database for this project so open up our localhost.phpmyadmin for this hit new name your database in my case i will name it same as my project name so live test hit create and our database is ready right that's done now we need to use npm to install all our dependencies but first of all let's see inside this newly created project folder so cd live test enter we are inside this newly created project and now we can use npm install right that's done now we need to compile our css and js files in order to do that we will use npm run a watch okay so i leave it like that it will running in the background so if we check if we make any change in our css or js file it will automatically recompile it so i just minify this okay now i open up one more command line for doing the migration so i'm inside this newly created project folder and i do php artisan migrate okay as you can see tables are created successfully let's just check it let's have a look if i hit refresh i see all the i see all the tables just created inside the live test database okay so i leave it like that and i open up one more command line for running the server i will use php artisan serve command for running a server right the development server is on this address you can open up it in your browser let's just do that here you go we have a freshly installed laravel 8 application with jet stream and we will learn how to create livewire components in this tutorial right first of all quickly let's create a new user so if we go to the register we can see the registration page okay so hit register and we should be able to create this new user and yeah we are redirected to the dashboard so the user has been created and if we go to the profile page we can see our profile informations we can delete our account and stuff like that we can update our password and name and by default the profile image upload is disabled by but by changing only one line in our code we can enable the profile image upload so let's just do that but before we do this let's open our project in vs code okay so let's enable the profile image upload if you go to the config folder you will find the jetstream.php and if you scroll down you will find these features array and if you uncommand the very first one this is the profile photos and if you save this file you should be able to see the profile upload section now in your profile page okay so let's just upload one image for us okay so i selected an image and let's just click on save and it should update automatically without any page reload okay so as you can see we get an error and error is because if we go back to vs code and if we check dot env file as you can see the app url is this live test dot test but in the browser we are using this address so we need to change it in the environment file okay and if we save it now we should see our image and the remove photo and if we upload a new photo it should be working fine okay so let's look out and let's build our very first livewire component it will be a contact form where the user can enter their name email and a message and when they hit the send button we will save their message and their details in our database and if we look in inside the dashboard we can read that message but today we will create the form and the live wire component so let's just start with it let's create a livewire component and we will use php artisan make livewire and component name in this case i will name it contact form okay if we hit enter enter again let's go back to the bs code and if we check our app folder http livewire we can see we created this contact form class it's more similar to the controllers at the moment as you can see it only returns a view returns a view which is a contact form inside the livewire folder so let's just see that if we are going to the resources folder and views we should see here the livewire folder now but for some reason it doesn't update it so i need to close vs code and reopen our project again in vs code and as you can see inside the views folder now i can see the livewire folder and we have the conduct form this is basically the view for our contact form okay so in order to edit this page this welcome page we need to edit this wacom.blade.php and from this page i would like to keep the navigation bar because we need it on every page so let's just find the navigation in this vacuum the blade.php file and it's here everything is inside this if statement so all i need is to grab this one copy and because i don't want to type out the nav bar on every single page it's a good idea to create a layout for that uh a lot of our jet stream coming with layouts out of the box app if you go to the uh layout folder app.blade.php it's used by the back end so when we logged in as a user or as an admin it's uh using this app.php as a layout and for the guest users we can use this guest.bay.php as a layout so of course he would like to see the nav bar on every page so let's create a nav tag for that as well there you go and i also don't want to make it fixed on the top so let's delete these uh tailwind css classes and let's say i want to make it flex and justify the content to the end and let's make it the background color let's make it a grayish color okay everything is saved and now now let's go back to the vacuum blade.php and delete everything from here okay so by default we can see this wacom.bay.php in our browser but we can't see the navigation bar and it's because we are not extended the gas layout so in order to do that we will use the blade component syntax so if we want to extend the cast. guest layout we need to use x and the name of the layout in this case guest and in this case it's because it's located in the layout folder we need to type in layout as well and now if we type in something here we should see this dummy text and the navigation bar on the top as well hit refresh and yeah we can see the navigation bar on top login and register and we can see this text so basically we are now extending this layout and everything in the welcome.bay.php has been inserted to this section to this slot section okay so let's go back to the backhand.please welcome.blade.php okay so let's go back to the welcome page and let's say this will be the contact form let's save it okay so we have created a contact form livewire component now we should somehow insert it inside the welcome page so let's say we want this text let's go to the livewire contact form and paste it here of course if we're going back to the page we can't see nothing because we are not including our livewire component libraryview inside this webcam.blade.php how to do that we can use the at livewire and the livewire component name in this case contact form okay so what we have in this contact form only this contact form text let's just see how it works and as you can see the same result but now it's coming from the livewire component okay so let's create now the livewire contact form and of course we are using terrain css and if you want to speed up your development i highly recommend a website which provides you pre-made components pre-made tailwind css components so if you go to the google blocks the very first link this github link ready to use they have been css blocks click on it and as you can see you can find different pre-made elements for your website it's free at the moment i hope they keep it free for us because it's very good for now we need a contact form so let's go to go to this contact form section and let's use this contact form even you can change the colors of the team as well okay so let's check the code and copy to the clipboard and if you're going back to the vs code let's delete this dummy text and paste our form here let's refresh our page and as you can see we have a fairly nice contact form out of the box now let's make it a livewire component so basically we want to save the name email and the message and if we hit the this button we would like to save it to the database okay first of all let's just rename this button i want to rename it to save if you ever used vue.js the following syntax should be familiar to you so let's find the name input field which is here input and let's make it a livewire input basically so let's say wire column and model equals to name and let's do this exactly the same with the email okay and now we want to send these data to the back end there is more way to achieve it first you could just easily listen on this button and if you click on this button we will listening on this click and we call a function at the back end which will save our data into the database or you can turn it into the regular form for example so just after this section the very first div let's make it a form okay so we have a form tag now and of course this form now if we click on the submit button is listening and it submit the form but at the moment it doesn't know where to submit or what to submit so let's make it a livewire form so wire error submit because we will submit the form but we want to prevent the form default form submission so just similarly to vue.js we will use prevent and now we can define the function we want to call at the back end so we want to save it to the database so let's call it save message now let's go back to the backend and make this save message function but before we do that let's go back to the back end so it's up folder http livewirecontactform and we need to define these variables name email and message in order to likewise be able to work with them so let's say public and the name of the variable the first is name so public name and by default it's equal to an empty string let's do this for the email and the message as well okay now we are connected we are live we are wired our front end our view to the back end so just to prove this let's go back to the view and now we are able to use this variable on the front end for for example let's go just under to the submit for submit buttons here is the save button and just under that let's create a div and now we can write out in live the input fields value to the front end so let's just use the message so let's just use the message variable so it will be very similar to vue.js the experience so if i start to type in and now if i type in something in the form we should see down here but we are not seeing it because we are not using the live value yet we need to include it inside the template as well so if you go to the layout and if you check the app.blade.php which is used by default by the backend by the navigation by the dashboard as you can see we have live wire styles and live wire scripts at the end so let's just copy them and paste it inside the guest layout so inside the head goes the live wire styles and the scripts are going just before the ending body tag there you go and now if you're going back to the website hit refresh and if i start typing as you can see it's lively updating our content down here so this is where the live viral shines now we need to create a model so we will be able to save somewhere our data so let's just do that let's go to the command line let's create a model and migration as well for this message so i will use php artisan make model and flag m for this command php okay now we need to allow our our application to populate these fields so if you go to the app models and we have this message module now we need to create a protected property called fillable which will be an array and we want to fill the name field the email field and the message field okay and we also need to create the database in the and we also need to create this table in the in the database so let's go to the database folder migrations and this newly created messages migration file and let's create a table for the name which will be a string okay let's let's migrate this into the database so php artisan migrate right let's check it in the database live test okay we have this message with name email and message great so basically everything is set up now we need to save it somehow inside the database so let's go to app http livewire contact form and let's make the save message function so let's create a public function save message save message okay now we are able to create new entries into the database so as we used in a controller before in laravel let's just import the message model so use app models i think it's models yeah it's models and the message okay now we are able to create a new entry into the database so message create and it will accept an array so first we want to save the name so this is referring to the database inside the database we have a name fields so we want to populate that with this name so this name and next we want to populate the email field inside the database with this email which is coming from the view okay so email field in the database with this email which is coming from the front end from the view and the same for the message in the next video we will create a validation and we will send a notification if everything was successful but today we will just only save it in the database and we are resetting the form because at now we are not resetting the form so the user doesn't even know that the form has been submitted successfully uh test just just test it out now let's go back to the browser hit refresh [Music] let's have a look email property not found let's go and yeah i have a typo here so it should be e mail no so it should be email okay let's have a look now i'll name to the fillable property to allow mass assignment okay so i have a typo i think there as well fill up email and message okay so everything should be fine and now let's have a look okay and let's send a message this is the first message okay let's hit save and now it should populate our database yeah we have the first message from a user saved in a database this is the third message the name email and the message has been saved as we expected but as you can see we still can see the messages even it's been submitted successfully so let's just reset the form when everything is fine in order to do that let's go to the contact form class and inside this save message function we need to reset this email this name and this message okay so this name equals to the empty string okay now after saving the form inside the database we should reset all the input fields and the user will see empty fields here so let's hit refresh okay so i just figured the form out with code share two two two second message hit save the form has been resetted and the second message has been saved in the database okay so in the next video we will create a form validation because if i hit save again it saves an empty message into the database and we don't want that so we will make them required so we will create a validation and it will be a real-time validation so without any page reload the error messages will be displayed for the user and also if we hit save and everything was fine then we will show the user a a successful notification as well okay so in we will create them in the next video please subscribe and stay tuned thanks bye

Channel: Code Fisher

Views: 3,388

Keywords: Livewire, Laravel 8, Laravel 8 Livewire, Livewire Component, Livewire contact form component, Save data with livewire, validationg data with livewire, tailwind contact form, Laravel 8 livewire jetstream

Id: sFi4U3lDuQo

Length: 28min 35sec (1715 seconds)

Published: Sat Nov 07 2020