HTML-Code zum Hinzufügen von Kommentaren durch Benutzer. Einfaches Kommentarsystem mit AJAX. Welches Markup-Format ist am besten zu verwenden?

💖 Gefällt es dir? Teilen Sie den Link mit Ihren Freunden

Laut einer Studie des CRM-Implementierungsunternehmens C5Insight führen durchschnittlich 38 % der CRM-Integrationen in ein Unternehmen zu Ergebnissen, die hinter den Erwartungen zurückbleiben. Der Grund ist nicht ein schlechtes IT-Produkt, sondern die Tatsache, dass Unternehmen nicht wissen, wie sie CRM richtig implementieren, Fehler machen und letztendlich ihre Investitionen verlieren.

Aber wenn der Übergang zu CRM erfolgreich ist, wird sich die Investition mehr als fünfmal auszahlen. Laut einer Studie des Analyseunternehmens Nucleus Research bringt jeder in CRM investierte Dollar einen Gewinn von 5,6 Dollar.

Return on Investment in ein CRM-Produkt für Unternehmen laut dem Analyseunternehmen Nucleus Research im Jahr 2011.

Um zu verstehen, wie die Implementierung eines IT-Produkts ablaufen sollte, betrachten wir die wichtigsten Phasen der Integration sowie typische Fehler, die Unternehmer häufig machen.

Implementierungsphasen

Die Implementierung von CRM erfolgt auf unterschiedliche Weise, es gibt jedoch immer fünf Hauptphasen in diesem Prozess. Bei jedem von ihnen übernimmt ein Integrator die Rolle des Kurators – ein Vertreter eines CRM-Unternehmens, aber keine Sorge: Sie müssen keinen „Test“ schreiben. Sie müssen lediglich den Anweisungen des Integrators folgen: Beschreiben Sie die gewünschten Geschäftsprozesse und Probleme genau

1. Beschreibung der Geschäftsprozesse

Da Sie mit einem CRM-System bestehende Prozesse verbessern und automatisieren können, müssen Sie diese zunächst beschreiben. Diese Daten bilden die Grundlage für die Programmeinstellungen:

  • Wie ist die Unternehmensstruktur? Wie sind die Mitarbeiter auf die Abteilungen verteilt? Wie werden die Aufgaben auf die Mitarbeiter verteilt?
  • Wer sind die Kunden des Unternehmens? , Wie ?
  • Was ist der Algorithmus für die Interaktion mit Kunden?
  • Wie arbeiten Sie mit Kundenbindung? Wie funktioniert Marketing im Allgemeinen?
  • Welche werden im Unternehmen häufig verwendet?

2. Erstellung technischer Spezifikationen

Sobald Geschäftsprozesse beschrieben sind, müssen Schwachstellen analysiert werden. Denn gerade um sie zu beseitigen, wird das Programm umgesetzt.

Ihre Manager reagieren beispielsweise langsam auf neue Anfragen auf der Website des Unternehmens – sie rufen Kunden erst am nächsten Tag zurück oder vergessen sie völlig. Dadurch verliert das Unternehmen potenzielle Kunden. Dies muss in der Leistungsbeschreibung angegeben werden, damit der Integrator eine Lösung für das Problem anbieten kann. Dies wird aber bereits im nächsten Schritt geschehen.

3. Erstellung einer Einstellungskarte

Geschäftsprozesse sind beschrieben, Probleme identifiziert und nun gilt es herauszufinden, wie man sie mit dem System „besiegt“: welche Prozesse optimiert, beschleunigt und automatisiert werden können. Sie können beispielsweise die Rechnungsstellung usw. automatisieren.

In dieser Phase kommt dem CRM-Spezialisten die führende Rolle zu. Er kennt die Fähigkeiten eines IT-Produkts genau und kann Nuancen anbieten, von denen der Verbraucher nicht einmal wusste, dass sie existieren. Darüber hinaus kann der Integrator die Interaktion mit Kunden beraten oder verbessern – er fungiert also auch als Berater.

Wenn wir das Beispiel aus der vorherigen Phase fortsetzen, kann der Integrator diese Art des Umgangs mit verlorenen Kunden anbieten: Richten Sie die CRM-Integration mit der Website so ein, dass jeder Antrag automatisch im Programm erfasst und ihm ein verantwortlicher Manager zugewiesen wird. Das System weist ihm automatisch die Aufgabe zu, den Kunden innerhalb von 15 Minuten anzurufen, und wenn die Aufgabe überfällig ist, wird der Leiter der Vertriebsabteilung durch eine Softwarebenachrichtigung sofort darüber informiert.

4. CRM-Einrichtung, Import, Integration

Diese Phase ist die technische Umsetzung der vorherigen. Die Arbeit obliegt vollständig dem Implementierungsspezialisten. Es importiert Daten, richtet einen Verkaufstrichter und Checklisten ein, erstellt benutzerdefinierte Felder, schreibt Skripte zur Automatisierung von Geschäftsprozessen – kurz gesagt, passt die Systemschnittstelle an Ihr Unternehmen an. Darüber hinaus konfigurieren Sie in diesem Schritt die Integration von CRM mit Diensten von Drittanbietern, die Sie bei Ihrer Arbeit nutzen: E-Mail, Unternehmenswebsite, SMS-Mail-Versanddienst und andere.

5. Personalschulung

