Web编程代写、代做SQL程序语言、SQL留学生编程代做

日期：2020-11-16 11:08

Web technologien – Abschlussprojekt 1. Semester, WS 2020/21

Seite 1

Projektspezifikation

„Social Network"

I. Allgemein

a. Zum Abschluss der LV Webtechnologien muss ein Web-Projekt umgesetzt

werden. Die Gewichtung der einzelnen Aufgaben und die Punkteverteilung

finden Sie in der zugehörigen Bewertungsmatrix.

b. Verwenden Sie für die Umsetzung Teile Ihrer bereits abgegeben (und

verbesserten) Übungen wieder.

c. Die Bearbeitung erfolgt einzeln oder in 2er Teams.

i. Blau markierte Aufgaben sind nur von 2er Teams zu bearbeiten,

Einzelarbeiten lassen diese aus! (Punkte für blau markierte

Aufgaben werden nicht zu der Gesamtpunktezahl für Einzelprojekte

addiert)

d. Das Abnahmegespräch erfolgt dann ebenfalls einzeln oder im Team,

jedenfalls muss jedes Teammitglied das Projekt (Funktionsumfang und

Code) kennen und Fragen dazu beantworten können (ähnlich den

Übungsabnahmen)

i. Das Abnahmegespräch orientiert sich an einer

Bewertungsmatrix. Diese steht vorab zur Verfügung und dient

u.a. der Darstellung der Gewichtung der einzelnen Aufgaben

sowie zur Kontrolle der Vollständigkeit.

e. Für manche in grün markierte Tasks, gibt es Extrapunkte zu erreichen.

Diese Aufgaben sind optional.

f. Die Angabe lässt gewisse Gestaltungs- und Implementierungsfreiheiten zu.

Folgende Basis-Features müssen abgebildet werden:

i. Registrationsmöglichkeit und Profilbearbeitung für User

ii. Userverwaltung durch den/die AdministratorIn

iii. Posten eigener Beiträge

iv. Verwaltung der Beiträge in einer Datenbank und übersichtliche

Darstellung im Browser

v. Liken, Disliken von Beiträgen

vi. Kommentarfunktion für Beiträge

vii. Chat-Funktion

g. Die Umsetzung des Projekts wird sämtliche LV-Inhalte abdecken:

Icons erstellt von Freepik

