Semester_4
01_Introduction

Code_Introduction.zip

content

Einführung

Eine WebApp besteht meistens aus drei Schichten:

Frontend (Client-Seite)
- Das ist das, was der Benutzer im Browser sieht und bedient.
- Geschrieben mit HTML, CSS, JavaScript (und oft Frameworks wie React, Angular, Vue).
- Beispiel: Eingabeformular, Buttons, Kartenansicht, Chatfenster.
Backend (Server-Seite)
- Läuft z. B. mit Node.js + Express oder in anderen Sprachen (Java, Python, PHP …).
- Kümmert sich um die Logik, z. B. Anmeldung prüfen, Daten speichern, Berechnungen durchführen.
- Stellt oft eine API bereit, über die das Frontend Daten abrufen oder senden kann.
Datenbank
- Speichert die Informationen dauerhaft, z. B. MySQL, PostgreSQL, MongoDB, Oracle.
- Beispiel: Benutzerkonten, Bestellungen, Chat-Nachrichten.

Ablauf WebShop

1. Startseite öffnen

Nutzer ruft https://shop.de auf.
Der Browser lädt Frontend-Dateien (HTML, CSS, JavaScript).
Die Startseite zeigt Produkte an (diese Infos holt sich das Frontend über eine API vom Backend).

2. Produkte anzeigen

Das Frontend schickt eine Anfrage:

GET /api/products

Das Backend (Express/Node.js) holt die Produktdaten aus der Datenbank.
Antwort als JSON:

[
  { "id": 1, "name": "Laptop", "preis": 1200 },
  { "id": 2, "name": "Maus", "preis": 25 }
]

Das Frontend zeigt die Produkte hübsch im Browser an.

3. Nutzer meldet sich an

Formular im Browser → Login-Daten werden an das Backend gesendet.

POST /api/login

Backend prüft die Daten in der Datenbank.
Bei Erfolg gibt es ein Session-Token oder JWT zurück → der Nutzer ist eingeloggt.

4. Warenkorb & Bestellung

Nutzer legt Laptop in den Warenkorb → Frontend speichert Auswahl.
Beim Klick auf „Bestellen“ sendet das Frontend mit den Produktdaten.

POST /api/orders

Backend prüft:
- Ist der Nutzer eingeloggt?
- Sind genug Produkte auf Lager?
Wenn ja → Bestellung wird in der Datenbank gespeichert.
Backend schickt Bestätigung zurück:

{ "orderId": 123, "status": "Bestellt" }

Frontend zeigt: ✅ „Bestellung erfolgreich“.

5. Extra-Features (erweitert)

Echtzeit-Updates (WebSockets): Wenn der Warenbestand knapp wird, sieht der Nutzer sofort „Nur noch 2 Stück verfügbar“.
Benachrichtigungen per Mail: Backend sendet automatisch eine Bestätigungs-Mail.
Admin-Panel: Mitarbeiter können Produkte hinzufügen/ändern → wirkt auch wie eine eigene WebApp, greift aber auf dasselbe Backend & DB zu.

Architektur

