Programmeren met Yii2 community bouwen met stemmen, opmerkingen en delen

Wat je gaat creëren

In deze Programmeren met de Yii2-serie, Ik leid lezers in gebruik van het Yii2 Framework voor PHP. Mogelijk bent u ook geïnteresseerd in mijn Introductie tot het Yii Framework, die de voordelen van Yii beoordeelt en een overzicht bevat van wat er nieuw is in Yii 2.x.

Invoering

In de tutorial van vandaag laat ik je zien hoe je Yii kunt uitbreiden om gemakkelijk een site zoals Reddit na te bootsen met stemmen, opmerkingen en delen.

Onlangs heb ik gewerkt aan het maken van mijn eigen persoonlijke extensie van de geavanceerde geavanceerde sjabloon van Yii. De sjabloon biedt ingebouwde gebruikersregistratie en -verificatie en meerdere sites voor front-end en administratieve websites.

Ik heb een aantal van mijn nieuwste Twitter API-afleveringen gebouwd op de vroege versie van dit platform, volgde vrienden op namens gebruikers en analyseerde onze volgers. De site die ik daarin beschreef, Twixxr, vormt de basis van mijn Yii-aanpassingswerk.

Dus het toevoegen van kernfunctionaliteit zoals stemmen, opmerkingen en delen heeft zoveel zin. Naarmate je je Yii-codebase uitbreidt met dit soort functies, wordt het bouwen van nieuwe sites sneller, eenvoudiger en steeds krachtiger.

Ermee beginnen

Ik zal je helpen om drie Yii2-plug-ins te gebruiken:

Chiliec's Yii2 stemuitbreiding
2Amigos Yii2 Disqus Commentaar Verlenging
Kartik's Yii2 sociale extensie

Ze maken het relatief snel en gemakkelijk om een krachtige sociale gemeenschap te bouwen op Yii2.

Ik heb een model gemaakt met de naam Item Dit is een object waarop u wilt stemmen, opmerkingen wilt plaatsen en wilt delen.

Eerlijk gezegd, na het bouwen van de itempagina's met deze functies in mijn platform, voelde ik me meer dan ooit onder de indruk van Yii ... meer onder de indruk dan tot nu toe met het bouwen van mijn startup-serie. Je kunt zoveel doen met dit framework.

Laten we ingaan.

De uitbreidingen installeren

Laten we eerst alle drie extensies tegelijk toevoegen aan composer.json:

"naam": "yiisoft / yii2-app-advanced", "description": "Yii 2 Advanced Project Template", "keywords": ["yii2", "framework", "advanced", "projectsjabloon"], "homepage": "http://www.yiiframework.com/", "type": "project", "licentie": "BSD-3-clausule", "ondersteuning": "problemen": "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 "," minimum-stability ":" stable " , "require": "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-vote": "^ 4.0", "yiido c / yii2-redactor ":" * "," kartik-v / yii2-social ":" @dev "

Ren dan update van de componist.

Stemmen toevoegen

Vladimir Babin is Chiliec en ik vind de manier waarop hij en anderen hebben samengewerkt om deze plug-in te maken heel erg leuk. Alle basisfuncties die u wilt, zijn inbegrepen en u kunt deze eenvoudig aanpassen, met name door de weergave te negeren. Ze hebben geweldige documentatie en houden het ook goed bijgewerkt.

Hier is een handig geanimeerd GIF van de standaardfuncties van de plug-in die ze op GitHub hosten. Ik heb een statische afbeelding hieronder gepost (Envato Tuts + ondersteunt gifs niet in onze tutorials).

Natuurlijk besloot ik om de weergave aan te passen en stemmen te elimineren, en dat was vrij eenvoudig.

Configuratie

Vervolgens voegen we de stemmingsinvoegtoepassing toe aan /active/config/main.php, zodat deze overal in bootstrap wordt geladen en voor onze toepassing wordt geconfigureerd:

