Programarea cu Yii2 Construirea comunității cu vot, comentarii și partajare

In acest Programare cu seria Yii2, Îi conduc cititorii în folosirea cadrului Yii2 pentru PHP. Ați putea fi, de asemenea, interesat de mine Introducere în Cadrul Yii, care examinează beneficiile Yii și include o prezentare generală a ceea ce este nou în Yii 2.x.

Introducere

În tutorialul de astăzi, vă voi arăta cum să extindeți Yii pentru a imita cu ușurință un site precum Reddit cu votare, comentarii și partajare.

Recent, am lucrat la crearea propriei extensii personale a modelului mare Yii avansat. Șablonul oferă înregistrarea și autentificarea încorporată de utilizator și mai multe site-uri pentru site-urile web front-end și administrative.

Am construit ultimele mele episoade Twitter API pe versiunea timpurie a acestei platforme, urmărind prietenii în numele utilizatorilor și analizându-i pe urmașii noștri. Site-ul pe care l-am descris în acestea, Twixxr, formează temelia muncii mele de personalizare Yii.

Așadar, adăugarea de funcții de bază, cum ar fi votarea, comentariile și schimbul de informații, au atât de multă sens. Pe măsură ce extindeți codul dvs. Yii cu astfel de caracteristici, construirea de noi site-uri devine mai rapidă, mai ușoară și din ce în ce mai puternică. 

Noțiuni de bază

Am să vă conduc prin utilizarea a trei pluginuri Yii2:

• Extensia de vot Yii2 a lui Chiliec
• 2Amigos Yii2 Disqus Comentarii Extensie
• Extensia socială Yii2 a lui Kartik

Ei fac relativ repede și ușor să construiască o puternică comunitate socială pe Yii2. 

Am creat un model numit Articol care reprezintă un obiect pe care doriți ca utilizatorii să voteze, să comenteze și să le împărtășească. 

Sincer, după ce am construit paginile de elemente cu aceste caracteristici în platforma mea, m-am simțit mai impresionat ca niciodată cu Yii ... mai impresionat decât am fost până acum, chiar construindu-mi seriile de pornire. Puteți face atât de mult cu acest cadru.

Hai să intrăm.

Instalarea extensiilor

Mai întâi, să adăugăm simultan toate cele trei extensii la composer.json:

"name": "yiisoft / yii2-app-advanced", "descriere": "Yii 2 Advanced Project Template" "homepage": "http://www.yiiframework.com/", "tip": "proiect", "licență": "BSD-3-Clauză", " /github.com/yiisoft/yii2/issues?state=open "," forum ":" http://www.yiiframework.com/forum/ "," wiki ":" http://www.yiiframework.com/ wiki / "," irc ":" irc: //irc.freenode.net/yii "," sursă ":" https://github.com/yiisoft/yii2 "," minimum-stability " , "necesită": "php": "> = 5.4.0", "yiisoft / yii2": "> 2.0.10", "yiisoft / yii2-bootstrap" ":" * "," yiisoft / yii2-authclient ":" ~ 2.1.0 "," google / apiclient ":" 1.0.*@beta "," machour / yii2-google-apiclient " "google-gmail": "@dev", "ruskid / yii2-stripe": "dev-master", "2 amigos/yii2-disqus-widget": "~ 1.0", "abraham / twitteroauth" "*", "codeception / codeception": "*", "notamedia / yii2-santine": "^ 1.1", "chiliec / yii2-vote" c / yii2-editor ":" * "," kartik-v / yii2-social ":"

Atunci fugi compozitor.

Adăugarea votării

Vladimir Babin este Chiliec, și îmi place foarte mult modul în care el și alții au colaborat pentru a crea acest plugin. Toate caracteristicile de bază pe care le doriți sunt incluse și puteți personaliza cu ușurință, mai ales prin suprimarea vederii. Ei au o documentație excelentă și o păstrează și actualizată.

Iată un gif animat util al caracteristicilor implicite ale pluginului pe care le găzduiesc pe GitHub. Am postat o imagine statică mai jos (Envato Tuts + nu acceptă gifuri în tutorialele noastre).

