Programando Con Yii2 Construyendo Comunidad Con Votación, Comentarios y Compartiendo

En esto Programando con la serie Yii2, Estoy guiando a los lectores en el uso del Marco Yii2 para PHP. También te puede interesar mi Introducción al marco Yii, que revisa los beneficios de Yii e incluye una descripción general de las novedades de Yii 2.x.

Introducción

En el tutorial de hoy, te mostraré cómo extender Yii para imitar fácilmente un sitio como Reddit con votaciones, comentarios y compartir..

Recientemente, he estado trabajando en la creación de mi propia extensión personal de la gran plantilla avanzada de Yii. La plantilla proporciona autenticación y registro de usuarios incorporados y varios sitios para sitios web de administración y front-end.

Construí algunos de mis últimos episodios de la API de Twitter en la versión anterior de esta plataforma, siguiendo a amigos en nombre de los usuarios y analizando a nuestros seguidores. El sitio que describí en Twixxr forma la base de mi trabajo de personalización de Yii..

Entonces, agregar funcionalidad central como votar, comentar y compartir tiene mucho sentido. A medida que amplía su base de código Yii con este tipo de características, la creación de nuevos sitios se vuelve más rápida, más fácil y cada vez más potente.. 

Empezando

Voy a guiarte a través del uso de tres plugins Yii2:

• Extensión de votación de Yii2 de Chiliec
• 2Amigos Yii2 Disqus Comentarios Extension
• Extensión social de Yii2 de Kartik

Hacen que sea relativamente rápido y fácil construir una comunidad social poderosa en Yii2. 

He creado un modelo llamado ít que representa un objeto sobre el que desea que los usuarios voten, comenten y compartan. 

Francamente, después de crear las páginas de elementos con estas características en mi plataforma, me sentí más impresionado que nunca con Yii ... más impresionado de lo que he estado hasta en la fecha, incluso construyendo mi serie de inicio. Puedes hacer mucho con este framework.

Vamos a profundizar en.

Instalando las Extensiones

Primero, agreguemos las tres extensiones a composer.json a la vez:

"name": "yiisoft / yii2-app-advanced", "description": "Yii 2 Advanced Project Template", "keywords": ["yii2", "framework", "advanced", "project template"], "homepage": "http://www.yiiframework.com/", "type": "project", "license": "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 "," estabilidad mínima ":" estable " , "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 "

Entonces corre actualización del compositor.

Añadiendo Votación

Vladimir Babin es Chiliec, y me gusta mucho la forma en que él y otros han colaborado para crear este complemento. Se incluyen todas las funciones básicas que desea, y puede personalizarlas fácilmente, específicamente al anular la vista. Tienen una gran documentación y la mantienen bien actualizada también..

Aquí hay un gif animado útil de las características predeterminadas del complemento que alojan en GitHub. He publicado una imagen estática a continuación (Envato Tuts + no admite gifs en nuestros tutoriales).

Por supuesto, decidí personalizar la vista y eliminar los votos negativos, y fue bastante fácil.

Configuración

A continuación, agregamos el complemento de votación a /active/config/main.php para que se cargue en todas partes en bootstrap y se configure para nuestra aplicación:

