Programmering med Yii2 Bygga gemenskapen med omröstning, kommentarer och delning

I denna Programmering med Yii2-serien, Jag vägledande läsare som använder Yii2 Framework for PHP. Du kanske också är intresserad av mina Introduktion till Yii Framework, som granskar fördelarna med Yii och innehåller en översikt över vad som är nytt i Yii 2.x.

Introduktion

I dagens handledning kommer jag att visa dig hur du utökar Yii för att enkelt efterlikna en webbplats som Reddit med omröstning, kommentarer och delning.

Nyligen har jag arbetat med att skapa min egen personliga förlängning av den stora Yii avancerade mallen. Mallen ger inbyggd användarregistrering och autentisering och flera webbplatser för front-end och administrativa webbplatser.

Jag byggde några mina senaste Twitter API-episoder i den tidiga versionen av denna plattform, följer vänner på uppdrag av användarna och analyserar våra anhängare. Den plats jag beskrivit i dem, Twixxr, utgör grunden för mitt Yii-anpassningsarbete.

Så att lägga till kärnfunktionalitet som att rösta, kommentarer och delning ger så mycket mening. När du utökar din Yii-kodbas med dessa typer av funktioner blir byggandet av nya webbplatser snabbare, enklare och alltmer kraftfullt. 

Komma igång

Jag ska gå igenom dig genom att använda tre Yii2 plugins:

• Chiliecs Yii2 omröstningsförlängning
• 2Amigos Yii2 Disqus Comments Extension
• Kartiks Yii2 Social Extension

De gör det relativt snabbt och enkelt att bygga en kraftfull social gemenskap på Yii2. 

Jag har skapat en modell som heter Artikel vilket representerar ett objekt som du vill att användarna ska rösta på, kommentera och dela. 

Uppriktigt sagt, efter att ha byggt objektsidorna med de här funktionerna i min plattform, kände jag mig mer imponerad än någonsin med Yii ... mer imponerad än jag har hittat, även bygga min startserie. Du kan göra så mycket med denna ram.

Låt oss gräva in.

Installera tillägg

Låt oss först lägga till alla tre tillägg till composer.json på en gång:

"namn": "yiisoft / yii2-app-advanced", "description": "Yii 2 avancerad projektmall", "nyckelord": ["yii2", "ram", "avancerat", "projektmall"] "hemsida": "http://www.yiiframework.com/", "typ": "projekt", "licens": "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 "," minimal stabilitet " , "kräver": "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-röst": "^ 4.0", "yiido c / yii2-redaktor ":" * "," kartik-v / yii2-social ":" @dev "

Kör sedan kompositör uppdatering.

Lägga till omröstning

Vladimir Babin är Chiliec, och jag gillar hur han och andra har samarbetat för att skapa denna plugin. Alla de grundläggande funktionerna du vill inkluderas, och du kan enkelt anpassa den, speciellt genom att överväga visningen. De har stor dokumentation och håller den väl uppdaterad också.

Här är ett användbart animerat gif av plugins standardfunktioner som de är värd för GitHub. Jag har lagt upp en statisk bild nedan (Envato Tuts + stöder inte gifs i våra handledning).

Självklart bestämde jag mig för att anpassa vyn och eliminera rösterna, och det var ganska enkelt.

Konfiguration

Därefter lägger vi till röstningspluggen till /active/config/main.php så att den laddas överallt i bootstrap och konfigureras för vår applikation:

