tuxflo / it1 Goto Github PK
View Code? Open in Web Editor NEWRepository für den Beleg Internettechnologien I (HTW Dresden)
Repository für den Beleg Internettechnologien I (HTW Dresden)
Die Unterseite zum Editieren eines Posts hat den selben Aufbau wie
die „New Post“-Seite bzw. ist die selbe mit Übergabe der zu
editierenden Datei beim Aufruf.
Beachten Sie ein responsives Webdesign für Geräte mit kleineren
Bildschirmen. Als Test reicht es, wenn Sie Ihren Webbrowser kleiner
ziehen.
Jede Webseite hat eine feststehende Navigationsleiste am oberen
Fensterrand. Diese besteht aus einem Home- und einer Admin-
Schaltfläche. Letztere klappt ein Submenü mit
Administratorfunktionen aus. Diese sind „New Post“, „Edit Post“ und
„Upload Pictures“ und verweisen auf entsprechende Unterseiten
Verwenden Sie für die Oberfläche vorzugsweise Bootstrap oder
Alternativen.
Es existiert eine Unterseite, die einen kompletten Post anzeigt.
Diese besteht aus drei Bereichen: einem Anzeigebereich für den
Post, einer tabellarischen Liste (siehe (5)) und einem
Kommentarbereich. Der Kommentarbereich enthält eine Form mit
Eingaben für Name, Email-Adresse und den Kommentar. Darunter
werden alle bisherigen Kommentare zu diesem Post ausgegeben.
Dabei hat jeder Kommentar eine Kopfzeile, in der links der Name
des Kommentators und rechts das Datum ausgegeben wird.
Darunter werden alle Zeilen dieses Kommentars ausgegeben.
Sobald ein neuer Kommentar eingegeben und die Submit-Taste
gedrückt wird soll per
Ajax
die Anzeige aller abgegebenen
Kommentare aktualisiert werden, und zwar ohne daß die komplette
Webseite neu geladen wird.
Die Speicherung sämtlicher Daten erfolgt dateibasiert. Als
Dateiformat kann Text, JSON oder XML genutzt werden. Dateianzahl
und -struktur ist selbst zu wählen, als Speicherort ist wegen der
benötigten Schreibrechte die Nutzung eines oder mehrerer
Unterverzeichnisse sinnvoll
Auf der Startseite werden die jeweils neuesten zwei Posts (nach
Datum sortiert) auf 16 Zeilen gekürzt dargestellt. Jeder Post hat eine
Kopfzeile. Hier wird der Titel des Posts ausgegeben, außerdem das
Erstellungsdatum sowie die Anzahl der Kommentare. Am Ende des
verkürzten Posts gibt es einen „continue reading...“-Link, welcher
auf eine Seite verweist, die den Post komplett ausgibt (siehe (6)).
Am Ende der Startseite gibt es die Schaltflächen „Previous“ und
„Next“. Diese rufen die Seiten mit den vorherigen bzw. nächsten
zwei Posts auf. Auf der ersten Seite gibt es keine „Previous“- und auf
der letzten Seite keine „Next“-Schaltfläche.
(optional) Auf der Startseite befindet sich ein aktiver
Monatskalender mit Date-Pick-Funktion. Tage, an denen Posts
erstellt wurden sind hervorgehoben und mit einer Unterseite
verlinkt, auf der diese Posts nach dem selben Verfahren wie auf der
Startseite dargestellt werden.
Mit Hilfe von Schaltfächen soll man vorwärts und rückwärts durch
die Monate schalten können. Verwenden Sie eine vorgefertigte
Library oder programmieren Sie den Kalender selbst.
Der Menüeintrag „Edit Post“ und „Upload Picture“ kann auf die selbe
Unterseite oder auch auf unterschiedliche verweisen. Dort gibt es
ein Formular zum Upload von Bildern, eine Thumbnail-Galerie aller
bereits hochgeladenen Bilder sowie einer tabellarischen Liste wie in
(7). Alle Thumbnails sind mit dem Dateinamen des Bildes beschriftet
und haben einen Button zum Löschen des Bildes. Zum Upload sind
nur Bild-Dateien mit einer Größe von max. 2 MB erlaubt. Bilder
werden in der Originalgröße abgespeichert. Eine automatische
Skalierung beim Upload ist nicht gefordert, kann aber implementiert
werden.
Die Webanwendung soll aus mehreren Webseiten bestehen, die
Übergabe der Werte zwischen den einzelnen Webseiten soll per
POST erfolgen, wenn Formulare verwendet werden, ansonsten per
GET.
Weiterhin soll sich auf der Startseite eine tabellarische Liste
befinden, die die Überschriften und Erstellungsdaten der letzten 10
Posts anzeigt und diese verlinkt. Diese Posts sollen nach Datum
sortiert sein, der neueste zuerst.
Wenn ?page=3 aufgerufen wird, aber nur ein oder zwei Posts verfügbar sind sollte korrekte Fehlerbehandlung oder ignorieren des page Wertes erfolgen.
Es gibt einen Administratorbereich, siehe (3). Dieser sollte
normalerweise passwortgeschützt sein, dies wird hier nicht verlangt
und kann ggf. zusätzlich implementiert werden.
„New Post“ soll eine Unterseite aufrufen, mit der man einen neuen
Post erzeugen kann. Diese Seite soll folgenden Aufbau haben:
ein Formular mit Feldern zur Eingabe von Überschrift und Inhalt,
eine tabellarische Liste wie in (5), jedoch mit zusätzlichen Links für
das Editieren oder Löschen des jeweiligen Eintrages. Die Eingabe
des Inhaltes soll im Markdown-Format erfolgen. Binden Sie dafür
eine beliebige freie Markdown-Library ein.
Sämtliche Löschaktionen auf allen Seiten sollen ein „Wirklich
löschen? Ja/Nein“-Fenster voranstellen. Alle leeren Eingaben sollen
abgefangen werden.
Da sämtliche Posts im Markdown-Format abgespeichert werden wird
ein Markdown-Parser zum Anzeigen der Posts benötigt. Binden Sie
auch hier eine beliebige freie Library ein.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.