MEG Chat - Schüler Plattform

flyingtable07

New Member
Hey,
Ich hab in den letzten Monaten viel über Webprogrammierung gelernt. Ich habe angefangen zusammen mit ein Paar Freunde eine provate Austauschsplattform für Schüler unserer Schule zu bauen. Die gesammte Seite ist vollständig in Vanilla HTML, CSS und Javascript geschrieben.
Ich weiß das ich immer noch ganz am Anfang in der Webprogrammierung bin. Deshalb würd ich mich sehr über ein Kleines Feedback freuen. Woran kann ich noch arbeiten? Was muss ich unbedingt beachten?
https://meg-chat.de/home
Vielen Dank für alle Tipps!
 
Moin Tilo und Co,

zunächst mal Respekt für ein solches Schülerprojekt! Insbesondere wenn es unter der Haube genauso sauber gescriptet ist, wie die HTML an der Oberffläche, dann seid Ihr da echt gut unterrichtet worden und Euer Informatik-Lehrer verdient ein sehr grosses Lob! Ladet ihn mal zum Kaffee ein ;)

Ganz kleine Kritik: Bitte keine Javascript-on*-Funktionen im HTML (Beispiel der onclick beim Logo) das mögen mache Anti-Viren/Anti-Malware-Tools nicht so gerne und insbesondere Screenreader und andere Accessibility-Tools können damit gar nicht umgehen.
Wenn möglich solltet Ihr auch noch mehr CSS vom HTML in externe Dateien auslagern.

Kleiner Tip aus eigener Erfahrung: Das Aufhübschen der Oberflähe (Design) solltet Ihr möglichst spät umsetzen, nachdem die gewünschten Features wirklich sauber funktionieren.
Chats welche nicht wirklich für die Öffentlichkeit bestimmt sind (z.B. Hausaufgaben-Chat) hinter ein Login legen, Datenbankqueries optimieren...

Und abschliessend noch der wichtigste Tip: KISS (keep it simple, stupid)

Nochmal: Respekt an Euch und Euren Lehrer!
 
Noch eine Anmerkung grundsätzlicher Natur:
Im Spam-Chat steht ein mp3 Download. Der DL funktioniert zwar nicht (vllt. ist es ja nur als Beispiel gedacht), aber in öffentlich zugänglichen Chats solltet ihr darauf achten, daß da nichts rumliegt, was mögliche Urheberrechte berührt. Sonst habt ihr ganz schnell die Abmahn-Mafia am Hals. ;)
 
Noch ein paar Tips:
Security: Die Upload-Funktion sollte erstmal wieder komplett entfernt werden, da keinerlei Plausibilitätsprüfung stattfindet. Es kann Euch derzeit wirklich alles untergeschoben werden (illegale Inhalte, Inhalte beliebiger Grösse, Malware, etc.), das ist wirklich gefährlich.
Performance: Wenn ich den Code richtig verstanden habe, dann speichert Ihr derzeit die Chatnachrichten als JSON/HTML-Fragmente auf der Festplatte. Das ist sehr ineffektiv und funktioniert spätestens bei 10+ aktiven Nutzern nichtmehr ohne lange Wartezeiten oder Datenverlusten. Nehmt stattdessen eine SQLite-Datenbank, das ist für Eure Zwecke ausreichend und relativ einfach umzusetzen.

Im CSS habt Ihr noch einzelne Selectoren mit mixed-case-Schreibung, bitte nutzt einheitlich nur Kleinschreibung im CSS und SQL und Mixed-Case nur im Javascript/Code.
 