Es macht keinen Sinn, darüber nachzudenken, wie man CRM in einem Unternehmen einführt, wenn die Mitarbeiter nicht kompetent damit arbeiten können. CRM ist nur ein Tool, das an sich keinen Gewinn erwirtschaftet. Daher ist es wichtig, den Mitarbeitern zu erklären, worum es bei diesem unverständlichen Programm geht und warum es so wichtig ist, in jeder Arbeitsphase sorgfältig Daten über Kunden und Transaktionen darin zu erfassen.

Ich habe zum Beispiel einen Kunden angerufen und das Ergebnis der Verhandlungen auf seiner Karte notiert; Ich bin am Telefon nicht durchgekommen – ich habe mir eine Erinnerung eingerichtet, in 2 Stunden zurückzurufen; den Deal abgeschlossen – im CRM wird vermerkt, dass der Verkauf abgeschlossen ist, und der Kunde erhält dann automatisch eine SMS mit der Bitte um Feedback.

Wenn Sie dies nicht tun, sind die Verkaufsberichte falsch, funktionieren nicht und die Datenbank wird zu einer einfachen Sammlung von Namen und Telefonnummern.

Tatsächlich fällt es vielen schwer, Probleme zu formulieren, Schwachstellen in Arbeitsaktivitäten zu identifizieren und zu verstehen, welche Geschäftsprozesse automatisiert werden müssen. Dazu ist es besser, sofort den Entwickler zu kontaktieren und um Hilfe zu bitten.

Warum hat es nicht funktioniert? Wir analysieren Umsetzungsfehler

Auch wenn Sie sich für das richtige System entschieden haben und verstehen, wie Sie CRM richtig implementieren, sind Sie dennoch nicht davor gefeit. Glücklicherweise können Sie die Erfahrungen anderer Unternehmen nutzen, um Ihre Erfolgschancen zu erhöhen.

1. Eile in der Anfangsphase der Umsetzung

Am häufigsten werden Fehler in den frühen Phasen der Systemimplementierung gemacht. Unzulänglichkeiten in der Beschreibung von Geschäftsprozessen und Engpässe im Verkaufstrichter können dazu führen, dass sich das CRM-System nicht in die realen Aktivitäten des Unternehmens integriert und schon gar nicht bei der Lösung von Problemen hilft.

Hetzen Sie nichts und befolgen Sie sorgfältig die Empfehlungen eines CRM-Spezialisten. Wenn Sie ein kleines Unternehmen mit 10–20 Mitarbeitern haben, dauert die Integration 2–3 Wochen. Handelt es sich um einen Großkonzern, kann ein reibungsloser Ablauf bis zu sechs Monate dauern. Achten Sie vor der Implementierung eines CRM-Systems unbedingt auf diese Fristen.

2. Unzureichende Integrationsfähigkeiten

Es ist wichtig, dass sich das CRM-System gut in andere integrieren lässt Software die das Unternehmen nutzt. Andernfalls können Sie nie sicherstellen, dass das Programm alle relevanten Verkaufsinformationen enthält und fehlerfrei funktioniert.

Laut C5Insight-Forschung umso mehr verschiedene Programme im Unternehmen eingesetzt wird, desto schlechter sind die Umsetzungsergebnisse. Tatsache ist, dass Informationen in verschiedenen Diensten nicht synchronisiert werden und Sie dieselben Informationen manuell in mehreren Programmen duplizieren müssen, beispielsweise in CRM und in Accounting 1C. Dadurch wird viel Zeit verschwendet, es treten Fehler in den Daten auf und Berichte sagen nicht mehr die Wahrheit.

Erstellen Sie bereits bei der Auswahl eines Systems eine Liste der Software und Dienste, mit denen Sie eine Integration benötigen, und stellen Sie diese dem Implementierungsspezialisten zur Verfügung. Gleichzeitig müssen Sie Prozesse von anderen Softwareprodukten an CRM delegieren. Geben Sie beispielsweise Outlook auf und verwenden Sie es

Laut C5Insight nennen 35 % der CRM-Benutzer die Softwareintegration als größte Herausforderung bei der Migration zu CRM-Lösungen. Und wenn das von Ihnen gewählte System die notwendigen Integrationen grundsätzlich nicht unterstützt, wird diese Schwierigkeit fatal.

3. Schlechte Schulung der Mitarbeiter

Ein CRM-System ist eine Technologie; es kann dem Team helfen, übernimmt aber nicht dessen Arbeit. Die Mitarbeiter müssen Verständnis haben, sonst ist die „Auslastung“ minimal. Vereinbaren Sie eine Einführungspräsentation und zeichnen Sie Videolektionen auf detaillierte Anleitung, führen Sie eine Miniprüfung durch, schulen Sie Abteilungsleiter persönlich, damit sie Wissen über die Hierarchie an ihre Untergebenen weitergeben. Machen Sie Ihren Mitarbeitern klar, dass es an ihnen liegt, zu bestimmen, wie sich Ihre Investition auszahlt.

Statt einer Schlussfolgerung

Es gibt ein bekanntes Prinzip: 40 % der Integrationswirkung werden durch richtige Planung, 20 % durch den Einsatz der richtigen Technologien und 40 % durch erreicht. Um Fehler bei der Implementierung eines IT-Produkts zu vermeiden, handeln Sie daher „mit Gefühl, mit Sinn, mit Planung“, und das Ergebnis wird nicht lange auf sich warten lassen.

Möchten Sie mehr wissen? Sind Sie bereit, mit der Implementierung eines CRM-Systems zu beginnen? V praktisches Programm Schon jetzt rufen unsere Spezialisten Sie zurück und beraten Sie zu allen Fragen.

