Ako vytvoriť jednoduchý skript pre komentáre. Jednoduchý systém komentovania pomocou AJAXu. Komentáre z Facebooku: klady a zápory

V tejto lekcii vám ukážem, ako to urobiť komentáre v HTML, CSS, PHP. Komentáre sú text, ktorý nie je viditeľný na webovej stránke. Používajú sa na všetky druhy vysvetlení, pripomenutí, popisov pre správcov webu, čo umožňuje štruktúrovať dokument. Komentáre sú nevyhnutné pri ladení kódu, umožňujú vám rýchlo sa pohybovať v označení webovej stránky a nájsť požadovaný blok. Komentáre sa často používajú na ladenie HTML kódu. Môžete napríklad dočasne zakomentovať konkrétny blok kódu, aby sa nespustil, a v prípade potreby je ľahké ho obnoviť.

Komentáre v HTML

V HTML sa komentáre tvoria pomocou znakov:. Akýkoľvek text medzi týmito znakmi je teda komentár. Zvážte príklad:

Komentáre v CSS

Komentáre v CSS sa vytvárajú pomocou znakov: /* a */. Ak chcete vytvoriť komentár, stačí vložiť kód webovej stránky medzi tieto znaky:

/* Začiatok bloku so štýlmi pre Body*/ body ( pozadie: #efeded; font-family: Verdana, Helvetica, sans-serif; font-size: 12px; margin: 0px; padding: 0px; ) /* Koniec bloku so štýlmi pre telo*/

Komentáre v PHP

Komentáre v PHP môžu byť jednoriadkové alebo viacriadkové:

1) Jednoriadkové komentáre v PHP sa vytvárajú pomocou znakov: //. Stačí vložiť tento znak pred riadok a bude zakomentovaný.Táto možnosť sa používa vtedy, keď komentár pozostáva len z jedného riadku.

2) Na implementáciu viacriadkových komentárov sa používajú nasledujúce symboly: /* a */. Táto možnosť je užitočná, ak komentár obsahuje viacero riadkov.

Tak sme sa to naučili

Tentoraz vytvárame jednoduchý AJAX komentovací systém. Toto ukáže, ako dosiahnuť efektívnu interoperabilitu medzi jQuery a PHP/MySQL pomocou JSON. Systém funguje tak, že pridané komentáre sa umiestňujú na stránku bez neho. úplný reštart, čím vzniká dojem, že stránka je spustená len na počítači používateľa, čím sa vyhnete potrebe čakať nejaký čas potrebný na opätovné načítanie stránky s pridaným komentárom.

Tu je hrubá ukážka toho, čo plánujeme implementovať:

Krok 1 – XHTML

Najprv sa pozrime na označenie komentárov. Tento kód generuje PHP v komentári, na ktorý sa v okamihu pozrieme.

Demo.php

názov
30. júla 2010

Komentujte

Div triedy avatar obsahuje hypertextový odkaz zodpovedajúci avatarovi (ak používateľ pri odosielaní komentára uviedol platný odkaz na avatara), povedzme z gravatar.com. No a k tomu sa ešte vrátime, keď budeme pracovať s PHP. Nakoniec máme meno a čas aj v DIVoch, ako aj komentár, teda samotný text v odseku.

Ďalším dôležitým prvkom v XHTML časti je samotný formulár na odoslanie komentára (všetky polia okrem poľa URL sú povinné).

Demo.php

Pridať komentár

Krok 2 - PHP

PHP spracováva databázové odkazy údaje MySQL a vytvorí značkovací komentár. Príjem sa tiež ukončí AJAX a vloží komentár do tabuľky komentárov. Nižšie môžete vidieť kód, ktorý vytlačí komentáre stránky.

Demo.php /* / Vyberie všetky komentáre a naplní pole $comments */ $comments = array(); $vysledok = mysql_query("VYBERTE * Z komentárov ORDER BY id ASC"); while($row = mysql_fetch_assoc($result)) ( $comments = new Comment($row); )

Dotaz MySQL vyberie všetky záznamy z databázy a naplní pole $comments objektom triedy komentárov, ktorý vidíte nižšie. Toto pole sa vypíše po vykonaní skriptu.

Demo.php /* / Tlač komentárov jeden po druhom */ foreach($comments as $c)( echo $c->markup(); )

Každý komentár má metódu markup(), ktorá generuje kód HTML na tlač stránky. Túto metódu a triedu môžete vidieť nižšie.

