Laravel 8 Livewire Tutorial (Building a Simple CMS): Read, Update, Delete w/ Jetstream Modal (part3)

hi i'm billy and welcome to jack of traits in this video we will add the read update and delete functionality of our pages builder feature and without further ado let's jump right into it [Music] for starters we will just make our read functionality simple but we will add more features to this component since we will convert this into a more functional data table for now let's paginate all the records of this model and pass it to the data variable in the render function and as expected we are going to display all the data in the table do working with tailwind css provides us with better control over our html elements but one thing that i find tedious is that you need to write a lot of css class attributes just to make it look good you can pause this video and copy these class attributes if you may [Music] let's go ahead and loop all the data but we need to know if there are records so we are counting the data before we are looping them let us check to see if it's working we will put the real data attributes later okay good let's go ahead and continue notice that we are adding two buttons the design that we're going to make here is that the update and the delete button should make a modal appear before finally completing the action the plan is that we have to capture the current id whenever we click either the update and the delete button let's make the update button work first and we will deal with the delete button later for us to capture the id we need to pass it in the wire click action in this case we will create an update show modal function in our back end in our update show modal function we will have an id parameter and we are going to assign it to the model id variable like so we will set the modal form visible variable to true here since we wanted to make the modal component appear when we click the update button now let us check if our approach is working good now that we see that it's working we can now safely proceed to our next task let's go ahead and make a function called load model in this function we will retrieve the record base on the id and we will use the model id that we just captured we will then assign the retrieved data to our titles log and content variable [Music] now let's go ahead and check if it's working as you can see we are just reusing the modal form we have created for the create functionality the only difference that we did right here is that when we click the update button we made sure that our modal components model id variable is not empty that is because we pass the id to the wireclick action function earlier we are also able to populate the modal form based on the record that we wanted to update we need to make a little bit of an update here because we are using the same modal component we need to control somehow what button should appear when we create or update an item in our case we need to make the button update appear when there is a model id and if there is no model id we make the create button appear instead the next thing we needed to do is to create the update function that we are calling from the wireclick do and don't forget to also add the model id in the reset vars function now let's go ahead and complete the update function like so this flow is pretty much the same as the create functionality we did in the previous video do now that it is set up let's go ahead and test our code to see if our update functionality is working [Music] now that it is working let's go ahead and add the links to our pagination in our view as well at this point i'm just making our data table look good feel free to pause this video and copy these class attributes as we will wrap our data table inside this colossal markup and to be safe with the display let us also reset the pagination every time we reload the page the mount function will always run once and runs first in the livewire component lifecycle so let's put our reset pagination here do ideally the slug should be a link pointing to the front end let's prepare this before we create the dynamic links used to display the pages these dynamic pages that we will display in the front end will be available once we add the routes later but before that we will add another modal for the delete confirmation let's go ahead and find a jet stream example that we can copy for the delete modal confirmation [Music] do this process is pretty much similar to the ones that we did for the create functionality the only difference here is that we are adding another public variable called modal confirm delete to control our modal component's visibility and don't forget that we should also create another function that will show the modal when we click the delete button we should also pass the id variable like so as you can see it's the same pattern as what we did earlier with the create an update for showing the modal to complete the delete functionality let's go ahead and create the function inside our pages class component the delete function has the same pattern as well we also need to reset the pagination after we delete an item since the list will change otherwise we will encounter a weird behavior in our data list [Music] another thing for our update functionality notice that we aren't able to update because the validation says that the slug should be unique to address that problem we should just ignore the validation when there is a model id value like so now for the last portion let's go ahead and hijack the main route of our application we are going to make our front page a full page livewire component so in our web.php let's pass a url slug parameter to the main route it would be best to put this route configuration to the very bottom of your code since we are receiving slugs to the first segment of our url if you put this at the top you will not be able to access the routes we have configured above anymore to make this easier for us let's create another layout for our front page we won't be using our app.blade.php for our front-end since we have to make a unique layout that will only be available for the guests that visit our website just copy and paste the app.blade.php content and paste it in the front page layout remove the navigation drop-down and the header because we won't be needing them there as we will create a unique design for our front page in the next episode please do not remove the slot since it's going to be used to display live wire components by default when creating full page livewire components livewire uses the app.blade.php as the main layout to change that behavior call the layout function like this to your livewire component so that you'll be able to specify which specific layout you should use for this component now that we established a full page livewire component let's go ahead and load the specific page based on the url slug we are going to retrieve the particular record base on the slug that we provided from our url but before that let's go ahead and check if we successfully pass the slug that we specified from our routes [Music] now that we are able to pass the url slug let's create a function called retrieve content and pass in the url slug as a parameter and in our front page view let's go ahead and display the title and the content as you can see we can create a dynamic page using this approach and with livewire as a full page component we can make our front page as reactive as possible the possibilities are endless in the next video we will enhance our front page using this concept you will be able to create your content management system i bet your ideas will be even better if you enjoyed this video give it a thumbs up comment share and subscribe if you're new to this channel don't forget to hit that notification bell so you'll get notified whenever a new video is up stay tuned and see you in the next video

Channel: Jack of Traits

Views: 13,368

Keywords: laravel livewire tutorial, livewire tutorial, laravel livewire, laravel livewire basics, laravel tutorial for beginners, laravel livewire for beginners, laravel 8 livewire tutorial, laravel 8 livewire tutorial for beginners, laravel 8 livewire jetstreams, laravel 8 with jetstream modal, jetstream modal, read operation, jetstream modal livewire, livewire jetstream modal, livewire modal, update operation jetstream modal, delete operation jetstream modal

Id: G-ngqfbP5Yk

Length: 26min 23sec (1583 seconds)

Published: Sat Oct 31 2020