Von der Webseite zur Webanwendung

IT 12.6 – Webanwendungen · Einheit 1 · Café-App Schritt 1

Lernziele

Du kannst die Aufgaben von HTML, CSS und JavaScript in einer Webanwendung beschreiben.
Du kannst statische und dynamische Webseiten unterscheiden und die Schritte eines Seitenaufrufs für beide darstellen.
Du kannst Aufgaben begründet der Client- oder der Serverseite zuordnen.
Du kannst die Aufgaben eines Webservers nennen.

Rückblick

1. Was ist ein Client, was ist ein Server?

Ein Client (zum Beispiel der Browser) fragt nach etwas. Ein Server (zum Beispiel ein Webserver) bietet einen Dienst an und antwortet.

2. Warum trennt man Inhalt (HTML) und Design (CSS)?

Damit man das Aussehen an einer Stelle für alle Seiten ändern kann, der Code übersichtlich bleibt und die Seite sich an verschiedene Geräte anpassen lässt.

3. Was passiert, wenn du in einem Formular auf „Abschicken“ drückst, aber niemand die Daten auswertet?

Der Browser schickt die Eingaben an die angegebene Adresse (ohne Angabe an dieselbe Seite). Dort lädt nur dieselbe Seite neu, und die Eingaben gehen verloren.

Eine Seite, die nur zum Ansehen ist

Die Seite des Schülercafés „Pause“ ist fertig gestaltet. Aber das Team ist unzufrieden:

„Jeden Morgen muss jemand im HTML ändern, ob heute geöffnet ist.“
„Wenn ein Produkt ausverkauft ist, steht es trotzdem auf der Speisekarte.“
„Das Bestellformular schickt die Daten ab, aber bei uns kommt nichts an.“
„Man sieht nicht, was die Bestellung insgesamt kostet.“

Die Seite soll zu einer Webanwendung werden, die rechnet, reagiert und Daten verarbeitet. Aber wo passiert das: im Browser oder auf dem Server?

Erkunden: Wo wird gerechnet?

Bevor du weiterliest: Bearbeite die Erkundungen. Die Erklärungen weiter unten helfen dir erst danach.

Erkundung 1: Dreimal „Heute ist …“ mittel

Das Café möchte auf der Startseite den heutigen Wochentag zeigen. Drei Mitglieder des Teams haben es auf verschiedene Arten gelöst.

Fassung A (Datei index.html auf dem Webserver):

<p>Heute ist <strong>Montag</strong>.</p>

Fassung B (Datei index.html mit JavaScript). Probiere sie aus:

Übungsbereich im Browser: Dein Code läuft abgeschottet in der Vorschau. Es wird nichts gespeichert. Sichere deine Arbeit mit „Herunterladen“.

Tab rückt ein. Mit Esc und dann Tab verlässt du das Feld.

Vorschau

Öffnen

Fassung C (Datei index.php auf dem Webserver, in der Sprache PHP):

<?php
$tage = ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'];
$heute = $tage[date('w')];
?>
<p>Heute ist <strong><?php echo $heute; ?></strong>.</p>

Bei Fassung C zeigt der Browser mit Strg + U (Quelltext) am Montag und am Dienstag Folgendes:

<p>Heute ist <strong>Montag</strong>.</p>

<p>Heute ist <strong>Dienstag</strong>.</p>

a) Gib an, welche Fassungen auch morgen noch den richtigen Tag zeigen.

b) Vergleiche bei Fassung B und C: Was bekommt der Browser vom Webserver geschickt? Wo, also auf welchem Rechner, wird der Wochentag jeweils bestimmt?

c) Stell dir vor, die Uhr eines Handys ist falsch eingestellt. Beschreibe, welche Fassung dann einen falschen Tag zeigt.

Tipp 1

Zu b): Bei Fassung B steht im Quelltext (Strg + U) genau der JavaScript-Code. Bei Fassung C steht dort kein PHP mehr. Was folgt daraus?

Lösung

Erkundung 2: Browser oder Server? mittel

Für die Café-App sind diese Aufgaben geplant:

