Not logged inClonkspot Forum
Forum Home Help Search Register Login
Up Topic Deutsch / Hilfestellung / HTML-Chat feat. MySQL [PHP-Remix]
- - By DMan (More than 200 posts.) Date 21.08.2014 15:05
Ich weiß nicht, ob es zu "Miniblogs" oder "Community" gehört, aber am ehesten passt es wohl hier rein.
Wie bereits erwähnt, arbeite ich momentan an einem kleinen Chat. Grundbasis steht, Funktionen fehlen.
Würde als nächstes gerne, wie hier, Buttons zur Textgestaltung einbauen. Hab mich schon informiert, komme damit aber nicht so wirklich zu Recht. Habt ihr eine Idee?
Parent - - By Tyron (Tyrone) Date 21.08.2014 16:59
Machst du HTML in Chatnachrichten, was ist das Problem?
Parent - - By DMan (More than 200 posts.) Date 21.08.2014 19:25
Wie hier im Forum ein Wort per Knopfdruck stiltechnisch formatieren zu können.
Parent - - By Zapper (More than 500 posts.) Date 21.08.2014 21:21
Warum sollte man das im Chat wollen?
Parent - - By DMan (More than 200 posts.) Date 22.08.2014 07:35
Weiß nicht, aber evtl. kannst du mir verraten, warum X-Chat sowas integriert hat.
Parent - By Zapper (More than 500 posts.) Date 22.08.2014 10:13
Das musst du die Leute fragen, die das geschrieben haben. Nicht mich.
Parent - By Tyron (Tyrone) Date 25.08.2014 18:04
Dafür gibts Javascript. Ist auch einfach zu lernen. Noch einfacher mit einer DOM-Selector lib wie jQuery
Parent - - By Luchs (More than 1000 posts.) Date 21.08.2014 17:58
Keine Buttons verwenden, und lieber Markdown implementieren? Gibt es wirklich Leute, die nach dem Schreiben einer Chatnachricht sich noch mit Formatierungsknöpfen rumquälen?
Parent - - By DMan (More than 200 posts.) Date 21.08.2014 19:25
Mit Markdown hab ich bisher nur schlechte Erfahrung gemacht, daher möchte ich das mal lassen.
Parent - - By Luchs (More than 1000 posts.) Date 21.08.2014 21:05
Inwiefern schlechte Erfahrungen? Hast du mal `[]()` mit `()[]` vertauscht oder was? ;)
Parent - By DMan (More than 200 posts.) Date 21.08.2014 21:10
Nein, aber dass \*[...]* und \_[...]_ hier und auf YouTube (durch ein Markdown ersetzt werden(?)), obwohl ich das nicht will und ich sogar dagegensteuern muss, geht mir ziemlich auf den Kranz. Und ja, First World Problem.
Parent - - By Pyrit (More than 200 posts.) Date 22.08.2014 14:35
Knöpchen versteht jeder, Makrdown muss man erstmal lernen.
Parent - - By Luchs (More than 1000 posts.) Date 22.08.2014 19:07
Das stimmt. Da das aber mittlerweile immer mehr Seiten einsetzen, ist es den Usern mit steigendender Wahrscheinlichkeit bereits bekannt.
Parent - By ArneB (More than 15 posts.) Date 23.08.2014 21:54
Ich würde irgendwie vermuten, dass BB-Code mehr Leuten bekannt ist. Das braucht auch nicht so viele Escapes.
- By DMan (More than 200 posts.) Date 22.08.2014 10:10 Edited 20.12.2014 08:30
Da mir jeder das nur ausreden oder mir anderes empfehlen möchte, habe ich jetzt einfach mal billig versucht, den JS- und HTML-Code zu kopieren, ohne Erfolg.