(http://www.freepik.com/) from Flaticon

(https://www.flaticon.com/de/)

Webtechnologien – Abschlussprojekt 1. Semester, WS 2020/21

Seite 2

i. Frontend: HTML5, CSS3, Bootstrap

ii. PHP & OOP

iii. Fileupload

iv. MySQLi + Prepared Statements

v. Authentifizierung

vi. Verwendung von HTML/CSS Frameworks und PHP-Libraries

h. Achten Sie auf eine gute User Experience innerhalb der Applikation (keine

Whitepages, keine Fehlerzustände, guter Gesamteindruck, …)

II. Projektstruktur und Grundlayout

a. Erstellen Sie eine Seite index.php, welches das Grundlayout enthält und die

Hauptbereiche der Bildverwaltung abdeckt sowie etwaige CSS und JSLibraries

einbindet. Die Inhalte aller Bereiche werden mittels include

eingebunden. (Header, die Navigation, der Hauptinhaltsbereich ...).

b. Die Projektstruktur der Bildverwaltung soll Komponenten klar unterteilen

(siehe Beispielstruktur).

Beispielstruktur:

index.php

 [config]

 dbaccess.php

 …

 [inc]

 navigation.php

 content.php

 …

 [model]

 Post.class.php

 User.class.php

 …

 [pictures]

 [full]

 bild1.png

 …

 [res]

 [css]

 mystyle.css

 [img]

 icon.jpg

 ……

 [utility]

 DB.class.php

Webtechnologien – Abschlussprojekt 1. Semester, WS 2020/21

Seite 3

c. Die Implementierung des sozialen Netzwerks ist mittels OOP-Konzept

umzusetzen. Erstellen Sie Klassen für alle Entitäten, die im System

gebraucht werden (bspw. User, Posts, …) und legen Sie eine DB-ServiceKlasse

an, welche zentral die Zugriffe auf die DB implementiert.

d. Achten Sie beim Implementieren darauf, dass Sicherheitslücken möglichst

geschlossen werden.

e. Eine Datenbank, welche die Beitragsverwaltung abbildet, ist anzulegen.

III. Frameworks und Libraries

a. Es bleibt Ihnen überlassen, ob Sie für die Implementierung diverse

Frameworks oder Bibliotheken verwenden, wie z.B. Bootstrap, YAML, …

b. Die Verwendung von Fertiglösungen (wie CMS o.ä.) ist nicht erlaubt

IV. Abgabemodalitäten

a. Das Projekt ist vollständig als zip/rar File in Moodle hochzuladen (maximal

Dateigröße 20MB), inklusive einer Kopie der MySQL-Datenbank (sqlAnweisungen)

und einem Hinweis auf die Teammitglieder im Dateinamen,

bspw:

i. WEB-Projekt-WS2020-21 _Nachname_Nachname.zip

• Halten Sie sich unbedingt an die Nomenklatur, um die korrekte Zuweisung und

somit Bewertung von gemeinsam abgegeben Projekten sicherzustellen

• Verkleinern Sie Bilddateien/Videos ggf., um die Größe des Projekts für den

Upload zu reduzieren

b. Kommentieren Sie komplexere Abläufe/Funktionen im Code

c. Falls weitere Konfigurationsschritte zur Inbetriebnahme der Applikation

nötig sind, legen Sie eine readme.txt-Datei bei (z.B. Zugangsdaten zur

Datenbank).

V. Optionaler Working Plan (Vorschlag)

Um Ihnen die Orientierung beim Umsetzen der Anforderungen zu erleichtern,

wird folgendes Vorgehen vorgeschlagen (angelehnt an die Themen/Woche

innerhalb der LV):

Starten Sie zuerst mit den Oberflächen, die Sie benötigen. Beginnen Sie mit einem

Bootstrap-Basis Template. Überlegen Sie, welche Seiten Sie benötigen (einzeln,

Unterseiten …). PHP-Funktionen ergänzen Sie dann nacheinander Schrittweise,

bis zur DB-Anbindung.

Webtechnologien – Abschlussprojekt 1. Semester, WS 2020/21

Seite 4

1. Beginnen Sie mit einem Bootstrap Basislayout, das responsive ist

2. Überlegen Sie, welche Elemente in welcher Form dargestellt werden sollen

a. Setzen Sie schon vorgefertigte Bootstrap-Komponenten ein

b. Fügen Sie statische Inhalte hinzu wie bspw. Hilfe/Impressum …

c. Verwenden Sie vorerst statische HTML-Platzhalter für dynamische

Inhalte

3. Ergänzen Sie das individuelle Design

a. Eigene CSS-Datei

b. Bilder

c. …

4. Vergessen Sie nicht, den Code/die Oberfläche zu testen!

5. Erstellen Sie alle Eingabemasken/Uploadformulare

6. Beginnen Sie schon jetzt mit dem Kommentieren Ihres Codes und halten

Sie offene/zukünftige Punkte fest

7. Legen Sie auch leere Files an, für noch zu implementierende Komponenten

8. Entwerfen Sie ein erstes DB-Modell (am Papier), das alle benötigten Daten

aufnehmen und abbilden kann. Einzelne Tabellen können bereits ein

Anhaltspunkt für den Entwurf zukünftiger PHP-Klassen sein (User,

Beiträge, …)

a. Sollte das DB-Modell noch unvollständig sein, schärfen Sie dieses

sukzessive nach

9. Fügen Sie Funktionalität schrittweise hinzu:

a. Ergänzen Sie die Auswertung der Eingabemasken (vorerst noch ohne

DB-Anbindung), Prüfung auf Vollständigkeit/Validierung,

Fehlermeldungen

b. Überlegen Sie, wo Sessions und Cookies notwendig sind und

implementieren Sie diese

c. Fügen Sie die Upload-Funktionalität hinzu

d. Vergessen Sie nicht, den Code zu Kommentieren und zu testen!

e. Entwerfen Sie jene Klassen, die Sie zum Abbilden von Daten (bspw.

User, …) und Funktionalitäten (DB-Klasse, ggf. Bildbearbeitung, …)

benötigen

f. Verwenden Sie ab sofort das OOP-Konzept und ziehen Sie die

Verwendung von Objekten dort nach, wo dies bisher nicht

geschehen ist (bspw. User-Registrierung → befüllt User-Objekt, …)

g. Vergessen Sie nicht, den Code zu Kommentieren und zu testen!

Webtechnologien – Abschlussprojekt 1. Semester, WS 2020/21

Seite 5

h. Überlegen Sie, welche Daten Sie von der Oberfläche in die DBspeichern

müssen und fügen Sie eine Funktion nach der anderen in

der DB-Klasse hinzu

i. Speichern von Usern

ii. Speichern von Beiträgen

iii. …

i. Wo können sich Änderungen in der DB ergeben? Fügen Sie weiter

Funktionen in der DB-Klasse hinzu:

i. Aktualisierungen von Userdaten

ii. Liken von Beiträgen

iii. Hinzufügen von Kommentaren

iv. …

j. Welche Daten benötigen Sie aus der DB? Ergänzen Sie weitere

Funktionen:

i. Userdaten abrufen und an der vorbereiteten Oberfläche

anzeigen

ii. Beiträge abrufen …

iii. ….

k. Vergessen Sie nicht, den Code zu Kommentieren und zu testen!

l. Ergänzen Sie etwaige Zusatzfeatures für Zusatzpunkte

Webtechnologien – Abschlussprojekt 1. Semester, WS 2020/21

Seite 6

Grundidee

User der Website haben die Möglichkeit Beiträge zu erstellen (Text und/oder

Bilder), und mit unterschiedlichen Rechten freizugeben. Freigegebene Beiträge

anderer User können in der eigenen Ansicht dargestellt werden. Schwerpunkte

sollen sein:

• User: Userverwaltung (2-3 Zustände: anonym (BesucherIn), User

(registrierter) User, Admin). Admins können auch User verwalten.

• Datenbank: Grundlegende Verwaltung aller Daten in einer Datenbank (User,

Posts, Likes, Kommentare, …) → Aufbau einer geeigneten Datenbankstruktur,

Zugriff mittels entsprechender DB-Zugriffs-Klassen

• Upload / eigene Beiträge: User können eigene Beiträge erstellen, diese

verwalten (bearbeiten, löschen) und mit Freigaben versehen (öffentlich oder

an FreundInnen)

• Liken / Disliken und Kommentieren von Beiträgen: Von FreundInnen

geteilte Beiträge können geliket, disliket und/oder kommentiert werden.

• Suche und Freundschaften: andere User können gesucht werden und eine

Freundschaftsanfrage kann verschickt werden. User können Freundschaften

akzeptieren oder ablehnen.

• Private Messages: User haben die Möglichkeit sich gegenseitig Nachrichten

zu senden. Dafür gibt es eine eigene Oberfläche, welche eine Art

Posteingang anzeigt und das Senden von Nachrichten an eine/n UserIn

ermöglicht. (z.B.: ähnlich zu Whatsapp-Web oder andere …)

• weitere Bereiche der Webseite:

o Hilfe (Benutzeranleitung)

o Impressum (Standard-Impressum), Namen und Bilder der Ersteller der

Website

Die gesamte Website muss responsive sein und somit für Smartphones, Tablets

und Desktop-Rechner verwendbar sein.

Für eine außergewöhnlich gute Usability, Grundzüge der Accessibility und

Suchmaschinenoptimierung werden Zusatzpunkte gewährt.

Webtechnologien – Abschlussprojekt 1. Semester, WS 2020/21

Seite 7

Userverwaltung

Es gibt 3 verschiedene Usertypen: BesucherIn, (registrierter) User, Admin

Alle Usertypen sehen

• Hilfe und Impressum

• Anzeigen von frei verfügbaren (freigegebenen) Beiträgen

• Suchen/Filtern von Beiträgen

Was kann der anonyme User:

• Registrierung und Login sind verfügbar

o Hinweis: eine Registration über das Webinterface speichert

immer normale User, AdministratorInnen müssen direkt in der

Datenbank als solche gekennzeichnet werden

• KEINE eigenen Beiträge oder Uploadmöglichkeit

• Es werden aber alle öffentlichen Beiträge dargestellt.

Was kann der registrierte User zusätzlich zum anonymen User:

• statt Registrierung und Login kann sich ein eingeloggter User wieder

ausloggen

• Bearbeitung des eigenen Profils (FreundInnenliste anzeigen,

Freundschaftsanfragen senden & annehmen, FreundInnen entfernen)

• Benutzerbild als Thumbnail erstellen und ändern

• Eigene Beiträge erstellen

• Eigene Beiträge verwalten (Freigabe, Löschen, Ändern)

• Öffentliche und Beiträge anderer FreundInnen liken/disliken und/oder

kommentieren

• Privater Nachrichtenaustausch mit FreundInnen

Was kann der/die AdministratorIn zusätzlich zu registrierten Usern:

• Verwaltung ALLER Beiträge (also nicht nur eigener): Erstellen,

Liken/Disliken, Kommentieren, Löschen

• Userverwaltung (Übersicht bestehender und deaktivieren einzelner

User)

Webtechnologien – Abschlussprojekt 1. Semester, WS 2020/21

Seite 8

Aufbau der Datenbank

Datenbankmodell:

Überlegen Sie sich ein geeignetes Datenbankmodell

Hinweise: Sie müssen User und ihre Rolle speichern, Beiträge verwalten (etwaige

Bilder selbst liegen im Filesystem des Webservers, die Datenbank verwaltet

nur Referenzen auf die Bilder), wer Ersteller eines Beitrags ist und ob er an

FreundInnen oder öffentlich freigegeben wird. Wer etwas liket/disliket.

Wer kommentiert hat und den Inhalt des Kommentars.

User sollen sich auch private Nachrichten senden können - somit ist auch

eine zentrale Ablage von gesendeten/gelesenen Nachrichten nötig

Datenbankzugriff mittels PHP:

Der Datenbankzugriff hat über mySQLi zu erfolgen (alternativ auch PDO möglich)

Die Zugangsdaten sollen in einer zentralen config-Datei gespeichert werden,

damit sie an zentraler Stelle leicht zu ändern sind.

Die Kommunikation zwischen Datenbank und PHP muss über PHP-Klassen

(objektorientierte Programmierung) realisiert werden.

Explizite Vorkehrungen gegen SQL Injections werden mit Extrapunkten belohnt.

Webtechnologien – Abschlussprojekt 1. Semester, WS 2020/21

Seite 9

Beschreibung der einzelnen Komponenten

1) User-Registrierung

a. Beim Erfassen eines Users sind (zumindest) folgende Daten anzugeben:

i. Anrede

ii. Vorname

iii. Nachname

iv. Emailadresse

v. Benutzername

vi. Passwort

b. Überprüfen Sie alle eingegebenen Daten sowohl clientseitig (mit speziellen

HTML5 Tags voreinschränken) als auch serverseitig auf Vollständigkeit und

Richtigkeit. Das Passwort muss immer 2x angegeben werden und die Werte

werden auf Übereinstimmung geprüft. Der Username muss eindeutig sein

(auch in der Datenbank). Erst wenn alle Daten validiert wurden, wird der

neue User in der DB angelegt. Das Passwort wird verschlüsselt in der DB

abgelegt.

c. Legen Sie manuell in der Datenbank einen eigenen User an, der als

AdministratorIn gekennzeichnet wird. Die Rechte des/der AdministratorIn

unterscheiden sich von herkömmlichen UserInnen.

2) User-Login

