Idee / Konzeption
Die Idee fürs MMP Activity entstand im Minor WebTech. Während eines Hackathons programmierte ich bereits einige der wichtigsten technischen Vorgänge. Dazu gehörte das Eingabeformular der Voreinstellungen und die Übermittlung der Daten an die spielen.php-Seite. Dort wurde die dynamische Darstellung der Begriffe und Kategorien, der Timer, die Buttons «Nächster Begriff» und «Beschreibung anzeigen» sowie der Start einer neuen Runde fertiggestellt. Wie der Zwischenstand des Codes nach dem Hackathon aussah, kann hier angesehen werden.
Der Ehrgeiz packte mich und so entschied ich, die Seite weiter auszubauen. Interaktive Medien mochte ich schon seit Beginn. Ich habe jedoch noch nie wirklich eine Seite von Grund auf selbst programmiert. Deshalb betrat ich mit diesem Projekt Neuland. MMP Activity war aber ein ideales Versuchskaninchen, da ich selbst sehr motiviert war, meine Idee umzusetzen.
Ich musste mir überlegen, welche Funktionalitäten die Website am Schluss haben soll. Oft kamen mir aber erst beim Programmieren selbst weitere Ideen oder die geeignete Lösung in den Sinn. Eine iterative Arbeitsmethodik hat natürlich auch Vorteile. Dennoch denke ich, dass ich etwas effizienter hätte sein können, wenn ich mir in der Konzeption einen genaueren Plan zurechtgelegt hätte, welche technischen Vorgänge auf welcher Seite ablaufen.
Dasselbe gilt für die Planung der Datenbank. Ich konzipierte diese mit einer Beziehungstabelle so, dass ein Begriff mehreren Kategorien zugeordnet werden kann. In der Umsetzung brachte ich es aber dann nicht zu Stande, die Begriffe mit mehreren Kategorien auszugeben, da ich den passenden SQL-Befehl dazu nicht formulieren konnte. Hier hätte ich mich bereits in der Phase der Konzeption absichern sollen, dass ich das auf die Reihe kriege.
Umsetzung
Javascript, SQL & PHP
Da der Input aus dem dritten Semester noch relativ frisch war, hatte ich wenig Mühe mit PHP. Die Überprüfung mit von eingegebenen Daten mit if(isset) und Schaltervariablen und die Ausgabe von Infomessages waren deshalb noch gut machbar. Ich lernte hingegen viel über Sessions und Arrays kennen. Die Begriffe wurden in einem Array mit shuffle() in einer zufälligen Reihenfolge angeordnet. Das Debugging mit print_r() war sehr hilfreich, sowie etliche Stackoverflow-Threads.
Mit SQL hatte ich, wie bereits oben erwähnt, mehr zu kämpfen. Mir gelang es nicht, ein Array auszugeben, in dem mehrere Kategorien einem Begriff zugeordnet sind. Zudem war es sehr mühselig, die Begriffe in der Datenbank zu erfassen, da ich mit drei Tabellen arbeitete. Deshalb schuf ich ein kleines «Backend», welches über die Seite login.php angesteuert werden kann. Mit dem richtigen Passwort gelangt man zu einem Bereich, in dem die Begriffe und Beschreibungen direkt einer Kategorie zugeordnet werden können. Das ersparte mir viel Arbeit beim Erfassen der Daten.
Javascript musste ich mir alles selbst beibringen, da ich diese Programmiersprache nie gelernt habe. Auch hier waren Google und Stackoverflow meine Freunde. Mein Konzept war, dass ich die geforderten Daten einmalig aus der Datenbank in einem Array lade und dieses dann dynamisch mit Javascript ausgebe (beim Spielen- und bei der Begriffe-Seite). echo json_encode() half mir, Variablen aus PHP in Javascript zu laden. Mit document.getElementById().innerHTML gab ich die Daten dann aus. Mit einem EventListener und einer Counter-Variable bewerkstelligte ich, dass der Code das Array mit den Begriffen durchgeht. Die erratenen Begriffe werden jeweils mit der .push(array)-Methode in ein Array geschrieben, welches zum Schluss mit Hilfe von localStorage.setItem auf die nächste Seite übertragen wird. Dass diverse Elemente nach Ablauf des Timers verschwinden steuerte ich über document.getElementById().style.visibility. Einen zufälligen Spielmodus wählte ich mit math.floor(math.random()) aus. Mit document.getElementById().classList.remove/add konnte ich das CSS manipulieren und mit new Audio().play() den Wecker abspielen. Auf der Spielende- und der Begriff-Seite generierte ich in Javascript mit document.createElement, document.createTextNode und .appendChild eine ganze Liste bzw. Tabelle und fügte diese in die Seitenstruktur ein. Auf der Begriff-Seite wurden die Tabellen je nach Kategorie dynamisch in die Seite geladen. Dabei lernte ich, wie man Sonderzeichen in CSS und in Javascript maskiert. Die Konsole der DevTools half mir sehr beim Debuggen.
Styling mit CSS
Das Styling machte mir im Vorfeld am meisten Bauchweh, da ich sehr wenig Erfahrung mit CSS und dementsprechend grossen Respekt davor hatte. Deswegen arbeitete ich mit dem Framework «Bootstrap», um mir die Arbeit etwas zu erleichtern. So lernte ich die Basics von Bootstrap kennen. Vor allem für die Mobile-Optimierung war das sehr praktisch. Danach machte ich mich daran, die Elemente nach meinem Wunsch zu positionieren. In diesem Bereich brauche ich einfach noch mehr Erfahrung, da ich all die CSS-Befehle zu wenig gut kenne. Header und Footer sticky zu machen, sodass sie aber den Content nicht überlagern, war eine weitere Challenge. Auf der Startseite spielte ich mit einer kleinen CSS-Animation. Dort ist sicherlich noch viel Luft nach oben. CSS Animations machen mir aber sehr Spass. Nach einigen Zeilen Code musste ich mir auch überlegen, wie ich die CSS-Datei strukturieren soll. Zu guter Letzt wollte ich die Default-Farben von Bootstrap noch etwas umstylen. Dafür arbeitete ich mit root-Variablen und dem online Toole coolors.co.
Begriffe suchen
Die Begriffe aus all den Zusammenfassungen, Notizen und Folien der ersten drei Semestern rauszusuchen, war eine ziemlich umfangreiche Angelegenheit. Oft musste ich abwägen, wie relevant ein Begriff wohl ist und ob er auch ins Spiel passt. So musste ich einfach mal eine Auswahl treffen, welche keinen Anspruch auf Vollständigkeit hat. Falls jemand noch Korrekturen oder Ergänzungen hat, meldet euch bei mir.
Fazit
Für meine erste selbstprogrammierte Webseite bin ich zufrieden mit dem Projekt. Das Styling hätte sicherlich noch etwas mehr Zeit benötigt. Und Funktionen wie beispielsweise den Timer anhalten zu können, kamen wir während dem Programmieren erst in den Sinn, was mein Konzept immer wieder durcheinanderbrachte. Ich nehme von MMP Acitvitiy mit, dass ich von Anfang an besser überlegen muss, welche technischen Vorgänge wo ablaufen sollen, damit ich später nicht so viel Zeit verliere. Wer weiss, vielleicht werde ich das Projekt noch weiterverfolgen ?
