add chapter for server side rendering

Sascha Schulz

2025-01-13 831c0b4c5384ef340b430d16266fd46fccf13191

add chapter for server side rendering

 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>