Die Umsetzung
Das Design soll möglichst modern und flach sein. Selbstverständlich kann je nach Einsatzgebiet die Farbwelt einfach angepasst werden. Die Standard Farben gelb und violett finde ich in der Kombination eine frische Abwechslung zum im Internet dominierenden Blau. Bei den Formen achte ich darauf, dass die Schaltflächen genügend gross sind und der Text gut gelesen werden kann. Die ersten Ideen skizzierte ich auf Papier. Als Inspiration suchte ich auf Pinterest und Awwwards nach guten und schlechten Umsetzungen. Sobald ich mit den Skizzen zufrieden war, kreierte ich in Adobe XD ein Design. Dazu eignet sich Adobe XD sehr gut. Die einzelnen Schaltflächen können einfach verlinkt werden und rasch hat man einen kleinen Prototypen.
Am Anfang programmierte ich nur mit HTML und CSS das Anmelde und Registrations Formular. Dabei hielt ich mich an die Designvorlage im Adobe XD.
Weiter erstellte ich die Datenbanktabelle mit allen vordefinierten Spalten. Zudem füllte ich mit einem Testbenutzer die Zeile aus.
Danach erstellte ich mit PHP die Datenbankverbindung und alle nötigen Klassen. Diese Arbeit ist zum Beginn oft etwas mühsam. Doch sobald sie erledigt ist, spart man viel Zeit beim Programmieren.
Funktioniert die Datenbankverbindung, kann das Formular mit PHP ausgebaut werden. Danach konnte ich den ersten Testdurchlauf vornehmen. Meist funktioniert beim ersten Mal noch nicht ganz alles, so dass noch einmal der Code überarbeitet werden muss. Beim weiteren Testen funktionierte schlussendlich alles und ich konnte mich mit dem neu registrierten Benutzer anmelden.
Weiter entwickelte ich die Funktion des Tageslogin Bonus. Dabei wird das Datum des letzten Logins in der Datenbank gespeichert. Ausserdem wird die aktuelle Serie gespeichert. Sprich wie viele Tage hintereinander ist der User jetzt schon online. Mit PHP wird aus dem aktuellen Datum, der Serie und dem Datum des letzten online Besuchs ausgerechnet, ob die Serie weiter geht oder neu starten muss. Je nach dem werden dann dem User mehr oder weniger Coins auf das Konto geschrieben und eine andere Tageslogin Bonus Übersicht angezeigt.
Herausforderung
Lange musste ich mir Gedanken machen, wie die Funktion umgesetzt werden sollte, welche Spalten die Datenbank benötigt werden und wie ich im Code vorgehen soll. Sobald ich die Logik programmiert hatte, fand ich immer wieder neue kleine Fehler, die durch verschiedene Kombinationen auftauchten. Beim LeanModal musste ich den Code ebenfalls mehrfach überarbeiten, bis die Funktion so abläuft, wie ich es mir wünschte.
Fazit
Als kleines Fazit bin ich sehr zufrieden mit meinem Projekt. Hinter der Funktion steckt mehr Arbeit, als ich dachte. Obwohl das Element des Tageslogin Bonusses simpel wirkt, musste ich viele Zeilen Code schreiben, damit alles klappt, wie es soll. Gegen Ende des Projektes bin ich stolz auf meine Arbeit und werde in naher Zukunft versuchen die Funktion auf quotenfuchs.ch einzubauen. Dank meiner offenen Art des Programmierens kann das Element rasch an das Design von Quotenfuchs angepasst werden. In Aktion wird sich zeigen, ob es von den Usern noch Feedback zu Änderungswünschen gibt.
Das Modul "Weblab" fand ich sehr interessant und toll umgesetzt. Die Studierenden selbst dem Projekt zu überlassen und als Coach bei Fragen zu unterstützen hat meiner Meinung nach ein grosses Lernpotenzial. Durch die kleine Anzahl an Teilnehmenden, konnte jeder Einzelne noch mehr davon profitieren.
Für in Zukunft habe ich jetzt eine spannende Möglichkeit User auf einer Website zum Wiederkommen zu motivieren.
Ressourcen
jquery: Voraussetzung für LeanModal
LeanModal: Popup Fenster des Tageslogin Bonus
Google Fonts: Für die Schriften auf der Website
Font Awesome: Für Icons auf der Website