Semester_4
01_Introduction
02_DeployAzure
03_JSBasic
04_OOP
05_GET
06_POST
07_PUT
08_PATCH
09_DELETE
10_FrontendTable
11_FrontendAdd
12_FrontendDelete
13_FrontendEdit
14_Database

Code_student.zip

content

Frontend

Great — we’ll build a small frontend that uses your /students API and displays the data in a table. No framework needed — just static files served by Express.

Add the public directory

Add to server.js abouve the routes:

const path = require("path");
app.use(express.static(path.join(__dirname, "public")));

const path = require("path");

Part Meaning

require("path") Loads Node.js’s built-in Path module. This module helps you work with file and folder paths in a safe, cross-platform way.

const path = ... Stores the imported module in a variable called path, so you can use its functions later.

Part	Meaning
`require("path")`	Loads Node.js’s built-in Path module. This module helps you work with file and folder paths in a safe, cross-platform way.
`const path = ...`	Stores the imported module in a variable called `path`, so you can use its functions later.

app.use(express.static(path.join(__dirname, "public")));

Serve any files that are inside the public folder directly to the browser.

File: project/public/index.html

Browser: http://localhost:3000/index.html

Projectstructure

student/
├─ server.js
├─ package.json
└─ public/
   ├─ index.html
   ├─ styles.css
   └─ app.js

In your project folder (the same level as server.js), create a new folder named public.

public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Students</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <h1>Students</h1>
  </header>

  <main>
    <div id="status" class="status">Load data...</div>

    <div class="table-wrapper">
      <table id="students-table" class="table" aria-describedby="status">
        <thead>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Kurs</th>
          </tr>
        </thead>
        <tbody>
          <!-- Zeilen werden per JS eingefügt -->
        </tbody>
      </table>
    </div>
  </main>
  <script src="./app.js"></script>
</body>
</html>

public/styles.css

body {
  font-family: Arial, sans-serif;
  margin: 0;
  background: #f7f7f8;
  color: #111;
}

header {
  background: #111;
  color: #fff;
  padding: 15px;
}

h1 {
  margin: 0;
  font-size: 20px;
}

main {
  padding: 20px;
  max-width: 900px;
  margin: auto;
}

.status {
  margin-bottom: 10px;
  font-size: 14px;
  color: #555;
}

.table-wrapper {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 10px;
  border-bottom: 1px solid #eee;
  text-align: left;
}

tr:hover {
  background: #f9fbff;
}

public/app.js

async function fetchStudents() {
  const statusEl = document.getElementById("status");
  const tbody = document.querySelector("#students-table tbody");

  try {
    // Set the status
    statusEl.textContent = "Load data...";

    // Use the route to get the data
    const res = await fetch("/students");
    if (!res.ok) throw new Error(`HTTP ${res.status}`);

    // Get an array of students
    const students = await res.json();

    // Clear the table
    tbody.innerHTML = "";

    // Add rows to the table
    for (const s of students) {
      const tr = document.createElement("tr");

      const tdId = document.createElement("td");
      tdId.textContent = s.id;

      const tdName = document.createElement("td");
      tdName.textContent = s.name;

      const tdCourse = document.createElement("td");
      tdCourse.textContent = s.course;

      tr.append(tdId, tdName, tdCourse);
      tbody.appendChild(tr);
    }

    statusEl.textContent = `Loaded: ${students.length} students`;
  } catch (err) {
    console.error(err);
    statusEl.textContent = "Error while loading the data.";
  }
}

// When page isloaded the fetchStudents is called
window.addEventListener("DOMContentLoaded", fetchStudents);

const statusEl = document.getElementById("status");

This line finds the element on your webpage whose id is "status" and saves it to a variable called statusEl.

<div id="status" class="status">Load data...</div>

const tbody = document.querySelector("#students-table tbody");

This line finds the <tbody> section inside your table with id="students-table" and saves it in a variable so you can add rows or update content dynamically using JavaScript.

<table id="students-table" class="table" aria-describedby="status"> <tbody> </tbody>

const res = await fetch("/students");

This line sends a request to your server to get the list of students, waits for the response, and stores that response in the variable res.

const students = await res.json();

This line takes the server’s JSON response (like "[{...}, {...}]") and turns it into a JavaScript object or array you can use in your code

Test

GIT

Do not forget

Azure

Deploy and test