Webserver (z. B. Apache, Nginx)
- Liefert statische Inhalte: HTML, CSS, Bilder, PDFs
- Leitet oft Anfragen an andere Systeme weiter (z. B. PHP, Node.js, Python)
- „Postbote“: nimmt HTTP-Anfragen entgegen und gibt Dateien oder einfache Antworten zurück
Application Server (z. B. Tomcat, WildFly, Node.js+Express)
- Führt Anwendungscode aus (Java, JavaScript, Python …
- Enthält Geschäftslogik: z. B. „Berechne Warenkorbpreis“, „Verarbeite Bestellung“, „Authentifiziere Benutzer“
- Greift auf Datenbanken oder externe Systeme zu
- Kann APIs und komplexe Anwendungen direkt bedienen
Aufgaben Application Servers
- Verarbeitung von Business-Logik (z. B. Shop-Bestellung, Banking-Transaktion)
- Datenbankzugriff und Verwaltung von Transaktionen
- Sicherheitsfunktionen (Authentifizierung, Autorisierung)
- Bereitstellung von APIs (REST, GraphQL, SOAP)
- Session-Management (Benutzer bleibt eingeloggt)
- Integration mit anderen Systemen (z. B. Mailserver, Zahlungsdienste)
Beispiele Application Server
- JavaScript/Node.js-Welt: Express.js, NestJS, Fastify
- Python-Welt: Django (mit Gunicorn/uWSGI), Flask
- .NET-Welt: ASP.NET Core (läuft auch eingebettet)

Webserver = liefert Inhalte (statisch)

Application Server = führt die eigentliche Logik der Anwendung aus

JavaScript (Client)

Interaktive Elemente:

Dropdown-Menüs, Tabs, Slider
Pop-ups oder Modale Fenster

Formularprüfung im Browser:

Eingabe prüfen, ob eine E-Mail-Adresse gültig ist, bevor sie an den Server gesendet wird

Dynamische Inhalte nachladen (AJAX / Fetch API):

Daten von einer API holen, ohne die Seite neu zu laden
Beispiel: Beim Scrollen werden automatisch neue Posts angezeigt (Endlos-Scrollen)

Animationen & Effekte:

Bildergalerien, Übergangseffekte
Spiele oder interaktive Karten (z. B. Google Maps)

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Clientseitige Prüfung</title>
</head>
<body>
  <h2>Registrierung</h2>

  <form id="registerForm">
    <label for="username">Benutzername:</label>
    <input type="text" id="username" required>
    <br><br>

    <label for="password">Passwort:</label>
    <input type="password" id="password" required>
    <br><br>

    <button type="submit">Registrieren</button>
  </form>

  <p id="message" style="color:red;"></p>

  <script>
    // Formular und Felder holen
    const form = document.getElementById("registerForm");
    const passwordInput = document.getElementById("password");
    const message = document.getElementById("message");

    // Beim Absenden prüfen
    form.addEventListener("submit", function(event) {
      if (passwordInput.value.length < 8) {
        // Verhindert, dass das Formular abgeschickt wird
        event.preventDefault();
        message.textContent = "Passwort muss mindestens 8 Zeichen haben!";
      } else {
        message.textContent = "Alles in Ordnung!";
      }
    });
  </script>
</body>
</html>

Node.js (Server)

Installation

https://nodejs.org

LTS (Long Term Support) → Stabil, empfohlen für die meisten Nutzer
Current → Neueste Features, aber nicht immer so stabil

Windows

Lade den Installer (.msi) von nodejs.org.

Starte den Installer und klicke dich durch („Next, Next…“). Standardoptionen sind ok (inkl. npm = Node Package Manager).

Öffne die Eingabeaufforderung (CMD) oder PowerShell und prüfe die Version:

node -v
npm -v

macOS

Lade den .pkg-Installer von nodejs.org

Installiere wie gewohnt.

Version prüfen im Terminal:

node -v
npm -v

Linux

Node.js kannst du über den Paketmanager installieren

sudo apt update
sudo apt install nodejs npm -y

Test

Erstelle eine Datei hallo.js:

console.log("Hallo Welt!");

Führe sie im Terminal aus:

node test.js

Wenn „Hallo Welt!“ erscheint, ist alles richtig installiert.

Aufgaben

Node.js ist eine JavaScript-Laufzeitumgebung, die es ermöglicht, JavaScript-Code außerhalb des Browsers auszuführen – also z. B. direkt auf einem Server oder PC.

Ziel Node.js:

Normalerweise läuft JavaScript nur im Browser (z. B. für Webseiten-Interaktionen).
Mit Node.js kann man JavaScript auch auf dem Server verwenden, um dort Programme, APIs, Datenbankabfragen oder komplette Webserver laufen zu lassen.

Merkmale Node.js:

V8 Engine: Nutzt die gleiche schnelle JavaScript-Engine wie Google Chrome.
Asynchron & Ereignisgesteuert: Statt auf jede Aufgabe zu warten, kann Node.js viele Dinge parallel abwickeln (z. B. mehrere Nutzeranfragen gleichzeitig).
Leichtgewichtig: Ideal für Anwendungen mit vielen gleichzeitigen Verbindungen (z. B. Chats, Streaming-Dienste, APIs).
Großes Ökosystem: Über den Paketmanager npm stehen hunderttausende fertige Module und Bibliotheken zur Verfügung.

Einsatzgebiete:

Einsatzgebiete:

Chat- und Echtzeitanwendungen
Tools für Entwickler (z. B. Webpack, ESLint)
Microservices

Beispiel http

Das folgende Script erstellt einen einfachen WebServer:

// Datei: http_server.js
const http = require("http");

// Server erstellen
const server = http.createServer((req, res) => {
  res.writeHead(200, { "Content-Type": "text/plain" });
  res.end("Hallo, mein Node.js Webserver läuft! 🚀");
});

// Server starten (Port 3000)
server.listen(3000, () => {
  console.log("Server läuft unter http://localhost:3000");
});

Script starten:

node http_server.js

Der Webserver läft und ist erreichbar über http://localhost:3000

Beenden

Stoppen im Terminal mit Strg + C

Dies ist die einfachste Methode, um einen Node.js-Prozess zu beenden, der direkt im Terminal ausgeführt wird.

Öffnen Sie das Terminal.
Führen Sie Ihren Node.js-Befehl aus (z. B. node mein_script.js).
Drücken Sie die Tastenkombination Strg + C (Strg und die C-Taste gleichzeitig).
Diese Kombination sendet ein SIGINT-Signal (Interrupt) an den Prozess und beendet ihn normalerweise ordnungsgemäß.

Prozess mit PID beenden (kill)

Wenn der Prozess nicht im Vordergrund läuft oder nicht mit Strg + C reagiert, können Sie ihn über seine Prozess-ID (PID) finden und beenden.

Öffnen Sie das Terminal.
Suchen Sie die PID des Node.js-Prozesses mit folgendem Befehl:

    ps -ef | grep node

Suchen Sie die Zeile, die Ihren Node.js-Prozess zeigt, und notieren Sie sich die PID-Nummer (die zweite Spalte).
Beenden Sie den Prozess mit dem Befehl kill, wobei Sie PID durch die tatsächliche Nummer ersetzen:

Code

    kill PID

Um einen Prozess zu erzwingen, falls er nicht reagiert, können Sie das SIGKILL-Signal verwenden:

    kill -9 PID

Beachten Sie, dass dies den Prozess sofort beendet, ohne ihm die Chance zu geben, aufzuräumen.

Alle Node.js-Prozesse beenden (killall)

Wenn mehrere Node.js-Prozesse laufen und Sie alle gleichzeitig beenden möchten.

Öffnen Sie das Terminal.
Verwenden Sie den Befehl killall node, um alle laufenden Prozesse mit dem Namen “node” zu beenden:

    killall node

Wie beim kill-Befehl können Sie mit killall -9 node einen erzwungenen Stopp durchführen.

Beispiel https

Zertifikat

Für Tests kannst du dir ein selbstsigniertes Zertifikat erstellen.

In der Praxis (echte Website) holt man sich kostenlose Zertifikate z. B. bei Let’s Encrypt.

Beispiel für selbstsigniert (Linux/macOS, Terminal):

openssl req -nodes -new -x509 -keyout key.pem -out cert.pem

Country Name (2 letter code) [AU]:AT
State or Province Name (full name) [Some-State]:Austria
Locality Name (eg, city) []:Vienna
Organization Name (eg, company) [Internet Widgits Pty Ltd]:HTL
Organizational Unit Name (eg, section) []:Informatic 
Common Name (e.g. server FQDN or YOUR name) []:Thomas
Email Address []:test@domain.at

Dateien:

key.pem = privater Schlüssel
cert.pem = Zertifikat

Node.js HTTPS-Server erstellen

// Datei: https_server.js
const https = require("https");
const fs = require("fs");

// Zertifikate laden
const options = {
  key: fs.readFileSync("key.pem"),
  cert: fs.readFileSync("cert.pem")
};

// Server erstellen
const server = https.createServer(options, (req, res) => {
  res.writeHead(200, { "Content-Type": "text/plain" });
  res.end("Hallo, dies ist ein HTTPS-Server in Node.js!");
});

// Server starten (Port 3000)
server.listen(3000, () => {
  console.log("HTTPS-Server läuft unter https://localhost:3000");
});

Server starten

node https_server.js

Es wurden 2 WebServer am Port 3000 gestartet!

Nochmals starten

Warnung

Der https Server läuft