Schritt 1 – XHTML

Schauen wir uns zunächst das Kommentar-Markup an. Dieser Code wird von PHP mit der Klasse generiert Kommentar .

demo.php

Benutzername
30. Juni 2010

Kommentartext

div Benutzerbild enthält einen Link (sofern der Benutzer beim Posten eines Kommentars die richtige URL eingegeben hat) und ein Avatar-Bild, das wir von gravatar.com erhalten. Wir kehren zum Generieren des Markups im PHP-Schritt zurück. Folgen Sie schließlich div Name div Zeit und Kommentartext.

Ein weiteres wichtiges Element in XHTML ist das Kommentarformular. Sie wird mit verschickt POST. Alle Felder außer URL müssen ausgefüllt werden.

demo.php

Einen Kommentar hinzufügen

Das Formular wird mit verschickt mit AJAX. Die Prüfung wird durchgeführt Hintergrund V send.php. Jedes Feld hat ein entsprechendes Element Etikett, mit dem Attributsatz für .

Schritt 2 – PHP

PHP übernimmt die Kommunikation mit der Datenbank MySQL-Daten und generiert Markup für den Kommentar. Außerdem empfängt es das Ende der AJAX-Anfrage und fügt die Kommentardaten in die Tabelle ein Kommentare.

demo.php

/* / Alle Kommentare auswählen und das $comments-Array mit Objekten füllen */ $comments = array(); $result = mysql_query("SELECT * FROM comments ORDER BY id ASC"); while($row = mysql_fetch_assoc($result)) ( $comments = new Comment($row); )

Die MySQL-Abfrage wählt alle Datensätze aus der Tabelle aus und füllt das Array $Kommentare Klassenobjekte Kommentar. Dieses Array wird bei der Ausführung des Skripts weiter ausgegeben.

demo.php

/* / Kommentare einzeln ausgeben: */ foreach($comments as $c)( echo $c->markup(); )

Jeder Kommentar hat eine Methode markup(), was erzeugt korrektes HTML Der Code ist bereit, auf der Seite angezeigt zu werden. Nachfolgend finden Sie die Klassen- und Methodendefinitionen.

Die Klasse ruft eine Zeile aus der Datenbank ab (erhalten mit mysql_fetch_assoc()) und speichert es in einer Variablen $Daten. Es ist nur für die Klassenmethode verfügbar.

comment.class.php – Teil 1

