Create a movie reviews app with Node.js and Express

Part 4 - Create the home page

Build web apps with NodeJS & Express

🕑 This lesson will take about 20 minutes

In this lesson, we will modify the route for the home page so it can retrieve all the movies from the database. Then we will create an EJS template for the home page that will display a list of movies and their basic details. In this example, we will use the EJS rendering engine, but you could use others such as Pug or Handlebars.

Step 1 - Modify the app.get(‘/’) route

Modify the app.get(‘/’) function in the index.js file by replacing it with the following code:

app.get('/', (req, res) => {
 // Retrieve all movies from database
Movie.find({})
.then((result) => {
console.log("All movies retrieved from the database");
// Render the home page and pass through list of movies from result
res.render('index', {
moviesList: result
});
})
.catch((err) => {
console.log("No movies were retrieved from database.");
})
});

The index.js file should now contain the following code:

What have we done so far?

In the app.get(‘/’) function (for the home page route), we have used Movie.find() function to retrieve all movies from the database. This function will either return a list of all movies and their details, or an error if something went wrong. If data is retrieved, an "All movies retrieved from the database" message is displayed in the console and the list of movies and their details are stored in result. Next, the home page is rendered and the list of movies and their details will be passed through to the home page template (index.ejs) as moviesList when the home page is rendered.

The next step is to add our HTML code for the home page in the index.ejs file.

Add the HTML code for the home page

The home page will display a grid of movies with the thumbnail image, title, genre and year of release for each movie. There will also be a button under each movie to click to view all of its details and review, and there will be a button at the top of the page to click for adding new movies.

Open the index.ejs file in the views directory (the home page template). You will need to add HTML code and include the CSS file to apply the theme to the page.

  • In the HTML code, we will use a forEach loop to go through each of the movies in the collection and display the title, thumbnail image, star rating, and link to a page that will display all of the information about the selected movie and its review.

  • Depending on what rendering engine you use, your CSS code, and how you want the movies to be displayed, the code below will differ.

  • We have a forEach loop that goes through each movie (movie) in the list of movies (moviesList) and displays the title, genre, year, etc.

  • To display the star rating, there is a while loop that gets the rating of the movie (eg. 4), then repeats the loop that many times (eg. 4 times) and displays the star image in each iteration of the loop. So, if the movie has a rating of four, then four stars will be displayed.

  • We have also grabbed the ID of each movie so that each movie can have a link to a page with an ID that will look up the movie and display the relevant details and full review for that particular movie (this will be covered in the next lesson).

Add the following code to your index.ejs file in your views directory.

Start your server (using the terminal command node index.js or click ‘Run’ if using replit.com). Navigate to http://localhost:3000 in your browser. If all goes well, the home page should load and display a grid of all the movies in the database (at the moment there’s only one movie though).

In the next lesson, we will create the page that will display the full details for a selected movie and the review for the movie (the user can select a movie from the home page and then view its full details and review).

Next lesson: Create a Movie Reviews app (Part 5 - Using the findById() query)