Projekt Thema Webentwicklung

[codecadamy]

Hallo zusammen,

ich habe von meiner Arbeit aus (Azubi 1. Lehrjahr, frühere Erfahrung mit SPS Programmierung, keine weitere Erfahrung mit Webentwicklung) ein Projekt bekommen und versuche nun, mögliche Lösungsvorschläge oder Möglichkeiten, für einen sinnvollen Ablauf zu finden.

Es handelt sich um folgende Thematik:

1. Erstelle ein zweisprachiges Datenbanken-Schema bzw. ein -Modell, welches in der Lage ist Gebäude, Etagen, Räume, Teams, Sitzplätze und Personen abzudecken – jeweils mit allen Eigenschaften, die das jeweilige physische Echtwelt-Objekt haben kann und die relevant für einen Sitzplatz wären.
2. Erstelle über XAMPP und HTML5+CSS3+PHP und Javascript/jQuery (erst einmal lokal auf deinem Rechner) eine administrative Web-Oberfläche, mit der problemlos jederzeit Gebäude, Etagen, Räume, Teams, Sitzplätze und Personen wieder gelöscht oder bearbeitet und natürlich neu angelegt werden können. Überragend wäre ein Drag-and-Drop-System zur einfachen Verteilung von Personen/Gegenständen in den Etagen/Teams auf die Sitzplätze.
3. Erstelle über XAMPP und HTML5+CSS3+PHP und Javascript/jQuery (erst einmal lokal auf deinem Rechner) eine Website, die folgenden Funktionsumfang bietet:
   1. Startseite -> Flaggenauswahl Deutsch oder Englisch
   2. nach Sprachauswahl -> Auswahlseite für das Gebäude
   3. nach Gebäudeauswahl -> Auswahl der Etage
   4. nach Etagenauswahl -> Teamauswahl oder optional ohne Teamauswahl
   5. nach Teamauswahl oder ohne Teamauswahl -> strukturierte Darstellung aller Arbeitsplätze mit bisherigen Besetzungen
   6. bei Auswahl einer Person sollen die unbedenklichen Informationen: Nachname, Vorname, E-Mail-Adresse und Durchwahl (optional auch hochladbare Bilder) angezeigt werden
   7. sorge für eine flüssige Navigation (vor und zurück) und eine ansprechende grafische Aufbereitung mit CSS und weiteren Technologien
4. Bedenke bei deinem Datenbankmodell, dass nicht nur Personen sondern auch Gegenstände (Flipcharts, TVs, Beamer, Drucker, Papier-Tonnen) ohne Probleme eingebunden werden könnten.

Was wäre für so etwas die richtige Herangehensweise?

 

[BeBur]

Aktuelle PHP Tutorials lesen und dann anfangen.

 

[Lawnmower]

Und natürlich auch HTML, CSS und Javascript. Und wie man sinnvoll ein Datenbank Modell aufzieht.

1. Würde zuerst mich damit beschäftigen eine angemessene Entwicklungsumgebung vorzubereiten, sowohl hard- als auch softwaremässig.
2. Dann versuchen mit HTML und CSS eine kleine Webseite zu machen damit Du da mal eine Basis hast.
3. Dann die erstellte Webseite mit PHP anreichern und versuchen Daten aus einer simplen Tabelle einer Datenbank auszulesen und zu verändern. Beim schreiben in die Datenbank unbedingt den Faktor Validierung beachten damit Daten nicht ungefiltert in die Datenbank kommen.

Dann solltest Du eine gute Grundlage haben.
Als weiterer Schritt kannst Du Dich dann mit dem eigentlichen Datenmodell deiner Datenbank beschäftigen d.h. wie Du die einzelnen Tabellen aufbaust und in Beziehung stellst.

 

[BeBur]

Frage: Willst / Kannst / Darfst du ein Web-Framework verwenden?

 

[mastaqz]

Anhand der Requirements erstellst du User Stories, d.h. welcher User welche Aktion durchführen kann.
Anhand der User Stories erstellst du ein Modell, bspw. mit einem UML-Programm, um ganz genau darzustellen, wie deine Datenbank, deine Businesslogik und deine Ansichten aussehen soll.
Nun solltest du ein gutes Abbild deiner Anwendung haben.

Nun sortierst du deine User Stories nach Priorität, so dass du weißt, woran du zuerst arbeitest.
Dabei ist ein iteratives Vorgehen sehr sinnvoll, d.h. du baust viele kleine Stories ein und holst dir dann Feedback ein, ob das so passt.

 

[CodeVerwalter]

Hast Du im Rahmen deiner Aufgabenstellung auch die Möglichkeit, auf Kollegen zurückzugreifen, die Dir beim Ansatz helfen? Es ist immer hilfreich (sofern überhaupt möglich) auf Azubis fortgeschrittener Ausbildungsjahre zu zugehen. Bevor Du mit der Durchführung beginnst, solltest Du Dir auf alle Fälle die Grundlagen zu den genannten Technologien durchlesen und verstehen, danach oder parallel dazu kannst Du mit deinen Kollegen deine Entwicklungsumgebung einrichten und mit den, von den anderen Usern hier genannten, Herangehensweisen starten. Wann soll die Anwendung denn fertig sein? Bzw. wie viel Zeit hast Du insgesamt für das Projekt?

 

[Hayda Ministral]

@mastagz: Der Ansatz mit den User Stories gefällt mir. Kannte ich bisher nicht.

 

[snaxilian]