a. Erstellen Sie ein Login-Formular mit Eingaben für Usernamen und Passwort

b. Überprüfen Sie die Werte gegen die Datenbank. Nur wenn es genau eine/n

UserIn in der DB mit den Daten gibt, gilt der Login als ok und der Username

wird am Bildschirm angezeigt. Der Login-Status ist permanent auf der Seite

sichtbar. Eingeloggte User sehen einen Logout-Button.

c. Auf Basis des eingeloggten Users werden Features der Webseite

freigeschaltet oder deaktiviert. (Als Beispiel folgender Screenshot)

Webtechnologien – Abschlussprojekt 1. Semester, WS 2020/21

Seite 10

3) Profilverwaltung

a. Eingeloggte User können eigene Registrationsdaten einsehen und

bearbeiten (Stammdaten bearbeiten, Passwort neu setzen, …)

b. Achten Sie darauf, dass sensible Informationen (Passwort) nicht vollständig

angezeigt werden und beim Ändern des Passwortes auch das alte

Passwort eingegeben und überprüft werden muss.

4) Hilfe / Impressum

a. Erstellen Sie eine Hilfe-Seite, auf der erklärt wird, wie die Website zu

verwenden ist (kurze Benutzeranleitung)

b. Fügen Sie ein Impressum ein (→ recherchieren Sie, was aktuell ein

Impressum enthalten muss).