return ['id' => 'app-actief', 'basePath' => dirname (__ DIR__), 'bootstrap' => ['chiliec \ vote \ components \ VoteBootstrap', 'log', '\ common \ components \ SiteHelper '],' modules '=> [...' vote '=> [' class '=>' chiliec \ vote \ Module ', // show messages in popover' popOverEnabled '=> true, // global values for all models / / 'allowGuests' => true, // 'allowChangeVote' => true, 'models' => [1 => ['modelName' => \ active \ modellen \ Item :: className (), 'allowGuests' => false ,], // voorbeeldverklaring van modellen // \ veelvoorkomende \ modellen \ Post :: className (), // 'backend \ models \ Post', // 2 => 'frontend \ modellen \ Story', // 3 = > [// 'modelName' => \ backend \ models \ Mail :: className (), // je kunt globale waarden herschrijven voor een specifiek model // 'allowGuests' => false, // 'allowChangeVote' => false, / /],],],

U kunt zien dat ik het stemmen van gasten heb uitgeschakeld, zodat mensen zich moeten aanmelden om op items te stemmen.

Database-integratie

Vervolgens moet u de databasemigratie uitvoeren om tabellen te maken die de stemmen bijhouden.

$ php yii migrate / up --migrationPath = @ vendor / chiliec / yii2-vote / migrations

Het is belangrijk om te onthouden om deze migratie uit te voeren bij het installeren van uw productserver! Het is vrij gemakkelijk om te vergeten.

De stemwidget weergeven

Mijn itemmodel maakt deel uit van een verzamelmodel met de naam Onderwerp, zodat je de gedeeltelijke weergave voor mijn stemhistorie kunt vinden in /views/topic/_item.php:

    $ model, // optionele velden 'showAggregateRating' => false,]);?>

Topic index calls geeft een raster weer dat wordt weergegeven _item.php als een rij. Ik wilde geen beoordeling weergeven, alleen de positieve stemtotalen, dus stelde ik dat in op false.

Om de weergave te negeren, heb ik /views/vote/vote.php gemaakt:

Niet veel plug-ins maken het overschrijven zo eenvoudig.

Ik verwijderde het pictogram 'stem omlaag' en veranderde het pictogram 'stem omhoog' in een vaandel. Hier is hoe het er nu uitziet:

Ik weet dat dit een heleboel lagen lijkt, maar het duurde eigenlijk niet lang om het te laten werken.

Disqus-opmerkingen toevoegen

Vervolgens heb ik een Disqus-site gemaakt voor de aanstaande site, ActiveTogether.org, die beschikbaar zal zijn voor u om deze functies in actie te zien tegen de tijd dat u dit leest. De korte naam van de Disqus-site is dus 'actief-samen'.

Ik begon de widget van 2Amigos te gebruiken voordat ik de sociale extensie van Kartik integreerde (hieronder besproken), die ook Disqus-opmerkingen biedt.

Een unieke identificatie maken voor elk commentaarbord

Wanneer een nieuw item wordt gemaakt, wordt het Item :: BeforeSave () action maakt een unieke ID aan voor Disqus om ook reacties te koppelen. U kunt ook vertrouwen op de URL van een pagina, maar dit is over het algemeen meer voorspelbaar.

Met andere woorden, Disqus verzamelt alle opmerkingen voor elk item afzonderlijk en dat helpt bij het maken van het commentaarbord van elk item.

public function beforeSave ($ insert) if (parent :: beforeSave ($ insert)) if ($ insert) $ this-> identifier = Yii :: $ app-> security-> generateRandomString (8); $ this-> site_id = Yii :: $ app-> params ['site'] ['id'];  return true;

De opmerkingen weergeven

Vervolgens wordt het commentaarbord eenvoudig weergegeven onderaan de itemweergave in /active/views/Item.php:

 'active-together', 'identifier' => $ model-> identifier,]); ?>

Merk op hoe de widget de korte naam en de identifier om Disqus te voorzien van de opmerkingen.

Hier is een voorbeeld van hoe het opmerkingenbord eruit ziet:

De indexweergave met opmerkingen telt

2Amigos maakt ook gebruik van de Disqus JavaScript-bibliotheken voor het weergeven van het aantal reacties. Maar er zijn een paar stukjes om samen te stellen om dit te laten gebeuren.

Eerst heb ik een jQuery-script gemaakt om het aantal reacties van een item op te vragen. Als er veel items op een pagina staan, moet u dit aanvragen reset: true;:

$ (document) .ready (function () DISQUSWIDGETS.getCount (reset: true););

Vervolgens heb ik een TopicAsset.php-bestand gemaakt om het .js-bestand te laden:

Vervolgens registreert het bestand /active/views/Topic.php het TopicAsset-bundel:

Vervolgens bevat elk deel _item.php een aantal reacties:

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

En de _social partial geeft het op deze manier weer met elke Item-> identifier:

slug. '# disqus_thread'], ['data-disqus-identifier' => $ model-> identifier])?>  'active-together', 'identifier' => $ model-> identifier,]); ?>