Beim Tippen in das Feld „Klasse“ sofort einen Hinweis zeigen, wenn die Eingabe zu lang ist.
Alle Bestellungen eines Tages für das Café-Team sammeln.
Den Gesamtpreis im Warenkorb anzeigen, sobald man ein Produkt hinzufügt.
Prüfen, ob das Passwort des Café-Teams stimmt.
Die Speisekarte mit dem aktuellen Angebot ausliefern, das das Team am Morgen eingetragen hat.
Ein Bild vergrößern, wenn man darauf tippt.

a) Ordne jede Aufgabe zu: im Browser (clientseitig), auf dem Server (serverseitig) oder beides.

b) Begründe deine Zuordnung bei Aufgabe 4 besonders genau.

Tipp 1

Zwei Leitfragen: Müssen die Daten für andere (das Team, andere Geräte) verfügbar sein? Und: Darf die Besucherin oder der Besucher den Code sehen und verändern können?

Lösung

Webseite und Webanwendung

Vergleicht eure Ergebnisse. Eine Webseite zeigt Informationen an. Eine Webanwendung (Web-App) ist ein Programm, das im Browser bedient wird: Sie reagiert auf Eingaben, rechnet und verarbeitet Daten, zum Beispiel ein Online-Shop, ein Stundenplan-Programm oder ein Bestellsystem.

Drei Sprachen arbeiten im Browser zusammen. Jede hat ihre eigene Aufgabe:

Sprache	Aufgabe	im Café
HTML	Struktur und Inhalt: was es gibt (Überschriften, Tabelle, Formular, Knöpfe)	Speisekarte als Tabelle, Bestellformular
CSS	Gestaltung: wie es aussieht (Farben, Schrift, Anordnung, Handy-Ansicht)	Café-Farben, Kärtchen, Navigation
JavaScript	Verhalten: was passiert (rechnen, reagieren, die Seite verändern)	Warenkorb, Gesamtpreis, Hinweise beim Tippen

Statisch und dynamisch

Eine statische Webseite liegt als fertige Datei auf dem Webserver. Jeder bekommt genau dieselbe Datei, bis jemand sie von Hand ändert (Fassung A). So läuft ein statischer Seitenaufruf ab:

Alle bisherigen Schritte

Eine dynamische Webseite entsteht oder verändert sich erst beim Aufruf. Das kann an zwei Stellen passieren:

serverseitig dynamisch (Fassung C): Ein Skript auf dem Server erzeugt das HTML in dem Moment, in dem die Seite angefragt wird, oft mit Daten aus einer Datenbank. Typische Sprachen: PHP, aber auch Python oder JavaScript auf dem Server.
clientseitig dynamisch (Fassung B): Der Browser bekommt HTML mit JavaScript und führt den Code auf dem Gerät aus. Das Skript verändert die angezeigte Seite, ohne sie neu zu laden.

So läuft ein serverseitig dynamischer Aufruf ab:

Alle bisherigen Schritte

Viele Webanwendungen verbinden beides: Der Server liefert die aktuellen Daten, JavaScript im Browser sorgt für die schnelle Bedienung.

Browser oder Server?

	im Browser (clientseitig)	auf dem Server (serverseitig)
Wo läuft der Code?	auf dem Gerät der Besucherin oder des Besuchers	auf dem Webserver
Wer sieht den Code?	jeder (Quelltext, Entwicklerwerkzeuge)	nur, wer Zugriff auf den Server hat
Geschwindigkeit	sofort, ohne neue Anfrage	jede Aktion braucht eine Anfrage und Antwort
Daten	nur auf diesem Gerät	an einer Stelle für alle (z. B. in einer Datenbank)
geeignet für	Anzeige, Rückmeldung beim Tippen, Rechnen für die Anzeige	Speichern, Daten für alle, Passwörter, alles Sicherheitsrelevante

Der Webserver

Ein Webserver ist ein Programm (und oft auch der Rechner, auf dem es läuft), das Anfragen von Browsern beantwortet. Verbreitete Webserver sind zum Beispiel Apache HTTP Server und nginx. Seine Aufgaben:

Anfragen annehmen über HTTP bzw. HTTPS (üblicherweise Port 80 bzw. 443, siehe IT 12.4, Einheit 14),
Dateien ausliefern aus einem festgelegten Ordner (HTML, CSS, JavaScript, Bilder),
Skripte ausführen lassen, zum Beispiel .php-Dateien an den PHP-Interpreter übergeben und dessen Ergebnis zurückschicken,
Zugriffe regeln, zum Beispiel geschützte Bereiche nur nach Anmeldung,
Protokoll führen, welche Anfragen gekommen sind und ob Fehler auftraten.

