FREELessons: 12Length: 1.5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.5 Displaying Data With Handlebars

In this lesson, we'll finally use Handlebars to display a list of guitars. We'll also slightly modify our project structure to make it easier to find the code we want to work with.

2.5 Displaying Data With Handlebars

In this lesson we aren't going to be looking at any of Vision's features. Instead we are going to kind of look at what we have already talked about, and that is displaying content as well as project organization. Because I want to use this lesson to set us up for the next set of lessons that is going to be talking about handling user input. So what we're going to do is display guitars. Some people like cars, other people like other things, I like guitars. So inside of public I added an image folder that contains some pictures of my guitars. And then inside of the source folder I added a data folder. And this contains a guitar repository to simulate a data store. This is exporting two methods. The first is the all method, which is what we will use in this lesson. And then in the next lesson, we will use this getById method. So in the next few lessons we’re going to talk about user input in detail, but let's just set a base line here. A web application receives user input through the request so this means that for get requests the user input is the URL. And we need to talk about how we want to access this guitar information which means that we need to talk about how we want to design our URL. It also means that we need to talk about our routes because that is also going to determine how we handle the URL. So as far as the URL is concerned, I think it could be pretty simple that we just have /guitars. And then in the next lesson whenever we get guitars by ID then we will have the guitar ID being added as a segment to the URL. So as far as the URL is concerned, that's pretty simple. But then we need to talk about how we're going to setup our routes. Because right now we just have a single file for our routes, it's a default route. And I don't want to come in here and route for our guitar stuff. I think that that needs to be inside of a completely separate file. So what I want to do then is break our routes into multiple files. So that we have one for the default routes and then one for the guitar routes. But I don't want to have multiple requires for our routes whenever we register them. Instead I just want one require. In fact, we could just call it routes and then inside of this routes file it would then pull in all of our other routes, so that they would be combined here inside of the routes file. Which will then be used for the register method. So we're going to do some reorganization. The first thing we're going to do is re-name our default routes to just simply routes. And our code is going to look like this. We are of course going to require all of our routes. So we will require the default routes from a file that we can just call default. And then we can do the same thing for our guitar routes. So let's go ahead and have that code ready to go. So we'll have our guitar routes, which will be in set of a file called guitars. But as far as what we are going to export in these files, all we really need is the array of objects that define our routes. Because what we could then do is whenever we call server route, we can just concatenate all of our arrays. So we will use our default routes and then we will call concat. We'll pass in guitarsRoutes. And then as we start adding more and more routes to our applications, we could just come here, add another argument to the concat method and we'll be good to go. So I like that approach, it's simple and it also makes it easier to maintain. So let's create a new file. Let's call this one defaultjs and all we are going to do is export our array of objects that define our default routes. And that's easy enough. So let's go ahead and get rid of this comment because we already have some code that demonstrates a handler function. So now we just need another file that is going to contain our guitars routes. And let's use what we have in default JS as a basis, because that's really going to give us a lot. Let's get rid of these first two objects and we'll start with just this one route that has contact, but of course, this is going to be guitars in this case. And as far as the view is concerned, we're going to be displaying a list of guitars, that is typically the index. However, we already have an index view. And it is directly inside of the views folder. So this is another thing that I want to start organizing. I don't want to pollute our views folder with any views directly inside of the views folder. Instead, I want to organize these into their own folders so that we will have a folder for our default views and we will have another folder for our guitars views. And that means that we're going to need to modify some of our code. Let's go ahead and move our contact and index views into default. And then all we need to do is change our routes, so that instead of just using the index template, we'll say default/index. And then for the contact we would do the same thing, default/contact. And we will use that same idea inside of our guitars routes. We will have guitars/index and that's just going to work. So let's add that view inside of guitars. And then we will pull in our page title partial since we already have that. And we also need a loop so that we can loop over our guitars and display them. However, before we do that, let's go ahead and write the code that's going to retrieve our guitars and then pass them on to the view. So we need to bring in our guitar repository, so let's just call it repository and we will require. Now this is a direct read back. So we need to say data and then guitar repository and there we have our repository. So that inside of our handler function we can then get our guitars with the repository. And we will use the all method. And then as far as the data that we passed through the view, this isn't contact us. We can call this 'My Guitars' and then we will pass in guitars as another property. So that's inside of the view. We have our page title which we are displaying with our partial. And then from here on out, we're just going to use normal handlebars templating syntax. So that means that in order to iterate over our guitars we're going to use in each, and let's go ahead and close that so that I don't forget to do that later. And for each guitars, then we will just display our guitars. So we're going to use some of bootstrap's classes here. So we'll have a row that is going to have two columns. On the left, we will display the actual picture. And let's use a column of 4. Let's also use the small designation. And then, we will have our image. Let's use the fluid class, so that the image will size, based upon the size of the column. And then as far as the source is concerned, we want to pull in our images. It has guitars, and then we use the ID of that guitar. Now, yes, we should use the alt but we're not going to. And [LAUGH] we will be finished with our image. So because we have a column of four then that means our next column needs to be eight. And that's going to display the information. So let's once again col-sm-8. And we need a title so that we can display the name of the guitar. Let's use an h4 element for that. And we will simply output the name. In the next lesson we are going to have a link here so that we can click on it and then go to the details page of the guitar. And then let's have some information. We don't need to put everything but it would be nice to have the manufacturer. So let's do that and then let's also have the year that it was made, and that will be it as far as the information that we have on our index page. And that should be it. All that we need to do now is go to our layout page, and let's add a link. And let's do that in between home and contact. And then we will see if this actually works. So let's make the text My Guitars, and then the URL is going to be /guitars. So now is the moment of truth, we get to see if this works. Let's make sure everything's saved, and it is. Let's go to the browser, let's refresh the page, and let's try to go to My Guitars. And, okay, we are at least displaying information but the images aren't showing up. So let's look at the URL here, and [LAUGH] forgot the extension. That's kinda important, isn't it? So those are JPEGs, I believe. So let's add that extension, let's go back and refresh that. Well, that's not gonna work but let's refresh our index page and there we go. We have our list of guitars. And so in the next lesson we will start talking about handling user input. And we will focus on a get request in the next lesson.

Back to the top