Laravel 8 Livewire Tutorial (Building a Simple CMS) : Implement Dynamic Navigation Menu (part9)

hi i'm billy and welcome to jack of traits in this video we will add a simple navigation crud functionality in our admin panel to dynamically expose the navigation menus in our front end we will create two categories of navigation menus that will represent the top and the sidebar navigation this is going to be pretty similar to what we did for the pages crud and without further ado let's jump right into it [Music] before anything else let's fix our page content and limit our content variable when it reaches 50 characters now that we have that done let's get down to business so the plan is we will add a crud functionality for the navigation menus this cut will be pretty similar to what we did to the pages as a matter of fact we will just copy and paste most of the code that we just implemented on the pages crud so this will be nothing new to you if you've been following along in this tutorial let's go ahead and create the main blade php for the navigation menus since we are following a standard format let's just copy the content of our page.blade.php and paste it in our navigationmenu.blade.php file and then let's create another live wire component for the navigation menus and include it in our navigation menus blade file the same pattern goes on the next thing that we wanted to do is add the navigation menus to our route do and we should also add it in our navigationdropdownblade.php like so now that we have that down let's add our migration for our navigation menus and update our migration file so the fields that we are going to add are the sequence type label and slug the sequence field will control the sequence of our navigation items we also need the type field to determine whether our navigation belongs to the sidebar or the top navigation the label field will serve as a label text for our navigation item and the slug field is the actual url link for our navigation let's also not forget to update the fillable property of the model if you are new to laravel the fillable property allows you to mass assign values to your model to explain it you won't be able to save your data in the database without explicitly stating the name of the database fields in your model of course there is another way of doing it by assigning the guarded property to an empty array but the most recommended way to do it in laravel is the fillable property since we are just going to be doing the same process as we did with the pages crud functionality we will just copy and paste in some of the code for the pages to the navigation menus and we will edit some parts of it to fit our navigation crud feature [Music] in the meantime let's just delete some parts of the code that are causing the errors we will add the functionalities bit by bit so that you can follow along smoothly do at this point we will prepare all the necessary public variables for our livewire component as you can see we are still using the same approach that we did with the pages component only this time we are pointing to a different model we have a model id that will be used by us to determine what current item we are dealing with when we try to edit or delete a navigation item and the rest of the variables will be used to store the values of the navigation menu model for starters let's go ahead and create the read function to display all the navigation items but since we didn't have a create functionality just yet let's just add it manually in our phpmyadmin for the sake of having dummy data that we will display this time let's rewrite what we just erased a while ago now that we have dummy data in our database table we will be able to see the items in our data table coming from our navigation menus database table let's continue writing using the for each loop now that we see the list of navigation items let's go ahead and add the create functionality [Music] our approach is still the same we will try to show the form inside the modal like so remember that we just need to control its visibility by creating a boolean variable when trying to show the modal in our case we are using the modal form visible variable and setting it to true when the create show modal function is being run in our front end we are calling the create show modal function during the wire click of the create button do it is expected that we have to add the form elements here in our modal form content just follow along and add these to your code you can also copy the source code from our github repo i've put the link in the description below do do [Music] do do do do do do let's go ahead and create the create function but before we do that let's make a function that will map the values of our public variables to our model data so that we can just simply call this function every time we save their values in our database table in our case we call this function the model data do now that we are ready we will simply call this function to create the navigation items in our database like so do and now let's test our code all right now that we are able to save a record in our database table let's go ahead and make a validation rule so that we can validate the data that are being saved do as you can see we call the validate function every time we run the create function you can also see that we are also setting the modal form visible to false so that our modal form will be hidden and to reset all the other variables you can simply call the reset function this will also actually set the modal form visible to null but to let you see what's going on let's leave it at that in any case you are free to remove the modal form visible to false in your source code if you want to do you will also see that when you try to open the modal click the create button and then accidentally close it by clicking outside of it you will notice that error validation does not disappear one thing that we can actually do is to reset the validation every time we run the create show modal and to be sure let's also reset all the variables so that we can have a clean slate every time we now let's go through this again and add the update and delete button the approach for the update is still pretty much the same with the create the only difference is that we are passing the id of the navigation item and assign it to the model id public variable we needed this approach so that we will know what id of the record we shall update or delete we should also create a function that will load the data from our database table in our case we make a load model function and just query the navigation menus by id from here on everything is just pretty obvious we are assigning the data we get from our navigation menus database table and assigning it to our livewire public variables do let's create the code for our update function like so you can see that the flow is pretty similar to the create function the only difference is the update query [Music] do all right let's also do the same to the delete function we have a different modal form for the delete function since we are only showing a confirm button for this one remember that we just copy and pasted most of the code from the pages livewire component a while ago as you can see the delete show modal also needs an id of the navigation item with this it is easier for us to manipulate the data and call the variables in different functions in this approach we will create a more readable and maintainable code that is by far the most recommended way in building software systems let's then create a delete function that will delete our navigation item do now that we have this done let's display our dynamic navigation menu in our front end we have to open our front page class and add a couple of functions that will query the sidebar links and the top navigation links this is nothing new to us since we will just loop through them in the front end in our case let's just create two functions to return all the sidebar links and the top navigation links you also have to take note that we also need to order them by sequence and created field in ascending order [Music] now we only have to for each loop all of the static links in our front end so just follow along we will also do the same to the top navigation link [Music] that looks great so that is how we implement our simple dynamic navigation links using laravel 8 and livewire in the next video we will try to implement a simple user access role feature if you are not familiar with user access role features it is a software system feature that lets you manage what pages and resources you want your users to access think of it as a way of authorizing users to specific pages or resources of your software application 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: 8,026

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 cms, laravel 8 navigation menu, laravel 8 dynamic menu, livewire dynamic menu, livewire navigation menu, livewire sidebar

Id: A8Tc652gs2E

Length: 42min 24sec (2544 seconds)

Published: Fri Dec 25 2020