c. Das Impressum enthält zusätzlich Bilder und Namen der am Projekt

beteiligten Personen

d. Sowohl Hilfe als auch Impressum müssen jederzeit einfach erreichbar sein

5) Beitragsverwaltung generell

Die Beitragsverwaltung besteht aus folgenden Funktionen:

a. Beitragsanzeige: Anzeige der Beiträge im Browser übersichtlich gruppiert

und voneinander getrennt (zusammengehörige Elemente wie Bild und Text

sind gut sichtbar sowie eine klare Abgrenzung zu anderen Beiträgen), die

neuesten Beiträge sollen immer ganz oben angezeigt werden

b. Zusatzinfos der Beiträge: Kommentare, Likes/Dislikes, Tags werden unter

den Beiträgen abgebildet (z.B.: eingerückt als “Thread”)

c. FileUpload: Hochladen eigener Bilder die – serverseitig - verkleinert in den

Beiträgen angezeigt werden

d. Freigabe von Beiträgen: Beiträge können für FreundInnen oder öffentlich

freigegeben werden (FreundIn muss in der FreundInnenliste vorhanden

sein)

e. Gruppierung von FreundInnen: FreundInnen können in Gruppen

zusammengefasst werden (z.B.: Familie, Arbeitskollegen, FreundInnen, …)

