From c855a520de76a2f4f1ca7deb37da397839f1ad97 Mon Sep 17 00:00:00 2001
From: Sascha Schulz <sschulz@dh-software.de>
Date: Mo, 27 Jan 2025 16:30:16 +0100
Subject: [PATCH] add chapter operation
---
index.html | 251 ++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 251 insertions(+), 0 deletions(-)
diff --git a/index.html b/index.html
index 710cff3..cb32aaf 100644
--- a/index.html
+++ b/index.html
@@ -4484,6 +4484,257 @@
<li>Die gefundenen Primzahlen können ausgegeben werden, müssen aber nicht. In erster Linie geht es darum, die Arbeit auf mehrere Threads aufzuteilen.</li>
</ul>
</section>
+ <section>
+ <h3>Multi Page Applications</h3>
+ </section>
+ <section>
+ <p>Im Gegensatz zu einer SPA ("Single Page Application") teilt sich eine Multi Page Application in mehrere Unterseiten auf, die sich per URL z.B. im Browser adressieren lassen.</p>
+ </section>
+ <section>
+ <p>In einem neuen Ordner / Projekt:</p>
+ <pre>
+ <code class="bash" data-trim data-line-numbers>
+ npm init -y
+
+ npm install express pug
+
+ mkdir public
+ </code>
+ </pre>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ // index.js (s. examples 010-nodejs/mpa.js)
+ const express = require("express");
+ const app = express();
+
+ app.use(express.static("public"));
+
+ app.listen(3002);
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Aufgabe</h3>
+ <p>Fülle das Verzeichnis "public" mit jeweis einer HTML-Datei für eine "Home"- und eine "About Us"-Seite, die beide eine einfache Navigations-Leiste enthalten (simple <code>span</code> mit Link (href)), um zwischen diesen beiden Seiten navigieren zu können.
+ Unterscheiden sollen sich diese beiden Seiten durch ihren "Inhalt", indem dort einfach "Home" und "About Us" enthalten ist.</p>
+ </section>
+ <section>
+ <h3>Serverseitiges Rendern</h3>
+ </section>
+ <section>
+ <p>Template-Engine "pug"</p>
+ <pre>
+ <code class="css" data-trim data-line-numbers>
+ html
+ head
+ body
+ div This is a div with some text
+ #main.my-class This is also a div with short-hands for id and class
+ a(href="/") This is a link with href
+ </code>
+ </pre>
+ </section>
+ <section>
+ <p>Conditionals</p>
+ <pre>
+ <code class="css" data-trim data-line-numbers>
+ html
+ head
+ body
+ if name
+ div Hello #{name}!
+ else
+ div Hello Anonymous"
+ </code>
+ </pre>
+ </section>
+ <section>
+ <p>Extension / Inheritance</p>
+ <pre>
+ <code class="css" data-trim data-line-numbers>
+ // layout.pug
+ html
+ head
+ body
+ div Some static content
+ block content
+
+ // page.pug
+ extends layout.pug
+
+ block content
+ div This is my home content
+ </code>
+ </pre>
+ </section>
+ <section>
+ <p>Pug in Express</p>
+ <pre>
+ <code class="bash" data-trim data-line-numbers>
+ mkdir views
+ </code>
+ </pre>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ // ...
+
+ app.set('view engine', 'pug');
+
+ app.get('/', (req, res) => {
+ // file name without .pug and some data passed to the template
+ res.render('index', { title: 'Hey', message: 'Hello there!' })
+ });
+
+ app.listen(3002);
+ </code>
+ </pre>
+ <pre>
+ <code class="css" data-trim data-line-numbers>
+ // views/index.pug
+ html
+ head
+ title #{title}
+ body #{message}
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Aufgabe</h3>
+ <p>Implementiere die Seiten aus dem vorherigen Beispiel mit Pug (nutze Vererbung, um die Navigationsleiste nicht doppelt implementieren zu müssen) und
+ baue einen Gruß im Seitentext mit dynamischen Namen ein, den man z.B. in der URL als Query-Parameter "?name=Joe" angibt und der im Server ausgewertet wird.</p>
+ </section>
+ </section>
+ <section>
+ <section>
+ <h2>Betrieb von Anwendungen</h2>
+ </section>
+ <section>
+ <p>Wichtige Aspekte beim produktiven Betrieb von Anwendungen</p>
+ <ul>
+ <li>Stabilität</li>
+ <li>Zugriffsschutz</li>
+ <li>Sicherheitsupdates</li>
+ <li>Ausfallsicherheit</li>
+ </ul>
+ </section>
+ <section>
+ <p>Typische Werkzeuge beim Betrieb</p>
+ <ul>
+ <li>Webserver</li>
+ <li>Proxies</li>
+ <li>Laufzeitumgebungen</li>
+ <li>Application-Server / Prozess-Manager</li>
+ <li>Remote-Zugänge</li>
+ </ul>
+ </section>
+ <section>
+ <h3>Beispielhafte Produktivumgebung mit lokaler VM</h3>
+ </section>
+ <section>
+ <p>Vorbereitungen</p>
+ <ul>
+ <li>Oracle VirtualBox</li>
+ <li>Ubuntu Server 24.04</li>
+ </ul>
+ </section>
+ <section>
+ <p>Eckdaten für die VM</p>
+ <ul>
+ <li>2048 MB Ram</li>
+ <li>Netzwerktyp "Brücke" / "Bridge"</li>
+ <li>Linux / Ubuntu (64-Bit)</li>
+ <li>20GB HDD</li>
+ </ul>
+ </section>
+ <section>
+ <img data-src="/assets/images/ubuntu-installation.png">
+ </section>
+ <section>
+ <p>Nach der Installation in der VM mit den bekannten Credentials anmelden und die IP in Erfahrung bringen:</p>
+ <pre>
+ <code class="bash" data-trim data-line-numbers>
+ ip a
+ </code>
+ </pre>
+ </section>
+ <section>
+ <pre>
+ <code class="bash" data-trim data-line-numbers>
+ 2: enp0s3: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500 qdisc pfifo_fast state UP [...]
+ link/ether 08:00:27:43:e5:2c brd ff:ff:ff:ff:ff:ff
+ inet 10.0.0.166/16 metric 100 brd 10.0.255.255 scope global dynamic enp0s3
+ valid_lft 863191sec preferred_lft 863191sec
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Anmeldung am Server</h3>
+ <p>Nach der Installation am Server anmelden</p>
+ <pre>
+ <code class="bash" data-trim data-line-numbers>
+ ssh user@domain [-p 12345]
+ </code>
+ </pre>
+ <p>Beispiele für eine Domain: localhost, www.example.com, 127.0.0.1, [0:0:0:0:0:0:0:1], [::1]</p>
+ </section>
+ <section>
+ <h3>Pakete aktualisieren</h3>
+ <pre>
+ <code class="bash" data-trim data-line-numbers>
+ # Paketlisten updaten
+ sudo apt update
+
+ # Pakete updaten
+ sudo apt upgrade
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Ordner-Navigation</h3>
+ <pre>
+ <code class="bash" data-trim data-line-numbers>
+ # In einen Ordner gehen
+ cd [Ordner]
+
+ # Zum vorherigen Ordner gehen
+ cd -
+
+ # Längere Ordnerpfade sind auch möglich
+ # realtiv
+ cd a/b/c/d
+
+ # absolut
+ cd /var/www/html
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Ordner erstellen und löschen</h3>
+ <pre>
+ <code class="bash" data-trim data-line-numbers>
+ # Einen Ordner erstellen
+ mkdir my-folder
+
+ # Mehrere Hierarchien
+ mkdir -p a/b/c/d
+
+ # Mehrere Ordner
+ mkdir a b c
+
+ # Ordner rekrusiv löschen
+ rm -rf [Ordner]
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Dateien zum Server kopieren</h3>
+ <pre>
+ <code class="bash" data-trim data-line-numbers>
+ # scp [Quelle] [Ziel]
+ scp . user@domain:/ziel
+ </code>
+ </pre>
+ </section>
</section>
</div>
</div>
--
Gitblit v1.9.3