Programmer avec Yii2 Bâtir une communauté avec vote, commentaires et partage

Dans ce Programmation avec la série Yii2, Je guide les lecteurs dans l'utilisation du framework Yii2 pour PHP. Vous pouvez également être intéressé par mon Introduction au framework Yii, qui passe en revue les avantages de Yii et inclut un aperçu des nouveautés de Yii 2.x.

introduction

Dans le tutoriel d'aujourd'hui, je vais vous montrer comment étendre Yii pour imiter facilement un site comme Reddit avec vote, commentaires et partage..

Récemment, j'ai travaillé sur la création de ma propre extension personnelle du superbe modèle avancé Yii. Le modèle fournit une inscription et une authentification utilisateur intégrées ainsi que plusieurs sites pour les sites Web front-end et administratifs..

J'ai construit certains de mes derniers épisodes d'API Twitter sur la première version de cette plate-forme, en suivant des amis pour le compte d'utilisateurs et en analysant nos abonnés. Le site que j'ai décrit dans ceux-ci, Twixxr, constitue le fondement de mon travail de personnalisation Yii..

Il est donc logique d’ajouter des fonctionnalités essentielles telles que le vote, les commentaires et le partage. À mesure que vous développez votre base de code Yii avec ce type de fonctionnalités, la création de nouveaux sites devient plus rapide, plus simple et plus puissante. 

Commencer

Je vais vous guider à travers trois plugins Yii2:

• Extension de vote Yii2 de Chiliec
• 2Amigos Yii2 Disqus Commentaires Extension
• L'extension sociale Yii2 de Kartik

Ils rendent relativement rapide et facile la construction d’une communauté sociale puissante sur Yii2.. 

J'ai créé un modèle appelé Article qui représente un objet sur lequel vous souhaitez que les utilisateurs votent, commentent et partagent. 

Franchement, après avoir construit les pages d'articles avec ces fonctionnalités sur ma plate-forme, je me suis senti plus impressionné que jamais avec Yii… plus impressionné que je ne l'ai été jusqu'à présent, même en construisant ma série de startups. Vous pouvez faire beaucoup avec ce cadre.

Creusons.

Installer les extensions

Premièrement, ajoutons les trois extensions à composer.json à la fois:

"name": "yiisoft / yii2-app-advanced", "description": "Modèle de projet Yii 2 Advanced", "keywords": ["yii2", "framework", "advanced", "modèle de projet"], "homepage": "http://www.yiiframework.com/", "type": "projet", "licence": "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 "," stabilité minimale ":" 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 amis" / "2-amis": "*", "codeception / codeception": "*", "notamedia / yii2-sentry": "^ 1.1", "chiliec / yii2-vote": "^ 4.0", "yiido" c / yii2-rédacteur ":" * "," kartik-v / yii2-social ":" @dev "

Puis courir mise à jour du compositeur.

Ajout du vote

Vladimir Babin est Chiliec, et j'aime beaucoup la façon dont lui et d'autres ont collaboré pour créer ce plugin. Toutes les fonctionnalités de base que vous souhaitez sont incluses et vous pouvez facilement les personnaliser, notamment en remplaçant la vue. Ils ont une excellente documentation et la tiennent bien à jour aussi.

Voici un gif animé utile des fonctionnalités par défaut du plugin qu’il héberge sur GitHub. J'ai posté une image statique ci-dessous (Envato Tuts + ne prend pas en charge les gifs dans nos tutoriels).

Bien sûr, j’ai décidé de personnaliser la vue et d’éliminer les votes négatifs, et c’était assez facile..

Configuration

Ensuite, nous ajoutons le plug-in de vote à /active/config/main.php afin qu’il soit chargé partout dans le bootstrap et configuré pour notre application:

