Skip to content
Node2Know

The Complete View Assembly

We have defined the data source, understood the interpolation syntax, and structured the control logic. Now we assemble these components into a production-ready view. This file demonstrates the complete lifecycle of a server-rendered page: receiving data from the route, processing it with logic, and outputting the final HTML.

Implementation

Section titled “Implementation”

The following example integrates the title string and the users array into a single semantic HTML document. Observe how the control flow handles the “empty state” gracefully, ensuring robust presentation regardless of the data payload.

File: /views/users.ejs

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Things - Professor Solo</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;600&family=Inter:wght@300;400;600;700&family=Orbitron:wght@400;500;700;900&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="/styles/style.css" />
    <link rel="icon" type="image/png" href="/favicon.png" />
    <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
    <link rel="manifest" href="/site.webmanifest" />
  </head>
  <body>
    <header>
      <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
        <a href="/josh">Josh</a>
        <a href="/things">Things</a>
      </nav>
      <h1><%= title %></h1>
    </header>
    <main>
      <article class="card">
        <header>
          <h2>Inventory Log</h2>
          <h3>[ All the Things ]</h3>
        </header>
        <section>
          <p class="bio">
            "This area is designated for Thing containment. Do not feed the
            objects."
          </p>
          <p>The dynamic list of Things is rendered here.</p>
          <p>
            Currently, the data is hardcoded in the router. In a real
            application, the data would be retrieved from a database.
          </p>
          <h4>// Status_Report</h4>
          <ul>
            <% things.forEach(thing => { %>
            <li>
              <a
                href="/things/<%= thing.id %>"
                style="color: inherit; text-decoration: none; display: block; width: 100%;"
              >
                <%= thing.name %> <% if (!thing.active) { %> (Inactive) <% } %>
              </a>
            </li>
            <% }) %>
          </ul>
        </section>
      </article>
    </main>
    <footer>
      <p>
        &copy; 2026 Josh Solomon - Professor Solo | License: Node2Know Learner
        License 1.0 (Node2Know-LEARN-1.0)
      </p>
    </footer>
  </body>
</html>

⏭ Partials & Reusability

Copy-pasting headers and footers is inefficient. Let’s modularize.