Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m

Next lesson playing in 5 seconds

  • Overview
  • Transcript

7.1 Setting Up the Navigation

Traditionally, all of the hard stuff is in the back end. And then when it comes to the front end, well that's the easy part because you have everything already done, all of your content managed. All you have to do on the front end is display that stuff. And that's going to be very true in our application. We of course need to set up a few things, like we need to change what we display here, we also need to set up the navigation and the ability of viewing our pages. But for the most part that's going to be fairly simple and straightforward. So we're going to start with what the user sees whenever they come to the root of our application. Right now they're seeing the welcome view. That is, of course inside of our resources views, and then welcome.blade.php. Now I typically think of this as the homepage and it might be just because I'm old fashioned, but the front page has always been the homepage. And I also think of all of the little extension pages like about and contact, I think of all of those things as home. Now when it comes to the blog or the admin portal, or something else that is very, well it's very specific, I think of those as separate pieces. But, anything that's informational about the site itself, I still consider home, so I want to call this home. Now we have a home controller already. It was given to us whenever we ran the authentication scaffolding, and we can reuse that and we will. But I also want you to think about the organization of the views that we are going to create, because I want to put all of these that are really going to be used in the front end inside of their own folder. And home to me makes sense. So I'm going to create a new folder, simply called home. And let's use the home.blade.php file as the index view inside of home. So let's do that, index.blade.php. And we don't want to use the app layout. We definitely want a layout page because we want all of the pages within our application to have the similar look and feel. But we don't want to use the layout that we used for our admin because that has a bunch of admin stuff. There's nothing that says that we can't use it. But I like to keep the layout pages separate so that the admin has its own layout page, and then the front end has its own layout page. So let's take our app.blade.php, let's copy it and let's rename the copy to frontend.blade.php, and we will get rid of all of the administration links because we don't need that here. Now we do still need the links for logging in and things like that. So we will leave that, but everything else we'll just delete. And that will be a good starting place because we still want to add our navigation, which we will do up here, but then we need to set up the routes and all of that stuff. So let's go to our routing file, web.php. And let's change this so that the root of our application is going to be handled not by this function, but by HomeController and its index method. And of course, if we try to see that in the browser, we are still going to log in because there is some authentication middleware being used that forces the user to login. So we need to go to HomeController, and let's get rid of that auth middleware inside of the constructor. And then for our index method, we will simply say home.index as the view. So now whenever we go to the root of our application, we see our index page, but let's change this so that it explicitly says this is the index. So we will keep the container, but then we will say this is the index on home. Of course, we would have whatever we needed for our homepage here, but this is going to be fine. So that now we need to focus on getting our navigation. Well, here's the thing, our navigation is going to be needed site wide. So if we think about this, it's not a feasible idea to retrieve our pages inside of every method, inside of every controller that's going to need those pages in order to build the navigation. So instead, what we can use is called a view composer. It is something that runs for whatever views we specify and it provides data to those views. And it's not necessarily for the controllers and the methods on the controllers, it's more for the views. So we can create one of these view composers that will provide our pages to any view that we specify. And they will be available so that we can build our navigation. So we need to go to the command line, and we're going to say php artisan make. And we want to make a provider, and we're going to call this ComposerServiceProvider. And then we need to go to our application's config and add that to our providers. So let's go to config, app.php, and down where the providers are set, we are going to add our composer. So that is app, it created that file inside of providers and its ComposerServiceProvider class. So that has that setup. Now let's look at that provider. So we will go to the providers, and there is the ComposerServiceProvider. So we have this method called boot. And this is where we want to set up our composer. Now we can create a composer class and register it here inside of the boot method. So that's for every home view, we would supply the pages to that. Yeah, I don't want to do that. I want to be as simple as possible here. Now, later on, we might think that okay, a class makes more sense. But in this particular case, I don't think so. So the first thing we want to do is add a reference to the view facade, that is inside of Illuminate\Support\Facades\View, because we are going to use that facade in order to set up this composer. So we will say view composer inside of the boot method mind you. And then the first argument is the view that we want to supply our pages to. Now, this can actually be an array of views, and we will get there, but for now, let's say that's for every view inside of home, we want our pages. So then, we will have a function that accepts the view. And then we will simply say view with, let's call it pages, and then we will supply our pages. So that will be \App\Page. Now in this case, we're not going to use the order, whatever method that we used for displaying our links in order, instead we are going to retrieve all of our pages as normal. But now we have a method called toTree. Now this is being supplied by the nested set package. But this gives us all of our pages in the correct order, but it's also organized as a tree, and that's going to make it a lot easier to build our navigation. So for every view that is inside of home, these pages are going to be supplied to those views. And so we don't have to touch any controllers to add the pages there. It's just going to be supplied to those views. So let's go to our layout page. And inside of that layout page, we want to build our navigation right here. However, I want to do it like this. I want to include a partial view that's going to build our navigation. So we can call it partials.nav. And that means that we will need a folder inside of views called partials. So let's do that. And then inside of partials, we'll create a new file called nav.blade.php. Now, our navigation is going to be somewhat similar to what we used in the admin section in that our links are going to be over on the left hand side and we will have drop downs if we have a page that has children. However, if a page does not have any children, then it's just going to be a normal link. Now, let me also say that this is going to be a limited implementation, because we're not going to take into account that a page could be a child of another child. So, I mean, we could spend time implementing that. But that's kind of getting off into the weeds in my opinion. So we're just going to have something that's very straightforward, very one-dimensional. So just keep that in mind. And we're going to branch our code based upon if a page has any children, the reason being because the markup that's involved for displaying a dropdown is very different from just a normal link. So it just makes sense to break this up into two different parts. So we'll start with just a normal link. So this is going to be inside of the else, and we will start with an li element that has a class of nav-item. And inside of this li element, we will have an a element t hat has a class of nav-link. Now there's several HTML attributes that we're going to use. So I'm just going to start by putting those on their own lines just to make that a little bit easier to read. And the text for this is simply going to be the page's title. So as far as the href is concerned, we want to use the URL, so let's output that. The class is of course nav-link, but then we have some that we need for bootstrap. One is the role, and that is going to be button, and then we also want the aria- expanded and that is going to be false. And that's really all that we need for a normal link. So if we look at that in the browser, we see Contact and that is exactly what we would want. So now we just need to focus on our dropdown. And we'll copy what we just typed and we will use that as a basis because some of this is going to be reused. Now as far as the li element is concerned, we need to add in the dropdown class. And we will also need to add a similar class to our a element that is dropdown-toggle. And as far as the href is concerned, we're just going to use a hash, the role is button. And we also need a data-toggle attribute and that's going to be dropdown. As far as the text is concerned, we still want our page's title, but we also want a span element that has a class of caret. And there's nothing as far as the content in that span element. And then we will have our dropdown which is a div element. It will have a class of dropdown-menu, and the very first link is going to be the link for whatever this menu is for. So it's kind of going to be repetitive in that sense. So we will have our a element, the class will be dropdown-item. The href is of course going to be our page's URL. And the text is of course going to be the title. So let's just copy and paste that there. But then we want to iterate over all of the children. So we will have another foreach and we want the page children as child. And let's go ahead and add the end for each. And we will essentially use the same markup except that we are going to change the use of page, instead, it is going to be child. So we will use the child URL and the child title. So now if we go back to the browser and refresh, we have About, and whenever we click we see that there is an About link, followed by the FAQ sheet. Now the reason why I chose this approach is because we could make this pop out on hover. So that we hover over About and if we clicked on About, then that would take us to the About page. But to do that right, I think that we would have to get into the weeds and have to write a lot of JavaScript to make that happen. So instead, this is just a happy alternative that works just as well, although it is a little bit repetitive. So we are well on our way to getting our front end implemented. We have our front page, we have our nav. So in the next lesson, we want to display our page's content whenever we navigate to them.

Back to the top
View on GitHub