Trieda vezme riadok z databázy (získaný pomocou mysql_fetch_assoc()) a uloží ho do premennej $data. Je k dispozícii iba pre metódy tejto triedy a nie je možné k nemu pristupovať zvonku.

Comment.class.php - Krok 1 triedy Comment ( private $data = array(); public function __construct($row) ( /* / Constructor */ $this->data = $row; ) public function markup() ( / */ Výstupom tejto metódy je označenie komentára XHTML */ // Vytvorte alias, aby sme nemuseli // zakaždým zapisovať $this->data data: $d = &$this->data; $link_open = ""; $link_close = ""; if($d["url"])( // Ak osoba pri pridávaní komentára vyplnila URL // Definujte hypertextový odkaz $link_open = ""; $link_close = ""; ) // Konverzia času $d[ "dt"] = strtotime($d["dt"]); // Vyžaduje sa pre predvolené obrázky Gravatar: $url = "http://".dirname($_SERVER["SERVER_NAME"]. $ _SERVER["REQUEST_URI "])."/img/default_avatar.gif"; return "

".$link_open." ".$link_close."
".$link_open.$d["meno"]. $link_close."

".$d["body"]."

"; }

Tento skript používa Gravatar na zobrazenie avatarov v komentároch. Pre tých, ktorí Gravatar nepoužili, je to veľmi užitočná služba, ktorá vám umožní priradiť avatara k vašej e-mailovej adrese. Avatar sa dá ľahko vziať prejdením hash cez md5().

Všimnite si na riadku 39 nad ním – skript sa pokúsi zistiť URL, na ktorej sa nachádza, a určí presnú adresu obrázka default_avatar.gif. Tento GIF sa odovzdá Gravataru prostredníctvom hash md5, takže ak sa na tejto e-mailovej adrese našiel avatar, namiesto neho sa zobrazí záložný obrázok.

Comment.class.php – 2. krok verejná statická funkcia validate(&$arr) ( /* / Táto metóda slúži na overenie údajov / odoslaných cez AJAX. / / Toto vráti hodnotu true/false v závislosti / od platných údajov a je vyplnené / Pole $arr je odovzdané ako parameter / (všimnite si vyššie uvedený ampersand) / Buď platný vstup, alebo chybové hlásenia. */ $chyby = pole(); $data = pole(); // Použitie funkcie filter_input zavedenej v PHP 5.2.0 if(!($data["email"] = filter_input(INPUT_POST,"email",FILTER_VALIDATE_EMAIL))) ( $errors["email"] = "Zadajte platný Email."; ) if(!($data["url"] = filter_input(INPUT_POST,"url",FILTER_VALIDATE_URL))) ( // Ak pole adresy URL nezodpovedá nesprávnej adrese URL $url = ""; ) // Použitie filtrov s vlastnou // funkciou spätného volania: if(!($data["body"] = filter_input(INPUT_POST,"body",FILTER_CALLBACK, array("options"=>"Comment::validate_text"))))) ( $ errors["body"] = "Chyba komentára."; ) if(!($data["name"] = filter_input(INPUT_POST,"name",FILTER_CALLBACK, array("options"=>"Komentár::validate_text ") ))) ( $errors["name"] = "Chyba názvu."; ) if(!empty($errors))( //Ak sa vyskytnú chyby, zapíšte $errors do poľa $arr: $arr = $errors; return false; ) foreach($data as $k=>$v)( $arr[$k] = mysql_real_escape_string($v); ) // Uistite sa, že písmená sú malé // (pre správne he w Gravatar): $arr["e-mail"] = strtolower(trim($arr["e-mail"])); vrátiť true; )

validate() je definovaný ako statický spôsobom opísaným vyššie. To znamená, že ho možno volať priamo ako Comment::validate() bez toho, aby ste museli vytvárať objekt tejto triedy. Táto metóda nie je validáciou vstupu, ktorý je odoslaný cez AJAX.

Táto metóda využíva nové funkcie filtrovania, ktoré sú dostupné v PHP 5.2.0. To nám umožňuje jednoducho overiť a filtrovať akýkoľvek vstup, ktorý sa odovzdá skriptu. Napríklad filter_input(INPUT_POST, "URL", FILTER_VALIDATE_URL) znamená, že kontrolujeme, či $_POST["url"] je platná adresa URL. Ak áno, potom funkcia vráti hodnotu premennej, inak sú návraty nepravdivé.

Je to veľmi užitočné, pretože doteraz sme museli na overenie údajov používať vlastné regulárne výrazy. Ďalšou výhodou je, že tieto údaje sa berú pred akýmikoľvek transformáciami špecifickými pre konfiguráciu (ako sú napríklad magické úvodzovky).

Máme tiež možnosť špecifikovať vlastnú funkciu, ktorá bude aplikovať niektoré pokročilejšie úpravy údajov, ako je vidieť v riadkoch 31 a 37.

Comment.class.php - 3. krok súkromná statická funkcia validate_text($str) ( /* / Táto metóda sa interne používa ako FILTER_CALLBACK */ if(mb_strlen($str,"utf8") , ", atď...) a previesť // Symboly Nový riadok v
tagy: $str = nl2br(htmlspecialchars($str)); // Odstránenie nových riadkov, ktoré zostali $str = str_replace(array(chr(10),chr(13)),"",$str); return $str; )

Poslednou metódou je validate_text , ktorú odovzdávame ako funkciu spätného volania. Chráni všetko Špeciálne symboly HTML, čím ich efektívne zbavíte XSS útokov. Nahrádza tiež reťazce znakov s
linky.

Submit.php /* / Toto pole bude vyplnené buď / Údaje, ktoré boli odoslané do skriptu, alebo / Chybové hlásenia: /*/ $arr = array(); $validates = Comment::validate($arr); if($validates) ( /* Všetko je v poriadku, vložte do databázy: */ mysql_query(" INSERT INTO comments(name,url,email,body) VALUES ("".$arr["name"]."", " ".$arr["url"]."", "".$arr["e-mail"]."", ".$arr["body"]."")"); $arr["dt " ] = date("r",time()); $arr["id"] = mysql_insert_id(); /* / Údaje v $arr sú vložené dopytom, / ale text bez špeciálnych znakov, / preto používame lomítka / všetky prvky poľa: /*/ $arr = array_map("stripslashes",$arr); $insertedComment = new Comment($arr); /* Výstupné označenie */ echo json_encode(array("status"=>1, "html " =>$insertedComment->markup())); ) else ( /* Chybové hlásenia tlače */ echo "("status":0,"errors":". json_encode($arr).")"; )

submit.php dostane údaje komentára ako požiadavku AJAX. Overí ho a vráti objekt JSON buď značky XHTML, ktorá bola úspešne vykreslená, alebo zoznam chybových hlásení. jQuery používa vlastnosť status na určenie, či sa majú zobraziť chybové správy alebo pridať komentár k označeniu stránky.

Nižšie môžete vidieť dva príklady.

Krok 1 – XHTML

Najprv sa pozrime na označenie komentárov. Daný kód generované PHP s triedou Komentujte .

demo.php

Používateľské meno
30. júna 2010

Text komentára

div avatar obsahuje odkaz (ak používateľ pri uverejňovaní komentára zadal správnu adresu URL) a obrázok avatara, ktorý získame z gravatar.com . Vrátime sa ku generovaniu značiek v kroku PHP. Na konci nasleduje div názov div čas a text komentára.

Ďalším dôležitým prvkom v XHTML je formulár komentárov. Posiela s POST. Všetky polia okrem URL musia byť vyplnené.

demo.php

Pridať komentár

Formulár sa odosiela pomocou AJAX. Kontrola sa vykonáva v pozadie v odoslať.php. Každé pole má zodpovedajúci prvok štítok, s nastaveným atribútom pre .

Krok 2 - PHP

PHP spracováva komunikáciu s databázou MySQL a generuje značku pre komentár. Získa tiež koniec požiadavky AJAX a vloží údaje komentára do tabuľky komentáre.

demo.php

/* / Vyberte všetky komentáre a naplňte pole $comments objektmi */ $comments = array(); $vysledok = mysql_query("VYBERTE * Z komentárov ORDER BY id ASC"); while($row = mysql_fetch_assoc($result)) ( $comments = new Comment($row); )

Dotaz MySQL vyberie všetky záznamy z tabuľky a naplní pole $komentárov objekty triedy komentovať. Dané pole výstup ďalej pri spustení skriptu.

demo.php

/* / Tlač komentárov jeden po druhom: */ foreach($comments as $c)( echo $c->markup(); )

Každý komentár má svoju metódu značka(), ktorý vygeneruje správny HTML kód pripravený na zobrazenie na stránke. Nasledujú definície tried a metód.

Trieda dostane riadok z databázy (získaný pomocou mysql_fetch_assoc()) a uložte ho do premennej $data. Je k dispozícii iba pre metódu triedy.

comment.class.php - 1. časť

class Comment ( private $data = array(); public function __construct($row) ( /* / Constructor */ $this->data = $row; ) public function markup() ( /* / Výstupom tejto metódy je označenie XHTML pre */ // Nastavte alias, aby ste sa vyhli zapisovaniu $this->data zakaždým: $d = &$this->data; $link_open = ""; $link_close = ""; if($d["url"] ) ( // Ak bola pri pridávaní komentára zadaná URL, // určte otváracie a zatváracie značky odkazu $link_open = ""; $link_close = ""; ) // Prevod času do formátu UNIX: $d["dt" ] = strtotime ($d["dt"]); // Potrebné na nastavenie predvoleného obrázka: $url = "http://".dirname($_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"]) ."/ img/default_avatar.gif"; return "
".$link_open." ".$link_close."
".$link_open.$d["name"].$link_close."
".date("d M Y", $d["dt"])."

".$d["body"]."

"; }

Scenár používa gravatar na znázornenie avatara v komentároch. Gravatar je veľmi užitočná služba, ktorá spája avatara s e-mailovou adresou. Obrázok avatara možno ľahko získať odovzdaním zakódovanej funkcie md5() svoju e-mailovú adresu na gravatar.com.

Skript určí URL, na ktorej sa vykoná, a určí presnú adresu obrázka default_avatar.gif. Tento obrázok sa odovzdá spolu s hashom md5 a ak sa pre danú e-mailovú adresu nenašiel žiadny avatar, zobrazí sa alternatívny obrázok.

comment.class.php – 2. časť

verejná statická funkcia validate(&$arr) ( /* / Táto metóda sa používa na overenie údajov odoslaných cez AJAX. / / V závislosti od platnosti údajov vráti hodnotu true/false a vyplní / pole $arr, ktoré je odovzdané ako parameter s údajmi alebo */ $errors = array(); $data = array(); // Použite funkciu filter_input zavedenú v PHP 5.2.0 if(!($data["email"] = filter_input(INPUT_POST) ,"email ",FILTER_VALIDATE_EMAIL))) ( $errors["email"] = "Zadajte platný e-mail."; ) if(!($data["url"] = filter_input(INPUT_POST,"url",FILTER_VALIDATE_URL) )) ( // Ak bola do poľa URL zadaná neplatná adresa URL, // správajte sa, ako keby nebola zadaná žiadna adresa URL: $url = ""; ) // Použite filter s funkciou spätného volania: if(!($data[ "body"] = filter_input(INPUT_POST,"body",FILTER_CALLBACK,array("options"=>"Komentár::validate_text")))) ( $errors["body"] = "Zadajte text komentára."; ) if(!( $data["name"] = filter_input(INPUT_POST,"nam e",FILTER_CALLBACK,array("options"=>"Komentár::overiť_text")))) ( $errors["name"] = "Zadajte meno."; ) if(!empty($errors))( // Ak sa vyskytnú chyby, skopírujte pole $errors do $arr: $arr = $errors; return false; ) // Ak je vstup správny, vyčistite údaje a skopírujte ho do $arr : foreach($data as $k=>$v)( $arr[$k] = mysql_real_escape_string($v); ) // email musí byť malými písmenami: $arr["email"] = strtolower( trim($ arr["e-mail"])); vrátiť true; )

Metóda potvrdiť()(tiež súčasť triedy) je definovaný ako statické. To znamená, že ho možno volať priamo s konštruktom komentár::overiť(), bez vytvorenia objektu triedy. Táto metóda overuje údaje, ktoré prechádzajú cez AJAX.

Metóda používa Nová funkcia filter, ktorý sa stal dostupným v PHP 5.2.0. Takto môžeme jednoducho kontrolovať a filtrovať dáta, ktoré sa prenášajú do skriptu. Napríklad, filter_input(INPUT_POST,'url',FILTER_VALIDATE_URL) znamená, že skontrolujeme, či $_POST["url"] správna adresa URL. Ak áno, potom funkcia vráti hodnotu premennej, inak vráti hodnotu falošný.

Pred použitím takejto funkcie bolo potrebné použiť regulárne výrazy na overenie údajov (pomocou série konštruktov ak). Ďalšou výhodou je, že údaje získame pred vykonaním akýchkoľvek konkrétnych transformácií.

Je tiež možné definovať funkciu, ktorá bude vykonávať dodatočné úpravy údajov.

comment.class.php – 3. časť

súkromná statická funkcia validate_text($str) ( /* / Táto metóda sa používa ako FILTER_CALLBACK */ if(mb_strlen($str,"utf8")<1) return false; // Кодируем все специальные символы html (<, >, ", & .. atď) a skonvertujte // znak nového riadku na značku
: $str = nl2br(htmlspecialchars($str)); // Odstráňte všetky zostávajúce nové riadky $str = str_replace(array(chr(10),chr(13)),"",$str); return $str; )

Posledná metóda validate_text odovzdané ako návratová funkcia v dvoch hovoroch filter_input. Konvertuje všetky špeciálne HTML znaky, čím efektívne blokuje XSS útoky. Tiež nahrádza nové riadky značkami
.

odoslať.php

/* / Toto pole bude vyplnené buď údajmi /, ktoré sa prenesú do skriptu, / alebo chybovými hláseniami. /*/ $arr = pole(); $validates = Comment::validate($arr); if($validates) ( /* V poriadku, vložte údaje do databázy: */ mysql_query(" INSERT INTO comments(name,url,email,body) VALUES ("".$arr["name"]."", "".$arr["url"]."", "".$arr["e-mail"]."", "".$arr["body"]."")"); $arr["dt "] = date("r",time()); $arr["id"] = mysql_insert_id(); /* / Údaje v $arr sú pripravené pre dopyt mysql, / ale musíme ich zobraziť, takže / pripravujeme všetky prvky v poli: /*/ $arr = array_map("stripslashes",$arr); $insertedComment = new Comment($arr); /* Vytlačí označenie práve vloženého komentára: */ echo json_encode (array("status "=>1,"html"=>$insertedComment->markup())); ) else ( /* Zobrazenie chybových hlásení */ echo "("status":0,"errors":". json_encode($arr).")"; )

odoslať.php načíta komentár z údajov prostredníctvom požiadavky AJAX. Overí ho a vypíše objekt JSON obsahujúci buď označenie XHTML s vloženým komentárom alebo zoznam chýb. Vlastnosť použitia jQuery postavenie určiť, čo sa má zobraziť – buď chybové hlásenie, alebo pridanie komentára na stránku.

Nižšie sú uvedené dva príklady.

Úspešná odpoveď

( "status": 1, "html": "Html kód komentára prichádza sem..." )

Nehnuteľnosť html obsahuje kód komentára.

Chybová odpoveď

( "stav": 0, "chyby": ( "e-mail": "Zadajte platný e-mail.", "body": "Zadajte telo komentára.", "meno": "Zadajte meno." ) )

Keď dôjde k chybe, jQuery prechádza cez objekt chýb a zobrazuje správy vedľa polí, ktoré obsahujú chyby.

Krok 3 – CSS

Teraz, keď je označenie správne vygenerované a zobrazené na stránke, môžeme prejsť na úpravu štýlu.

styles.css - 1. časť

.comment, #addCommentContainer( /* Štýl pre komentáre */ padding:12px; width:400px; position:relative; background-color:#fcfcfc; border:1px solid white; color:#888; margin-bottom:25px; / * CSS3 zaoblené rohy a tiene */ -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( /* / Avatar je umiestnený absolútne. / Vonkajšie odsadenie pre div komentára /*/ výška:50px; vľavo:- 70px; pozícia:absolútna; šírka:50px; background:url("img/default_avatar.gif") no-repeat #fcfcfc; /* Zvisle na stred: */ okraj-vrchol:-25px; hore:50%; -moz- box-shadow :1px 1px 0 #c2c2c2; -webkit-box-shadow:1px 1px 0 #c2c2c2; box-shadow:1px 1px 0 #c2c2c2; )

div .komentár a #addCommentContainer mať rovnaký štýl. Na zaoblenie rohov a odraz tieňov sa používa niekoľko pravidiel CSS3.

styles.css – 2. časť

.comment .avatar img( display:block; ) .comment .name( font-size:20px; padding-bottom:10px; color:#ccc; ) .comment .date( font-size: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( /* Štýl vstupu */ 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( /* Tlačidlo "Odoslať" " */ farba pozadia:#58B9EB; okraj:1px plný #40A2D4; farba:#FFFFFF; kurzor:ukazovateľ; font-family:"Myriad Pro",Arial,Helvetica,sans-serif; font-size:14px; font -weight:bold; padding:4px; margin-top:5px; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; ) #s ubmit:hover( farba-pozadia:#80cdf5; border-color:#52b1e2; )

V druhej časti nastavíme štýly komentárov a formulárových prvkov. Všimnime si selektor vstup, ktorý zvýrazňuje prvky v závislosti od atribútu typu.

Krok 4 - jQuery

Teraz prejdime k jQuery.

script.js

$(document).ready(function()( /* Nasledujúci kód sa spustí až po načítaní modelu DOM */ /* Tento príznak zabraňuje odoslaniu viacerých komentárov: */ var working = false; /* Zachytenie odoslania formulára udalosť: */ $(" #addCommentForm").submit(function(e)( e.preventDefault(); if(working) return false; working = true; $("#submit").val("Working.. "); $("span .error").remove(); /* Odošlite polia formulára na odoslanie.php: */ $.post("submit.php",$(this).serialize(),function(msg )( working = false; $ ("#submit").val("Submit"); if(msg.status)( /* / Ak bolo vloženie úspešné, pridajte komentár / pod posledný na stránke s efekt slideDown /*/ $(msg.html).hide ().insertBefore("#addCommentContainer").slideDown(); $("#body").val(""); ) else ( /* / Ak existuje sú chyby, prejdite cez objekt / msg.errors a vypíšte ich na stránku /*/ $.each(msg.errors,function(k,v)( $("label").append(" "+v+""); )); ) ),"json"); )); ));

Používame volanie funkcie $(document).ready() A, ktoré spája funkciu s udalosťou. Variabilné pracovné funguje ako príznak, ktorý signalizuje, že prebieha požiadavka AJAX (čím sa zabráni duplicite toho istého komentára).

Vo funkcii návratu pre požiadavku POST AJAX skontrolujeme vlastnosť postavenie aby ste zistili, či bol komentár vložený úspešne. Ak áno, výsledné označenie pridáme na stránku za posledný komentár s animáciou zošmyknúť sa.

Ak sa vyskytli problémy, zobrazíme chybové hlásenia pridaním rozpätie chyba na príslušný prvok štítok(atribút prvku štítok obsahuje id vstup, ktorý má chybu).

Pripravený!

Záver

Ak chcete spustiť skript na vašom serveri, musíte vytvoriť tabuľku komentáre vo vašej databáze MySQL. Môžete to urobiť pomocou kódu SQL zo súboru table.sql, ktorý je potrebné zadať na záložke SQL v phpMyAdmin. Potom je potrebné v súbore nastaviť parametre pripojenia k databáze MySQL pripojiť.php .

Aby som bol úprimný, keď som videl, že o tom píšu a radia nováčikom na iných stránkach, bol som trochu zhrozený a rozhodol som sa podať svoju poznámku na túto tému bez fatálnej chyby. V podstate som videl dlhé časti kódu, ktoré sa implementujú pridávanie komentárov na stránku. Zvyčajne sa na to vytvorí formulár, implementuje sa jeho spracovanie, uloženie, ako aj výbery na zobrazenie. Ale výhody tohto prístupu čím ďalej, tým menej.

V tomto príspevku sa dozviete jeden z najjednoduchších (ale subjektívne jeden z najpreferovanejších) spôsobov pridávania komentárov na stránku – jednoduchý príklad pre nováčikov + možnosti pre pokročilejších webmasterov.

Naozaj, prečo znovu vymýšľať koleso a písať kopu kódu, ktorý bude musieť byť v budúcnosti stále podporovaný, opravený atď., ak existuje kopa hotových riešení od služieb tretích strán (hovoríme o v sociálnych sieťach + diskom)?

Kým však prejdeme k samotnej realizácii, pozrime sa na výhody/nevýhody použitia hotových riešení. (Ak ste na niečo zabudli - napíšte do komentárov - zoznam rozšírime)

Výhody riešení tretích strán:

  • Jednoduchosť implementácie.
  • Ochrana proti spamu „out of the box“ (v mojom riešení by som to musel implementovať dodatočne, takže teoreticky to súvisí s predchádzajúcim odsekom).
  • Menej náchylné na chyby, chyby atď., pretože riešenia tretích strán testovali milióny používateľov (opäť súvisí s prvým: môžete tiež napísať všetko bez chýb, ale ladenie si vyžiada viac času).
  • Služby spravidla poskytujú hotový admin panel, štatistiky, notifikácie pre adminov, niekedy moderovanie, viacero adminov, predmoderovanie atď., čo môže správcovi webu, najmä začiatočníkovi, trvať mesiace, ak nie roky. realizovať.
  • Používateľ sa nemusí registrovať, zadávať svoje meno atď. - predpokladá sa, že už má účet v populárnej sociálnej sieti.
  • S najväčšou pravdepodobnosťou vydrží veľké zaťaženie kvôli tomu, že sociálne. Plošiny boli pôvodne navrhnuté pre veľké zaťaženie.

nedostatky:

  • Slabá alebo úplná neschopnosť zmeniť vzhľad bloku pomocou komentárov.
  • Indexovanie vo vyhľadávačoch.

Ako vidíte, výhod je oveľa viac. Neschopnosť zmeniť vzhľad je s najväčšou pravdepodobnosťou vykonaná s cieľom rozpoznať štýl služby komentárov, čím sa vytvorí nevtieravá reklama. (Ako jedna z možností). Čo sa týka indexovania, je to naozaj také dôležité, pretože nie všetky komentáre nesú sémantickú záťaž.

Ale dosť bolo teórie, prejdime k praxi.

1. Najjednoduchšou možnosťou je pridávanie komentárov pomocou niektorej vybranej sociálnej siete.

Napríklad vk. Pozeráme sa na dokumentáciu. Skopírujte poskytnutý kód a pridajte ho na stránku (kusy kódu sú prevzaté z dokov odkazom, v budúcnosti sa môžu zmeniť, preto vždy kopírujte zo stránky s dokumentáciou. Tu je len možný príklad):

1) Pridať do :

2) Pridajte na miesto, kde chceme vidieť widget komentárov (napríklad za poznámku, ak hovoríme o blogu):

2. Pridajte widgety z viacerých služieb. Napríklad ako na tomto zdroji. Prepnúť karty:


Pridáme do označenia (pre správnu prácu musí byť pripojený bootstrap Twitter!) na miesto, kde chcete zobraziť widget komentárov:

Ale táto možnosť nie je najlepšia, aj keď najjednoduchšia. Problémom je, že pri tomto prístupe sa pri načítaní stránky inicializujú všetky widgety bez ohľadu na to, či ich používateľ potrebuje alebo nie.

Tomu sa dá predísť implementáciou lenivá inicializácia widgetov komentárov. Najprv celý kód, potom vysvetlenie:

(function(global, $) ( "use strict"; $(function() ( var $tabToggler, initComments, initialized; initialized = ( "#vk-comments": false, "#disqus_thread": false ); initComments = funkcia) (type) ( var diskutovaťUserName, disqus_config, pageUrl; if (inicializované) ( return; ) pageUrl = "page_url"; switch (type) ( case "#disqus_thread": // Tieto parametre musíte nastaviť pomocou vhodnej platformy spôsob diskutovaťUserName = "discussUserName"; disqus_config = function() ( this.page.url = pageUrl; return this.page.identifier = "page_identifier"; ); (function() ( var d, s; ​​​​d = document; s = d.createElement("script"); s.src = "//" + diskutovaťUserName + ".disqus.com/embed.js"; s.setAttribute("data-timestamp", +new Date()); return ( d.head || d.body).appendChild(s); ))(); break; case "#vk-comments": VK.Widgets.Comments("vk-comments", ( limit: 5, priložiť : " *", pageUrl: pageUrl )); break; default: return; ) initialized = true; ); $tabToggler = $(".comments-wrapper a" ); $tabToggler.on("show.bs.tab", function(e) ( initComments($(e.target).attr("href")); )); initComments($tabToggler.closest(".active").find("a").attr("href")); )); ))(okno, jQuery);

Venujte pozornosť premenným, ktorých hodnotu musíte pripraviť pomocou metód poskytovaných vašou platformou.

Najprv vytvoríme mapovanie typov widgety komentárov, variabilný inicializované. Ďalej funkcia initComments(type) umožňuje inicializovať widget komentárov a nerobí nič, ak už bol inicializovaný.

A posledný dotyk – inicializujte predvolený widget komentárov, aby sa zobrazil hneď po načítaní stránky.

Pripravený skript na a coffeescript na podstatu. Príklad práce je uvedený nižšie (príklady kódu sú prevzaté z tejto stránky)

Ahojte priatelia a hostia blogu! Dnes vám poviem pomocou PHP a MySQL. Budeme tiež hovoriť o komentovacie systémy pre stránku a vyberte si ten najlepší pre svoj web z tých, ktoré som navrhol.

Otázka jedna: používaním PHP a MySQL?

Aby ste to urobili, musíte najprv vy a ja vytvoriť tabuľku v databáze vašej stránky, ktorá sa bude volať - komentáre. Táto vytvorená tabuľka bude ukladať komentáre do polí s nasledujúcimi označeniami:

id je jedinečný identifikátor.
page_id- toto pole bude uchovávať identifikátor stránky lokality, na ktorej sa tento komentár nachádza.
názov je meno komentujúceho, ktorý zanechal tento komentár.
textový_komentár- respektíve toto je text aktuálneho komentára.

Ďalším krokom, po vytvorení tabuľky pre komentáre v databáze, musíme implementovať špeciálny kód pre naše budúce komentáre na stránke. Tento kód stránky umožní našim komentátorom pridávať svoje komentáre k našim článkom. Tu je kód:


Toto je jednoduchý formulár komentára HTML pre webovú stránku. Umiestnite ho na svoju stránku na miesto, kde je vhodné zanechať komentár k príspevku – prirodzene, pod samotný príspevok.

query("INSERT INTO `komentáre` (`name`, `page_id`, `text_comment`) VALUES ("$name", "$page_id", "$text_comment")");// Pridať komentár do hlavičky tabuľky(" Umiestnenie: ".$_SERVER["HTTP_REFERER"]);// Presmerujeme späť?>

Posledným krokom pri vytváraní formulára komentárov pre webovú stránku PHP a MySQL je zobrazenie našich komentárov na webovej stránke. Tu je kód na to:

query("SELECT * FROM `komentáre` WHERE `page_id`="$page_id""); //Načítajte všetky komentáre pre túto stránku, kým ($row = $result_set->fetch_assoc()) ( print_r($row); //Tlač komentárov echo "
"; } ?>

To je všetko! Náš jednoduchý formulár na pripomienkovanie webovej stránky je teraz spustený na webovej stránke.

Ale určite to nie je pre začiatočníka, ktorý sa nebude prehrabávať celým tým HTML, PHP a MySQL kódom. Tiež sa nenaučí, ako vytvoriť databázu. Potrebuje všetko naraz, rýchlo a bez bolesti hlavy. Mám pravdu? Samozrejme správne!

Potom prejdime na ďalšiu časť môjho materiálu a naučte sa všetko o hotových systémoch komentárov pre web a vyberte si ten najvhodnejší, najfunkčnejší a najprijateľnejší pre váš web ...

Komentovacie systémy pre stránku. Ktorý si vybrať?

Ako pridávať komentáre na stránke- toto je dôležitá otázka, pretože komentáre na stránke zohrávajú dôležitú úlohu nielen pre komunikáciu medzi majiteľom stránky a návštevníkom, ale komentáre sú dôležité aj pre SEO propagáciu a propagáciu.

Pomocou komentárov na stránke sa zvyšuje pozícia stránky vo výsledkoch vyhľadávania, zlepšujú sa faktory správania, rastie návštevnosť stránky a následne aj vaše zárobky. Vidíte, aké dôležité sú komentáre pre stránku!

Tak sa na to poďme pozrieť ako pridávať komentáre na stránke a čo systém pripomienkovania vybrať najlepšiu možnosť?

Vo všeobecnosti sa komentáre na stránkach zobrazujú mnohými spôsobmi. Ide o špeciálne pluginy pre wordpress engine a všemožné komentáre zo sociálnych sietí ako napr V kontakte s, Facebook, Disqus. Existujú aj nezávislé služby, ktoré ponúkajú napríklad vlastné systémy komentárov pre stránku.

Teraz vám dám jeden tablet, ktorý okamžite umiestni všetko na svoje miesto a nebudú žiadne otázky týkajúce sa výberu systému komentárov pre stránku:

Tu je všetko jasne a jasne viditeľné, ktorý systém komentárov je najlepší a niekoľko prezentovaných, ktoré webmasteri najčastejšie používajú na svojich zdrojoch. Myslím si, že vysvetlenia sú tu zbytočné a výber je len na vás!