Hey,
Vielen Dank für das nette Feedback!
Unseren Lehrer werden wir sicherlich irgendwann mal zum Kaffe einladen ^^.
Ah, das mit dem onclick event wusste ich noch gar nicht. Das haben wir jetzt verbessert. Vom CSS ist soviel wie möglich in externen Dateien, der Teil der direkt im HTML ist wird von PHP dynamisch geladen. Das wird ein bsichen schwirig, dass auch über eine externe Datei zu machen aber wir werden nach einer Lösung suchen.
Uh, das mit dem Design sollt ich besser nicht meinem Freund sagen. Der ist da immer sehr engagiert dabei die Elemente aufzuhübschen xD. Aber du hast natürlich recht, die Funktionsweise sollte im Vordergrund stehen.
Ob wir es schaffen für die Chats noch Berechtigungen hinzuzufügen (Angemeldet/Nicht angemeldet) weiß ich nicht. Die bisherigen PHP scripte die auf die Ajax Requests antworten sind bisher nicht dafür ausgelegt. dazu müsste das system komplett neu organisiert werde. selbst wenn wir die "geheimen" chats nicht direkt anzegen würde man die über einen POST request auslesen können. Aber wir werden auf jeden Fall darauf hinarbeiten.
Noch eine Anmerkung grundsätzlicher Natur:
Im Spam-Chat steht ein mp3 Download. Der DL funktioniert zwar nicht (vllt. ist es ja nur als Beispiel gedacht), aber in öffentlich zugänglichen Chats solltet ihr darauf achten, daß da nichts rumliegt, was mögliche Urheberrechte berührt. Sonst habt ihr ganz schnell die Abmahn-Mafia am Hals. ;)
Ok, Danke, Geht klar! Die Mp3 Files waren tatsächlich zum Testen haben aber am Anfang wirklich funltioniert. Dann hab ich ganz schnell die Files vom Webserver gelöscht.

Noch ein paar Tips:
Security: Die Upload-Funktion sollte erstmal wieder komplett entfernt werden, da keinerlei Plausibilitätsprüfung stattfindet. Es kann Euch derzeit wirklich alles untergeschoben werden (illegale Inhalte, Inhalte beliebiger Grösse, Malware, etc.), das ist wirklich gefährlich.
Performance: Wenn ich den Code richtig verstanden habe, dann speichert Ihr derzeit die Chatnachrichten als JSON/HTML-Fragmente auf der Festplatte. Das ist sehr ineffektiv und funktioniert spätestens bei 10+ aktiven Nutzern nichtmehr ohne lange Wartezeiten oder Datenverlusten. Nehmt stattdessen eine SQLite-Datenbank, das ist für Eure Zwecke ausreichend und relativ einfach umzusetzen.

Im CSS habt Ihr noch einzelne Selectoren mit mixed-case-Schreibung, bitte nutzt einheitlich nur Kleinschreibung im CSS und SQL und Mixed-Case nur im Javascript/Code.
Ah das stimmt wirklich. Ich hab nur leider noch gar keine Erfahrung mit wie ich festatellen kann ob eine Datei bösartig ist. Einfach nur bestimmte Dateiendungen erlauben? Das wir die Dateigröße beschränken und bestimmte Nachrichten blokieren steht jetzt auf unserer To Do liste. Das mit dem JSON ist wohl aus Faulheit entstanden. Wir wussten alle nicht das das so ineffektiv ist. Datenbank machne wir jetzt also auch noch.
Und darf ich fragen woher du das mit dem JSON weißt? soweit ich weiß haben wir den code nirgendwo veröffentlicht.

Nochmal vielen Dank für die ganzen guten Tipps!
 
Und darf ich fragen woher du das mit dem JSON weißt? soweit ich weiß haben wir den code nirgendwo veröffentlicht.
War aus dem Javascript (spa.js/chat.js) ersichtlich, also öffentlicher Code ;)

Einfach nur bestimmte Dateiendungen erlauben?
So einfach ist es leider nicht und deshalb solltet Ihr das Rad auch nicht einfach so neu erfinden.
Da Ihr bereits PHP einsetzt, schaut Euch andere (weitverbreitete) Opensource-PHP-Projekte mit entsprechenden Upload-Funktionen an und kopiert erstmal deren PHP-Klassen/Funktionen bis Ihr sie vollständig versteht und versucht erst dann Eure eigene Version zu bauen.
Überlegt Euch aber zuerst ganz genau, ob eine Chat-App wirklich eine Upload-Funktion benötigt (Must-Have), oder ob das nur ein überflüssiges Gimmick (Nice-to-Have) ist.
 
Back
Top