30-50% off hundreds of digital assets! WordPress themes, video, music and more 30-50% Off Go to Sale
Advertisement
  1. Code
  2. Yii
Code

Programando con Yii2: Construyendo Comunidad con Votaciones, Comentarios y Compartir

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called How to Program With Yii2.
Programming With Yii2: Building a RESTful API
Programming With Yii: Generating Documentation

Spanish (Español) translation by David Castrillón (you can also view the original English article)

Final product image
What You'll Be Creating

En esta serie de Programación con Yii2, estoy guiando a los lectores en el uso del Framework Yii2 para PHP. Quizás también estés interesado en mi Introducción al Framework Yii, el cual revisa los beneficios de Yii e incluye un resumen de lo que es nuevo en Yii 2.x.

Introducción

En el tutorial de hoy, voy a mostrarte 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 el registro de usuarios integrado y autenticación y varios sitios para el front-end de sitios web y para sitios administrativos.

Construí algunos de mis últimos episodios de la API de Twitter en la primera versión de esta plataforma, seguir amigos en nombre de los usuarios y análisis de nuestros seguidores. El sitio que se describe en los, Twixxr, forma la base de mi trabajo de personalización de Yii.

Así que agregarle funcionalidades como votaciones, comentarios y compartir tiene mucho sentido. A medida que expandes tu código base de Yii con este tipo de características, construir nuevos sitios se vuelve más rápido, más fácil y cada vez más potentes.

Para Empezar

Voy a guiarte en el uso de tres plugins de Yii2:

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

He creado un modelo denominado Item que representa un objeto sobre el que deseas que los usuarios voten, comenten y compartan.

Francamente, después de crear las páginas de artículos 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 la fecha incluso construyendo mi serie de emprendimiento. Se puede hacer tanto con este framework.

Profundicemos.

Instalando las Extensiones

En primer lugar, vamos a agregar las tres extensiones en composer.json a la vez:

Luego ejecuta composer update

Agregando la Votación

Vladimir Babin es Chiliec, y me gusta mucho la manera que él y otros han colaborado para crear este plugin. Se incluyen todas las características básicas que quieres, y tú puedes personalizarlo fácilmente, específicamente al reemplazar la vista. Poseen una gran documentación y lo mantienen bien actualizado.

Aquí está un útil gif animado de las características por defecto del plugin que alojan en GitHub. Acabo de publicar una imagen estática abajo (Envato Tuts + no soporta gifs en nuestros tutoriales).

Programming With Yii - Voting Plugin Default Example

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

Configuración

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

Puedes ver que apagué la votación de invitados por lo que se necesita que las personas se inscriban para votar en los artículos.

Integración de la Base de Datos

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

Es importante recordar realizar esta migración al instalar el servidor del producto. Es muy fácil olvidarlo.

Mostrando el Widget de Votación

Mi modelo es parte de un modelo de colección denominado Tema, para que puedas encontrar la vista parcial para mi widget de votacion en /views/topic/_item.php:

El índice de las llamadas del Tema mostrará una cuadrícula que muestra _item.php como una fila. No quería mostrar una calificación, sólo los totales de votos positivos, así que lo puse en false.

Para sobreescribir la vista, he creado /views/vote/vote.php:

No una gran cantidad de plugins hacen la sobreescritura tan fácil.

He quitado el icono de votación hacia abajo y cambié el ícono de los votos hacia arriba a un chevron. Aquí está como se ve ahora:

Programming With Yii - Voting Widget

Sé que esto parece un montón de capas, pero realmente no toma mucho tiempo para hacer que funcione.

Agregando Comentarios de Disqus

A continuación, he creado un sitio web de Disqus para el próximo sitio, ActiveTogether.org, que estará disponible para que veas estas características en acción en el momento en que leas esto. Así, que el nombre corto del sitio de Disqus 'active-together'.

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

Creando un Identificador Único para Cada Tarjeta de Comentario

Cuando se crea un nuevo elemento, la acción item:: beforeSave() crea un identificador único de Disqus para enlazar también los comentarios. También puedes confiar en la dirección URL de una página, pero esto suele ser más predecible.

En otras palabras, Disqus recopila todos los comentarios de cada artículo por separado, y ayuda a formar el tablero de cada elemento.

Viendo los Comentarios

Luego, el tablero de comentarios se visualiza fácilmente en la parte inferior de la vista del artículo en /active/views/Item.php:

Observa cómo el widget necesita el nombre corto y el identificador para proporcionar Disqus para los comentarios.

Aquí hay un ejemplo de como se ve el tablero de comentarios:

Programming With Yii - Item Page with voting sharing and comments board

La Vista de Índice con la Cuenta de Comentarios

2Amigos también aprovecha las bibliotecas de Disqus en JavaScript para exhibir la cuenta de los comentarios. Pero hay unas pocas piezas que armar para que esto suceda.

En primer lugar, he creado un script de jQuery para solicitar la cuenta de los comentarios en un artículo. Cuando hay un montón de elementos en una página, es necesario solicitarlos con reset: true

Luego he creado un archivo TopicAsset.php para cargar el archivo .js:

A continuación, el archivo /active/views/Topic.php registra el paquete TopicAsset:

A continuación, cada _item.php parcial incluye un número de comentarios:

Y el parcial _social muestra como está utilizando cada elemento-> identificador:

A fin de que Disqus actualice los elementos con la cuenta de los comentarios, cada link debe terminar con #disqus_thread.

Aquí está como se ve esa página. Cada elemento tiene un conteo distinto de comentarios cargado mediante una referencia a su identificador:

Programming With Yii - Index page of with voting and social comments and sharing

Pasemos a los botones sociales de compartir que has estado viendo.

Agregando los Botones Sociales de Compartir

Kartik ha hecho un gran trabajo con su widget social construyendo una configuración básica para la conexión a un número de redes sociales como Twitter, Disqus, Facebook. Por ahora, sólo estoy utilizando el botón compartir de Facebook. El botón de compartir de Twitter no tiene muy buena estética, así que lo reemplacé con un enlace HTML web.

Aquí está mi código para el par de botones al lado del conteo de comentarios en /active/views/topic/_social.php:

Parece simple, excepto que alinear verticalmente el widget de Facebook requiere algunos ajustes en el CSS. En /active/views/topic/_grid.php, coloqué este ajuste:

Tiene que salir después de cargar otros archivos CSS.

Y, en el archivo site.css, puse esto para obtener el aspecto exacto que quería:

Terminando

Sinceramente, estoy muy emocionado de lo fácil que es usar Yii y especialmente para crear un mini clon social. Estos son grandes plugins para un gran framework, y generalmente los desarrolladores de Yii y la comunidad de desarrolladores de los plugins responden en GitHub a las preguntas e interrogantes.

Espero que quieras echarle un vistazo a ActiveTogether y probar este framework por ti mismo.

Si tienes alguna pregunta o sugerencia, por favor publícala en los comentarios. Si deseas mantenerte al día sobre mis tutoriales futuros en Envato Tuts + y otras series, por favor visita mi página de instructor o sígueme en @lookahead_io. Definitivamente revisa mi serie de emprendimiento y el Meeting Planner.

Links Relacionados

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.