returnera ['id' => 'app-aktiv', 'basePath' => namnnamn (__ DIR__), 'bootstrap' => ['chiliec \ vote \ components \ VoteBootstrap', 'logg', '\ common \ components \ SiteHelper '],' modules '=> [...' vote '=> [' class '=>' chiliec \ vote \ Module ', // visa meddelanden i popover' popOverEnabled '=> true, // globala värden för alla modeller / / 'allowGuests' => true, // 'allowChangeVote' => true, 'models' => [1 => ['modelName' => \ aktiv \ models \ Item :: className (), 'allowGuests' => false ,], // exempel modelldeklaration // \ common \ models \ Post :: className (), // 'backend \ models \ Post', // 2 => 'frontend \ models \ Story', // 3 = > [// 'modelName' => \ backend \ models \ Mail :: className (), // du kan skriva om globala värden för en specifik modell // 'allowGuests' => false, // 'allowChangeVote' => false / /],],], 

Du kan se att jag har stängt av gäströstning så att folk måste anmäla sig för att rösta på saker.

Databasintegration

Därefter måste du köra databas migreringen för att skapa tabeller som spårar rösterna.

$ php yii migrera / upp - migrationPath = @ leverantör / chiliec / yii2-vote / migrations

Det är viktigt att du kommer ihåg att köra den här migranten när du installerar din produktserver! Det är ganska lätt att glömma.

Visar omröstnings widgeten

Min objektmodell är en del av en samlingsmodell med namnet Topic, så du kan hitta delvy för min röstnings widget i /views/topic/_item.php:

 
 
  $ modell, // valfria fält 'showAggregateRating' => false,]);?> 

Ämneindexsamtal visar ett rutnät som visas _item.php som en rad. Jag ville inte visa en rating, bara de positiva rösterna totalt, så jag satte det på felaktigt sätt.

För att åsidosätta visningen skapade jag /views/vote/vote.php:

 
 
  :   
 
 
       
 

Inte många plugins gör överordnade så lätt.

Jag tog bort ikonen för omröstning och ändrade omröstningsikonet till en chevron. Så här ser det ut nu:

Jag vet att det verkar som många lager, men det tog inte för lång tid för att få det att fungera.

Lägga till Disqus kommentarer

Därefter skapade jag en Disqus-webbplats för den kommande webbplatsen ActiveTogether.org, som kommer att finnas tillgänglig för dig att se dessa funktioner i åtgärd när du läser detta. Således är Disqus-platsens smeknamn "aktiv-tillsammans".

Jag började använda 2Amigos-widgeten innan jag integrerade Kartiks sociala förlängning (diskuteras nedan), som också erbjuder Disqus kommentarer.

Skapa en unik identifierare för varje kommentarkort

När en ny artikel skapas, kommer den Objektet :: beforeSave () åtgärd skapar en unik identifierare för disqus för att länka kommentarer också. Du kan också förlita sig på en webbadress, men det är mer förutsägbart i allmänhet.

Med andra ord, Disqus samlar alla kommentarer för varje enskilt objekt separat, och det hjälper till att göra varje objekts kommentarkort.

public function beforeSave ($ insert) if (förälder :: beforeSave ($ insert)) om ($ insert) $ this-> identifier = Yii :: $ app-> security-> generateRandomString (8); $ this-> site_id = Yii :: $ app-> params ['site'] ['id'];  returnera sant; 

Visar kommentarerna

Då visas kommentarkortet längst ner i objektvyn i /active/views/Item.php:

 'aktiv-tillsammans', 'identifierare' => $ modell-> identifierare,]); ?>

Lägg märke till hur widgeten behöver kort namn och den identifierare att ge disqus för kommentarerna.

Här är ett exempel på hur kommentaren ser ut:

Indexvisningen med kommentarantal

2Amigos använder även Disqus JavaScript-bibliotek för att visa kommentarer. Men det finns några stycken att sätta ihop för att få det att hända.

Först skapade jag ett jQuery-skript för att begära ett objekts kommentarantal. När det finns många objekt på en sida måste du begära det med återställ: true;:

$ (dokument) .ready (funktion () DISQUSWIDGETS.getCount (återställ: true);); 

Sedan skapade jag en TopicAsset.php-fil för att ladda .js-filen:

Då registrerar /active/views/Topic.php filen TopicAsset-bunt:
Därefter innehåller varje _item.php-del ett kommentarantal:
render ('_ social', ['model' => $ modell, 'includeCommentCount' => true]);?>
Och den _social delvis visar det så här med varje objekt-> identifierare:
slug. '# disqus_thread'], ['data-disqus-identifier' => $ modell-> identifierare))>  'aktiv-tillsammans', 'identifierare' => $ modell-> identifierare,]); ?>
För att Disqus ska kunna hitta var för att uppdatera element med kommentarantal måste varje länk sluta med #disqus_thread.
Här är den sidan som ser ut. Varje objekt har en tydlig kommentarräkning laddad genom att hänvisa till dess identifierare:
Låt oss gå vidare till de sociala delningsknapparna du har sett.
Lägga till social delning
Kartik har gjort ett bra jobb med sin sociala widget som bygger en grundläggande konfiguration för anslutning till ett antal sociala företag som Twitter, Disqus och Facebook. För tillfället använder jag bara Facebook-delningsknappen. Twitters delningsknapp har inte mycket bra estetik, så jag ersatte den med en HTML-webbintensiv länk.
Här är min kod för paret av knappar bredvid kommentarerna i /active/views/topic/_social.php:
 
titel); ?> & url = & Via =params ['site'] ['twitter_account']?> "> Tweet
 
FacebookPlugin :: SHARE, 'settings' => ['dataSize' => 'liten', 'class' => "fb_iframe_widget"]]); ?>
  
Verkar enkelt, förutom att vertikalt anpassning av Facebook-widgeten kräver vissa CSS-anpassningar. I /active/views/topic/_grid.php lade jag denna justering:
 
Det måste komma efter att andra CSS-filer laddas.
Och i filen site.css lade jag det här för att få det exakta utseendet jag ville ha:
.share_adjust_vert margin-top: -1px; font-size: 90%; vertikaljustering: topp; 
Avslutar
Ärligt talat är jag så upphetsad över hur lätt det var att använda Yii och i huvudsak skapa en mini social klon. Det här är fantastiska plugins för en bra ram, och i allmänhet är Yiis utvecklare och dess community av plugin-utvecklare responsiva på GitHub med frågor och problem.
Jag hoppas att du är angelägen om att kolla ActiveTogether och prova denna ram för dig själv.
Om du har några frågor eller förslag, vänligen skicka in dem i kommentarerna. Om du vill hålla koll på mina framtida Envato Tuts + handledning och andra serier, besök min instruktörssida eller följ @lookahead_io. Kolla in min start-serie och mötesplanerare.
relaterade länkar
 
2Amigos Yii2 Disqus Comments Extension
 
Chiliecs Yii2 omröstningsförlängning
 
Kartiks Yii2 Social Extension
 
 Yii2 Developer Exchange, min Yii2 resurs webbplats
 



		
			
	   
	




Koda