HTML:
<!-- <script src="scripts/js/buttons.js" id="mwfjs" data-params="{ &quot;tagButtons&quot;: 1; }"></script>
[...] --> //evtl. muss das da unten stehen.
<div class="tbb">
<button type="button" class="tbt" id="tbt_b" accesskey="b" tabindex="-1" title="Fett (Mod+B)"><b>b</b></button>
<button type="button" class="tbt" id="tbt_i" accesskey="i" tabindex="-1" title="Kursiv (Mod+I)"><i>i</i></button>
<button type="button" class="tbt" id="tbt_tt" accesskey="t" tabindex="-1" title="Nicht proportional (Mod+T)">tt</button>
<button type="button" class="tbt tbt_p" id="tbt_url" accesskey="w" tabindex="-1" title="URL (Mod+W)">url</button>
</div>
        <lable>Nachricht:<br /><div><div style="float:left"><input class="tgi" name="message" id="message" style="width:575%;"></input></lable></div>
[...]
  <script type="text/javascript" src="scripts/js/buttons.js" id="mwfjs" data-params="{ &quot;tagButtons&quot;: 1; }">


JS:
var mwf = { p: $("#mwfjs").data("params") };

$(document).on("ready", function () {
  var script = mwf.p.env_script;
  mwf.hideMsgParam();
  if (mwf.p.tagButtons) { mwf.initTagButtons(); }
  if (mwf.p.autocomplete) { mwf.initAutocomplete(); }
});


mwf.insertTags = function (tag1, tag2) {
  [...]
};

mwf.initTagButtons = function () {
  [...]
};

mwf.initAutocomplete = function () {
  [...]
};


Aber eig. hab ich den Code soweit richtig verfolgt. Denke ich mal..

Notice: Kursiv = durch Update
- - By DMan (More than 200 posts.) Date 23.08.2014 22:30 Edited 23.08.2014 22:45
Also, hab den Chat mal publiziert.
- Er ist mit der MySQL-Relation für registriere Benutzer verbunden, wer sich also registriert hat, kann sich mit den selben Daten in den Chat einloggen (Info: Passwort besteht aus den ersten 5 Zeichen des Aktivierungscode, es wird mit MD5 verschlüsselt und es gibt bald die Möglichkeit, sein Passwort zu ändern).
- Wer sich nicht registrieren möchte, kann sich auch mit dem Username "Gast" anmelden, das Passwort muss leer bleiben und ein dauerhafter Login ist nicht möglich.
- IPs werden gespeichert und es können Bilder, Videos, etc. hochgeladen werden.
- Es werden immer nur die 100 neusten Nachrichten angezeigt, der Rest wird ins Archiv exportiert und aus der Relation gelöscht.
- An weiteren Funktionen wie einer automatischer Verlinkung und den Buttons muss ich noch arbeiten.

Edit: Ich würde mich sehr um Hilfe freuen, auch im Design-Bereich. Momentan sieht der Chat nur auf einem Tablett gut aus (die Input-Zeile für die Nachrichten soll überall bis zum "Senden"-Button gehen, die Textarea für die Nachrichten soll überall fast bis zum Boden gehen, etc.).

