Yksinkertainen AJAX-kommentointijärjestelmä. Kommentit HTML, CSS, PHP Kommentit Facebookista: plussat ja miinukset

Tällä kertaa teemme yksinkertaisen AJAX-kommentointijärjestelmän. Tämä osoittaa, kuinka tehokas yhteentoimivuus JQueryn ja PHP/MySQL:n välillä saavutetaan JSON:n avulla. Järjestelmä toimii siten, että lisätyt kommentit sijoitetaan sivulle lataamatta sitä kokonaan uudelleen, mikä antaa vaikutelman, että sivusto toimii vain käyttäjän tietokoneella, jolloin vältytään odottamasta jonkin aikaa sivun lataamista lisätyn kommentin kanssa. .

Tässä on karkea esittely siitä, mitä aiomme toteuttaa:

Vaihe 1 – XHTML

Katsotaanpa ensin kommenttimerkintää. PHP on luonut tämän koodin kommentissa, jota aiomme tarkastella hetken kuluttua.

Demo.php

Nimi
30. heinäkuuta 2010

Kommentti

Avatar-luokan Div sisältää avataria vastaavan hyperlinkin (jos käyttäjä määritti kelvollisen linkin avatariin lähettäessään kommenttia), esimerkiksi osoitteesta gravatar.com. No, palaamme tähän, kun työskentelemme PHP:n kanssa. Lopuksi meillä on nimi ja aika myös DIV:issä sekä kommentti eli itse teksti kappaleessa.

Toinen tärkeä elementti XHTML-osassa on itse kommenttien lähetyslomake (kaikki kentät paitsi URL-kentät on täytettävä).

Demo.php

Lisää kommentti

Vaihe 2 - PHP

PHP käsittelee yhteydet MySQL-tietokantaan ja luo kommenttimerkinnät. Lisäksi lopussa käytetään AJAXia ja se lisää kommentin kommenttitaulukkoon. Voit nähdä kommentit näyttävän koodin alla olevalla sivulla.

Demo.php /* / Valitse kaikki kommentit ja täytä $comments array */ $comments = array(); $result = mysql_query("SELECT * FROM kommenteista ORDER BY id ASC"); while($rivi = mysql_fetch_assoc($tulos)) ( $kommentit = uusi kommentti($rivi); )

MySQL-kysely hakee kaikki merkinnät tietokannasta ja täyttää $comments -taulukon alla näkyvällä kommenttiluokkaobjektilla. Tämä matriisi tulostetaan, kun komentosarja on suoritettu.

Demo.php /* / Näytä kommentit yksitellen */ foreach($comments as $c)( echo $c->markup(); )

Jokaisessa kommentissa on markup()-menetelmä, joka luo HTML-koodin sivun tulostamista varten. Voit nähdä tämän menetelmän ja luokan alta.

Luokka ottaa tietokannasta merkkijonon (haetaan mysql_fetch_assoc()) ja tallentaa sen $data-muuttujaan. Se on vain tämän luokan menetelmien käytettävissä, eikä sitä voi käyttää ulkopuolelta.