@Hayda Ministral Der Begriff User Stories kommen aus dem Bereich der agilen Softwareentwicklung bzw. allgemeiner gehalten als der agilen Entwicklungsmethodik da dies nicht ausschließlich auf Software anwendbar ist. Größter und erster wirtschaftlicher Nutzer von so etwas war Toyota in den 1970er Jahren aber in der technologischen Bananenrepublik Deutschland kommt das Thema erst seit ~10 Jahren oder so langsam an^^
Grundlegend wird es aber vor allem in der Software Entwicklung genutzt um einfacher auf Änderungen und Anpassungswünsche des Kunden/Auftraggebers einzugehen anstatt am Anfang ein klassisches großes Lastenheft anzufertigen gibt es ein kleineres, das wird umgesetzt, das Ergebnis begutachtet und bewertet und aus dem Ergebnis wieder neue Anforderungen für den nächsten Entwicklungszyklus aufgestellt usw. usf. und stark vereinfacht dargestellt natürlich.

 

[RalphS]

Rein vom Ansatz her? Hierarchisch von oben nach unten. Querbeet erstmal vermeiden.
An der Stelle von Backend Richtung Frontend: Datenbank => Webserver => Weblogik => Browser => HTML-Code => CSS + JS für die Präsentation.
Dabei überlegen, ob HTML/CSS/JS-Code generiert werden soll oder ob mit Templates oder sowas gearbeitet werden soll.

Da es explizit erwähnt ist, würde ich jQuery mitnehmen. Privat ist das eine, aber geschäftlich hat man viel von standardisierten Umgebungen -- wenn Du da zuviel eigenen Kram mitbringst, fliegt das einfach unter den Tisch.

Außerdem in jQuery die Drag-Drop-Geschichte einfach mal angucken. Findet man bei denen in der Doku (natürlich auch anderswo). Ich erwähne das nur deswegen, weil jQ Drag+Drop eine technisch sehr einfache Sache ist (vor allem wenn man eh mit jQ gut zurechtkommt); im Sinne eines "herausragend" sollte man das auf jeden Fall auf dem Schirm behalten (aber nicht überpriorisieren).

Jetzt hab ich natürlich keine Ahnung re: vorhandener Kompetenzen. Daher an der Stelle nur die Empfehlung, dieselbe Ordnung wie den Ansatz oben einzuhalten (Backend nach Frontend). Wenn das Backend nicht stimmt, versagt der ganze Rest. Wenn der Webservice nicht richtig tut, dann kann der Browser machen was er will, funktioniert trotzdem nicht. HTML/CSS/JS ist dann das Ende der Kette. Klar kann da auch hier und da ein Fehler passieren, aber wenn man weiß, daß alles darüber richtig tut, dann geht das immer noch recht gut zu händeln.

Ins Thema Datenbanken einlesen ist Pflicht. Insbesondere Modellierung.
DBMS ist egal - kosten alle nichts --- ich schlag aber vor, wenn ihr bereits ein DBMS verwendet im Haus, daß Du zunächst in die Richtung guckst. MySQL ist einfach, aber fehlerträchtig. Oracle genau andersherum. Irgendwas dazwischen findet sich sicher.

 

[BeBur]

jQuery

Sorry das ich hier so einhake. Wird jQuery denn noch langfristig aktuell sein? Wird es nicht so langsam von Vanilla JS + HTML5 abgelöst?

PS.: Wobei jetzt direkt das erstbeste draggable Beispiel hier: https://alligator.io/js/drag-and-drop-vanilla-js/
Bei mir im Firefox nicht funktioniert hat 🤣 🤣 .

 

[Sparta8]

Wird doch noch aktiv entwickelt, also warum nicht. Die letzte version ist erst vor 2 Wochen rausgekommen.
Der JavaScript Polizei wird das aber natürlich nicht gefallen, für die bist du ein Verbrecher wenn du 2020 noch ein neues Projekt mit jQuery beginnst.
Ich hab z.B. vor paar Monaten ein Angular Projekt übernommen, wo mein Vorgänger für einen einfachen Toggle jQuery in Angular eingebunden hatte.
Habs nur still ausgebessert und ihn nicht bei der JS Polizei angezeigt.

 

[RalphS]

@BeBur naja die Mühlen in den Unternehmen mahlen langsam.

Welches Framework ist natürlich erstmal egal. Aber jQ wird in der Aufgabenstellung erwähnt, deswegen würde ich's priorisieren. Natürlich ist es trotzdem eine gute Idee, erstmal zu gucken, womit sich die Kollegen vor Ort auskennen - hilft nix wenn man dann mit irgendeinem Framework ankommt, was keiner kennt und womit keiner umgehen kann, vor allem, wenn sich "jeder" stattdessen mit dem anderen Framework wie zuhause fühlt.

Sich hinsetzen und mit den Kollegen durchdiskutieren, warum das Moderne Framework MF(tm) so viel besser sei als das aktuell implementierte... kann man machen, mag unter Umständen auch funktionieren, aber würde ich einem Azubi im ersten Lehrjahr jetzt nicht pauschal empfehlen.

Rein persönlich... liegt mir aber trotzdem jQ noch am ehesten, rein von der praktischen Verwendung her. Ich hab noch den IE als Targetplattform und werd ihn auch so schnell nicht los, und transpilieren find ich für mich ein totales Unding; da macht sich jQ ideal.

Kann natürlich jeder so sehen wie er will, aber gemäß OP ist "Projekterfüllung" das eine und "Einfügen in die Gesamtumgebung" das nicht minder wichtige zweite.


... wenn es natürlich keine Gesamtumgebung gibt weil noch nie jemand was von diesem Wort "Programmieren" gehört hat, dann ist man natürlich in der perfekten Position, eben jede Gesamtumgebung erstmal definieren zu können. Halte ich aber für unwahrscheinlich.

 

[burnout150]

Gehe in Vorleistung und wenn es dann noch eine konkrete Frage gibt kannst du dich gerne melden.
Deine Azubiaufgaben werden hier jedoch nicht erledigt.