Desigur, am decis să personalizez viziunea și să elimine voturile, și a fost destul de ușor.

configurație

Apoi, adăugăm pluginul de vot la /active/config/main.php astfel încât să fie încărcat peste tot în bootstrap și configurat pentru aplicația noastră:

retur ['id' => 'app-active', 'basePath' => dirname (__DIR__), 'bootstrap' => [common_components \ SiteHelper '],' modules '=> [...' vote '=> [' class '=>' chiliec \ vote \ Module ', // show messages in popover' popOverEnabled '=> true, // valori globale pentru toate modelele / / 'allowGuests' => true, // 'allowChangeVote' => true, 'models' => [1 => ['modelName' => \ active \ models \ Item :: className ,], // exemplu declarație de modele // \ common \ models \ Post :: className (), // 'backend \ models \ Post', // 2 => 'frontend \ models \ Story' > [// 'modelName' => \ backend \ models \ Mail :: className (), // puteți rescrie valorile globale pentru un anumit model // 'allowGuests' => false, // 'allowChangeVote' => false, / /],],], 

Puteți vedea că am oprit votul pentru oaspeți, astfel încât oamenii să fie obligați să se înscrie pentru a vota articolele.

Integrarea bazelor de date

Apoi, trebuie să executați migrarea bazei de date pentru a crea tabele care urmăresc voturile.

$ php yii migra / up - migrarePath = @ vendor / chiliec / yii2-vot / migrații

Este important să vă amintiți să rulați această migrare când instalați serverul de produs! E ușor de uitat.

Afișarea widgetului de vot

Modelul meu element face parte dintr-un model de colecție numit Subiect, astfel încât să puteți găsi vizualizarea parțială pentru widgetul meu de vot în /views/topic/_item.php:

 
 
  $ model, // campuri opționale 'showAggregateRating' => false,]);?> 

Apelurile index index afișează o rețea care afișează _item.php ca un rând. Nu am vrut să afișez un rating, doar totalul voturilor pozitive, așa că l-am stabilit la fals.

Pentru a ignora vizualizarea, am creat /views/vote/vote.php:

 
 
  :   
 
 
   
 

Nu prea multe plugin-uri fac ca acest lucru sa fie foarte usor.

Am eliminat pictograma de vot jos și mi-am schimbat pictograma votului până la un chevron. Iată cum arată acum:

Știu că asta pare a fi o mulțime de straturi, dar de fapt nu a durat prea mult pentru a face să funcționeze.

Adăugarea comentariilor Disqus

Apoi, am creat un site Disqus pentru site-ul viitoare, ActiveTogether.org, care va fi disponibil pentru a vedea aceste caracteristici în acțiune până la momentul în care ați citit acest lucru. Astfel, shortname-ul site-ului Disqus este "activ-împreună".

Am început să folosesc widget-ul lui 2Amigos înainte să integrez extensia socială a lui Kartik (discutată mai jos), care oferă, de asemenea, comentarii Disqus.

Crearea unui identificator unic pentru fiecare tabel de comentarii

Ori de câte ori este creat un nou element, Articol :: beforeSave () acțiunea creează un identificator unic pentru Disqus pentru a lega și comentariile. De asemenea, puteți să vă bazați pe adresa URL a unei pagini, dar aceasta este mai previzibilă în general.

Cu alte cuvinte, Disqus colaționează toate comentariile pentru fiecare element separat și care ajută la formarea tabloului de comentarii al fiecărui element.

funcția publică înainteSave ($ insert) if (părinte :: beforeSave ($ insert)) if ($ insert) $ acest-> identificator = Yii :: $ app-> security-> generateRandomString (8); $ this-> site_id = Yii :: $ app-> params ['site'] ['id'];  return true; 

Afișarea comentariilor

Apoi, placa de comentarii este afișată cu ușurință în partea de jos a vizualizării elementului în /active/views/Item.php:

 'activ-împreună', 'identificator' => model model-> identificator,]); ?>