Wenn ihr noch weitere Ideen habt, dann lasst sie mich doch bitte wissen. (:
Parent - - By Luchs (More than 1000 posts.) Date 24.08.2014 13:25
Tipp: Benutze password_hash statt MD5 um deine Passwörter abzulegen. Das ist kaum schwerer zu verwenden, aber um ein vielfaches sicherer.
Parent - - By DMan (More than 200 posts.) Date 24.08.2014 20:00 Edited 24.08.2014 20:15
Wenn ich's richtig verstanden habe, wird hierbei das Passwort und ein weiterer Text o.ä. zusammen verschlüsselt, oder?
Beispiel:
<?php $password = $_POST['pass'];
$algo = "DMansplace";

password_hash($password, $algo); ?>


Wie kann ich das dann abfragen?
<?php if($_POST['pass'].$algo == «Wert aus DB»)  {  [...]  }  ?>

Edit: Hab mich ein wenig von einer Seite verwirren lassen. (Zeile 6 & 9, hab $pepper als nächsten Wert im Syntax gesehen.)

>Das ist kaum schwerer zu verwenden


\*anzweifel*

Was ist der grobe Unterschied zwischen PASSWORD_DEFAULT und PASSWORD_BCRYPT und was hat es mit diesem Salz (Salt) auf sich?
Parent - - By ClonkGeist (More than 50 posts.) Date 24.08.2014 21:54

>Was ist der grobe Unterschied zwischen PASSWORD_DEFAULT und PASSWORD_BCRYPT


Aktuell gibt es da nicht wirklich einen Unterschied: PASSWORD_DEFAULT verwendet immer den in der aktuellen PHP-Version besten verfügbaren Algorithmus. Da aktuell aber nur BCRYPT für password_hash verfügbar ist, wird auch BCRYPT benutzt. PASSWORD_DEFAULT ist eben zukunftssicherer.

>und was hat es mit diesem Salz (Salt) auf sich?


Salts sind zufällig generierte Zeichenketten, die den Passwörtern hinzugefügt werden, bevor sie verschlüsselt werden. Dies hilft gegen die Verwendung von Rainbow Tables, welche ja schon vorberechnete Passwort-Hashes zu vielen Zeichenfolgen enthält. Wenn die Passwörter gesaltet sind, verfällt dieser Schritt (da Rainbow Tables mit gesalteten Passwörter zu groß wären und es zu lange dauern würde diese zu generieren - insgesamt wärs also relativ unsinnig) und man müsste das Passwort über andere Methoden neu berechnen, was entsprechend deutlich mehr Zeit kostet.
Parent - - By DMan (More than 200 posts.) Date 25.08.2014 10:10
Danke für die ausführliche Info. Kann man dann auch sagen, dass mein $algo so ein Salt ist? Weil ohne Auskunft darüber, dass es noch einen dazugenommenen Wert (≙ $algo) gibt, wird doch beim Verifizieren dann nicht nur das Passwort ausgegeben, oder?

Falls man es nicht versteht:
111.222 -> password_hash -> 121212 -> password_verify -> 111222 -> "Passwort = 111222"
Parent - By Luchs (More than 1000 posts.) Date 25.08.2014 19:29
`password_verify` entschlüsselt das Passwort nicht. Das ist eine wesentliche Eigenschaft dieser Hashfunktionen: es ist sehr schwer, den ursprünglichen Wert wieder zu berechnen ("Einwegefunktion"). Deshalb führt `password_verify` dieselben Schritte wieder durch, die `password_hash` gemacht hat und vergleicht das Resultat mit dem gegebenen Hash.

Beim Salz ist es wichtig, dass jedes Passwort ein anderes zufälliges Salz bekommt. Ein einzelner Wert für alle Passwörter würde keinen Vorteil bringen.
Parent - By Luchs (More than 1000 posts.) Date 25.08.2014 18:20
Der Punkt davon ist, dass du dir über den zugrundeliegenden Algorithmus wie bcrypt oder md5 keine Gedanken machen musst. Wenn du `PASSWORD_DEFAULT` als Algorithmus verwendet, bekommst du sogar ohne Änderungen an deinem Code mit der Aktualisierung deines PHP-Interpreters aktuellere Algorithmen.

Die Verwendung sieht so aus: Du brauchst eine passende Datenbankspalte (laut Dokumentation sollte sie mindestens 255 Zeichen fassen für zukünftige Algorithmen), in der du dann das Resultat von `password_hash($pw, PASSWORD_DEFAULT)` speicherst. Zum überprüfen verwendest du dann `password_verify($pw, $hash)`, das alles automatisch macht.

>*anzweifel*
>Was ist der grobe Unterschied zwischen PASSWORD_DEFAULT und PASSWORD_BCRYPT und was hat es mit diesem Salz (Salt) auf sich?


Es ist deshalb wesentlich einfacher, weil du eben darum dir überhaupt keine Gedanken machen musst. Die Verwendung von md5 und dann auch noch ohne Salz ist kryptographisch absolut katastrophal. Hier verwendest du einfach nur die Standardwerte (eben `PASSWORD_DEFAULT`) und alles ist einfach so ok.
Parent - - By ArneB (More than 15 posts.) Date 24.08.2014 15:07

> Passwort besteht aus den ersten 5 Zeichen des Aktivierungscode


Mach daraus bitte mindestens 8.

Als Gast eingeloggt:
Bitte überprüfe folgende deiner Angaben:

    You are a pirate... bot!
Parent - - By DMan (More than 200 posts.) Date 24.08.2014 19:10 Edited 24.08.2014 19:45
Warum mindestens 8 Zeichen?
Und der Chat funktioniert zum Großteil mit JS, wenn du das deaktiviert hast, wirst du nicht weit kommen.

Edit: Hab mal ne kleine Benachrichtigung für alle JS-Blockierer via. CSS (und JS) eingebaut. Wer kein JS aktiviert hat, bekommt das Formular garnicht erst zu sehen.
Parent - - By ArneB (More than 15 posts.) Date 24.08.2014 19:50

> Warum mindestens 8 Zeichen?


Fünf Zeichen sind lächerlich wenig für ein Passwort. Acht eigentlich auch noch, aber immerhin ein kleines bisschen besser und recht üblich.

> Und der Chat funktioniert zum Großteil mit JS, wenn du das deaktiviert hast, wirst du nicht weit kommen.


Das ist ja okay-ish, aber zumindest eine sinnvolle Fehlermeldung wäre gut.

> Edit: Hab mal ne kleine Benachrichtigung für alle JS-Blockierer via. CSS (und JS) eingebaut. Wer kein JS aktiviert hat, bekommt das Formular garnicht erst zu sehen.


Oh, gut. Ja, so ist besser.
Parent - By DMan (More than 200 posts.) Date 24.08.2014 19:55

>Fünf Zeichen sind lächerlich wenig für ein Passwort. Acht eigentlich auch noch, aber immerhin ein kleines bisschen besser und recht üblich.


Es geht mir darum, dass a) sich keiner ein 8-stelliges Passwort merken kann und b) viele ihre Mails löschen und dann ihren Aktivierungscode / ihr PW nicht mehr wissen, wobei ich letzteres am wenigsten verstehen kann. Ich habe unter Hotmail und GMail noch nie 1 Mail gelöscht und hab noch mehr als ausreichend Speicherplatz. Höchstens bei web.de kann ich das verstehen, aber das ist ja auch mehr als dreist.

