From 831c0b4c5384ef340b430d16266fd46fccf13191 Mon Sep 17 00:00:00 2001
From: Sascha Schulz <sschulz@dh-software.de>
Date: Mo, 13 Jan 2025 16:17:01 +0100
Subject: [PATCH] add chapter for server side rendering
---
index.html | 119 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 119 insertions(+), 0 deletions(-)
diff --git a/index.html b/index.html
index 710cff3..9bb7852 100644
--- a/index.html
+++ b/index.html
@@ -4484,6 +4484,125 @@
<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>
</div>
</div>
--
Gitblit v1.9.3