Implementing Dynamic Navigation Menu in Laravel | Tutorial

hey guys it's me taban sharma here and in today's video we are going to be discussing about uh dynamically adding menu items to our navigation bar as you can see we have two links here which are which can be managed by the admin so we can go to the we can define the name the status and the links for these menu items okay so let me just showcase you what we will be building towards the end of this video okay so we have our admin section which has these three forms input fields and the first field field is name so let's give it a name of our services and the status will be enabled and the menu item link for now let's let me give it facebook.com let's add the menu item and we are redirected back so the item has been added and let's reload the page and as you can see our menu item has been added here which goes to https facebook.com and yeah the i just wanted to showcase you how to how you can add how you can manage the navigation menu items it's quite simple and we won't be using any packages or any builders for this so one of the main advantages of this is it makes your laravel application cleaner and much faster so yeah without any further delays let's start building it so before we get started i just wanted to mention a few things here so i've already installed laravel um variable in my local computer the laravel version that i'm using is let me just show you computer it's a json file and is version 7 and i've already established already set up our database and the database name is navigation example and as you can see here our navigation example database is empty for now and i've also set up our from front-end templates so the front-end template that i'm using is a template of a clinic website and the data shown here is static everything is static and the navigation bar is also static so later what what we'll be doing is we'll be extracting our data and displaying it in our navigation so which is managed by the admin okay i've also set up an admin template let me just show you menu example dot test slash admin slash dashboard and every data everything is static here what i've done is i've set up a menu bar which consists of two links add an item and view all items and i've also set up a few routes to display our front-end page and our dashboard okay let me just navigate to our web.php file routes web.php as you can see i've defined the front-end controller so uh which goes to our home page and also a set of a group of group for admins which has a prefix of admin and to go to our dashboard we use admin login controller dashboard function so let's start by creating a few models and migration files so what i'm gonna do is i'll create a model m a key make model and i'm gonna name my model as menu item and also create a migration file okay our model and migration file is created so let's go to our migrations and the field that i'm gonna define in this table is so one will be of type string and its name will be name another will be for which will be of type string as well link which one click will go to that respective page and the third will be status which will be enabled or disabled okay so save our file and let's migrate it so our migration has been done and let's see our php my admin okay so our menu items table is here which has the fields as mentioned okay so let's now let's go to our admin folder so you can see backend and i've created a folder called menu items and it has a file called create.blade.php and what i've done is i've set up a few input fields here so such as a menu name i've used simple bootstrap and html to set up the design and this also has status enabled and disabled values and also menu item link okay so let's start by configuring it so let's give it a route of menu item dot store which we will define and let's give it a name of name for our menu name and for our select we'll give it a name of status and our menu item link will have a name of item of sorry link so as soon as we click it we will go to this route menu item.store so let's go to our web.php file and define these routes so the first will be to to our create page so slash menu item slash create which will go to our controller called menu item controller added create which will be called as menu dot create let's also define the same for storing our data so which will be of type post so menu item slash store which will also use our same controller menu item controller at the rate store which will be called as menu item dot store okay so let's define our menu item controller php artisan make controller menu item controller and give it a resource so let's go to our controllers folder and menu items controller so as soon as we click on create what we need to return is return of view which will be in our backend slash macin.menuitems.create and as soon as we go to our store what we need to do is we need to and by the way if i forgot to mention that as soon as i click enter so our menu item model will automatically be imported so menu item create so the name field will be request name the link will be request link and the status will be request status and let's return redirect back once we successfully create it okay and let's also complete our mass assignment protected fillable so our fields will be name status and link okay so let's test it out okay one more thing that i forgot to mention is i have a master.blade.php file and let's give the links here some menu items as soon as we click on add an item we need to go to the route menu item dot create menu.create and okay this will be fine we have haven't defined the view all items view so we can do that later so if so let's refresh our page and add an item okay so let's give it a name of contact us and the status will be enabled and link will be menu example dot test slash contact okay so add it okay we have redirected back so the data should be created okay okay let's create one more about us enabled main example dot test slash about and add it let's double check it okay everything is working now what do we need to do in order to display these data to our front end okay so let's go to our front end and what i've done is i've splitted these files into various smaller files so i have made a file called lampard.blade.psu which consists of these two parts so what i need to do is okay let's go here and see as you can see it has some navigation links so let me delete these files first okay so first we need to make a query so for that what i'll do is since uh our navigation bar is available on all pages so what i'll do is i will go to our app service provider and i'll make a query here so that the data is presented in the application in all the pages so menu items is equal to menu item so where the status is okay let me just check one thing okay status enable capital e where the status is enabled and we want to get all these values so in order to share these we need to do is view share the key will be menu items and the value will be menu items as well okay so now we have the data in our network.php so what we need to do is we can look through each ally okay so b and i forgot to mention that i've also used uh extension called laravel snippets laravel blade snippets and laravel snippets so for that it makes your work faster so for each menu items as items what i'm going to do is i'm going to loop through each of these allies so paste it here and let's remove this active class for now so we want to go to the link called item link and the name of these will be item name okay so let's check it in our front end okay as you can see that these two data are actually coming from our database and we have made our menu dynamic so okay so let's keep the status of this as disabled and we should only see one which will be our about us okay and as you can also see that our links are also dynamic so it is going to menu example dot slash main example dot test about and i've also thought on as you can see we have our sub menu items here so about us our vision our mission and director's message so i thought of making a tutorial on adding a sub menu items to these main main menu items so after this video i'll post a video about adding the sub menu items also so stay tuned and i'll soon add that video okay so if you like the video to like it if you like the content do like the video and subscribe for more contents like this and until next time have a great time and see you in the next one

Channel: Tapan Sharma

Views: 7,537

Keywords: laravel, php, dynamic navigation laravel, web development, programming, laravel tutorial, dynamic menu laravel tutorial, laravel 7, laravel web development, laravel 5.8, dynamic naviagtion menu, Implementing Dynamic Navigation Menu in Laravel, dynamic menu, laravel tutorial for beginners step by step, laravel navigation menu tutorial, laravel navigation menu, laravel for beginners, navigation bar, dynamic submenus in laravel, laravel framework, laravel tutorial for beginners

Id: THN5Q8JBeDM

Length: 16min 55sec (1015 seconds)

Published: Fri Aug 07 2020