Und wie gesagt, das Passwort wird in näherer Zukunft änderbar sein. Aber nagut, das Passwort ist in Zukunft der ganze Aktivierungscode (10 Zeichen).

>Oh, gut. Ja, so ist besser.


:B
Parent - - By Luchs (More than 1000 posts.) Date 25.08.2014 18:23 Edited 25.08.2014 19:25
Hint: `<noscript>` ist dein Freund. Wobei das natürlich nur funktioniert, wenn alles blockiert ist und das von den Plugin vernünftig gehandhabt wird.
Parent - - By DMan (More than 200 posts.) Date 25.08.2014 19:50
Hint: NoScript ist nicht mein Freund, es ist Dreck. Einfach aber Dreck.
- Es wird sofort dargestellt, wenn JavaScript vom deaktivieren Modus aktiviert wird und kann das Style ruinieren. Außerdem werden die Umlaute falsch dargestellt, selbst wenn UTF-8 verwendet wird.
- NoScript zeigt zwar den Text nicht an, aber der Platz wird trotzdem gebraucht.

So ist das zumindest bei mir, daher leg ich nichts auf NoScript.
Parent - - By KA (More than 50 posts.) Date 26.08.2014 08:46
Also ich muss sagen dass ich mit NotScrips für Chrome zufrieden bin....:grin:

Bei mir ruiniert es nicht den style, es fehlen manchmal einfach nur Funktionen oder Textfelder...
Parent - By DMan (More than 200 posts.) Date 26.08.2014 08:50
"Scheiß auf Funktionen, wer braucht die schon???"

Naja, und mit meiner Methode passiert nichts in der Richtung und ist auch nur minimal komplizierter.
- - By DMan (More than 200 posts.) Date 19.12.2014 21:45
Vllt. gibt's ja ein paar Idden für mich, wie ich das mit den Buttons lösen kann. Sollte so wie hier funktionieren, ich find nur leider nichts was funktioniert.

Habe bisher schon das benutzt:
<script type="text/javascript">
function fillin_hl()  {
document.form_input.message.value="[hl][/hl]";
}

function fillin_c()  {
document.form_input.message.value="[ c=rrggbb ][ /c ]";
}
[...]
<button type="button" onClick="javaScript: fillin_hl();"><span style="color:#ff0000;">h(igh)l(ight)</span></button>
<button type="button" onClick="javaScript: fillin_c();"><span style="color:#0066ff;">c(olor)</span></button>
[...]


Nur sorgt ein Klick auf einen Button, dass das Textfeld geleert wird, und das ist evtl. nicht so optimal..
Parent - - By Luchs (More than 1000 posts.) Date 19.12.2014 23:50
Ja und warum nutzt du dann nicht einfach den Code von hier dafür?
Parent - - By DMan (More than 200 posts.) Date 20.12.2014 07:55 Edited 20.12.2014 08:25
Ich hab mir den Code schon einmal aus dem Quellcode geholt und versucht, den benötigten Kram dafür zu extrahieren. Aber es ist eben schief gegangen.

Edit: Hab noch die Zeile mit dem Autocomplete hinzugefügt, geht aber immer noch nicht. Werde gleich die Codezeilen von oben updaten, das Neue ist kursiv.

Edit2: Selbst mit dem vollen Script geht's nicht. Denke also, dass der Script erst garnicht reagiert, weil z.B. eine Vorgabe nicht erfüllt ist (z.B. <body> muss die class "mwForum" haben / alles muss in einem <fieldset> sein) oder das er das Textfeld nicht betreten kann, weil dieses einen anderen Tag und anderen Namen hat (hier 'textarea class="tgi" name="body"', bei mir 'input class="tgi" name="message" id="message"').
Parent - - By DMan (More than 200 posts.) Date 20.12.2014 11:45 Edited 20.12.2014 12:00
Super, danke!

PS: Wie würde das mit url gehen? Ich würde hier an die Funktion darunter denken.

mwf.initTagButtons = function () {
  var html, selOb, btnOb,
    dlOb = $("#snippets");
  $(".tbb").on("click", ".tbt", function () {
    var match = this.id.match(/tbt_([a-z]+)(?:_([a-z]+))?/),
      tag1 = match[1],
      tag2 = tag1;
    if ($(this).hasClass("tbt_p")) { tag1 += "="; }
    else if (match[2]) { tag1 += "=" + match[2]; }
    mwf.insertTags(tag1, tag2);
  });
};


Nur weiß ich nicht, wie ich's einbauen könnte / was ich am Script ändern müsste.
Parent - - By Luchs (More than 1000 posts.) Date 20.12.2014 15:49
`insertTags` bekommt als Parameter einen öffnenden und einen schließenden Tag. Der einzige Unterschied beim URL-Tag ist ja, dass der öffnende Tag ein `=` am Ende stehen hat. Das bekommst du z.B. so.
Parent - By DMan (More than 200 posts.) Date 20.12.2014 16:45 Edited 20.12.2014 17:30

