We need is the views and then, the template, and I want to pull up my header.ejs and just add another link. Here's the Home link. I'm gonna copy that one, and it needs to go outside this item that has the drop-down of speakers. This is going to link to a new route called feedback, and we'll give it a label of feedback, as well. So that's gonna make another link up here in our navigation right here, and when we click on it, it's gonna go to that route, but, of course, we need to go ahead and build that.
So next up, I'm going to take you to a Gist. So in this Gist, I've placed a copy of form that we're gonna need to add to our page. This doesn't have any EJS at all. You can see that it's really just a form. There's nothing in here that's happening as a result of Express, so I'm gonna click on Raw just to copy all this code, and it's really just a bootstrap form. So we're gonna go back into our partials, and we're gonna need to create a new partial for this new route.
So I'll grab this index.ejs file and just make a copy of it, and I'll call this feedback.ejs. And so, our template is gonna be pretty similar. However, I'm not going to sort of keep a generic, like in most of these, I added links to other pieces of content. This form is not gonna have anything in it that is going to be different from page to page.
So I'm gonna take this entire row right here. I think I actually need the container and then just paste the content. So, yeah, the container's already there. So this has a layout for the form, and you can see that it's a slightly different layout. It's four columns on the left, and then, it's eight columns on the right. So once we get all this working, you'll see it. The sort of rest of the template is going to be a little bit different, as well.
We don't need the speakers list. Right? And so, we're just gonna have the header, as well as the head section, and then, at the bottom, we are going to call all of our scripts. This is good because I can use this file to add the script that I need for this page later on. So this actually works perfectly as the template. And now, what we need to do is work on our route and then update our app.js file so that it knows about this new route.
So I need to open up routes, and I'm gonna make a copy of the index.js. I'll call it feedback.js, and it's really not gonna be as complicated as even our index route. So we can simplify things here a bit. We're still gonna require express, as well as the router, and we are, obviously, gonna issue a sort of get method of router here, and it's gonna go to feedback and then, it's gonna execute a function, just like any of the other pages.
And in here, we are going to need really to just render the information. We don't need most of this other stuff. We don't need to pass along photos 'cause this page is just gonna have a feedback form. We also don't need to pass along information about the speakers. So all we need to worry about here is the title, as well as the pageID. And so, if we go back into the feedback.ejs. So I'm just gonna change this pageTitle to Feedback, and the pageID will also be feedback.
One more thing is I need to tell this application to render feedback, so pick up the right template for this page, and the other thing I need to do is just to, let's go ahead and save this, go back into app.js and add this as one of the routes. So I'll do feedback, save this, and now, if everything is working, we should be able to click on this Feedback button right here, and it will take us to the route.
So this is actually a really good review of how we create a simple route. So first, you need to, obviously, make a link to the new page, which we did right here. Then, we need to create a template. This template is pretty similar to the ones that we created before, except that we're using a slightly different layout with a little less room on the left and more room on the right. And then, after that, you can create a route. A route is very simple here.
We don't really need a lot of data on this page. And finally, you need to just make sure that in your original app.js file, you are loading the new route so the app knows how to get there.
In this course, Ray Villalobos walks through the process of creating full-featured websites with these technologies. First, find out how to install each package and leverage Node.js features from within Express. Then learn how to build a basic application with templating engines like EJS; create more flexible, modular code with includes and conditional statements; build APIs to manage HTTP requests to add and delete content dynamically; and configure more complex routing. Along the way, Ray implements features like customer feedback forms and real-time live chat, so you can see exactly what Node.js and Express are capable of.
- Handling HTTP requests with Node.js and Express
- Creating and modularizing routes
- Using templates
- Building flexible views
- Creating an API route
- Dealing with POST and DELETE requests
- Creating live chat features with Socket.IO