f. Kommentieren & Liken: Kommentare und Likes müssen für Beiträge

anderer User erstellbar sein.

Webtechnologien – Abschlussprojekt 1. Semester, WS 2020/21

Seite 11

6) Beitragsverwaltung / Beitragsanzeige

Die Beitragsanzeige ist ein zentraler Bestandteil des Projekts. Die Darstellung soll

sehr flexibel sein und Benutzern vielfältige Einstellmöglichkeiten bieten

a. Bilder werden als Thumbnails konstanter Größe dargestellt. Achten Sie

darauf, dass die Bilder, dort wo sie als Thumbnails benötigt werden,

tatsächlich nur in Thumbnail-Größe vom Server zum Browser übertragen

werden. Es empfiehlt sich die Thumbnails als fertige Bilder am Server in

einem eigenen Verzeichnis vorzubereiten (automatische Verkleinerung

mittels PHP).

b. Die Darstellung soll übersichtlich sein, ein Beitrag ist klar als solcher

erkennbar und von anderen unterscheidbar, kann – wenn vorhanden auch

Bilder - darstellen und es soll klar erkennbar sein, wer Autor des Beitrags

ist.

c. Beiträge (eigene, öffentliche bzw. die der FreundInnen) werden auf der

Seite in Reihenfolge vom aktuellsten bis zum ältesten abgebildet.

d. Zusatzinformationen zu Beiträgen werden angezeigt, das sind z.B.

i. Datum

ii. Autor des Beitrags

iii. Likes/Dislikes (Anzahl muss auch dargestellt werden)

iv. Tags

v. Freigabestatus (öffentlich oder FreundInnen)

e. Sortierung nach mindestens zwei verschiedenen Kriterien entsprechend

der Zusatzinformationen (z.B.: Datum, Beiträge mit den meisten Likes,

mit/ohne Bild, Beiträge von User xyz, Gruppen, Tags …)

f. (nur) eigene Beiträge können auch wieder gelöscht werden.

g. Fancybox/Lightbox: durch Klick auf ein Bild wird dieses im Großformat in

einer Fancybox/Lightbox dargestellt. (zusätzliche JS Library nötig)

7) Beitragsverwaltung / Fileupload

Es können neue (eigene) Bilder aus dem Filesystem zum Server hochgeladen

werden. Dabei ist zu beachten, dass nur Bilddateien für den Upload erlaubt sein

sollen.

Serverseitig müssen hochgeladene Bilder weiterbearbeitet werden:

Webtechnologien – Abschlussprojekt 1. Semester, WS 2020/21

Seite 12

a. Hochgeladene Bilder werden immer dem gerade erstellten Beitrag als

Besitzer zugeordnet

b. Speichern der Bilder erfolgt in einem eigenen Bilderverzeichnis.

c. Gleichzeitig wird die Erstellung von Thumbnails in einem eigenen

Verzeichnis, für die spätere Verwendung in der Bildanzeige empfohlen.