Klasse Kommentar ( private $data = array(); öffentliche Funktion __construct($row) ( /* / Konstruktor */ $this->data = $row; ) öffentliche Funktion markup() ( /* / Diese Methode gibt XHTML-Markup für den Kommentar aus */ // Legen Sie einen Alias ​​fest, damit wir nicht jedes Mal $this->data schreiben müssen: $d = &$this->data; $link_open = ""; $link_close = ""; if($d["url"])( // Wenn beim Hinzufügen eines Kommentars eine URL eingegeben wurde, // bestimmen Sie die öffnenden und schließenden Tags des Links $link_open = ""; $link_close = ""; ) // Konvertieren die Zeit im UNIX-Format: $d["dt"] = strtotime($d["dt"]); // Wird benötigt, um das Standardbild festzulegen: $url = "http://".dirname($_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"])."/img/default_avatar.gif"; zurückkehren "
„.$link_open.“ „.$link_close.“
".$link_open.$d["name"].$link_close."
".date("d M Y",$d["dt"])."

".$d["body"]."

"; }

Das Skript verwendet Gravatar, um den Avatar in Kommentaren darzustellen. Gravatar ist ein sehr nützlicher Dienst, der einen Avatar einer E-Mail-Adresse zuordnet. Das Avatar-Bild kann einfach durch Übergeben der codierten Funktion erhalten werden md5() Ihre E-Mail-Adresse auf gravatar.com.

Das Skript ermittelt die URL, unter der es ausgeführt wird, und ermittelt die genaue Adresse des Bildes default_avatar.gif. Dieses Bild wird parallel zum MD5-Hash übertragen. Wenn für die übermittelte E-Mail-Adresse kein Avatar gefunden wurde, wird ein alternatives Bild angezeigt.

comment.class.php – Teil 2

öffentliche statische Funktion validieren(&$arr) ( /* / Diese Methode wird verwendet, um über AJAX gesendete Daten zu validieren. / / Sie gibt je nach Richtigkeit der Daten wahr/falsch zurück und füllt / das übergebene $arr-Array als Parameter mit entweder Daten oder Fehlermeldung. */ $errors = array(); $data = array(); // Verwenden Sie die in PHP 5.2.0 eingeführte Funktion filter_input if(!($data["email"] = filter_input(INPUT_POST,"email ",FILTER_VALIDATE_EMAIL))) ( $errors["email"] = "Bitte geben Sie eine gültige E-Mail ein."; ) if(!($data["url"] = filter_input(INPUT_POST,"url" ,FILTER_VALIDATE_URL))) ( // Wenn eine falsche URL in das URL-Feld eingegeben wurde, // so tun, als wäre die URL nicht eingegeben worden: $url = ""; ) // Verwenden Sie einen Filter mit einer Rückruffunktion: if(! ($data["body"] = filter_input(INPUT_POST,"body",FILTER_CALLBACK,array("options"=>"Comment::validate_text")))) ( $errors["body"] = "Bitte geben Sie den Kommentar ein text."; ) if(!( $data["name"] = filter_input(INPUT_POST,"name",FILTER_CALLBACK,array("options"=>"Comment::validate_text")))) ( $errors["name "] = "Bitte geben Sie einen Namen ein. "; ) if(!empty($errors))( // Wenn Fehler vorliegen, kopieren Sie das Array $errors nach $arr: $arr = $errors; return false; ) // Wenn die Daten korrekt eingegeben wurden, löschen Sie die Daten und kopiere es nach $arr: foreach($data as $k=>$v)( $arr[$k] = mysql_real_escape_string($v); ) // E-Mail muss in Kleinbuchstaben geschrieben werden: $arr["email"] = strtolower (trim($ arr["email"])); return true; )

Methode bestätigen()(auch Teil einer Klasse) definiert als statisch. Dies bedeutet, dass es direkt über das Konstrukt aufgerufen werden kann Kommentar::validate(), ohne ein Klassenobjekt zu erstellen. Diese Methode prüft die Daten, die über AJAX gesendet werden.

Die Methode verwendet neue Funktion Filter, der verfügbar wurde in PHP 5.2.0. Auf diese Weise können wir die Daten, die an das Skript übergeben werden, einfach überprüfen und filtern. Zum Beispiel, filter_input(INPUT_POST,’url’,FILTER_VALIDATE_URL) Das heißt, wir prüfen, ob $_POST["url"] die richtige URL. Wenn ja, gibt die Funktion den Wert der Variablen zurück, andernfalls gibt sie den Wert zurück FALSCH.

Bevor Sie diese Funktion verwenden konnten, mussten Sie sie verwenden Reguläre Ausdrücke um Daten zu überprüfen (unter Verwendung einer Reihe von Designs). Wenn). Zusätzlicher Vorteil ist, dass wir die Daten erhalten, bevor bestimmte Transformationen durchgeführt werden.

Es ist auch möglich, eine Funktion anzugeben, die zusätzliche Datenänderungen durchführt.

comment.class.php – Teil 3

private statische Funktion validieren_text($str) ( /* / Diese Methode wird als FILTER_CALLBACK verwendet */ if(mb_strlen($str,"utf8")<1) return false; // Кодируем все Spezielle Symbole html (<, >, ", & .. etc) und konvertieren // das Newline-Zeichen in ein Tag
: $str = nl2br(htmlspecialchars($str)); // Alle verbleibenden Zeilenumbrüche entfernen $str = str_replace(array(chr(10),chr(13)),"",$str); return $str; )

Letzte Methode validieren_text in zwei Aufrufen als Rückgabefunktion übergeben filter_input. Es wandelt alles Besondere um HTML-Zeichen, das XSS-Angriffe effektiv blockiert. Außerdem werden Zeilenumbrüche durch Tags ersetzt
.

send.php

/* / Dieses Array wird entweder mit Daten / gefüllt, die an das Skript übergeben werden, / oder mit Fehlermeldungen. /*/ $arr = array(); $validates = Comment::validate($arr); if($validates) ( /* Alles ist in Ordnung, fügen Sie die Daten in die Datenbank ein: */ mysql_query(" INSERT INTO comments(name,url,email,body) VALUES ("".$arr["name"]." ", "".$arr["url"].", "".$arr["email"].", "".$arr["body"]."")"); $arr["dt "] = date("r",time()); $arr["id"] = mysql_insert_id(); /* / Die Daten in $arr sind für die MySQL-Abfrage vorbereitet, / aber wir müssen sie auf dem Bildschirm ausgeben , also / bereite alle Elemente im Array vor: /*/ $arr = array_map("stripslashes",$arr); $insertedComment = new Comment($arr); /* Gibt das Markup des neu eingefügten Kommentars aus: */ echo json_encode(array("status "=>1,"html"=>$insertedComment->markup())); ) else ( /* Fehlermeldungen anzeigen */ echo "("status":0,"errors":" .json_encode($arr )")"; )

send.php erhält über eine AJAX-Anfrage einen Kommentar aus den Daten. Validiert es und gibt ein JSON-Objekt aus, das entweder XHTML-Markup mit eingefügtem Kommentar oder eine Fehlerliste enthält. jQuery verwendet die Eigenschaft Status um zu bestimmen, was ausgegeben werden muss – entweder eine Fehlermeldung oder das Hinzufügen von Kommentar-Markup zur Seite.

Nachfolgend finden Sie zwei Beispiele.

Erfolgreiche Antwort

("status": 1, "html": "Html-Code des Kommentars kommt hier...")

Eigentum html enthält Kommentarcode.

Fehlerreaktion

("status": 0, "errors": ("email": "Bitte geben Sie eine gültige E-Mail-Adresse ein.", "body": "Bitte geben Sie einen Kommentartext ein.", "name": "Bitte geben Sie einen Namen ein. ) )

Wenn ein Fehler vorliegt, durchläuft jQuery das Fehlerobjekt und zeigt Meldungen neben den fehlerhaften Feldern an.

Schritt 3 – CSS

Nachdem das Markup nun korrekt generiert und auf der Seite angezeigt wurde, können wir mit dem Festlegen von Stilen fortfahren.

styles.css – Teil 1

.comment, #addCommentContainer( /* Stil für Kommentare */ padding:12px; width:400px; position:relative; background-color:#fcfcfc; border:1px solid white; color:#888; margin-bottom:25px; / * CSS3 abgerundete Ecken und Schatten */ -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; -moz-box-shadow:2px 2px 0 #c2c2c2; -webkit-box- shadow:2px 2px 0 #c2c2c2; box-shadow:2px 2px 0 #c2c2c2; ) .comment .avatar( /* / Der Avatar ist absolut positioniert. / Äußerer Offset für den Kommentar div /*/ height:50px; left:- 70px; Position :absolute; Breite:50px; Hintergrund:url("img/default_avatar.gif") no-repeat #fcfcfc; /* Vertikal zentrieren: */ margin-top:-25px; top:50%; -moz- box-shadow:1px 1px 0 #c2c2c2; -webkit-box-shadow:1px 1px 0 #c2c2c2; box-shadow:1px 1px 0 #c2c2c2; )

div .Kommentar Und #addCommentContainer haben den gleichen Stil. Verwendet mehrere CSS3-Regeln zum Abrunden von Ecken und zum Reflektieren von Schatten.

style.css – Teil 2

.comment .avatar img( display:block; ) .comment .name( Schriftgröße:20px; padding-bottom:10px; color:#ccc; ) .comment .date( Schriftgröße:10px; padding:6px 0; position:absolute; right:15px; top:10px; color:#bbb; ) .comment p, #addCommentContainer p( font-size:18px; line-height:1.5; overflow-x:hidden; ) #addCommentContainer input, # addCommentContainer textarea( /* Eingabestil */ display:block; border:1px solid #ccc; margin:5px 0 5px; padding:3px; font-size:12px; color:#555; font-family:Arial, Helvetica, sans -serif; ) #addCommentContainer textarea( width:300px; ) label( font-size:10px; ) label span.error( color:red; position:relative; right:-10px; ) #submit( /* Submit button " * / Hintergrundfarbe:#58B9EB; Rahmen: 1 Pixel einfarbig #40A2D4; Farbe: #FFFFFF; Cursor: Zeiger; Schriftfamilie: „Myriad Pro“, Arial, Helvetica, serifenlos; Schriftgröße: 14 Pixel; Schriftgröße :bold; padding:4px; margin-top:5px; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; ) #submit:hover( background-color:# 80cdf5; Rahmenfarbe:#52b1e2; )

Im zweiten Teil legen wir Stile für Kommentare und Formularelemente fest. Beachten Sie den Selektor Eingang wodurch Elemente basierend auf dem Attribut hervorgehoben werden Typ.

Schritt 4 – jQuery

Kommen wir nun zu jQuery.

script.js

$(document).ready(function())( /* Der folgende Code wird erst ausgeführt, nachdem das DOM geladen wurde */ /* Dieses Flag verhindert das Senden mehrerer Kommentare: */ varworking = false; /* Das Formular abfangen Übermittlungsereignis: */ $(" #addCommentForm").submit(function(e)( e.preventDefault(); if(working) return false;working = true; $("#submit").val("Working. ."); $("span .error").remove(); /* Formularfelder an subscribe.php senden: */ $.post("submit.php",$(this).serialize(),function( msg)(working = false; $ ("#submit").val("Submit"); if(msg.status)( /* / Wenn das Einfügen erfolgreich war, fügen Sie einen Kommentar / unter dem letzten auf der Seite hinzu mit der SlideDown-Effekt /*/ $(msg.html).hide ().insertBefore("#addCommentContainer").slideDown(); $("#body").val(""); ) else ( /* / If Wenn Fehler vorliegen, durchlaufen Sie das /msg.errors-Objekt und zeigen Sie sie auf der Seite /*/ an. $.each(msg.errors,function(k,v)( $("label").append(" „+v+“"); )); ) ),"json"); )); ));

Wir verwenden einen Funktionsaufruf $(Dokument).ready(), das eine Funktion an ein Ereignis bindet. Variable Arbeiten fungiert als Flag, das signalisiert, dass eine AJAX-Anfrage ausgeführt wird (wodurch Duplikate desselben Kommentars verhindert werden).

In der Rückgabefunktion für die AJAX POST-Anfrage überprüfen wir die Eigenschaft Status um festzustellen, ob der Kommentar erfolgreich eingefügt wurde. Wenn ja, fügen wir das resultierende Markup nach dem letzten Kommentar mit Animation zur Seite hinzu herunterrutschen.

Wenn es Probleme gab, zeigen wir Fehlermeldungen an, indem wir hinzufügen Spanne Fehler zum entsprechenden Element Etikett(Elementattribut Etikett enthält Ausweis Eingabe, die einen Fehler aufweist).

Bereit!

Abschluss

Um das Skript auf Ihrem Server auszuführen, müssen Sie eine Tabelle erstellen Kommentare in Ihrer MySQL-Datenbank. Sie können dies mit SQL-Code aus einer Datei tun table.sql, die auf der Registerkarte „SQL“ in phpMyAdmin eingegeben werden muss. Anschließend müssen Sie in der Datei die Verbindungsparameter zur MySQL-Datenbank festlegen connect.php .

Mittlerweile ist es in Mode gekommen, das übliche WordPress-Kommentarsystem durch Kommentare aus einem der beliebtesten sozialen Netzwerke, Facebook, zu ersetzen. Wir haben dies bereits zuvor veröffentlicht, aber seitdem ist viel Zeit vergangen und nun wurde dieser Vorgang dank eines vorgefertigten WordPress-Plugins deutlich vereinfacht. Diesmal wird also alles viel einfacher sein.

Wie Sie Facebook-Kommentare auf Ihrer Website implementieren, verraten wir Ihnen etwas später, aber zunächst versuchen wir, alle Vor- und Nachteile eines solchen Ersatzes herauszufinden.

Facebook-Kommentare: Vor- und Nachteile

Darüber hinaus ist der Faktor des sogenannten Anonymität. Es ist unwahrscheinlich, dass Spam-Kommentare von Facebook hinzugefügt werden, da sie alle an echte Benutzerkonten gebunden sind.

Gleichzeitig kann man aber auch Nachteile eines solchen Systems feststellen. Viele Benutzer bevorzugen Anonymität, und das schon gar nicht, weil sie etwas Schlechtes schreiben oder Spam hinterlassen wollen. Nein. Es ist lediglich eine Frage des psychologischen Moments und des Gefühls des Unbehagens und der Verlegenheit, das sie empfinden, wenn sie öffentlich sprechen. Dieser Faktor kann die Benutzeraktivität verringern.

Im Gegensatz zu anderen Kommentarsystemen wie Disqus werden Facebook-Kommentare nicht mit nativen WordPress-Kommentaren synchronisiert. Sie ersetzen sie vollständig. Wenn ältere Beiträge bereits WordPress-Kommentare enthalten, werden diese vor oder nach neuen Kommentaren angezeigt, die über das Facebook-Formular hinzugefügt werden.

Hier sind vielleicht alle Vor- und Nachteile von Facebook-Kommentaren aufgeführt.

Wenn Sie Ihre Meinung zur Installation auf Ihrer WordPress-Site noch nicht geändert haben, lesen Sie weiter unten, wie das geht.

Facebook-Kommentar-Plugin für WordPress

Installieren und aktivieren Sie zunächst das Plugin Facebook-Kommentare und konfigurieren Sie es im Menü, das im Abschnitt Einstellungen → Facebook-Kommentare angezeigt wird.


Um Kommentare auf der Website verwenden zu können, müssen Sie zunächst eine Facebook-Anwendung erstellen.

Wenn Sie bereits eine Anwendung erstellt haben, können Sie deren ID-Daten jetzt verwenden. Andernfalls müssen Sie auf der Seite eine neue erstellen Facebook-Apps:

In der Systemsteuerung der neu erstellten Anwendung wird deren ID angezeigt, die Sie kopieren und in die Plugin-Einstellungen einfügen müssen. Konfigurieren Sie jedoch zuvor die Anwendung auf Ihrer Website in „Einstellungen“ über die Schaltfläche „Plattform hinzufügen“.

Es erscheint ein neues Fenster, in dem Sie auf klicken müssen Website und wählen Sie es als Ihre Plattform.

Auf der Seite mit den Anwendungseinstellungen erscheint daher ein neuer Abschnitt „Website“, in dem Sie die Adresse Ihrer Website angeben können.

Speichern Sie die Änderungen, kopieren Sie die Anwendungs-ID und fügen Sie sie in die Plugin-Einstellungen Ihrer Site ein.

Wenn Sie nicht herausgefunden haben, wie Sie die Facebook-App einrichten, finden Sie hier eine weitere. kurze Anleitung auf Englisch mit einem Beispiel für unsere Website:

Dieses Facebook-Kommentar-Plugin bietet viele Optionen zum Konfigurieren. Die Standardeinstellungen sollten mit den meisten Websites funktionieren. Sie können diese jedoch nach eigenem Ermessen ändern und die Änderungen speichern.

Jetzt können Sie testen, ob das neue Kommentarsystem auf Ihrer Seite korrekt funktioniert.

Kommentar Moderation

Da Sie über Administratorrechte verfügen, erhalten Sie Benachrichtigungen über neue Kommentare. Sie können sie verwalten und entscheiden, ob Sie sie veröffentlichen möchten oder nicht.

Sie können in den Einstellungen auch einen neuen Moderator hinzufügen:

Wir hoffen, dass dieser Leitfaden für Klarheit gesorgt hat und Ihnen dabei geholfen hat, selbst Facebook-Kommentare für Ihre Nicht-WordPres-Website einzurichten.

Dieses Mal erstellen wir ein einfaches AJAX-Kommentarsystem. Dies zeigt, wie man mithilfe von JSON eine effiziente Interoperabilität zwischen JQuery und PHP/MySQL erreicht. Das System funktioniert so, dass hinzugefügte Kommentare auf der Seite platziert werden, ohne dass diese vollständig neu geladen werden muss. Dadurch entsteht der Eindruck, als ob die Website nur auf dem Computer des Benutzers läuft, und es entfällt die Notwendigkeit, einige Zeit auf das Neuladen der Seite mit dem hinzugefügten Kommentar zu warten .

Hier ist eine grobe Demo dessen, was wir implementieren möchten:

Schritt 1 – XHTML

Schauen wir uns zunächst das Kommentar-Markup an. Dieser Code wird von PHP in einem Kommentar generiert, den wir uns gleich ansehen werden.

Demo.php

Name
30. Juli 2010

Ein Kommentar

Das Div der Avatar-Klasse enthält einen Hyperlink, der dem Avatar entspricht (sofern der Benutzer beim Senden eines Kommentars einen gültigen Link zum Avatar angegeben hat), beispielsweise von gravatar.com. Nun, wir werden darauf zurückkommen, wenn wir mit PHP arbeiten. Schließlich haben wir auch in den DIVs den Namen und die Uhrzeit sowie den Kommentar, also den Text selbst im Absatz.

Ein weiteres wichtiges Element im XHTML-Teil ist das Kommentar-Übermittlungsformular selbst (alle Felder außer dem URL-Feld sind Pflichtfelder).

Demo.php

Einen Kommentar hinzufügen

Schritt 2 – PHP

PHP verwaltet Verbindungen zur MySQL-Datenbank und erstellt Kommentar-Markup. Zusätzlich kommt am Ende AJAX zum Einsatz und fügt einen Kommentar in die Kommentartabelle ein. Sie können den Code, der Kommentare anzeigt, auf der Seite unten sehen.

Demo.php /* / Alle Kommentare auswählen und das $comments-Array füllen */ $comments = array(); $result = mysql_query("SELECT * FROM comments ORDER BY id ASC"); while($row = mysql_fetch_assoc($result)) ( $comments = new Comment($row); )

Die MySQL-Abfrage ruft alle Einträge aus der Datenbank ab und füllt das Array $comments mit dem Kommentarklassenobjekt, das Sie unten sehen. Dieses Array wird ausgegeben, nachdem das Skript ausgeführt wurde.

Demo.php /* / Kommentare einzeln anzeigen */ foreach($comments as $c)( echo $c->markup(); )

Jeder Kommentar verfügt über eine markup()-Methode, die HTML-Code zum Drucken der Seite generiert. Sie können diese Methode und Klasse unten sehen.

Die Klasse entnimmt einen String aus der Datenbank (abgerufen mit mysql_fetch_assoc()) und speichert ihn in der Variablen $data. Es steht nur Methoden dieser Klasse zur Verfügung und kann nicht von außen aufgerufen werden.

Comment.class.php – Schritt 1 Klasse Kommentar ( private $data = array(); öffentliche Funktion __construct($row) ( /* / Konstruktor */ $this->data = $row; ) öffentliche Funktion markup() ( / */ Diese Methode gibt den XHTML-Markup-Kommentar aus */ // Erstellen Sie einen Alias, damit wir nicht jedes Mal // $this->data Daten schreiben müssen: $d = &$this->data; $link_open = "" ; $link_close = ""; if($d["url"])( // Wenn die Person beim Hinzufügen eines Kommentars die URL eingegeben hat // Definieren Sie den Hyperlink $link_open = ""; $link_close = ""; ) // Zeitkonvertierung $d[ "dt"] = strtotime($d["dt"]); // Erforderlich für Standard-Gravatar-Bilder: $url = "http://".dirname($_SERVER["SERVER_NAME" ]. $_SERVER["REQUEST_URI "])."/img/default_avatar.gif"; return "

„.$link_open.“ „.$link_close.“
".$link_open.$d["name"].$link_close."

".$d["body"]."

"; }

Dieses Skript verwendet Gravatar, um Avatare in Kommentaren anzuzeigen. Für diejenigen, die Gravatar noch nicht verwendet haben: Es handelt sich um einen sehr nützlichen Dienst, der es Ihnen ermöglicht, einen Avatar mit Ihrer E-Mail-Adresse zu verknüpfen. Der Avatar kann einfach übernommen werden, indem der Hash über md5() übergeben wird.

Beachten Sie die Zeile 39 darüber: Das Skript versucht herauszufinden, unter welcher URL es sich befindet, und ermittelt die genaue Adresse des Bilds „default_avatar.gif“. Dieses GIF wird mithilfe eines MD5-Hashs an Gravatar übertragen. Wenn also ein Avatar unter dieser E-Mail-Adresse gefunden wurde, wird stattdessen ein Ersatzbild angezeigt.

Comment.class.php – Schritt 2 öffentliche statische Funktion validieren(&$arr) ( /* / Diese Methode wird zum Validieren von Daten verwendet, die über AJAX übergeben werden. / / Dies gibt true/false zurück, je nachdem, ob die Daten gültig sind und sind ausgefüllt / Das $arr-Array wird als Parameter übergeben / (beachten Sie das kaufmännische Und oben) / Entweder gültige Dateneingabe oder Fehlermeldungen. */ $errors = array(); $data = array(); // Verwendung der Funktion filter_input eingeführt in PHP 5.2.0 if(!($data["email"] = filter_input(INPUT_POST,"email",FILTER_VALIDATE_EMAIL))) ( $errors["email"] = "Bitte geben Sie eine gültige E-Mail ein. "; ) if (!($data["url"] = filter_input(INPUT_POST,"url",FILTER_VALIDATE_URL))) ( // Wenn das URL-Feld nicht mit der falschen URL übereinstimmt $url = ""; ) // Verwenden von Filtern mit benutzerdefinierten / / Rückruffunktion: if(!($data["body"] = filter_input(INPUT_POST,"body",FILTER_CALLBACK, array("options"=>"Comment::validate_text")))) ( $errors[ "body" ] = „Kommentarfehler.“; ) if(!($data["name"] = filter_input(INPUT_POST,"name",FILTER_CALLBACK, array("options"=>"Comment::validate_text")))) ( $errors["name"] = " Namensfehler."; ) if(!empty($errors))( //Wenn es Fehler gibt, schreiben Sie $errors in das $arr-Array: $arr = $errors; return false; ) foreach($data as $k= >$ v)( $arr[$k] = mysql_real_escape_string($v); ) // Stellen Sie sicher, dass die E-Mails in Kleinbuchstaben geschrieben sind // (für den korrekten Gravatar-Hash): $arr["email"] = strtolower(trim( $arr[ "email"])); return true; )

validate() wird auf die oben beschriebene Weise als statisch definiert. Dies bedeutet, dass es direkt als Comment::validate() aufgerufen werden kann, ohne dass ein Objekt dieser Klasse erstellt werden muss. Diese Methode validiert keine Eingaben, die über AJAX bereitgestellt werden.

Diese Methode nutzt die neuen Filterfunktionen, die in PHP 5.2.0 verfügbar sind. Dadurch können wir alle Eingaben, die an das Skript übergeben werden, einfach validieren und filtern. Beispielsweise bedeutet filter_input(INPUT_POST, "URL", FILTER_VALIDATE_URL), dass wir prüfen, ob $_POST["url"] eine gültige URL ist. Wenn ja, gibt die Funktion den Wert der Variablen zurück, andernfalls ist die Rückgabe falsch.

Dies ist sehr nützlich, da wir bisher unsere eigenen regulären Ausdrücke verwenden mussten, um die Daten zu validieren. Ein weiterer Vorteil besteht darin, dass diese Daten vor allen konfigurationsspezifischen Transformationen (z. B. magischen Anführungszeichen) erfasst werden.

Wir haben auch die Möglichkeit, eine benutzerdefinierte Funktion anzugeben, die einige erweiterte Änderungen an den Daten vornimmt, wie in den Zeilen 31 und 37 zu sehen ist.

Comment.class.php – Schritt 3 private statische Funktion validieren_text($str) ( /* / Diese Methode wird intern als FILTER_CALLBACK */ if(mb_strlen($str,"utf8") , " usw.) verwendet und konvertiert / / Zeilenumbrüche zu
Tags: $str = nl2br(htmlspecialchars($str)); // Alle verbleibenden Zeilenumbrüche entfernen $str = str_replace(array(chr(10),chr(13)),"",$str); return $str; )

Die letzte Methode ist „validate_text“, die wir als Callback-Funktion übergeben. Es maskiert alle HTML-Sonderzeichen und eliminiert so effektiv XSS-Angriffe. Es ersetzt auch Zeichenfolgen durch
Linien.

Submit.php /* / Dieses Array wird entweder mit / den Daten gefüllt, die an das Skript übermittelt wurden, oder mit / Fehlermeldungen: /*/ $arr = array(); $validates = Comment::validate($arr); if($validates) ( /* Alles ist gut, füge es in die Datenbank ein: */ mysql_query(" INSERT INTO comments(name,url,email,body) VALUES ("".$arr["name"]."" , " ".$arr["url"]., "".$arr["email"]., "".$arr["body"]."")"); $arr["dt" ] = date("r",time()); $arr["id"] = mysql_insert_id(); /* / Daten in $arr-Abfrage einfügen, / aber Text ohne Escapezeichen, / daher verwenden wir Stripslashes / für alle Array-Elemente : /*/ $arr = array_map("stripslashes",$arr); $insertedComment = new Comment($arr); /* Ausgabe-Markup */ echo json_encode(array("status"=>1, "html" => $insertedComment->markup())); ) else ( /* Fehlermeldungen anzeigen */ echo "("status":0,"errors":". json_encode($arr).")"; )

submit.php empfängt die Kommentardaten als AJAX-Anfrage. Es prüft es und erzeugt ein JSON-Objekt, entweder das XHTML-Markup, das erfolgreich gerendert wurde, oder eine Liste von Fehlermeldungen. JQuery verwendet den Besitzstatus, um zu bestimmen, ob Fehlermeldungen angezeigt oder ein Seiten-Markup-Kommentar hinzugefügt werden soll.

Unten sehen Sie zwei Beispiele.

In dieser Lektion werde ich darüber sprechen, wie man es macht Kommentare in HTML, CSS, PHP. Kommentare sind Texte, die auf der Webseite nicht sichtbar sind. Sie werden für verschiedene Arten von Erklärungen, Erinnerungen und Beschreibungen für Webmaster verwendet, wodurch Sie das Dokument strukturieren können. Kommentare sind beim Debuggen von Code unverzichtbar; sie ermöglichen Ihnen, schnell im Markup einer Webseite zu navigieren und den gewünschten Block zu finden. Kommentare werden häufig zum Debuggen von HTML-Code verwendet. Sie können beispielsweise einen bestimmten Codeblock vorübergehend auskommentieren, sodass er nicht ausgeführt wird, und ihn bei Bedarf problemlos wiederherstellen.

Kommentare in HTML

In HTML werden Kommentare mit den folgenden Zeichen gebildet:. Somit ist jeder Text zwischen diesen Zeichen ein Kommentar. Schauen wir uns ein Beispiel an:

Kommentare in CSS

Kommentare in CSS werden mit den Zeichen /* und */ erstellt. Um einen Kommentar zu erstellen, müssen Sie lediglich den Webseitencode zwischen diesen Zeichen einfügen:

/* Beginn eines Blocks mit Stilen für Body*/ body ( Hintergrund: #efeded; Schriftfamilie: Verdana, Helvetica, serifenlos; Schriftgröße: 12px; Rand: 0px; Polsterung: 0px; ) /* Ende von ein Block mit Stilen für Body*/

Kommentare in PHP

Kommentare in PHP können einzeilig oder mehrzeilig sein:

1) Einzeilige Kommentare in PHP werden mit den Zeichen // erstellt. Setzen Sie einfach dieses Zeichen vor die Zeile und sie wird auskommentiert. Diese Option wird verwendet, wenn der Kommentar nur aus einer Zeile besteht.

2) Um mehrzeilige Kommentare zu implementieren, werden die folgenden Symbole verwendet: /* und */. Diese Option ist nützlich, wenn der Kommentar mehrere Zeilen umfasst.

Also haben wir es gelernt



Freunden erzählen