return ['id' => 'app-active', 'basePath' => dirname (__ DIR__), 'bootstrap' => ['chiliec \ vote \ components \ VoteBootstrap', 'log', '\ common \ components \ SiteHelper '],' modules '=> […' vote '=> [' class '=>' chiliec \ vote \ Module ', // muestra los mensajes en el popover' popOverEnabled '=> true, // valores globales para todos los modelos / / 'allowGuests' => true, // 'allowChangeVote' => true, 'models' => [1 => ['modelName' => \ active \ models \ Item :: className (), 'allowGuests' => false ,], // ejemplo de declaración de modelos // \ common \ models \ Post :: className (), // 'backend \ models \ Post', // 2 => 'frontend \ models \ Story', // 3 = > [// 'modelName' => \ backend \ models \ Mail :: className (), // puede volver a escribir valores globales para un modelo específico // 'allowGuests' => false, // 'allowChangeVote' => false, / /],],], 

Puede ver que he desactivado la votación de invitados para que las personas tengan que registrarse para votar sobre los elementos..

Integración de base de datos

A continuación, debe ejecutar la migración de la base de datos para crear tablas que rastreen los votos..

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

¡Es importante recordar ejecutar esta migración al instalar el servidor de su producto! Es bastante facil de olvidar.

Visualización del widget de votación

Mi modelo de artículo es parte de un modelo de colección llamado Tema, por lo que puede encontrar la vista parcial de mi widget de votación en /views/topic/_item.php:

 
 
  $ model, // campos opcionales 'showAggregateRating' => false,]);?> 

Las llamadas al índice de temas muestran una cuadrícula que muestra _item.php como una fila No quería mostrar una calificación, solo los totales de votos positivos, así que lo puse en falso.

Para anular la vista, creé /views/vote/vote.php:

 
 
  :   
 
 
       
 

No muchos complementos hacen que anular sea tan fácil.

Quité el icono de votación abajo y cambié el icono de votación hacia arriba a un chevron. Esto es lo que parece ahora:

Sé que esto parece un montón de capas, pero en realidad no tomó mucho tiempo para hacerlo funcionar.

Añadiendo Comentarios Disqus

A continuación, creé un sitio Disqus para el próximo sitio, ActiveTogether.org, que estará disponible para que pueda ver estas características en acción cuando usted lea esto. Por lo tanto, el nombre corto del sitio Disqus es 'active-together'.

Comencé a usar el widget de 2Amigos antes de integrar la extensión social de Kartik (que se explica a continuación), que también ofrece comentarios de Disqus.

Creación de un identificador único para cada panel de comentarios

Cada vez que se crea un nuevo artículo, el Item :: beforeSave () action crea un identificador único para que Disqus también vincule comentarios. También puede confiar en la URL de una página, pero esto es más predecible en general.

En otras palabras, Disqus recopila todos los comentarios para cada elemento por separado, y eso ayuda a crear el panel de comentarios de cada elemento..

función pública beforeSave ($ insert) if (parent :: beforeSave ($ insert)) if ($ insert) $ this-> identifier = Yii :: $ app-> security-> generateRandomString (8); $ this-> site_id = Yii :: $ app-> params ['site'] ['id'];  devuelve true; 

Mostrando los comentarios

Luego, el panel de comentarios se muestra fácilmente en la parte inferior de la vista del elemento en /active/views/Item.php:

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

Observe cómo el widget necesita el nombre corto y el identificador Proporcionar a Disqus por los comentarios..

Aquí hay un ejemplo de cómo se ve el tablero de comentarios:

La vista del índice con comentarios cuenta

2Amigos también aprovecha las bibliotecas de JavaScript de Disqus para mostrar los recuentos de comentarios. Pero hay algunas piezas para armar para que esto suceda..

Primero, creé un script jQuery para solicitar los recuentos de comentarios de un elemento. Cuando hay muchos elementos en una página, debe solicitarlo con restablecer: verdadero;:

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

Luego creé un archivo TopicAsset.php para cargar el archivo .js:

Luego, el archivo /active/views/Topic.php registra el TopicAsset bundle:
A continuación, cada _item.php parcial incluye un recuento de comentarios:
render ('_ social', ['model' => $ model, 'includeCommentCount' => true]);?>
Y el _social parcial lo muestra así usando cada elemento-> identificador:
slug. '# disqus_thread'], ['data-disqus-identifier' => $ model-> identifier])?>  'active-together', 'identifier' => $ model-> identifier,]); ?>
Para que Disqus encuentre dónde actualizar los elementos con recuentos de comentarios, cada enlace debe terminar con #disqus_thread.
Así es como se ve esa página. Cada elemento tiene un recuento de comentarios distinto cargado al hacer referencia a su identificador:
Vayamos a los botones de redes sociales que has estado viendo..
Agregar redes sociales
Kartik ha hecho un gran trabajo con su widget social al crear una configuración básica para la conexión a varias compañías sociales como Twitter, Disqus y Facebook. Por ahora, solo estoy usando el botón de compartir de Facebook. El botón de compartir de Twitter no tiene muy buena estética, así que lo reemplacé con un enlace HTML de intenciones web.
Aquí está mi código para el par de botones al lado del recuento de comentarios en /active/views/topic/_social.php:
 
título); ?> & url = & via =params ['site'] ['twitter_account']?> "> Tweet
 
FacebookPlugin :: SHARE, 'settings' => ['dataSize' => 'small', 'class' => "fb_iframe_widget"]]); ?>
  
Parece simple, excepto que la alineación vertical del widget de Facebook requiere algunos ajustes de CSS. En /active/views/topic/_grid.php, coloqué este ajuste:
 
Tiene que venir después de que los otros archivos CSS se carguen..
Y, en el archivo site.css, coloqué esto para obtener el aspecto preciso que quería:
.share_adjust_vert margin-top: -1px; tamaño de letra: 90%; alineación vertical: superior; 
Terminando
Honestamente, estoy tan emocionado por lo fácil que fue usar Yii y, esencialmente, crear un mini clon social. Estos son excelentes complementos para un gran marco, y generalmente los desarrolladores de Yii y su comunidad de desarrolladores de complementos responden a GitHub con preguntas y problemas.
Espero que estés ansioso por ver ActiveTogether y probar este marco por ti mismo..
Si tiene alguna pregunta o sugerencia, por favor publíquela en los comentarios. Si desea mantenerse al día con mis futuros tutoriales de Envato Tuts + y otras series, visite la página de mi instructor o siga a @lookahead_io. Definitivamente echa un vistazo a mi serie de inicio y Meeting Planner.
enlaces relacionados
 
2Amigos Yii2 Disqus Comentarios Extension
 
Extensión de votación de Yii2 de Chiliec
 
Extensión social de Yii2 de Kartik
 
 Yii2 Developer Exchange, mi sitio de recursos Yii2
 



		
			
	   
	




Código