Café-App: Schritt 1

Café-App, Schritt 1: Die App vorbereiten leicht

In 12.6 wird die Café-Seite Schritt für Schritt zur Webanwendung. Du arbeitest in deiner Entwicklungsumgebung (zum Beispiel VSCodium).

Nimm deinen Café-Ordner aus IT 11.7 oder lade die Startdateien herunter: cafe-start-12-6.zip. Entpacke sie in einen Ordner schuelercafe.
Lege im Ordner eine leere Datei app.js an.
Binde sie in allen drei Seiten am Ende des head ein: <script src="app.js" defer></script>.
Schreibe in app.js die Zeile console.log('Café-App gestartet');.
Öffne index.html im Browser, drücke F12 und öffne die Konsole. Dort muss die Meldung stehen.
Lege in deinem Ordner eine Datei plan.txt an. Notiere für die vier Wünsche des Teams aus dem Einstieg, ob sie im Browser, auf dem Server oder an beiden Stellen umgesetzt werden müssen.

Tipp 1

Zu 5.: Steht in der Konsole eine Fehlermeldung wie „Failed to load resource“, stimmt der Dateiname oder der Pfad nicht. Prüfe Groß- und Kleinschreibung.

Stand nach Schritt 1

Aufgaben

Aufgabe 1: Drei Sprachen in der Stadtbücherei leicht

Die Stadtbücherei bekommt eine Webanwendung, mit der man Bücher suchen und vormerken kann. Sie wird mit HTML, CSS und JavaScript gebaut.

Beschreibe die Aufgaben von HTML, CSS und JavaScript in dieser Anwendung. Nenne zu jeder Sprache ein passendes Beispiel aus der Bücherei.

Lösung

Aufgabe 2: Code lesen – wer macht was? leicht

<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <title>Zähler</title>
  <style>
    .gross { font-size: 3rem; color: #874026; }
  </style>
</head>
<body>
  <p class="gross" id="anzeige">0</p>
  <button id="knopf">Ein Gast mehr</button>
  <script>
    let gaeste = 0;
    document.querySelector('#knopf').addEventListener('click', () => {
      gaeste = gaeste + 1;
      document.querySelector('#anzeige').textContent = gaeste;
    });
  </script>
</body>
</html>

a) Gib an, welche Zeilen HTML, CSS und JavaScript sind.

b) Beschreibe, was nach dem Öffnen angezeigt wird und was bei drei Klicks auf den Knopf passiert.

c) Gib an, ob die Seite statisch oder dynamisch ist. Begründe.

Lösung

Aufgabe 3: Zwei Seitenaufrufe mittel

Die Schule bietet auf ihrer Webseite eine Seite mit dem Vertretungsplan an. Früher war es die feste Datei vertretung.html, die die Sekretärin jeden Morgen hochgeladen hat. Heute ist es das Skript vertretung.php, das die Daten aus dem Stundenplanprogramm liest.

Stelle die Schritte des Seitenaufrufs für beide Fälle dar, vom Eintippen der Adresse bis zur Anzeige im Browser.

Tipp 1

Beginne beide Darstellungen gleich: Der Browser schickt eine Anfrage an den Webserver. Ab wann unterscheiden sie sich?

Tipp 2

Beim zweiten Fall sind zusätzlich der PHP-Interpreter und die Daten des Stundenplanprogramms beteiligt.

Lösung

Aufgabe 4: Ein Fahrradverleih plant mittel

Ein Fahrradverleih möchte eine Webanwendung. Ordne jede Aufgabe begründet dem Browser oder dem Server zu (oder beiden):

a) eine Karte mit den Stationen vergrößern und verschieben,

b) anzeigen, wie viele Räder an jeder Station gerade frei sind,

c) beim Ausfüllen sofort melden, dass das Rückgabedatum vor dem Ausleihdatum liegt,

d) die Ausleihe speichern und das Rad für andere sperren,

e) den Preis für die gewählte Dauer anzeigen, bevor man bucht.

Tipp 1

Achte bei e) darauf, welcher Preis am Ende verbindlich ist.

Lösung

Aufgabe 5: Ein Gutscheincode im Browser schwer

