Programmering med Yii2 Bygg fellesskap med avstemning, kommentarer og deling

Hva du skal skape

I dette Programmering med Yii2-serien, Jeg veileder lesere i bruk av Yii2 Framework for PHP. Du kan også være interessert i min Introduksjon til Yii Framework, som vurderer fordelene med Yii og inneholder en oversikt over hva som er nytt i Yii 2.x.

Introduksjon

I dagens veiledning skal jeg vise deg hvordan du kan utvide Yii for å enkelt etterligne et nettsted som Reddit med å stemme, kommentere og dele.

Nylig har jeg jobbet med å skape min egen personlige utvidelse av den store Yii avanserte malen. Malen gir innebygd brukerregistrering og autentisering og flere nettsteder for front-end og administrative nettsteder.

Jeg bygget noen av de nyeste Twitter API-episodene mine på den tidlige versjonen av denne plattformen, følger venner på vegne av brukerne og analyserer våre tilhenger. Nettstedet jeg beskrev i disse, Twixxr, danner grunnlaget for mitt Yii-tilpassingsarbeid.

Så legger du til kjernefunksjonalitet som å stemme, kommentarer og deling gir så mye mening. Når du utvider din Yii-kodebase med slike funksjoner, blir bygging av nye nettsteder raskere, enklere og stadig kraftigere.

Starter

Jeg kommer til å gå deg gjennom å bruke tre Yii2 plugins:

Chiliecs Yii2 stemmeforlengelse
2Amigos Yii2 Disqus Comments Extension
Kartik er Yii2 sosial forlengelse

De gjør det relativt raskt og enkelt å bygge et kraftig sosialt samfunn på Yii2.

Jeg har opprettet en modell som heter Punkt som representerer et objekt som du vil at brukerne skal stemme på, kommentere og dele.

Helt ærlig, etter å ha bygget elementene med disse funksjonene i plattformen min, følte jeg meg mer imponert enn noensinne med Yii ... mer imponert enn jeg har vært til dags, selv bygge opp oppstartsserien. Du kan gjøre så mye med dette rammeverket.

La oss grave inn.

Installere utvidelsene

Først legger vi alle tre utvidelsene til composer.json på en gang:

"navn": "yiisoft / yii2-app-advanced", "beskrivelse": "Yii 2 Avansert prosjektmal", "søkeord": ["yii2", "rammeverk", "avansert", "prosjektmal" "hjemmeside": "http://www.yiiframework.com/", "type": "prosjekt", "lisens": "BSD-3-Clause", "support": "issues": "https: / /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 "," source ":" https://github.com/yiisoft/yii2 "," minimumstabilitet " , "krever": "php": "> = 5.4.0", "yiisoft / yii2": "> = 2.0.10", "yiisoft / yii2-bootstrap": "*", "yiisoft / yii2-swiftmailer ":" * "," yiisoft / yii2-authclient ":" ~ 2.1.0 "," google / apiclient ":" 1.0.*@beta "," machour / yii2-google-apiclient ":" @ dev " "machour / yii2-google-gmail": "@dev", "ruskid / yii2-stripe": "dev-master", "2 amigos/yii2-disqus-widget": "~ 1.0", "abraham / twitteroauth" "*", "codeception / codeception": "*", "notamedia / yii2-sentry": "^ 1.1", "chiliec / yii2-stemme": "^ 4,0", "yiido c / yii2-redaktor ":" * "," kartik-v / yii2-sosialt ":" @dev "

Kjør deretter komponistoppdatering.

Legger til stemme

Vladimir Babin er Chiliec, og jeg liker veldig mye hvordan han og andre har samarbeidet for å lage denne plugin. Alle de grunnleggende funksjonene du vil ha er inkludert, og du kan enkelt tilpasse den, spesielt ved å overstyre visningen. De har god dokumentasjon og holder det godt oppdatert også.

Her er et nyttig animert gif av pluginens standardfunksjoner som de er vert for på GitHub. Jeg har lagt inn et statisk bilde nedenfor (Envato Tuts + støtter ikke gifs i våre opplæringsprogrammer).

Selvfølgelig bestemte jeg meg for å tilpasse visningen og eliminere stemmer, og det var ganske enkelt.

konfigurasjon

Deretter legger vi til stemmeprofilen til /active/config/main.php slik at den lastes overalt i oppstartsfelt og er konfigurert for vår søknad:

returnere ['id' => 'app-aktiv', 'basePath' => dirname (__ DIR__), 'bootstrap' => ['chiliec \ vote \ komponenter \ VoteBootstrap', 'log', '\ common \ components \ SiteHelper '],' modules '=> [...' vote '=> [' class '=>' chiliec \ vote \ Module ', // vis meldinger i popover' popOverEnabled '=> true, // globale verdier for alle modeller / / 'allowGuests' => true, // 'allowChangeVote' => sant, 'models' => [1 => ['modelName' => \ aktiv \ modeller \ Item :: className (), 'allowGuests' => false ,], // eksempel modellerklæring // \ felles \ modeller \ Post :: className (), // 'backend \ models \ Post', // 2 => 'frontend \ models \ Story', // 3 = > [// 'modelName' => \ backend \ models \ Mail :: className (), // du kan omskrive globale verdier for en bestemt modell // 'allowGuests' => false, // 'allowChangeVote' => false / /],],],

Du kan se at jeg har slått av gjestestemming slik at folk må registrere seg for å stemme på ting.

Database Integrasjon

Deretter må du kjøre databasemigrasjonen for å lage tabeller som sporer stemmeene.

$ php yii migrere / opp --migrationPath = @ leverandør / chiliec / yii2-stemme / migrasjoner

Det er viktig å huske å kjøre denne overføringen når du installerer produktserveren din! Det er ganske enkelt å glemme.

Viser stemmevinduet

Min varemodell er en del av en samlingsmodell som heter Emne, så du kan finne delvis visning for min stemme-widget i /views/topic/_item.php:

    $ modell, // valgfrie felt 'showAggregateRating' => false,]);?>

Emneindeksanrop viser et rutenett som vises _item.php som en rad. Jeg ønsket ikke å vise en vurdering, bare de positive stemmerotaler, så jeg satte det til falsk.

For å overstyre visningen, opprettet jeg /views/vote/vote.php:

Ikke mange plugins gjør overordnet så enkelt.

Jeg fjernet avstemningsikonet og endret stemningsikonet til en chevron. Slik ser det ut nå:

Jeg vet at dette virker som mange lag, men det tok ikke for lang tid å få det til å fungere.

Legger til disqus kommentarer

Deretter opprettet jeg et Disqus-nettsted for det kommende nettstedet, ActiveTogether.org, som vil være tilgjengelig for deg for å se disse funksjonene i handlingen når du leser dette. Dermed er Disqus-nettstedets kallenavn 'aktiv-sammen'.

Jeg begynte å bruke 2Amigos 'widget før jeg integrerte Kartiks sosiale utvidelse (diskutert nedenfor), som også tilbyr Disqus kommentarer.

Opprette en unik identifikator for hver kommentarkort

Når en ny gjenstand er opprettet, vil Sak :: beforeSave () handling skaper en unik identifikator for disqus for å lenke kommentarer også. Du kan også stole på nettadressen til en side, men dette er mer forutsigbart generelt.

Disqus samler med andre ord alle kommentarer for hvert element separat, og det hjelper til med å gjøre opp hvert elements kommentarkort.

offentlig funksjon beforeSave ($ insert) if (foreldre :: beforeSave ($ insert)) hvis ($ insert) $ this-> identifier = Yii :: $ app-> sikkerhet-> generateRandomString (8); $ this-> site_id = Yii :: $ app-> params ['site'] ['id'];  returnere sann;

Viser kommentarene

Deretter vises kommentarbrettet lett nederst i elementvisningen i /active/views/Item.php:

 'aktiv-sammen', 'identifier' => $ modell-> identifikator,]); ?>

Legg merke til hvordan widgeten trenger kort navn og identifikator å gi Disqus for kommentarene.

Her er et eksempel på hvordan kommentaren ser ut som:

Indeksvisningen med kommentar teller

2Amigos utnytter også Disqus JavaScript-bibliotekene for å vise kommentarteller. Men det er et par stykker å sette sammen for å få dette til å skje.

Først opprettet jeg et jQuery-skript for å be om et elements kommentarfelt. Når det er mange elementer på en side, må du be om det tilbakestill: true;:

$ (dokument) .ready (funksjon () DISQUSWIDGETS.getCount (reset: true););

Da opprettet jeg en TopicAsset.php-fil for å laste .js-filen:

Deretter registrerer /active/views/Topic.php filen TopicAsset bunt:

Deretter inkluderer hver _item.php delvis en kommentartelling:

render ('_ sosial', ['model' => $ modell, 'includeCommentCount' => true]);?>

Og _sosial delvis viser det slik ved hjelp av hvert element-> identifikator:

slug. '# disqus_thread'], ['data-disqus-identifier' => $ modell-> identifikator])>  'aktiv-sammen', 'identifier' => $ modell-> identifikator,]); ?>