Comment.class.php – Vaihe 1 luokka Kommentti ( yksityinen $data = array(); julkinen funktio __construct($row) ( /* / Rakentaja */ $this->data = $rivi; ) julkinen funktio markup() ( / */ Tämä menetelmä tulostaa XHTML-merkintäkommentin */ // Luo alias, jotta meidän ei tarvitse kirjoittaa // $this->datatietoja joka kerta: $d = &$this->data; $link_open = "" ; $link_close = ""; if($d["url"])( // Jos henkilö täytti URL-osoitteen, kun // kommentin lisääminen// Määritä hyperlinkki $link_open = ""; $link_close = ""; ) // Ajan muunnos $d["dt"] = strtotime($d["dt"]); // Pakollinen Gravatar-oletuskuville: $url = "http://".dirname($_SERVER["PALVELIN_NAME"]. $_SERVER["REQUEST_URI"])."/img/default_avatar.gif"; paluu"

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

".$d["body"]."

"; }

Tämä skripti käyttää Gravataria näyttääkseen avatarit kommenteissa. Niille, jotka eivät ole käyttäneet Gravataria, se on erittäin hyödyllinen palvelu, jonka avulla voit liittää avatarin sähköpostiosoitteeseesi. Avatar voidaan ottaa helposti ohittamalla hash md5().

Huomautus rivillä 39 sen yläpuolella - komentosarja yrittää selvittää URL-osoitteen, jolla se on, ja määrittää default_avatar.gif -kuvan tarkan osoitteen. Tämä GIF välitetään Gravatarille md5-hajautustekniikalla, joten jos avatar löytyi tästä sähköpostiosoitteesta, sen sijaan näytetään varakuva.

Comment.class.php – Vaihe 2 julkinen staattinen funktio valide(&$arr) ( /* / Tämä menetelmä käytetään tietojen vahvistamiseen / AJAXin kautta välitettyyn. // Tämä palauttaa tosi/epätosi riippuen siitä, / onko data kelvollinen, ja $arr-taulukko välitetään paremterina / (huomaa et-merkki yllä) / Joko kelvollinen tiedonsyöttö tai virheilmoituksia. */ $virheet = array(); $tiedot = array(); // Käytä PHP 5.2.0:ssa käyttöön otettua filter_input-funktiota if(!($data["email"] = filter_input(INPUT_POST,"email",FILTER_VALIDATE_EMAIL))) ( $errors["email"] = "Anna kelvollinen Sähköposti."; ) if(!($data["url"] = filter_input(INPUT_POST,"url",FILTER_VALIDATE_URL))) ( // Jos URL-osoite ei vastaa väärää URL-osoitetta $url = ""; ) / / Käytä suodattimia mukautetulla // takaisinsoittofunktiolla: if(!($data["body"] = filter_input(INPUT_POST,"body",FILTER_CALLBACK, array("options"=>"Kommentti::validate_text")))) ( $ errors["body"] = "Kommenttivirhe."; ) if(!($data["nimi"] = filter_input(INPUT_POST,"nimi",FILTER_CALLBACK, array("options"=>"Kommentti::validate_text) ") ))) ( $errors["name"] = "Nimivirhe."; ) if(!empty($errors))( //Jos on virheitä, kirjoita $errors $arr-taulukkoon: $arr = $errors; return false; ) foreach($data muodossa $k=>$v)( $arr[$k] = mysql_real_escape_string($v); ) // Varmista, että kirjaimet ovat pienillä kirjaimilla // (oikea Gravatar hash): $arr ["sähköposti"] = strtolower(trim($arr["sähköposti"])); palauttaa tosi; )

validate() määritellään staattiseksi yllä kuvatulla tavalla. Tämä tarkoittaa, että sitä voidaan kutsua nimellä Comment::validate() suoraan ilman, että tarvitsee luoda kyseisen luokan objektia. Tämä menetelmä ei vahvista AJAX:n kautta toimitettua syöttöä.

Tämä menetelmä käyttää uusia suodatintoimintoja, jotka ovat saatavilla PHP 5.2.0:ssa. Tämän avulla voimme helposti tarkistaa ja suodattaa kaikki skriptiin siirretyt syötteet. Esimerkiksi filter_input(INPUT_POST, "URL", FILTER_VALIDATE_URL) tarkoittaa, että tarkistamme, että $_POST["url"] on kelvollinen URL-osoite. Jos näin on, funktio palauttaa muuttujan arvon, muuten palautukset ovat vääriä.

Tämä on erittäin hyödyllistä, koska tähän asti meidän piti käyttää omaamme säännöllisiä lausekkeita tietojen tarkistamiseen. Lisäksi toinen etu on, että nämä tiedot otetaan ennen konfiguraatiokohtaisia ​​muunnoksia (kuten taikalainauksia).

Meillä on myös mahdollisuus määrittää mukautettu toiminto, joka tekee joitain edistyneempiä muutoksia tietoihin, kuten rivit 31 ja 37 nähdään.

Comment.class.php – Vaihe 3 yksityinen staattinen funktio valide_text($str) ( /* / Tätä menetelmää käytetään sisäisesti muodossa FILTER_CALLBACK */ if(mb_strlen($str,"utf8") , ", etc..) ja muunna / / Uudet rivit
tunnisteet: $str = nl2br(htmlspecialchars($str)); // Poista kaikki jäljellä olevat rivinvaihdot $str = str_replace(array(chr(10),chr(13)),"",$str); palauttaa $str; )

Viimeinen menetelmä on valide_text, jonka välitämme takaisinsoittofunktiona. Se välttää kaikki HTML-erikoismerkit ja eliminoi niistä tehokkaasti XSS-hyökkäykset. Se myös korvaa merkkijonot sanalla
rivit.

Submit.php /* / Tämä taulukko täytetään joko / komentosarjaan lähetetyillä tiedoilla tai / virheilmoituksilla: /*/ $arr = array(); $validates = Kommentti::validate($arr); if($validates) ( /* Kaikki on kunnossa, lisää se tietokantaan: */ mysql_query(" INSERT INTO comments(name,url,email,body) VALUES ("".$arr["nimi"]."" , " ".$arr["url"].", "".$arr["sähköposti"].", "".$arr["body"]."")"); $arr["dt" [ : /*/ $arr = array_map("strislashes",$arr); $insertedComment = new Comment($arr); /* Tulostusmerkintä */ echo json_encode(array("status"=>1, "html" => $insertedComment->markup())); ) else ( /* Näytä virheilmoitukset */ echo "("status":0,"errors":". json_encode($arr).")"; )

submit.php vastaanottaa kommenttitiedot AJAX-pyynnönä. Se tarkistaa sen ja tuottaa JSON-objektin, joko onnistuneesti hahmonnetun XHTML-merkinnän tai luettelon virheilmoituksista. JQuery määrittää omistajuuden tilan perusteella, pitäisikö näyttää virheilmoituksia vai lisätäkö sivun merkintäkommentti.

Alla näet kaksi esimerkkiä.

Hei ystävät ja blogivieraat! Tänään kerron sinulle PHP:n ja MySQL:n avulla. Ja puhumme myös sivuston kommentointijärjestelmät ja valitsemme tarjoamistani tuotteista sivustollesi parhaan.

Kysymys yksi: käyttämällä PHP ja MySQL?

Tätä varten sinun ja minun on ensin luotava sivustosi tietokantaan taulukko, jonka nimi on - kommentteja. Tämä luotu taulukko tallentaa kommentit kenttiin, joilla on seuraavat nimitykset:

id on yksilöllinen tunniste.
page_id— tähän kenttään tallennetaan sen sivuston sivun tunniste, jolla tämä kommentti sijaitsee.
nimi- tämä on tämän kommentin jättäneen kommentoijan nimi.
teksti_kommentti— Tämä on siis tämänhetkisen kommentin teksti.

Seuraavassa vaiheessa, kun olemme luoneet taulukon kommenteille tietokantaan, meidän on otettava käyttöön erityinen koodi tulevia kommentteja varten sivustolla. Tämän sivuston koodin avulla kommentaattorimme voivat lisätä kommentteja artikkeleihimme. Tässä on koodi:


Se on yksinkertaista HTML-lomake kommentteja sivustolle. Sijoitat sen verkkosivustollesi paikkaan, jossa on kätevää jättää kommentti julkaisuun - luonnollisesti itse julkaisun alle.

query("INSERT INTO `comments` (`nimi`, `sivun_tunnus`, `teksti_kommentti`) VALUES ("$name", "$page_id", "$text_comment")");// Lisää kommentti taulukon otsikkoon (" Sijainti: ".$_SERVER["HTTP_REFERER"]);// Uudelleenohjataanko takaisin?>

Viimeinen vaihe kommenttilomakkeen luomisessa sivustolle PHP:ssä ja MySQL:ssä on näyttää kommenttimme sivuston sivulla. Tässä koodi tälle:

query("SELECT * FROM `kommentit` WHERE `sivun_id`="$sivun_tunnus""); //Hae kaikki tämän sivun kommentit while ($row = $result_set->fetch_assoc()) ( print_r($row); //Tulostavat kommentit echo "
"; } ?>

Siinä kaikki! Meidän yksinkertainen muoto kommentit sivustolle on luotu ja ne voivat toimia sivustolla.

Mutta tämä ei todellakaan ole aloittelijalle, joka ei vaivaudu kaiken tämän HTML-, PHP- ja MySQL-koodin kanssa. Hän ei myöskään opi luomaan tietokantaa. Hän tarvitsee kaiken kerralla, nopeasti ja ilman päänsärkyä. Olen oikeassa? Tietysti olet oikeassa!

Siirrytään sitten materiaalini seuraavaan osaan ja selvitetään kaikki sivuston valmiista kommenttijärjestelmistä ja valitaan sivustollesi sopivin, toimivin ja hyväksyttävin...

Sivuston kommenttijärjestelmät. Kumpi valita?

Kuinka kommentoida sivustoa- Tämä on tärkeä kysymys, koska sivustolla olevilla kommenteilla on tärkeä rooli paitsi sivuston omistajan ja vierailijan välisessä viestinnässä, vaan kommentit ovat tärkeitä myös SEO edistäminen ja edistäminen.

Sivuston kommenttien avulla sivuston asema hakutuloksissa kasvaa ja paranee käyttäytymistekijöitä, sivuston liikenne kasvaa ja sen seurauksena tulosi kasvavat. Näet kuinka tärkeitä kommentit ovat sivustolle!

Joten katsotaanpa kuinka kommentoida sivustoa ja kumpi kommenttijärjestelmä Valitse paras vaihtoehto?

Yleisesti ottaen verkkosivustojen kommentit näytetään monin tavoin. Nämä ovat erityisiä lisäosia wordpress-moottoreille ja kommenteille sosiaaliset verkostot kaikenlaista, esim Yhteydessä, Facebook, Disqus. On myös itsenäisiä palveluita, jotka tarjoavat sivustolle esimerkiksi omia kommenttijärjestelmiä.

Annan sinulle nyt yhden tabletin, joka laittaa kaiken heti paikoilleen, eikä sivuston kommentointijärjestelmän valinnasta tule kysymyksiä:

Täältä näet selvästi ja selkeästi mikä kommenttijärjestelmä on paras ja useita esiteltyjä, joita webmasterit käyttävät useimmiten resursseissaan. Mielestäni selittelyt ovat tarpeettomia ja valinta on sinun!

Vaihe 1 – XHTML

Katsotaanpa ensin kommenttimerkintää. Tämä koodi luonut PHP luokan kanssa Kommentti .

demo.php

Käyttäjätunnus
30. kesäkuuta 2010

Kommentin teksti

div hahmo sisältää linkin (jos käyttäjä antoi oikean URL-osoitteen kommentin lähettämisen yhteydessä) ja avatar-kuvan, jonka saamme osoitteesta gravatar.com. Palaamme merkintöjen luomiseen PHP-vaiheessa. Lopuksi seuraa div nimi div aika ja kommenttiteksti.

Toinen tärkeä elementti XHTML:ssä on kommenttilomake. Hänet lähetetään mukana LÄHETTÄÄ. Kaikki kentät URL-osoitetta lukuun ottamatta on täytettävä.

demo.php

Lisää kommentti

Lomake toimitetaan AJAXin avulla. Tarkastus suoritetaan sisään tausta V lähetä.php. Jokaisessa kentässä on vastaava elementti etiketti, määrite on asetettu varten .

Vaihe 2 - PHP

PHP hoitaa viestinnän MySQL-tietokannan kanssa ja luo kommenttimerkinnät. Se vastaanottaa myös AJAX-pyynnön lopun ja lisää kommenttitiedot taulukkoon kommentteja.

demo.php

/* / Valitse kaikki kommentit ja täytä $comments -taulukko objekteilla */ $comments = array(); $result = mysql_query("SELECT * FROM kommenteista ORDER BY id ASC"); while($rivi = mysql_fetch_assoc($tulos)) ( $kommentit = uusi kommentti($rivi); )

MySQL-kysely valitsee kaikki tietueet taulukosta ja täyttää taulukon $kommentteja luokan esineitä kommentti. Tämä matriisi tulostetaan edelleen, kun komentosarja suoritetaan.

demo.php

/* / Tulosta kommentit yksitellen: */ foreach($comments as $c)( echo $c->markup(); )

Jokaisella kommentilla on menetelmä markup(), joka luo oikean HTML-koodin, joka on valmis näytettäväksi sivulla. Alla on luokan ja menetelmän määritelmät.

Luokka saa rivin tietokannasta (saatu käyttämällä mysql_fetch_assoc()) ja tallentaa sen muuttujaan $data. Se on käytettävissä vain luokkamenetelmälle.

comment.class.php - Osa 1

class Kommentti ( yksityinen $data = array(); julkinen funktio __construct($row) ( /* / Rakentaja */ $this->data = $rivi; ) public function markup() ( /* / Tämä menetelmä tulostaa XHTML-merkinnät kommentit */ // Aseta alias, jotta et kirjoita $this->data joka kerta: $d = &$this->data; $link_open = ""; $link_close = ""; if($d["url "] )( // Jos URL annettiin kommenttia lisättäessä, // määritä linkin avaus- ja sulkemistunnisteet $link_open = " "; $link_close = ""; ) // Muunna aika UNIX-muotoon: $d["dt"] = strtotime($d["dt"]); // Tarvitaan oletuskuvan asettamiseen: $url = "http://". dirname ($_SERVER["PALVELIN_NAME"].$_SERVER["REQUEST_URI"])."/img/default_avatar.gif"; return "
".$link_open." ".$link_close."
".$link_open.$d["nimi"].$link_close."
".date("d M Y",$d["dt"])."

".$d["body"]."

"; }

Käsikirjoitus käyttää gravataria edustamaan avataria kommenteissa. Gravatar on erittäin hyödyllinen palvelu, joka yhdistää avatarin sähköpostiosoitteeseen. Avatar-kuva voidaan helposti saada ohittamalla koodattu toiminto md5() sähköpostiosoitteesi osoitteessa gravatar.com.

Skripti määrittää URL-osoitteen, jossa se suoritetaan, ja määrittää kuvan tarkan osoitteen oletus_avatar.gif. Tämä kuva lähetetään rinnakkain md5 hashin kanssa, ja jos lähetetylle sähköpostiosoitteelle ei löydy avataria, näytetään vaihtoehtoinen kuva.

comment.class.php - Osa 2

julkinen staattinen funktio valide(&$arr) ( /* / Tätä menetelmää käytetään AJAXin kautta lähetettyjen tietojen vahvistamiseen. / / Se palauttaa tosi/epätosi tietojen oikeellisuudesta riippuen ja täyttää / välitettävän $arr-taulukon parametrina joko datan tai virheilmoituksen kanssa. */ $errors = array(); $data = array(); // Käytä PHP 5.2.0:ssa käyttöön otettua filter_input-funktiota if(!($data["email"] = filter_input(INPUT_POST,"email ",FILTER_VALIDATE_EMAIL))) ( $errors["email"] = "Anna kelvollinen sähköpostiosoite."; ) if(!($data["url"] = filter_input(INPUT_POST,"url") ,FILTER_VALIDATE_URL))) ( // Jos URL-kenttään syötettiin väärä URL-osoite, // toimi ikään kuin URL-osoitetta ei olisi syötetty: $url = ""; ) // Käytä suodatinta takaisinsoittotoiminnolla: if(! ($data["body"] = filter_input(INPUT_POST,"body",FILTER_CALLBACK,array("options"=>"Kommentti::validate_text")))) ( $errors["body"] = "Anna kommentti tekstiä."; ) if(!( $data["nimi"] = suodatinsyöttö(INPUT_POST,"nimi",SUODATIN_CALLBACK,array("optiot"=>"Kommentti::tarkista_teksti")))) ( $virheet["nimi" "] = "Anna nimi. "; ) if(!empty($errors))( // Jos on virheitä, kopioi $errors-taulukko hakemistoon $arr: $arr = $errors; return false; ) // Jos tiedot on syötetty oikein, tyhjennä tiedot ja kopioi se $arr : foreach($data muodossa $k=>$v)( $arr[$k] = mysql_real_escape_string($v); ) // sähköpostin on oltava pienillä kirjaimilla: $arr["email"] = strtolower (trim($ arr["sähköposti"])); palauttaa tosi; )

Menetelmä validoi()(myös osa luokkaa) määritelty nimellä staattinen. Tämä tarkoittaa, että sitä voidaan kutsua suoraan käyttämällä konstruktia Kommentti::validate(), luomatta luokkaobjektia. Tämä menetelmä tarkistaa AJAXin kautta lähetetyt tiedot.

Menetelmä käyttää uusi ominaisuus suodatin, joka tuli saataville PHP 5.2.0. Tällä tavalla voimme helposti tarkistaa ja suodattaa skriptille välitetyt tiedot. Esimerkiksi, filter_input(INPUT_POST,'url',FILTER_VALIDATE_URL) tarkoittaa, että tarkistamme onko $_POST["url"] oikea URL-osoite. Jos näin on, funktio palauttaa muuttujan arvon, muuten se palauttaa arvon väärä.

Ennen tällaisen funktion käyttöä oli tarpeen käyttää säännöllisiä lausekkeita tietojen validoimiseksi (käyttämällä konstruktiosarjaa jos). Lisäetuna on, että saamme tiedot ennen kuin mitään tiettyjä muunnoksia suoritetaan.

On myös mahdollista määrittää toiminto, joka suorittaa lisämuutoksia tietoihin.

comment.class.php - Osa 3

yksityinen staattinen funktio valide_text($str) ( /* / Tätä menetelmää käytetään FILTER_CALLBACK */ if(mb_strlen($str,"utf8")<1) return false; // Кодируем все специальные символы html (<, >, ", & .. jne.) ja muuntaa // rivinvaihtomerkin tunnisteeksi
: $str = nl2br(htmlerikoismerkit($str)); // Poista kaikki jäljellä olevat rivinvaihdot $str = str_replace(array(chr(10),chr(13)),"",$str); palauttaa $str; )

Viimeinen menetelmä validate_text välitetty paluufunktiona kahdessa kutsussa filter_input. Se muuntaa kaikki HTML-erikoismerkit, mikä estää tehokkaasti XSS-hyökkäykset. Lisäksi se korvaa rivinvaihdot tunnisteilla
.

lähetä.php

/* / Tämä matriisi täytetään joko datalla /, joka välitetään skriptille, / tai virheilmoituksilla. /*/ $arr = array(); $validates = Kommentti::validate($arr); if($validates) ( /* Kaikki on kunnossa, lisää tiedot tietokantaan: */ mysql_query(" INSERT INTO comments(name,url,email,body) VALUES ("".$arr["nimi"]." ", "".$arr["url"].", "".$arr["sähköposti"].", "".$arr["body"]."")"); $arr["dt" "] = päivämäärä("r",aika()); $arr["id"] = mysql_insert_id(); /* / $arr:n tiedot valmistetaan mysql-kyselyä varten, / mutta meidän on tulostettava näytölle , joten / valmistele kaikki taulukon elementit: /*/ $arr = array_map("strislashes",$arr); $insertedComment = new Comment($arr); /* Tulostaa juuri lisätyn kommentin merkinnät: */ echo json_encode(array("status "=>1,"html"=>$insertedComment->markup())); ) else ( /* Näytä virheilmoitukset */ echo "("status":0,"errors":" .json_encode($arr )")";)

lähetä.php saa kommentin tiedoista AJAX-pyynnön kautta. Vahvistaa sen ja tulostaa JSON-objektin, joka sisältää joko XHTML-merkinnän, johon on lisätty kommentti, tai virheluettelon. jQuery käyttää ominaisuutta Tila määrittääksesi, mitä on tulostettava - joko virheilmoitus tai kommenttimerkinnän lisääminen sivulle.

Alla on kaksi esimerkkiä.

Onnistunut vastaus

( "status": 1, "html": "Html-koodi kommentin tulee tänne..." )

Omaisuus html sisältää kommenttikoodin.

Virhevastaus

( "status": 0, "errors": ( "sähköposti": "Anna kelvollinen sähköpostiosoite.", "body": "Anna kommentin teksti.", "nimi": "Anna nimi." ) )

Jos tapahtuu virhe, jQuery käy läpi errors-objektin ja näyttää viestejä virheitä sisältävien kenttien vieressä.

Vaihe 3 – CSS

Nyt kun merkinnät on luotu oikein ja näkyvät sivulla, voimme siirtyä tyylien asettamiseen.

styles.css – Osa 1

.comment, #addCommentContainer( /* Kommenttien tyyli */ täyttö: 12px; leveys: 400px; sijainti: suhteellinen; taustaväri: #fcfcfc; reunus: 1px tasainen valkoinen; väri: #888; marginaali-ala: 25px; / * CSS3 pyöristetyt kulmat ja varjot */ -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 on sijoitettu ehdottomasti. / Kommentin ulkopoikkeama /*/ korkeus:50px; vasen:- 70px; sijainti :absoluuttinen; leveys:50px; background:url("img/default_avatar.gif") ei toistoa #fcfcfc; /* Keskitä pystysuunnassa: */ margin-top: -25px; yläosa: 50%; -moz- box-shadow: 1px 1px 0 #c2c2c2; -webkit-box-shadow: 1px 1px 0 #c2c2c2; box-shadow: 1px 1px 0 #c2c2c2; )

div .kommentti Ja #addCommentContainer on sama tyyli. Käyttää useita CSS3-sääntöjä kulmien pyöristämiseen ja varjojen heijastamiseen.

styles.css – Osa 2

.comment .avatar img( display:block; ) .comment .name( font-size:20px; padding-bottom:10px; color:#ccc; ) .comment .date( font-size:10px; padding:6px 0; sijainti:absoluuttinen; oikea:15px; yläosa:10px; väri:#bbb; ) .comment p, #addCommentContainer p( font-size: 18px; line-height: 1.5; overflow-x:hidden; ) #addCommentContainer input, # addCommentContainer textarea( /* Syöttötyyli */ 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( /* Lähetyspainike " * / taustaväri:#58B9EB; reunus: 1px solid #40A2D4; väri:#FFFFFF; kohdistin:osoitin; fonttiperhe:"Myriad Pro",Arial,Helvetica,sans-serif; font-size:14px; font -weight :bold; täyttö: 4px; margin-top:5px; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; ) #submit:hover( background-color:# 80cdf5; border-color:#52b1e2; )

Toisessa osassa asetetaan tyylit kommenteille ja lomakeelementeille. Huomaa valitsin syöttö joka korostaa elementtejä attribuutin perusteella tyyppi.

Vaihe 4 - jQuery

Siirrytään nyt jQueryyn.

script.js

$(document).ready(function())( /* Seuraava koodi suoritetaan vasta, kun DOM on ladattu */ /* Tämä lippu estää useiden kommenttien lähettämisen: */ var working = false; /* Hae lomake lähetystapahtuma: */ $(" #addCommentForm").submit(function(e)( e.preventDefault(); if(työ) return false; toimiva = tosi; $("#submit").val("Toimii. ."); $("span .error").remove(); /* Lähetä lomakekentät osoitteeseen submit.php: */ $.post("submit.php",$(this).serialize(),function( msg)( working = false; $ ("#submit").val("Lähetä"); if(msg.status)( /* / Jos lisäys onnistui, lisää kommentti / sivun viimeisen alle slideDown-tehoste /*/ $(msg.html).hide ().insertBefore("#addCommentContainer").slideDown(); $("#body").val(""); ) else ( /* / If on virheitä, kierrä / msg.errors -objektin läpi ja näytä ne sivulle /*/ $.each(msg.errors,function(k,v)( $("label").append(" "+v+""); )); ) ),"json"); )); ));

Käytämme funktiokutsua $(asiakirja).ready(), joka sitoo funktion tapahtumaan. Muuttuva työskentelee toimii lippuna, joka ilmoittaa, että AJAX-pyyntö on käynnissä (täten estetään saman kommentin kaksoiskappaleet).

AJAX POST -pyynnön palautustoiminnossa tarkistamme ominaisuuden Tila määrittääksesi, onko kommentti lisätty onnistuneesti. Jos kyllä, lisäämme tuloksena saadun merkinnän sivulle viimeisen kommentin jälkeen animaatiolla liukua alas.

Jos ongelmia esiintyi, näytämme virheilmoitukset lisäämällä jänneväli virhe vastaavaan elementtiin etiketti(elementtiattribuutti etiketti sisältää id syöte, jossa on virhe).

Valmis!

Johtopäätös

Jotta voit suorittaa komentosarjan palvelimellasi, sinun on luotava taulukko kommentteja MySQL-tietokannassasi. Voit tehdä tämän käyttämällä SQL-koodia tiedostosta table.sql, joka on syötettävä phpMyAdminin SQL-välilehdelle. Sitten sinun on asetettava yhteysparametrit tiedostossa olevaan MySQL-tietokantaan connect.php .

Nykyään monet suositut sivustot eivät ole vain tiedon lähde, vaan myös paikka, jossa näistä tiedoista voidaan keskustella muiden käyttäjien kanssa; sivustot muuttuvat usein keskuksiksi, joiden ympärille muodostuu yhteisö.

Kommentit auttavat rakentamaan yhteisöä

Nyt käyttäjät eivät tule luoksesi vain lukemaan uutisia tai artikkeleita, vaan myös keskustelemaan niistä.

Tyypillistä on se, että lukija olisi voinut saada itse uutisen selville jossain toisessa paikassa, mutta se on mielenkiintoisten ihmisten yhteisö, mahdollisuus puhua ja kuulla heidän mielipiteitään - se johtaa siihen, että hän vierailee ja siirry sivulle, jolla on uutinen, jonka hän jo tietää.

Vain kymmenen vuotta sitten keskukset, joiden ympärillä kaikki elämä oli täydessä vauhdissa, olivat foorumit. Nykyään tämä ei kuitenkaan ole enää niin kätevää ja suosittua, vaan suosituimmat sivustot toimivat nyt blogimuodossa ja käyttäjäviestintä tapahtuu kommenteissa.

Kommentit ovat siis se tekijä, joka erottaa tavalliset sivustot alallaan todella menestyneistä sivustoista. Tämä koskee uutissivustoja, blogeja, kiinnostavia yhteisöjä, joskus jopa verkkokauppoja ja erilaisia ​​erikoistuneita sivustoja.

Kommentit antavat palautetta ja motivaatiota

On myös tärkeää muistaa, että kommentit ovat lukijoiden palautteen lähde, jonka avulla saat selville, mistä he pitävät ja mihin lukijat reagoivat. Ja mitä parempi ja kiinnostavampi sivustosi on vierailijoille, sitä useammin he palaavat luoksesi ja suosittelevat sitä.

Lisäksi palaute on aina hyvä motivaatio tekijöille ja ylläpitäjille itselleen, mikä antaa lähes välittömästi tuntea, että ihmiset ovat kiinnostuneita tekemästäsi ja sivustostasi. Et voi saavuttaa tätä yksinkertaisella kävijälaskimella.

Mitä tarvitsemme kommentointijärjestelmältä?

Mitkä sitten pitäisi olla "oikeita" kommentteja nykyaikaisella verkkosivustolla?

  • Yksinkertaista ja lukijalle ymmärrettävää.
  • Kätevä ja toimiva järjestelmänvalvojille.

Mitä vaihtoehtoja verkkovastaavalla on tällä hetkellä?

Sosiaalisen verkoston widgetit

On vain yksi plus - on melko suuri todennäköisyys, että käyttäjä on jo kirjautunut sosiaaliseen verkostoon, eikä hänen siksi tarvitse rekisteröityä.

Paljon haittoja

venäjänkieliset palvelut

Venäjänkieliset analogit ovat usein täysin maksettuja, eivätkä ne voi ylpeillä houkuttelevasta suunnittelusta.

SV Kament

Ainoa poikkeus tässä on SV Kament -järjestelmä (svkament.ru), joka on täysin ilmainen ja yhdistää erilaisten länsimaisten kommentointijärjestelmien toiminnallisuuden, mutta on samalla keskittynyt venäjänkieliseen segmenttiin.

Katsotaanpa nopeasti, mitä haluaisimme nähdä kommenttijärjestelmässämme.

Puun kommentit joilla on mahdollisuus kutistaa yksittäisiä keskusteluketjuja. Ne ovat erittäin hyödyllisiä navigoimaan keskustelua, kun kommentteja on paljon.

Sosiaalinen kirjautuminen- yksinkertaistaa rekisteröintiä merkittävästi ja lisää näin ollen kommenttien määrää. Länsimaiset tutkimukset osoittavat, että sosiaalisen kirjautumisen käyttö lisää joskus konversioita yli 60 %.

Arvostelukommentit- Ensinnäkin se auttaa korostamaan mielenkiintoisimmat ja arvokkaimmat kommentit, mikä on erittäin kätevä lukijoille, ja toiseksi se rohkaisee käyttäjiä kirjoittamaan mielenkiintoisia viestejä.

Reaaliaikainen toiminta- mitä kätevämpi ja nopeampi järjestelmä toimii, sitä enemmän ihmiset käyttävät sitä ja sitä useammin he kirjoittavat kommentteja.

Ilmoitukset sähköpostilla- kuinka usein menetämme mahdollisia kommentteja vain siksi, että käyttäjä ei tiedä, että joku on vastannut hänen edelliseen viestiinsä.

Johdon näkökulmasta

  • Hallinta suoraan sivustolla.

  • Käyttäjän tiedot.

  • Yksi kommentti ohjauspaneeli koko sivustolle.
  • Mahdollisuus nimittää moderaattoreita.
  • Helppo asentaa.

SV Kament -järjestelmässä on myös useita mielenkiintoisia ominaisuuksia.

  • Sosiaaliset lähetykset- voit "palauttaa" viestintää verkkosivustollesi sosiaalisista verkostoista. Jos sinulla on VKontakte-ryhmä, jossa julkaiset ilmoituksia uusista artikkeleista sivustolla, usein osa artikkeleiden keskustelusta jää itse julkaisun kommentteihin, ja olisi hienoa lähettää nämä kommentit takaisin sivustollesi.

  • Käyttäjäarvio ja tila- voit korostaa aktiivisimpia ja suosituimpia vierailijoita, mikä kannustaa käyttäjiäsi käymään useammin, kommunikoimaan enemmän ja kirjoittamaan muita kiinnostavia viestejä.

Kaikki kerralla?

On melko yleinen käytäntö sijoittaa useita kommentointijärjestelmiä kerralla, esimerkiksi erillinen VKontakte-widget, erillinen Facebook ja erillinen kaikille muille.

Mielestäni tämä on yksi pahimmista päätöksistä, mutta on tärkeää ymmärtää tarkasti, mihin tavoitteisiin pyritään.

Jos sinun on vain kerättävä käyttäjäarvosteluja, tällä menetelmällä on oikeus elämään, vaikka yksinkertainen vieraskirja tai jopa sähköpostiosoite voi riittää tähän.

Jos tavoitteenamme on luoda yhteisöä ja stimuloida käyttäjien välistä kommunikaatiota, niin tämä lähestymistapa on erittäin haitallinen, koska jakamalla kommentteja jaamme itse viestinnän, joten yhden dialogin sijaan saamme joukon toisiinsa liittymättömiä viestejä.

Millaisia ​​kommentteja käytät? Pidätkö kommentteja tärkeänä sivustollesi, ja kuinka kätevää ja tehokasta pidät kommentteja sivustollasi?