d. Empfohlen wird weiters die Speicherung von häufig benötigten

Informationen in der Datenbank (Bildname, Tags, …)

e. Bilder können mit einem oder mehreren Tags getaggt werden

f. Die FreundInnen bzw. Gruppen werden als Liste dargestellt

g. Neue Freundschaftsanfragen können erstellt werden, diese müssen von

der Gegenseite erst akzeptiert werden bevor die Freundschaft abgebildet

wird

i. Freundschaftsanfragen sind auf der Seite des jeweiligen

Benutzers unaufdringlich, aber erkennbar dargestellt (bspw.

als Badge …)

8) Beitragsverwaltung / Suche

Beiträge können geliket, disliket und kommentiert werden:

a. Likes/Dislikes sollen mit eindeutigen Icons dargestellt werden.

b. In der Anzeige gibt es die Möglichkeit nach Tags zu filtern. Es werden

dann nur solche Beiträge angezeigt.

c. Man kann auch nach mehreren Tags gleichzeitig filtern.

d. Weiters gibt es ein Suchfeld. Eingegebene Begriffe werden in den

Beiträgen, Kommentaren und – wenn vorhanden - Bildnamen gesucht.

9) Beiträge freigeben

a. Bei jedem Beitrag gibt es die Option alles für alle seine FreundInnen,

Gruppen, oder öffentlich (für alle) freizugeben

b. Bei der Freigabe für eine/n FreundIn, muss diese bereits in der

FreundInnenliste vorhanden sein, also die Freundschaftsanfrage bereits

akzeptiert haben

c. Beiträge, die freigegeben wurden, werden entsprechend gekennzeichnet

(mit den Erstellernamen und ob sie für FreundInnen oder öffentlich zur

Verfügung gestellt werden)

Webtechnologien – Abschlussprojekt 1. Semester, WS 2020/21

Seite 13

d. Die Freigabe kann jederzeit wieder geändert werden (Freigabe für

FreundInnen oder alle löschen)

e. Die FreundInnenliste kann auch geändert werden. Benutzer haben die

Möglichkeit sich zu „entfreunden“

f. Öffentliche Beiträge eines Users werden außerdem als RSS/Atom-Feed

gesammelt zur Verfügung gestellt.

i. Der Link zum Feed ist im eigenen Profil aufrufbar und zeigt

alle öffentlichen Beiträge im entsprechenden XML-Format an.

Testen Sie dies, mit einem RSS Reader.

10) Userverwaltung für AdministratorInnen

Nur AdministratorInnen haben die Möglichkeit User zu verwalten. Dazu gehört:

a. Anzeige aller User und Auswahlmöglichkeit

b. Zu jedem User eine Liste aller Beiträge und der Freigaben

c. Verändern des Userstatus: aktiv, inaktiv

d. Inaktive User können sich nicht mehr einloggen, bleiben aber in der

Datenbank erhalten.

e. Reset des Passwortes eines bestimmten Users und Zusenden des neuen

Passwortes an die eingetragene Emailadresse (Achtung: Email-Versand bei

XAMPP erfordert mitunter Anpassung der PHP-Settings).

11) Private Nachrichten

a. Ergänzen Sie die Website um eine Messenger-Funktion (bspw. ähnlich zu

diversen Web-Messengern) bestehend aus Posteingang und Formular zum

Versenden einer Nachricht

b. Auf der Oberfläche des Messengers wird eine Liste aller User angezeigt, an

die man eine Nachricht senden kann

c. Versendete Nachrichten werden im Posteingang des Adressaten

angezeigt.

i. Zur regelmäßigen Aktualisierung können Sie den meta-Tag

http-equiv="refresh" verwenden. Details siehe:

https://www.w3schools.com/tags/att_meta_http_equiv.asp

d. Neue/Ungelesene Nachrichten werden beim Empfänger hervorgehoben.

e. Sobald eine Nachricht gelesen wurde, wird auch dieses beim Absender

angezeigt.

Webtechnologien – Abschlussprojekt 1. Semester, WS 2020/21

Seite 14

f. Der Message-Bereich kann bei Bedarf in einem <iframe> realisiert werden

(siehe: https://www.w3schools.com/tags/tag_iframe.ASP) damit wird ermöglicht,

dass NUR der Message-Bereich automatisiert aktualisiert wird.