Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Yii
Code

Программирование с Yii2: построение сообщества с помощью голосования, комментариев и совместного использования

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

Russian (Pусский) translation by Masha Kolesnikova (you can also view the original English article)

Final product image
What You'll Be Creating

В этой серии программирования с Yii2 я показываю своим читателям использование Yii2 Framework для PHP. Вас также может заинтересовать мое введение в Yii Framework, в котором рассмотрены преимущества Yii и представлен обзор новинок в Yii 2.x.

Введение

В сегодняшнем учебном пособии я покажу вам, как расширить Yii, чтобы легко создать сайт, подобный Reddit, с голосованием, комментариями и совместным использованием.

Недавно я работал над созданием собственного расширения расширенного шаблона Yii. Этот шаблон обеспечивает встроенную регистрацию и аутентификацию пользователей, а также несколько сайтов для интерфейсных и административных веб-сайтов.

Я построил некоторые мои последние эпизоды API Twitter в ранней версии этой платформы, подписываясь на друзей от имени пользователей и анализируя своих подписчиков. Сайт, который я описал в тех эпизодах, Twixxr, формирует основу моей работы по настройке Yii.

Поэтому добавление основных функций, таких как голосование, комментарии и обмен, так важно. По мере того, как вы расширяете свою кодовую базу Yii с помощью таких функций, создание новых сайтов становится быстрее, легче и все более мощным.

Начинаем

Я собираюсь провести вас через три плагина Yii2:

С их помощью можно относительно быстро и легко построить мощное социальное сообщество на Yii2.

Я создал модель под названием Item, которая представляет объект, за который вы хотите, чтобы пользователи голосовали, комментировали и делились.

Честно говоря, после создания страниц элементов с этими функциями на моей платформе, я был более впечатлен, даже когда впервые познакомился с Yii, даже после написания мой серии про стартап. Вы так много можете сделать с этой структурой.

Давайте копнем глубже.

Установка расширений

Сначала давайте добавим все три расширения в composer.json:

И выполним composer update.

Добавление голосования

Владимир Бабин - Chiliec, и мне очень нравится то, как он и другие сотрудничали, чтобы создать этот плагин. Все основные функции, которые вы хотите включить, вы можете легко настроить, в частности переопределив представление. У них отличная документация, и они также хорошо обновляются.

Вот полезный анимированный gif, демонстрирующий возможности плагина, который находится на GitHub. Я опубликовал статическое изображение ниже (Envato Tuts + не поддерживает gif в наших уроках).

Programming With Yii - Voting Plugin Default Example

Конечно, я решил настроить представление и устранить отрицательные голоса, и это было довольно легко.

Конфигурация

Затем мы добавляем плагин голосования в /active/config/main.php, чтобы он загружался повсюду в бутстрапе и настраивался для нашего приложения:

Вы можете видеть, что я отключил гостевое голосование, так чтобы люди должны были зарегистрироваться, чтобы иметь возможность проголосовать.

Интеграция с базой данных

Затем вам нужно запустить миграцию базы данных для создания таблиц, которые отслеживают голоса.

Важно помнить о необходимости запуска этой миграции при установке вашего серверного продукта! Очень легко забыть об этом.

Отображение виджета голосования

Моя модель товара является частью модели коллекции под названием «Тема», поэтому вы можете найти частичный вид моего виджета для голосования в /views/topic/_item.php:

Вызов индекса темы отображает сетку, которая в свою очередь выводит _item.php в виде строки. Я не хотел отображать рейтинг, просто положительные итоги голосования, поэтому я решил, что это неверно.

Чтобы переопределить представление, я создал /views/vote/vote.php:

Не так много плагинов позволяют так легко это сделать.

Я удалил значок отрицательного голоса и изменил значок голосования на шеврон. Вот как это выглядит сейчас:

Programming With Yii - Voting Widget

Я знаю, что это похоже на много слоев, но на самом деле понадобилось не так много времени, чтобы заставить все это работать.

Добавление комментариев Disqus

Затем я создал сайт Disqus для предстоящего сайта ActiveTogether.org, который будет доступен для вас, чтобы увидеть эти функции в действии к тому моменту, когда вы это прочитаете. Таким образом, сокращенное имя сайта Disqus является «active-together».

Я начал использовать виджет 2Amigos, прежде чем я включил социальное расширение от Kartik (обсуждается ниже), которое также предлагает комментарии Disqus.

Создание уникального идентификатора для каждой панели комментариев

Всякий раз, когда создается новый элемент, экшена Item::beforeSave() создает уникальный идентификатор для Disqus для связи комментариев. Вы также можете полагаться на URL-адрес страницы, но это более предсказуемо.

Другими словами, Disqus сопоставляет все комментарии для каждого элемента по отдельности, и это помогает составлять панель комментариев каждого элемента.

Просмотр комментариев

Затем панель комментариев легко отображается в нижней части представления «Item» в /active/views/Item.php:

Обратите внимание, что виджету требуется shortname и identifier , чтобы Disqus предоставил комментарии.

Вот пример того, как выглядит панель комментариев:

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

Просмотр индексной страницы с комментариями

2Amigos также использует библиотеки JavaScript Disqus для отображения количества комментариев. Но есть несколько частей, которые нужно собрать, чтобы это заработало.

Во-первых, я создал сценарий jQuery, чтобы запросить подсчет комментариев элемента. Когда на странице много элементов, вам необходимо запросить их с помощью reset: true;:

Затем я создал файл TopicAsset.php для загрузки файла .js:

Затем файл /active/views/Topic.php регистрирует TopicAsset bundle:

Далее, каждый частичный _item.php включает в себя число комментариев:

И частичное отображение _social отображает это так, используя каждый Item->identifier:

Чтобы Disqus обнаружил, где обновлять элементы с комментариями, каждая ссылка должна заканчиваться на #disqus_thread.

Вот как выглядит эта страница. Каждый элемент имеет отдельный счетчик комментариев, загружаемых путем ссылки на его идентификатор:

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

Давайте перейдем к тем социальным кнопкам, которые вы видели.

Добавление социального доступа

Kartik отлично справился со своим социальным виджетом, создав базовую конфигурацию для подключения к ряду социальных сетей, таких как Twitter, Disqus и Facebook. Пока я использую только кнопку общего доступа к Facebook. Кнопка для Twitter не имеет очень хорошей эстетики, поэтому я заменил ее ссылкой HTML web intents.

Вот мой код для пары кнопок рядом с числом комментариев в /active/views/topic/_social.php:

Кажется простым, за исключением того, что вертикальное выравнивание виджета Facebook требует некоторых настроек CSS. В /active/views/topic/_grid.php я поместил эту настройку:

Это должно произойти после загрузки других файлов CSS.

И в файле site.css я разместил это, чтобы получить именно тот внешний вид, который мне нужен:

Подведение итогов

Честно говоря, я так взволнован тем, насколько легко было использовать Yii и по существу создать мини-социальный сайт клон. Это отличные плагины для отличной платформы, и в целом разработчики Yii и сообщество разработчиков плагинов отвечают на GitHub с вопросами и проблемами.

Надеюсь, вы готовы посетить ActiveTogether и попробовать эту инфраструктуру на себе.

Если у вас есть какие-либо вопросы или предложения, разместите их в комментариях. Если вы хотите не отставать от моих будущих учебных пособий Envato Tuts + и других серий, посетите мою страницу инструктора или подпишитесь в Твиттере на @lookahead_io. Обязательно проверьте мою серию статей по созданию стартапа и мой Планировщик встреч.

Ссылки по теме

Advertisement
Advertisement
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.