Details Pages with EJS : Node Guide

Details Pages with EJS

Details Pages

So far we have a view that list all the films (with images). Next we'll make each of these listings link to a second page that will display specific information about that individual film. We will do that by re-visiting a concept we saw with the API example where a value is sent in the URL in the format localhost:3000/filmDetails/645268083f37a8fd938b26a1

Build the links

Edit src/views/films.ejs to include links to a route of film/:id.

SNIPPET: src/views/films.ejs
 

  <section class="wrap">
<% films.forEach((film)=>{%>
<div class="filmThumb">
          <div>
            <a href="/film/<%= film._id %>"
              ><img
                src="/images/<%= film.filmImage %>"
                alt="<%= film.filmTitle %>"
            /></a>
          </div>
          <h3>
            <a href="/film/<%= film._id %>"><%= film.filmTitle %></a>
          </h3>
        </div>
<% }) %>
</section>

Note how the dynamic value of <%= film._id %> is used to create individual links for each film. We also make both the filmTitle and the images links to make the application more user friendly.

Adding the Controller

Add a controller for extracting data for one film:

SNIPPET: src/controllers/controller.ts
 

  async function getDataById(id: string): Promise<IFilm | null | { error: string }> {
try {
const film: IFilm | null = await Film.findById(id);
return film;
} catch (error) {
console.error("Error retrieving data:", error);
return { error: "Failed to retrieve data" };
}
}

Ensure you add the getDataById method to the exported functions.

Create a route that receives the id as a URL parameter and then passes the id to the getDataById method in the controller.

SNIPPET: src/router/router.ts
 

  router.get("/film/:id", async (req: Request, res: Response) => {
try {
const data = await dataController.getDataById(req.params.id);
res.render("filmDetails", { "title" : false, "film": data  });
} catch (err) {
 res.status(404).send("Page not found");
}
});

The Response object res uses the render() method to call the filmDetails view and pass two values, title and film. These are then references in the EJS file:

SNIPPET: views/filmDetails.ejs
 

  <div class="container">
        <h1><%= film.filmTitle %></h1>
        <p><%= film.filmDescription %></p>
      </div>

The hyperlinks in the films view should now link through to the details view.

Challenge: Add more information to the filmDetails view such as the film certification and release date. Can you also display the image?

Next: Latest Data on the Homepage