2.5 Working With Data
Most traditional web apps are data-driven. In this lesson, we'll simulate a data store and display some actual data in our app.
1.Introduction3 lessons, 20:17
2.Building a Web App6 lessons, 1:01:23
3.Middleware and Routers2 lessons, 16:36
4.Conclusion1 lesson, 01:31
2.5 Working With Data
In the previous lesson we organized our project so that it would be well organized. Which is a very good thing because in this lesson we are going to be adding more code. We are going to add another endpoint called just /guitars so that it would display a list of guitars. Then we will be able to go to in an individual guitars page by saying /guitars/, and then the ID, so 1, 2, 3, or 4. And then we would see the details of that individual guitar. Now, in order for this to work, we need the data store. But we're not going to use an actual data store. Instead, I wrote a simulated data store, it is inside of src>data and in the file is guitar repository. So inside is in array that has several objects containing information about the guitars. And then I I'm exporting two methods for the repository aspect of this. We have an all method to retrieve all of the guitars, and then a getById to retrieve an individual guitar. So with that out of the way, there's also some images. I added an image folder that contains another folder called guitars, and then the guitars are named according to the ID of the individual guitars So So we are going to use those, as well. And the most logical place to start is with our routes. So let's go to the routes folder, and let's add a new file. We'll call it guitar-routes. And in this case, we need to import the guitar repository, so let's start there. We'll just call it guitars, and of course, we're going to require this. Now, we need to go back a directory, so that we can access the data folder. But then we will have the guitar repository, and we are good to go. Then we will have our exports, which is going to be a function that accepts our express application object. And then we will write our routes. So here, we will have a get request for /guitars, this is going to be the index. So that's all of the guitars in our repository will be listed here. So we will have our request and response objects. And in this case we want to retrieve all of our guitars and pass those on to the index view. So we could do something like this where we have the response and we're going to render and we don't have this view yet. But if you'll remember in the previous lesson we set up our views so that they are inside of their own folders. So we will have guitars and then index and then we will pass the data to that. So we can say that, as far as the data is concerned, we will call it guitars and we will just get all of the guitars. So we will use our repositories all method and there we go. So with that done, we need to register our routes, which is done inside of the routes folder, or the routes file, I'm sorry. And so we will call this guitarRoutes. We will import that guitar route file so that we can then register them, and then that's done. So now we can go to our views. Let's create a new folder, and we'll call it guitars and then let's just copy what we have inside of home. We'll take the index inside of home and paste that into guitars. Because that's going to give us, well, just about everything that we need. Of course our content is going to be different. Let's change the title too. Let's say that this is My Guitars. And then we will have a title, let's use an h2, of guitars. And then we want to iterate over the guitars that was passed to this view so that we can display that. So we are going to, use our guitars, and then the for each method. And for each guitar inside of our guitars array, we're going to have the percent and closing bracket. And inside of this for each loop, we could use an unordered list, but I don't want to do that. Let's have a div element with a class of row, and then inside of the row, we will have our columns. On the left, let's have the image. And for the class, let's see, that's col-, so use small, and let's have four columns. And then we will have our image there, so we will have img src and the path is going to be images- or, it's not the full, it's img. And then guitars, and then the ID of the guitars. So we're going to include that here. So we'll say guitar.id. That will give us the guitar and I think they are jpgs. And let's make sure. Yes, they are. So they are jpgs, so we will have the image there. And then for the rest of that row let's go ahead and say col-sm-8. We can have an unordered list that will have some of the information. And that really messed that up so let's have div class, there we go. All right, so we will have an unordered list. And we can have the name, we can have the manufacturer, and the year as well. So that we would have those, and then on the detail page, we will have the individual details. So as far as getting this information, we'll say guitar.name. And then I believe the properties are manufacturer and year. So we'll add those. And then we will see if this actually works or if I have forgotten to do something. So let's make sure the application is running. We're not getting any errors, so that's a wonderful thing. So let's refresh this and let's see what we have. Well that's rather ugly, [LAUGH] but we are seeing at least the data that we expected. We have the images and then we have the information, which isn't very clear there. So what we can do then let's, instead of having an unordered list for the name, let's take out the name and let's use an h4. Where we will have the name. Let's also change our columns as well. Although, we could use Bootstrap to automatically scale the image. So let's set the class to, I believe it is img-fluid. I don't remember. We will see. Let's refresh and see what we get. Yeah, that's better. It's not great, but it's better. My year property is wrong, so let's look at what we have as far as our data source is concerned. Well, year, it's right there. So what did I miss? That's a problem, just one single character will make that wrong. And let's also add a link. Up here at the top, just that we can navigate there as well and then we will be done for this lesson. So let's go to our views and actually that's inside of the partials and that is the header. So we want to add another link for our guitars so that we will have that. So the url is going to be guitars, the text will be guitars. And will be good there, so if we refresh, we have our home and guitars. And we can see our list of guitars there. So in the next lesson, we are going to add the ability to query based upon the ID. Now we are not going to use the query stream, we are going to make it part of the URL. So that we can say slash one or slash two or slash three and so on and so forth, so that we can see the individual guitars and their details.