public/web-development/presentation.git

			@@ -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>