CRUD App - Read (Table)

The goal of the homepage is to display all of the data in a nice tabular format. This is possible using an HTML table and some Bootstrap styles.

The Table Structure

First, create the HTML table structure without using any actual data. This will make it easier to visualize the data. Open the views/index.ejs file and remove all the existing code to get started.

1. Add an include to include the header
   • <%- include('partials/header'); %>
2. Under the include, create a div
3. Within the div, create a table with a class of "table"
4. Within the table, create a thead with a class of "thead-dark"
5. Within the thead, create a tr
6. Within the tr, create ths for:
   • First Name
   • Last Name
   • Position
   • Number
7. Under the thead in the table, create a tbody
8. In the tbody, create a tr
9. In the tr, create tds containing:
   • Megan
   • Rapinoe
   • Midfielder
   • 15
10. At the bottom of the file, under the closing div tag, add closing tags for div, body, and html
    • These were opened in the header.ejs file
11. Load up the homepage and verify that the table appears properly!

index.ejs

<%- include('partials/header'); %>
<div>
    <table class="table">
        <thead class="thead-dark">
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Position</th>
                <th>Number</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Megan</td>
                <td>Rapino</td>
                <td>Midfielder</td>
                <td>15</td>
            </tr>
        </tbody>
    </table>
</div>
</div>
</body>
</html>

Using the Data in the Table

Now that the table structure is in place, update the EJS code so that it actually uses the data from the database. It should loop through each player, and create a new table row HTML element with all of their information.

1. Under the tbody opening tag, create an EJS scriptlet containing a for loop that will loop through players
   • Make sure to include the closing <% } %> for the loop under the tr closing tag!
2. Within the td elements, replace the example data with EJS segments that have data from players[i]
3. Load up the homepage, and verify that the table is populated with data from the database!

Code

<% for (let i = 0; i < players.length; i++) { %>
    <tr>
        <td><%= players[i].first_name %></td>
        <td><%= players[i].last_name %></td>
        <td><%= players[i].position %></td>
        <td><%= players[i].number %></td>
    </tr>
<% } %>

Conditional Display

If there are no players in the database, a message saying "No players found" should appear instead of the table. Use EJS scriptlets with an if/else to accomplish this.

1. Under the div opening tag, create an EJS scriptlet containing an if statement
2. Set the condition of the if statement to check if there are any players in the players array
3. Under the table closing tag, create an EJS scriptlet that closes the if statement, and starts an else
4. Under the else scriptlet, add a p with a class of "text-center" saying "No players found."
5. Under the p, create an EJS scriptlet that closes the else

Unfortunately, there is no way to test this without removing all keys from the database. Test out the feature after implementing the Delete functionality!

The code in the index.ejs file should look something like this:

<%- include('partials/header'); %>
<div>
<% if (players.length > 0) { %>
    <table class="table">
        <thead class="thead-dark">
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Position</th>
                <th>Number</th>
            </tr>
        </thead>
        <tbody>
        <% for (let i = 0; i < players.length; i++) { %>
            <tr>
                <td><%= players[i].first_name %></td>
                <td><%= players[i].last_name %></td>
                <td><%= players[i].position %></td>
                <td><%= players[i].number %></td>
            </tr>
        <% } %>
        </tbody>
    </table>
<% } else { %>
    <p class="text-center">No players found.</p>
<% } %>
</div>
</div>
</body>
</html>

Next Steps

CRUD - Update (GET)