Implementing Dynamic SubMenu Items In Navigation Bar in Laravel | Tutorial

hey guys davan sharma here and welcome to my youtube channel and this video is the continuation of our previous video where we discussed about adding menu items to our navigation bar as you can see here and we discussed in the previous video about how we can add these menu items to our navigation bar and these items are actually coming from our database and are managed by the admin so in this video we will be discussing about how we can add the sub menu items for the main menu items so these these all these all will also be dynamic and we can and these items can also be managed by the admin so let's discuss about how we can implement this so in order to do that let's go to our visual studio code and let's create a model for our sub menu items so what i'll be doing is i'll be i'll be giving a name of giving the model a name of sub menu item and let's also create a migration file so our migration file has been created so let's go to our migration file and the fields that i'll be giving will be similar to our main menu items table so the first will be a name let's give it a name the second will be a string of type link the third will be also a type of string which whose value will be status and in order to identify to which main menu it belongs to we need to give an id so let's give it an id of unsigned big integer since it's a primary key so let's give it a name of since we have our model name as menu item so we'll be giving a name of menu underscore item underscore id okay so i think this will be these fields are enough and by the way we can also even add images or if you want to attach any kind of icons to these main menu items so that we can display it in the front end so it all it all depends on to you what kind of fields you wanna add so let's migrate so our migration has been done and since we also need a controller to manage all these data like adding and deleting updating so let's create an controller php artisan make controller and i'll be giving the name of sub menu items controller and let's also create a resource for that so controller has been created and one more thing is to give it to implement to give the routes for this so i'll just copy these two routes which are for creating and storing these to our database so in order to create to go to the create page let's create sub menu item slash create and the controller name will be sub menu items controller and also give it here let's change the name sub sub menu item dot store and sub menu item dot create okay so now what we need to do is let's go to our back end folder so which is our admin part and let's create a folder called sub menu items let's give them name as camel case so it will be easy some menu items and let's create a folder let's create a file called create so we have our previous file which is create.blade.php let's copy it and paste it here so everything will be same all the fields will be same but the only thing different is we have we'll have an additional option to select our main menu items so let's update this sub menu item dot store so the method will be post and let's change our labels the name will be kept as name and let's the status will be fine let's give it the value of enabled and the value of disabled and let's change this as well some menu item link name will be link and also change this add sub menu item and one more thing what we need to do is let's go to our controller sub menu items controller and as we as soon as we click on the create function what we need to do is we need to extract all the main menu items so what we need to do is let's grab all the main items and i'll keep the variable as main items and the model name is menu item and we want to get oliven actually let's get only the one which are enabled where the status is enabled and you want to get all of them and let's return our view which is backend.submenuitems.create and let's give it a compact variable where the value will be main menu items okay i'll just give it as main items let's give it menu items and menu items okay so now we have the variable menu items so let's go to our create.blade.php and what we're going to do is we'll be having a form field of type select where we'll be looping through each of them to display our main items so let's give it a select a label for select main menu item and we'll be looping through it so name will be menu underscore item underscore id and we'll be looping through this where the option value will be okay let's create a for loop first for each main items as item what we will be doing is we will be looping through each of these items so where the value will be the id of our main item so let's keep it item id and the value will be that will be displaying is item name i think this will work fine now let's save it and one more thing that we forgot to do is let's go to our front end and you know not actually front end go again let's go to our back-end and include the links in our main file so i'll just copy this ally part and i'll just paste it here so here we have sub menu items add a sub menu item and view all sub menu items the link that will be going is sub menu item dot create and we haven't created this so let's only deal with creating the sub menu items for now okay so let's refresh our page and as you can see we have some menu items where some in let's go to add a sub menu item and define variable main items okay it's not main items it's menu items i just made a mistake here for each menu items as item let's reload for some reason it's taking a bit of time okay and as you can see we have all these uh main menu items which are coming from our database so as soon as we click on the add sub menu items what we need to do is we need to go and store these data so let's go to our store function and create our sub menu items so sub menu item create and by the way i have i'm not dealing with the validations here as it's quite easy okay so let's test it out now so let's give it a name of our vision and the main menu item will be i'll be keeping as about us the status will be enabled and let's give it a name of menu example dot test slash our vision and let's add it and we are redirected back so it means our data has been created and let's reload our page and as you can see we have our name of our vision and everything else is working fine and the menu item id is two so let's check it so we have menu items where two is about us so it's working fine and what we need to do if you want to implement these to our front end so in order to do that what we need to do is we first need to define a relation between the menu item and the sub menu item since we have a foreign key in our menu sub menu items table so menu item id so what we'll need to do is we need to define a has been a relation between the main menu and the sub menu since a sub menu has can have multiple since a main menu can have multiple sub menu items so let's go to our main menu [Music] model menu item model and let's create a function of sub menus and what will be returning is will be returning has many relation where the model will be app slash sub menu item and we want to get all the sub menu items where the status is enabled we do we don't want to get these sub menu items whose status is disabled so let's implement that and return it so it should work fine now and let's go to our navbar.blade.php and how do we implement it so we want to display the sub menu items for the main menu if our count of sub menu is greater than 0 and if our count is equal to 0 that means we don't have any sub menu for that main menu and if the count is greater than zero that means we have our sub menus so let's go to our navbar.blade.php and since we are looping through each menu items so we can access the items sub menu relation from here so what we'll do is we'll check if the count of items sub menus let me check it once more menu items sub menu so this is the relation that we are accessing so count of item sub menu is greater than 0 that means we have our sub menu items for that and for that case what we'll be doing is we'll be displaying this this ally and if our count is equal to zero that means we'll be displaying our simple ally which doesn't has any sub menus and let's paste it here and the count of sub menus is greater than zero that means now we need to display is we need to display our sub menus and what we're doing is i'll be deleting these and what we need to do is we need to loop through each of these items so let's create a for loop and for each items not items item since we have name items so item sub menus as let's give it a name of sub menu and we'll be displaying this so what we need to do here is we need to display the name of our sub menu and the field is named sub menus name and the link that you want to go to is respective sub menus link okay so i hope that you can understand it it's the logic is quite simple so if the count of our sub menus is greater than zero that means we have our sub menu under that main menu and if the count is 0 that that means we don't have any sub menus and we won't be displaying anything and the main and we also need to display our main menu name here so the main menu that we are accessing is item so item name and this name is our main menu name and this name is our sub menu name okay so let's save it and let's reload our page and as you can see we have two about us here okay we need to what we need to do is we are looping through if and if the count of items of mean is is greater than zero then we will be displaying this otherwise what we'll do is we will display this one so i forgot to implement and else condition here so if the count is greater than zero then we'll be displaying this ally otherwise we'll be displaying this ally so let's save it and let's reload now and as you can see we have a sub menu item for our about us item about us link so our our vision is displaying here and the link that we want to go to is also working fine and let's check it by creating a sub menu item for contact us page let's refresh it one more and let's give it a name of contact our partners and the main menu will be contact us the series will be enabled and let's give it a name of menu example dot test slash partners let's add and let's take it out here and as you can see it's working fine now and yeah that's how we can implement the sub menu items the logic is quite simple and i hope you can understand it and this much for this video take care and see you in the next one

Channel: Tapan Sharma

Views: 2,313

Keywords: navigation, dynamic, dynamic menu laravel, Implementing Dynamic SubMenu Items In Navigation Bar in Laravel, laravel, navigation menu, laravel 7, dynamic navigation laravel, laravel project, visual studio, navigation bar, clinic template, programming, web, tutorial, admin, doctor, clinic, tapan sharma, laravel 5.8, web development, laravel tutorial, dynamic menu, submenu, dynamic submenus in laravel, php, laravel tutorial for beginners step by step

Id: K6XLmtWEgPQ

Length: 18min 45sec (1125 seconds)

Published: Tue Aug 11 2020