Observați modul în care widgetul are nevoie nume scurt si identificator pentru a oferi Disqus pentru comentarii.

Iată un exemplu despre cum arată placa de comentarii:

Vizualizarea indexului cu numărul de comentarii

2Amigos utilizează, de asemenea, librăriile Disqus JavaScript pentru afișarea numărului de comentarii. Dar sunt câteva piese pe care să le punem împreună pentru a face acest lucru să se întâmple.

Mai intai, am creat un script jQuery pentru a solicita numarul comentariilor unui articol. Când există o mulțime de elemente pe o pagină, trebuie să o solicitați resetare: adevărat;:

$ (document) .ready (funcția () DISQUSWIDGETS.getCount (reset: true);); 

Apoi am creat un fișier TopicAsset.php pentru a încărca fișierul .js:

Apoi, fișierul /active/views/Topic.php înregistrează Pachet TopicAsset:
Apoi, fiecare _item.php parțial include un număr de comentarii:
render ('_ social', 'model' => $ model, 'includeCommentCount' => true]);?>
Si _social afișează parțial acest lucru folosind fiecare element -> identificator:
"disqus_thread"], ['data-disqus-identifier' => $ model-> identificator])?>  'activ-împreună', 'identificator' => model model-> identificator,]); ?>
Pentru ca Disqus să găsească unde să actualizeze elementele cu numărul de comentarii, fiecare legătură trebuie să se încheie cu #disqus_thread.
Iată cum arată acea pagină. Fiecare element are un număr distinct de comentarii încărcat prin referirea identificatorului său:
Să trecem la acele butoane de partajare socială pe care le-ați văzut.
Adăugarea partajării sociale
Kartik a făcut o treabă minunată cu widgetul său social construind o configurație de bază pentru conectarea la o serie de companii sociale precum Twitter, Disqus și Facebook. Deocamdată, folosesc doar butonul de partajare Facebook. Butonul de partajare Twitter nu are o estetică foarte bună, așa că l-am înlocuit cu un link HTML intentions.
Iată codul meu pentru perechea de butoane de lângă comentariile conta în /active/views/topic/_social.php:
 
titlu); ? & & url = & Via =params ['site'] ['twitter_account']?> "> Tweet
 
FacebookPlugin :: SHARE, 'setări' => ['dataSize' => 'mic', 'class' => "fb_iframe_widget"]]); ?>
  
Se pare simplu, cu excepția faptului că alinierea verticală a widgetului Facebook necesită anumite ajustări CSS. În /active/views/topic/_grid.php, am plasat această ajustare:
 
Trebuie să vină după încărcarea celorlalte fișiere CSS.
Și, în fișierul site.css, am plasat aceasta pentru a obține aspectul exact pe care l-am dorit:
.share_adjust_vert margin-top: -1px; font-size: 90%; vertical-aliniere: partea de sus; 
Înfășurarea în sus
Sincer, sunt atât de încântat de cât de ușor a fost să folosesc Yii și, în esență, să creez o clonă socială mini. Acestea sunt plugin-uri excelente pentru un cadru minunat și, în general, dezvoltatorii Yii și comunitatea de dezvoltatori de plugin-uri sunt receptivi la GitHub cu întrebări și probleme.
Sper că sunteți dornici să vizitați ActiveTogether și să încercați acest cadru pentru dvs. înșivă.
Dacă aveți întrebări sau sugestii, vă rugăm să le postați în comentarii. Dacă doriți să respectați viitoarele tutoriale și alte serii Envato Tuts +, vizitați pagina mea de instructor sau urmați @lookahead_io. În mod sigur, verificați seria de pornire și Planificatorul de întâlniri.
Link-uri conexe
 
2Amigos Yii2 Disqus Comentarii Extensie
 
Extensia de vot Yii2 a lui Chiliec
 
Extensia socială Yii2 a lui Kartik
 
 Yii2 Developer Exchange, site-ul meu de resurse Yii2
 



		
			
	   
	




Cod