Ein Mitschüler hat für das Café einen Gutschein eingebaut. Wer den Code eingibt, bekommt 10 Prozent Rabatt. Die Bestellung wird mit dem berechneten Preis an den Server geschickt.

function rabattPruefen(code, preis) {
  if (code === 'PAUSE10') {
    return preis * 0.9;
  }
  return preis;
}

Die Funktion steht in app.js und läuft im Browser.

Nimm Stellung zu dieser Lösung. Gehe auf mindestens zwei Probleme ein und beschreibe eine bessere Lösung.

Tipp 1

Wer kann die Datei app.js alles lesen? Und wer bestimmt eigentlich den Preis, der beim Server ankommt?

Lösung (Beispiel)

Zusatzaufgabe: Anfragen beobachten mittel Zusatz

Öffne eine Seite von Maternet und drücke F12. Wechsle zum Reiter Netzwerk und lade die Seite neu (F5).

a) Gib an, wie viele Anfragen beim Laden gestellt werden und welche Dateiarten dabei sind.

b) Klicke auf die erste Anfrage. Nenne die Methode, den Statuscode und den Typ der Antwort (Content-Type).

c) Vergleiche: Lade die Seite noch einmal. Was ändert sich an den Anfragen?

Lösung (Beispiel)

Zusammenfassung

Eine Webanwendung reagiert auf Eingaben, rechnet und verarbeitet Daten.
HTML = Struktur und Inhalt, CSS = Gestaltung, JavaScript = Verhalten.
Statisch: feste Datei, für alle gleich. Serverseitig dynamisch: ein Skript (z. B. PHP) erzeugt das HTML bei der Anfrage. Clientseitig dynamisch: JavaScript verändert die Seite im Browser.
Der Browser bekommt bei PHP nur das Ergebnis, nie den PHP-Code. JavaScript-Code dagegen sieht jeder.
Browser: schnelle Anzeige und Rückmeldung. Server: Speichern, Daten für alle, alles Sicherheitsrelevante.
Ein Webserver nimmt Anfragen an, liefert Dateien aus, lässt Skripte ausführen, regelt Zugriffe und führt Protokoll.

Selbstcheck

Geh die Fragen ehrlich durch. Wenn du bei einer unsicher bist, lies den verlinkten Abschnitt noch einmal oder bearbeite die passende Aufgabe.

Kannst du die Aufgaben von HTML, CSS und JavaScript beschreiben? → Webseite und Webanwendung, Aufgabe 1, Aufgabe 2
Kannst du statisch und dynamisch unterscheiden und die Schritte eines Seitenaufrufs darstellen? → Erkundung 1, Statisch und dynamisch, Aufgabe 3
Kannst du Aufgaben begründet dem Browser oder dem Server zuordnen? → Erkundung 2, Browser oder Server?, Aufgabe 4, Aufgabe 5
Kannst du die Aufgaben eines Webservers nennen? → Der Webserver, Café-App

Wortspeicher

Begriff	Bedeutung in einfachen Worten
Webanwendung	Programm, das im Browser bedient wird und auf Eingaben reagiert
JavaScript	Programmiersprache, die im Browser läuft und das Verhalten einer Seite bestimmt
statische Webseite	fertige Datei, die für alle gleich ausgeliefert wird
dynamische Webseite	Seite, die erst beim Aufruf entsteht oder sich im Browser verändert
clientseitig	auf dem Gerät der Besucherin oder des Besuchers, im Browser
serverseitig	auf dem Webserver, bevor die Antwort verschickt wird
Skript	kleines Programm, das bei Bedarf ausgeführt wird
PHP	verbreitete Sprache für serverseitige Skripte
PHP-Interpreter	Programm auf dem Server, das PHP-Skripte ausführt
Webserver	Programm, das Anfragen von Browsern beantwortet und Dateien ausliefert oder Skripte ausführen lässt
Konsole	Bereich in den Entwicklerwerkzeugen, in dem Meldungen und Fehler von JavaScript erscheinen

Quellen

Hessisches Kultusministerium: Kerncurriculum Fachoberschule, Fachrichtung Technik, Schwerpunkt Informationstechnik, Themenfeld 12.6 Webanwendungen, „Architekturen von Webanwendungen“ (Stand November 2022).
Texte, Beispiele, Aufgaben, Abläufe und Code-Beispiele sind selbst erstellt.