Om ervoor te zorgen dat Disqus weet waar elementen moeten worden geüpdatet met het aantal reacties, moet elke koppeling eindigen #disqus_thread.

Dit is hoe die pagina eruit ziet. Elk item heeft een duidelijk aantal reacties geladen door te verwijzen naar de ID:

Laten we doorgaan naar de knoppen voor sociaal delen die u heeft gezien.

Sociaal delen toevoegen

Kartik heeft het goed gedaan met zijn sociale widget die een basisconfiguratie heeft gebouwd voor verbinding met een aantal sociale bedrijven zoals Twitter, Disqus en Facebook. Voor nu gebruik ik alleen de Facebook-knop Delen. De deelknop van Twitter heeft geen erg goede esthetiek, dus heb ik deze vervangen door een HTML-webintentslink.

Hier is mijn code voor het paar knoppen naast het aantal reacties in /active/views/topic/_social.php:

 titel); ?> & url = & Via =params ['site'] ['twitter_account']?> "> Tweet
 FacebookPlugin :: DELEN, 'instellingen' => ['dataSize' => 'klein', 'class' => "fb_iframe_widget"]]); ?>

Lijkt eenvoudig, behalve dat het verticaal uitlijnen van Facebook's widget een aantal CSS-aanpassingen vereist. In /active/views/topic/_grid.php heb ik deze aanpassing geplaatst:

Het moet komen nadat de andere CSS-bestanden zijn geladen.

En in het bestand site.css heb ik dit geplaatst om de exacte look te krijgen die ik wilde:

.share_adjust_vert margin-top: -1px; font-size: 90%; vertical-align: top;

Afsluiten

Eerlijk gezegd ben ik zo opgewonden over hoe gemakkelijk het was om Yii te gebruiken en in feite een mini-sociale kloon te maken. Dit zijn geweldige plug-ins voor een geweldig framework, en in het algemeen reageren Yii's ontwikkelaars en de community van pluginontwikkelaars op GitHub met vragen en problemen.

Ik hoop dat je graag ActiveTogether bekijkt en dit raamwerk voor jezelf uitprobeert.

Als je vragen of suggesties hebt, plaats deze dan in de comments. Als je graag mijn toekomstige Envato Tuts + tutorials en andere series wilt volgen, ga dan naar mijn instructeurspagina of volg @lookahead_io. Bekijk zeker mijn opstartserie en Meeting Planner.

Gerelateerde Links

2Amigos Yii2 Disqus Commentaar Verlenging
Chiliec's Yii2 stemuitbreiding
Kartik's Yii2 sociale extensie
Yii2 Developer Exchange, mijn Yii2-bronsite

Code