return ['id' => 'app-active', 'basePath' => dirname (__ DIR__), 'bootstrap' => ['chiliec \ vote \ components \ Vote \ BootBrap', 'log', '\ commun \ components \ SiteHelper '],' modules '=> […' vote '=> [' class '=>' chiliec \ vote \ Module ', // affiche les messages dans popover' popOverEnabled '=> true, // valeurs globales pour tous les modèles / / 'allowGuests' => true, // 'allowChangeVote' => true, 'models' => [1 => ['modelName' => \ active \ models \ Item :: className (), 'allowGuests' => false ,], // exemple de déclaration de modèles // \ common \ models \ Post :: className (), // 'backend \ models \ Post', // 2 => 'frontend \ models \ Story', // 3 = > [// 'modelName' => \ backend \ models \ Mail :: className (), // vous pouvez réécrire les valeurs globales pour un modèle spécifique // 'allowGuests' => false, // 'allowChangeVote' => false, / /],],], 

Vous pouvez voir que j'ai désactivé le vote d'invité, de sorte que les personnes doivent s'inscrire pour voter sur des éléments..

Intégration de base de données

Ensuite, vous devez exécuter la migration de la base de données pour créer des tables qui suivent les votes..

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

N'oubliez pas de lancer cette migration lors de l'installation du serveur de votre produit! C'est assez facile d'oublier.

Affichage du widget de vote

Mon modèle d'élément fait partie d'un modèle de collection appelé Topic. Vous pouvez donc trouver la vue partielle de mon widget de vote dans /views/topic/_item.php:

 
 
  $ model, // champs optionnels 'showAggregateRating' => false,]);?> 

Les appels d'index de sujets affichent une grille qui affiche _item.php comme une rangée. Je ne voulais pas afficher d'évaluation, mais uniquement les totaux des votes positifs, alors je l'ai définie sur false..

Pour remplacer la vue, j'ai créé /views/vote/vote.php:

 
 
  :   
 
 
       
 

Pas beaucoup de plugins rendent la substitution si facile.

J'ai enlevé l'icône de vote vers le bas et j'ai changé l'icône de vote en chevron. Voici à quoi cela ressemble maintenant:

Je sais que cela ressemble à beaucoup de couches, mais en réalité cela n'a pas pris trop de temps pour le faire fonctionner.

Ajout de commentaires Disqus

Ensuite, j'ai créé un site Disqus pour le site à venir, ActiveTogether.org, qui sera disponible pour vous permettre de voir ces fonctionnalités en action au moment où vous les lirez. Ainsi, le nom abrégé du site Disqus est "actif ensemble".

J'ai commencé à utiliser le widget de 2Amigos avant d'intégrer l'extension sociale de Kartik (décrite ci-dessous), qui propose également des commentaires Disqus..

Création d'un identifiant unique pour chaque tableau de commentaires

Chaque fois qu'un nouvel élément est créé, le Item :: beforeSave () action crée un identifiant unique pour que Disqus lie également les commentaires. Vous pouvez également compter sur l'URL d'une page, mais celle-ci est généralement plus prévisible..

En d'autres termes, Disqus rassemble tous les commentaires pour chaque élément séparément, ce qui aide à composer le tableau de commentaires de chaque élément..

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

Affichage des commentaires

Ensuite, le panneau de commentaires s’affiche facilement au bas de la vue Élément dans /active/views/Item.php:

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

Notez que le widget a besoin de la nom court et le identifiant fournir Disqus pour les commentaires.

Voici un exemple de ce à quoi ressemble le tableau des commentaires:

La vue d'index avec les commentaires compte

2Amigos utilise également les bibliothèques JavaScript de Disqus pour afficher le nombre de commentaires. Mais il y a quelques pièces à mettre en place pour y arriver.

Tout d'abord, j'ai créé un script jQuery pour demander le décompte des commentaires d'un élément. Quand il y a beaucoup d'éléments sur une page, vous devez le demander avec reset: true;:

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

Ensuite, j'ai créé un fichier TopicAsset.php pour charger le fichier .js:

Ensuite, le fichier /active/views/Topic.php enregistre le Bundle TopicAsset:
Ensuite, chaque partiel _item.php inclut un nombre de commentaires:
render ('_ social', ['model' => $ model, 'includeCommentCount' => true]);?>
Et le _social partial l'affiche comme ceci en utilisant chaque identifiant Item->:
slug. '# disqus_thread'], ['data-disqus-identifier' => $ model-> identifiant])?>  'active-together', 'identifiant' => $ model-> identifiant,]); ?>
Pour que Disqus trouve où mettre à jour les éléments avec un nombre de commentaires, chaque lien doit se terminer par #disqus_thread.
Voici à quoi ressemble cette page. Chaque élément a un nombre de commentaires distinct chargé en référençant son identifiant:
Passons aux boutons de partage social que vous avez vus.
Ajout de partage social
Kartik a fait un excellent travail avec son widget social, établissant une configuration de base pour la connexion à un certain nombre de sociétés sociales telles que Twitter, Disqus et Facebook. Pour le moment, j'utilise uniquement le bouton de partage Facebook. Le bouton de partage de Twitter n'a pas une très bonne esthétique, je l'ai donc remplacé par un lien d'intentions Web HTML..
Voici mon code pour la paire de boutons à côté des commentaires qui comptent dans /active/views/topic/_social.php:
 
Titre); ?> & url = & via =params ['site'] ['twitter_account']?> "> Tweet
 
FacebookPlugin :: SHARE, 'settings' => ['dataSize' => 'small', 'class' => "fb_iframe_widget"]]); ?>
  
Cela semble simple, sauf que l'alignement vertical du widget de Facebook nécessite quelques ajustements CSS. Dans /active/views/topic/_grid.php, j'ai placé cet ajustement:
 
Il doit venir après le chargement des autres fichiers CSS.
Et, dans le fichier site.css, je l'ai placé pour obtenir le look précis que je voulais:
.share_adjust_vert margin-top: -1px; taille de la police: 90%; alignement vertical: en haut; 
Emballer
Honnêtement, je suis tellement heureux de voir à quel point il était facile d’utiliser Yii et de créer essentiellement un mini clone social. Ce sont d'excellents plugins pour un excellent framework, et généralement les développeurs de Yii et sa communauté de développeurs de plugins répondent à GitHub avec des questions et des problèmes..
J'espère que vous avez hâte de consulter ActiveTogether et d'essayer vous-même ce cadre..
Si vous avez des questions ou des suggestions, postez-les dans les commentaires. Si vous souhaitez suivre mes futurs tutoriels et séries d’Envato Tuts +, veuillez visiter la page de mon instructeur ou suivre @lookahead_io. Vérifiez certainement ma série de démarrage et planificateur de réunion.
Liens connexes
 
2Amigos Yii2 Disqus Commentaires Extension
 
Extension de vote Yii2 de Chiliec
 
L'extension sociale Yii2 de Kartik
 
 Yii2 Developer Exchange, mon site de ressources Yii2
 



		
			
	   
	




Code