В этой серии «Программирование с Yii2» я расскажу читателям, как использовать Yii2 Framework для PHP. Возможно, вас также заинтересует мое Введение в Yii Framework , в котором рассматриваются преимущества Yii и содержится обзор того, что нового в Yii 2.x.
Вступление
В сегодняшнем уроке я покажу вам, как расширить Yii, чтобы легко имитировать такой сайт, как Reddit, с помощью голосования, комментариев и обмена.
В последнее время я работаю над созданием собственного личного расширения для великолепного расширенного шаблона Yii . Шаблон обеспечивает встроенную регистрацию и аутентификацию пользователей, а также несколько сайтов для интерфейсных и административных веб-сайтов.
Я построил несколько своих последних эпизодов Twitter API на ранней версии этой платформы, следя за друзьями от имени пользователей и анализируя наших подписчиков . Сайт, который я описал в них, Twixxr , составляет основу моей работы по настройке Yii.
Поэтому добавление основных функций, таких как голосование, комментарии и обмен информацией, имеет большое значение. По мере того, как вы расширяете свою кодовую базу Yii с помощью таких функций, создание новых сайтов становится быстрее, проще и мощнее.
Начиная
Я собираюсь провести вас через три плагина Yii2:
- Расширение голосования Chiliec’s Yii2
- 2Amigos Yii2 Disqus Комментарии Расширение
- Kartik’s Yii2 Social Extension
Они позволяют относительно быстро и легко создать мощное социальное сообщество на Yii2.
Я создал модель под названием Item которая представляет объект, за который вы хотите, чтобы пользователи голосовали, комментировали и делились.
Честно говоря, после создания страниц элементов с этими функциями на моей платформе я чувствовал себя более впечатляющим, чем когда-либо, с Yii … более впечатленным, чем когда-либо раньше, даже создавая мою серию стартапов . Вы можете сделать так много с этой структурой.
Давайте копаться в.
Установка расширений
Во-первых, давайте сразу добавим все три расширения в composer.json:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
{
«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»
},
«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»,
«2amigos/yii2-disqus-widget»:»~1.0″,
«abraham/twitteroauth»:»*»,
«codeception/codeception»:»*»,
«notamedia/yii2-sentry»: «^1.1»,
«chiliec/yii2-vote»: «^4.0»,
«yiidoc/yii2-redactor»: «*»,
«kartik-v/yii2-social»: «@dev»
|
Затем запустите composer update .
Добавление голосования
Владимир Бабин — Chiliec , и мне очень нравится, как он и другие сотрудничали в создании этого плагина. Все основные функции, которые вы хотите, включены, и вы можете легко настроить его, в частности, переопределив представление. У них есть отличная документация, и она тоже хорошо обновляется.
Вот полезный анимированный GIF-файл функций плагина по умолчанию, которые они размещают на GitHub. Я разместил статичное изображение ниже (Envato Tuts + не поддерживает GIF-изображения в наших уроках).
Конечно, я решил настроить вид и исключить пропущенные голоса, и это было довольно легко.
конфигурация
Затем мы добавляем плагин голосования в /active/config/main.php, чтобы он загружался везде в начальной загрузке и настраивался для нашего приложения:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
return [
‘id’ => ‘app-active’,
‘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\models\Item::className(),
‘allowGuests’ => false,
],
// example declaration of models
// \common\models\Post::className(),
// ‘backend\models\Post’,
// 2 => ‘frontend\models\Story’,
// 3 => [
// ‘modelName’ => \backend\models\Mail::className(),
// you can rewrite global values for specific model
// ‘allowGuests’ => false,
// ‘allowChangeVote’ => false,
// ],
],
],
|
Вы можете видеть, что я отключил голосование гостей, так что люди должны зарегистрироваться, чтобы голосовать по пунктам.
Интеграция базы данных
Затем вам нужно запустить миграцию базы данных, чтобы создать таблицы, которые отслеживают голоса.
|
1
|
$ php yii migrate/up —migrationPath=@vendor/chiliec/yii2-vote/migrations
|
Важно не забывать запускать эту миграцию при установке сервера продукта! Это довольно легко забыть.
Отображение виджета голосования
Моя модель элемента является частью модели коллекции под названием Тема, поэтому вы можете найти частичное представление для моего виджета голосования в /views/topic/_item.php:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
|
<?php
use yii\helpers\Html;
use yii\helpers\HtmlPurifier;
use dosamigos\disqus\CommentsCount;
use kartik\social\TwitterPlugin;
use kartik\social\FacebookPlugin;
use yii\helpers\StringHelper;
?>
<div class=»item_row row»>
<div class=»col-xs-1 col-md-1 col-lg-1″>
<?= \chiliec\vote\widgets\Vote::widget([
‘model’ => $model,
// optional fields
‘showAggregateRating’ => false,
]);?>
</div>
|
Индексные вызовы тем отображают сетку, в которой _item.php отображается в виде строки. Я не хотел отображать рейтинг, только положительные итоги голосования, поэтому я установил для него значение false.
Чтобы переопределить представление, я создал /views/vote/vote.php:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
|
<div class=»vote-row text-center» id=»vote-<?=$modelId?>-<?=$targetId?>» data-placement=»top» data-container=»body» data-toggle=»popover»>
<span class=»glyphicon glyphicon-chevron-up» onclick=»vote(<?=$modelId?>, <?=$targetId?>, ‘like’); return false;»
<div id=»vote-response-<?=$modelId?>-<?=$targetId?>»>
<?php if ($showAggregateRating) { ?>
<?=Yii::t(‘vote’, ‘Aggregate rating’)?>: <?=$rating?>
<?php } ?>
</div>
</div>
<div itemprop=»aggregateRating» itemscope itemtype=»http://schema.org/AggregateRating»>
<meta itemprop=»interactionCount» content=»UserLikes:<?=$likes?>»/>
<meta itemprop=»interactionCount» content=»UserDislikes:<?=$dislikes?>»/>
<meta itemprop=»ratingValue» content=»<?=$rating?>»/>
<meta itemprop=»ratingCount» content=»<?=$likes+$dislikes?>»/>
<meta itemprop=»bestRating» content=»10″/>
<meta itemprop=»worstRating» content=»0″/>
</div>
|
Не так много плагинов делают переопределение таким простым.
Я убрал значок голосования и изменил значок голосования на шеврон. Вот как это выглядит сейчас:
Я знаю, что это похоже на множество слоев, но на самом деле это не заняло много времени, чтобы заставить его работать.
Добавление комментариев Disqus
Затем я создал сайт Disqus для будущего сайта ActiveTogether.org , который будет доступен для вас, чтобы увидеть эти функции в действии к тому времени, когда вы их прочитаете. Таким образом, короткое имя сайта Disqus — «active-Together».
Я начал использовать виджет 2Amigos, прежде чем интегрировал социальное расширение Kartik (обсуждается ниже), которое также предлагает комментарии Disqus.
Создание уникального идентификатора для каждой доски комментариев
Всякий раз, когда создается новый Item, действие Item::beforeSave() создает уникальный идентификатор для Disqus, который также связывает комментарии. Вы также можете рассчитывать на URL страницы, но в целом это более предсказуемо.
Другими словами, Disqus объединяет все комментарии для каждого элемента в отдельности, и это помогает составить доску комментариев каждого элемента.
|
01
02
03
04
05
06
07
08
09
10
|
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;
}
|
Отображение комментариев
Затем панель комментариев легко отображается в нижней части представления элемента в /active/views/Item.php:
|
01
02
03
04
05
06
07
08
09
10
11
|
<?php
use yii\helpers\Html;
use yii\helpers\HtmlPurifier;
use yii\helpers\Url;
use dosamigos\disqus\Comments;
…
<?= Comments::widget([
‘shortname’ => ‘active-together’,
‘identifier’=>$model->identifier,
]);
|
Обратите внимание, что виджету нужно shortname и identifier для предоставления Disqus для комментариев.
Вот пример того, как выглядит доска для комментариев:
Индексный просмотр с количеством комментариев
2Amigos также использует библиотеки Disqus JavaScript для отображения количества комментариев. Но есть несколько частей, чтобы собрать это, чтобы это произошло.
Сначала я создал скрипт jQuery для запроса количества комментариев элемента. Если на странице много элементов, вам нужно запросить их с помощью reset: true; :
|
1
2
3
|
$(document).ready(function(){
DISQUSWIDGETS.getCount({reset: true});
});
|
Затем я создал файл TopicAsset.php для загрузки файла .js:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
|
<?php
namespace active\assets;
use yii\web\AssetBundle;
class TopicAsset extends AssetBundle
{
public $basePath = ‘@webroot’;
public $baseUrl = ‘@active’;
public $css = [
];
public $js = [
‘js/topic.js’,
];
public $depends = [
‘yii\web\YiiAsset’,
‘yii\bootstrap\BootstrapAsset’,
];
|
Затем файл /active/views/Topic.php регистрирует TopicAsset bundle :
|
1
2
3
4
5
6
7
8
|
<?php
use yii\helpers\Html;
use yii\grid\GridView;
use yii\widgets\Breadcrumbs;
use common\widgets\Alert;
use active\assets\TopicAsset;
TopicAsset::register($this);
|
Далее, каждый частичный _item.php включает количество комментариев:
|
1
2
|
<p><?= $this->render(‘_social’, [‘model’ => $model,
‘includeCommentCount’=>true]);?></p>
|
И частичная _social отображает это так, используя каждый идентификатор Item->:
|
1
2
3
4
5
6
7
8
|
<li class=»share_adjust_vert»><?= Html::a(Yii::t(‘active’,’Comments’)
,[‘/item/’.$model->slug.’#disqus_thread’],
[‘data-disqus-identifier’=>$model->identifier]) ?>
<?= CommentsCount::widget([
‘shortname’ => ‘active-together’,
‘identifier’ => $model->identifier,
]);
?>
|
Чтобы Disqus мог найти, где обновить элементы с количеством комментариев, каждая ссылка должна заканчиваться #disqus_thread .
Вот как выглядит эта страница. Каждый элемент имеет отдельное количество комментариев, загруженное путем ссылки на его идентификатор:
Давайте перейдем к тем кнопкам общего доступа, которые вы видели.
Добавление социального обмена
Картик проделал отличную работу со своим социальным виджетом, создав базовую конфигурацию для подключения к ряду социальных компаний, таких как Twitter, Disqus и Facebook. Пока я использую только кнопку «Поделиться» на Facebook. Кнопка «Поделиться» в Твиттере не очень хороша, поэтому я заменил ее ссылкой на веб-страницу HTML .
Вот мой код для пары кнопок рядом с количеством комментариев в /active/views/topic/_social.php:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
</li>
<li class=»share_adjust_vert»><a class=»twitter-share»
href=»https://twitter.com/intent/tweet?
text=<?= urlencode($model->title);
&url=<?= urlencode(Url::canonical());?>
&via=<?= Yii::$app->params[‘site’][‘twitter_account’]?>
«><img src=»<?= Url::to(Url::home(true).’/images/social/twitter_icon.png’);
?>»> Tweet</a></li>
<li><?= FacebookPlugin::widget
([‘type’=>FacebookPlugin::SHARE,
‘settings’ => [‘dataSize’=>’small’,
‘class’=>»fb_iframe_widget»]]);
</ul>
|
Кажется простым, за исключением того, что вертикальное выравнивание виджета Facebook требует некоторых настроек CSS. В /active/views/topic/_grid.php я разместил эту настройку:
|
1
2
3
4
5
6
|
<style media=»screen» type=»text/css»>
.fb_iframe_widget span
{
vertical-align: baseline !important;
}
</style>
|
Он должен появиться после загрузки других CSS-файлов.
И в файле site.css я поместил это, чтобы получить точный вид, который я хотел:
|
1
2
3
4
5
|
.share_adjust_vert {
margin-top:-1px;
font-size:90%;
vertical-align: top;
}
|
Завершение
Честно говоря, я так взволнован тем, как легко было использовать Yii и по сути создать мини-социальный клон. Это отличные плагины для отличного фреймворка, и, как правило, разработчики Yii и сообщество разработчиков плагинов реагируют на GitHub своими вопросами и проблемами.
Я надеюсь, что вы хотите проверить ActiveTogether и попробовать эту платформу для себя.
Если у вас есть какие-либо вопросы или предложения, пожалуйста, оставьте их в комментариях. Если вы хотите следить за моими будущими учебниками Envato Tuts + и другими сериями, пожалуйста, посетите мою страницу инструктора или следуйте @lookahead_io . Обязательно посмотрите мою серию стартапов и Планировщик собраний .