For at Disqus skal finne hvor du skal oppdatere elementer med kommentar teller, må hver lenke ende med #disqus_thread.

Slik ser den siden ut. Hvert element har en tydelig kommentartelling lastet ved å referere til identifikatoren sin:

La oss gå videre til de sosiale delingsknappene du har sett.

Legge til sosial deling

Kartik har gjort en god jobb med sin sosiale widget, og bygger en grunnleggende konfigurasjon for tilkobling til en rekke sosiale selskaper som Twitter, Disqus og Facebook. For nå bruker jeg bare Facebook-deleknappen. Twitter-delingsknappen har ikke veldig god estetikk, så jeg erstattet den med en HTML-web-intent-link.

Her er koden min for parknappene ved siden av kommentarene teller i /active/views/topic/_social.php:

 tittel); ?> & url = & Via =params ['site'] ['twitter_account']?> "> Tweet
 FacebookPlugin :: SHARE, 'settings' => ['dataSize' => 'small', 'class' => "fb_iframe_widget"]]); ?>

Synes enkelt, bortsett fra at vertikaljustering av Facebooks widget krever noen CSS-justeringer. I /active/views/topic/_grid.php, plasserte jeg denne justeringen:

Den må komme etter at de andre CSS-filene er lastet.

Og i siden site.css, plasserte jeg dette for å få det nøyaktige utseendet jeg ønsket:

.share_adjust_vert margin-top: -1px; font-size: 90%; vertikaljustering: topp;

Wrapping Up

Ærlig, jeg er så spent på hvor lett det var å bruke Yii og i hovedsak lage en mini sosial klon. Disse er flotte plugin for et flott rammeverk, og generelt er Yiis utviklere og dets fellesskap av plugin-utviklere responsive på GitHub med spørsmål og problemer..

Jeg håper du er ivrig etter å sjekke ut ActiveTogether og prøve ut dette rammeverket for deg selv.

Hvis du har spørsmål eller forslag, vennligst legg inn dem i kommentarene. Hvis du vil fortsette med fremtidige Envato Tuts + opplæringsprogrammer og andre serier, vennligst besøk min instruktørside eller følg @lookahead_io. Sjekk sjekk ut min oppstartsserie og møteplanlegger.

Relaterte linker

2Amigos Yii2 Disqus Comments Extension
Chiliecs Yii2 stemmeforlengelse
Kartik er Yii2 sosial forlengelse
Yii2 Developer Exchange, min Yii2 ressurs side

Kode