>if (tag1 === 'url')


Könnte man das nicht allgemeiner machen wie im Hauptscript?
if ($(this).hasClass("ext"))

Trotzdem danke. :D

Edit: Jap, geht so. Man muss dem Button nur diese Class zuweisen.
Dankeschön. :'D
- - By DMan (More than 200 posts.) Date 27.12.2014 10:55
Ich wollte jetzt einen 3. Typ von Button einrichten. In HTML gibt's es ja auch nicht nur <tag></tag> und <tag data="X"></tag> sondern auch <tag /> wie z.B. bei br und img. Hab versucht, den Code unten zu ändern, jedoch merk ich keinen Unterschied.

Hier der Auszug:
[...]
    after = el.value.substring(end, el.textLength);
    if ($(this).hasClass("aln")) el.value = tag2 ? before + "[" + tag2 + " /]" + sel + after :
      before + ":" + tag1 + ":" + after;
    else el.value = tag2 ? before + "[" + tag1 + "]" + sel + "[/" + tag2 + "]" + after :
      before + ":" + tag1 + ":" + after;
    caret = sel.length === 0 ? start + tag1.length + 2 :
      start + tag1.length + 2 + sel.length + tag2.length + 3;
[...]


Meine Texteingabe ist ein Input und wird daher mit Enter abgeschickt (ist so gewolt), aber manchmal hätte man doch gerne einen Break zwischendurch. ^^
Parent - By DMan (More than 200 posts.) Date 03.01.2015 21:55
Wirklich keiner eine Idee? Schade. Werd's demnächst updaten und wäre froh, wenn das auch noch fertig werden würde. :)
- By DMan (More than 200 posts.) Date 16.04.2015 19:10 Edited 24.04.2015 20:35
So, wollte nur mal sagen, dass eine neue Version des Chats verfügbar ist.

- Habe nun die Sicherheitsvorkehrungen etwas erhöht, man kann nicht mehr das Namensfeld sichtbar machen (an der Stelle Grüße an 'NotGast') und auch keine HTML-Codes in den Chat posten, den einzigen Weg zur Textformatierung bieten die BB-Codes.
- Ein Zeilenumbruch ist mit "[br /]" möglich, hab den Button aber noch nicht eingebaut, da ich es nicht hinkriege. \*hust*
- Links sollten automatisch erkannt und anklickbar sein, fehlerfrei funktioniert er aber (noch) nicht.
- Das CSS wurde etwas verbessert (Danke an Gecko!) und wird auch noch weiter angepasst.
- img und imgext dienen zum direkten Posten von Bildern, bei img muss nur der Dateiname, unter der eine Datei auf meinen Server hochgeladen wurde, eingegeben werden (Bsp: [img]foobar.png[/img]), imgext funktioniert mit Links (Bsp: [imgext]http://nsa.gov/ips_over_the_last_decade.png[/imgext]).
- Beim c-Tag kann man die Schriftfarbe ändern (Bsp: [c=00ff00]gallerie).
- Es werden nur die neusten 100 Nachrichten angezeigt (neu?), evtl. bau ich noch ne Oberfläche für's Archiv.

LogIn wie immer über die Benutzerdaten oder als Gast, alte Infos hier.

Gruß, Daniel

Hinweis: Neuregistration funktioniert momentan nicht, da PHP::mail() keine Mails verschickt, konfiguriere das aber bald.
Edit: Evtl. werd ich das noch ändern, da es wohl so aussieht, als wenn ich das nicht so schnell auf die Reihe bekommen würde.

Edit: Mails werden verschickt, dauert aber einige Zeit. Bitte unbedingt den Spam-Ordner checken, vielen Dank!
Up Topic Deutsch / Hilfestellung / HTML-Chat feat. MySQL [PHP-Remix]

Powered by mwForum 2.29.7 © 1999-2015 Markus Wichitill