Insert and Retrieve records using livewire | Laravel livewire

[Music] hello viewers in this video we are going to see how to install livewire and make crud operation using wire in laravel make sure that your xampp is running navigate to phpmyadmin create new database and rename to livewire underscore examples copy this database name and update.n file db underscore database variable to livewire underscore examples save file and open new terminal enter php artisan serve command in terminal and hit enter as you can see we are on laravel 8. create new controller by entering php artisan make colon controller main controller command in terminal as you can see main controller php file has been created go to web php file and import main controller class on it create new get root for displaying world countries list let's create this index method inside main controller class now create this view blade file as you can see we have countries page let's design this page and add default table add default data for table now we have table let's link bootstrap in order to have better looking table layout link bootstrap css file before closing head tag you have to include jquery before others files before closing body tag include bootstrap js file and then include bootstrap bundle js file as you can see we have nice table now now we are going to install livewire in our project just go to google and search for laravel livewire click on the first link this is an official website for laravel livewire here you will find all information about laravel livewire and how you can use it on your laravel project now let's see in documentation to install livewire we will use this command back to visual studio code and enter composer require livewire livewire command in terminal now wait for installation as you can see livewire is successfully installed into this project to include this live wire on certain blade file we have to use the css and js where you will use livewire let's add this livewire styles before closing head tag on countries blade file and add this livewire scripts before closing body tag let's check as you can see livewire styles linked well on this page also livewire scripts included well on this page now we have successfully installed livewire in our project let's create our first livewire component we are going to make livewire component for this table just go to terminal and enter php artisan make colon livewire countries and hit enter this will generate two files 1. inside app http livewire directory and other inside views livewire directory now let's move this table to livewire component let's see what happened when we refresh page we don't see our table because we didn't include our component on this page to include this component we can do this just enter the name of livewirecomponentbladefile without.blade.php you can also include live wire component like this as you can see this way works too all these ways used to include livewire component on page let's create country and continent models as you can see both country and continent models have been created also their database migration files generated too let's add continent underscore id country underscore name and capital underscore city columns on countries table structure and also add continent underscore name column to continence table structure after this run php artisan migrate command in terminal by refreshing our database now we see tables generated after migration this is continent stable this is countries table let's insert continents manually as you can see we have all continents in our table let's add button to countries component that we'll use to open bootstrap model let's create add modal blade file we will use this modal to insert new country info into countries table let's give this modal ad country class name don't forget this on this model disable keyboard escape key to close this modal also disable close this modal when you click on backdrop let's center this modal now include add modal file on this livewire blade component as you can see we have that modal on our page let's add functionality to this button to open add country modal now let's add that function inside this country's component class let's use this on addavent listener add new add event listener for open ad country modal let's test as you can see we can have this alert when we click on this button let's open modal instead of showing alert use this class let's test as you can see when we click on add new country button we can show this modal let's add form to this modal let's test as you can see we have a form let's make these select options dynamic according to the continents from continents table import both continent and country models here now pass continents and countries data on this country's view like this let's access this continent's data on component blade file we are going to make these select values dynamic just use for each directive here let's test as you can see we have now all continents on select options let's submit this form using laravel livewire add the following wire model to each element let's define continent country and capital city variables inside countries component class like this let's add save method to this form then add this save method to countries component class let's test as you can see we can get this message after submitting form just validate our inputs continent must be required country name must be required and be unique in countries table capital city must be required for displaying validation errors we have to add error spans on under each element this must be similar to this this must be similar to this and this be similar to this as you can see we have validations errors displayed under each element we have problem here if we close this modal and open it again we still having the previous displayed validation errors and last entered values on element how to reset this form before showing modal back to our ad event listener and add the following lines here clean all validation errors inside spans and reset our form let's test now we have the following validation errors if we hide this modal and try to open it again we don't have the any displayed validation errors and form resetted too let's add close modal button here as you can see we can hide modal by clicking on close button now let's submit this form after validation let's insert data into database add new event listener for closing add country modal after cleaning and reset form hide add country modal and display success alert let's test as you can see albania has been inserted to our table let's insert another country as you can see we have this problem if we click on country name input field the previous record filled on the following inputs let's fix this problem before opening modal we have to reset input variables like this let's test again if we click on add new country button there is no auto fill of previous element value friends as you can see our insert new country info process completely done we are going to make this table data dynamic according to the countries saved into countries table just use for each directive for this table row as you can see we updated this table let's enter real country values we will use laravel relationship trick to display continent names according to the continent underscore ids stored in countries table just go to the country modal and add the following belongs to relationship to it so instead of displaying continent id here let's display continent name like this as you can see the continent names displayed properly let's continue now our country's list have been displayed into table let's add new country as you can see new saved country has been displayed on this table friends next video we will see how to edit and update country information you

Channel: Irebe Library

Views: 3,200

Keywords: irebe library, laravel livewire, livewire, livewire crud, create insert in lavewire, crud in laravel livewire, laravel crud, laravel livewire tutorial, livewire tutorial

Id: U5-P3KlArp8

Length: 31min 33sec (1893 seconds)

Published: Thu Jun 03 2021