vorst.ru - Статьи о задачах возникающих при создании сайта и их решении
Статьи помеченные yii2

Как удалить не используемые CSS правила

Очистка и сжатие CSS с помощью Gulp

Сейчас много шаблонов на базе bootstrap. На сайте, из всего разнообразия стилей, предлагаемых шаблоном, используется порой 10-20%. От балласта можно избавиться с помощью on-line ресурсов. Например uncss-online. Но этот подход трудоемок.

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


Как написать валидатор

Пример валидатора для серверной и клиентской частей

Есть таблица цен на номера в пансионате. Цена зависит от различных параметров - номера, типа ценника, типа питания, варианта размещения, наличия или отсутствия лечения. Цена, для определенной комбинации значений этих параметров, может быть только одна.

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


Интерфейс для полнотекстового поиска

Использование ElasticSearch во frontend

На создание ElasticSearch индекса понадобилось совсем не много усилий, как видно из предыдущей статьи. Чтобы сделать индекс доступным конечному пользователю, усилий понадобиться не многим больше.

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


Как создать индекс ElasticSearch

Полнотекстовый поиск

Один парень написал: "Нужно сделать поиск слов в таблице "articles" по столбцу "content". В результатах поиска сначала выводить те, которые содержат наибольшее количество слов в статье и далее по мере уменьшения."

Мысль летит) Но ясно, что нужен полнотекстовый поиск.


Рефакторинг кода авторизации

Использование аккаунта социальной сети для авторизации

Авторизация с помощью социальной сети не должна зависеть от типа аккаунта. В предыдущем посте используется код, где в конструкторе классa common/components/SocialContact.php выполняется оператор switch. При добавлении обработчика для новой социальной сети, придется дописывать код, при этом меняя класс.

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


Как подключить авторизацию через аккаунт

OAuth2 авторизация с использованием аккаунта

Допустим, что вы уже зарегистрированы в известной социальной сети. То есть вы уже сообщили о себе, все, что считали нужным. Очевидно вам не хочется проходить процедуру еще раз на другом ресурсе.

Авторизация с помощью социальной сети позволяет избежать повторного заполнения формы регистрации. При этом защищенность вашего аккаунта в социальной сети никак не страдает. Вы просто подтверждаете, что вы это вы. Как подключить эту услугу к проекту используя расширение yiisoft/yii2-authclient?


Как определить правило для RBAC

Выполнять действие или нет

В предыдущей статье были определены две роли - Админ и Автор, как в обычном блоге. А обычно блог используется при создании любого сайта. Для ролей Админ и Автор были определены разрешения.

Если вы Админ, то у вас есть общее разрешение create. Оно дает право добавлять данные к любым моделям. Если вы Автор, то такое разрешение давать не стоит. Автор не может, например, добавить новую рубрику.


Определение разрешений на доступ и ролей для пользователей

Задание доступа только к определенным действиям

Разработка бекенда сайта часто подразумевает ограничение прав при редактировании контента.

Ролевая модель имеет иерархию. Сначала прав не много, потом чуть больше, наконец доступно все. Права (или разрешения) - это константы, которые связаны с конкретной ролью. Если за ролью закреплено разрешение, то действие может быть выполнено.


Как подключить RBAC

Подключение ролевого доступа

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

Именно распределение прав для групп пользователей и будет рассмотрено в паре-тройке статей. В качестве примера будет использоваться всего две роли.


Как отсортировать картинки мышкой

Сортировка строк мышкой

Оставили комментарий в конце января: "Напишите, пожалуйста, статью, как массово загружать изображения через ajax с возможностью сортировки перетаскиванием."

Речь о расширении yii2-uploader, которое может загружать, сжимать, обрезать картинки для любой модели. Я писал о нем уже пару раз.

На тот момент этой функциональности не было. Собирался я долго. Наконец добавил требуемое. Теперь спешу написать несколько слов о процессе. Демо (при редактировании).


Пример загрузки контента без перезагрузки страницы

Динамическая загрузка контента

Блог - это лента из заголовков статей и нескольких строчек из них. Пусть так и останется, когда посетитель решит прочитать содержимое выбранной статьи. То есть вся лента останется и добавится контент выбранной статьи.


Как добавить атрибут к загруженному файлу

Добавление описания к файлу

Иногда важно определить дополнительную информацию для загружаемого файла. Например это может быть описание. В расширении yii2-uploader возможность добавить описание к файлу уже предусмотрена.

Кроме описания может быть добавлено и любое другое свойство. В предыдущем примере использовалось свойство when типа radio с двумя значениями - "до" и "после". Как добавить новое свойство?


Редактирование и валидация модальной формы

Использование pop-up формы

Бывает, что количество полей в таблице не слишком велико и редактировать в модальном окне проще и нагляднее. Что необходимо, чтобы организовать стандартный набор операций - CReate, Update, Delete?


Как работает аутентификация OAuth2

OAuth2 аутентификация на примере Google

Если у вас есть аккаунт в Google, то вы наверняка пользовались документами. Например, электронными таблицами.

Доступ к таблицам разрешен только вам и тем, кому вы предоставите такое право. Причем доступ возможен не только из Google.

Можно просматривать список таблиц и редактировать выбранную таблицу оставаясь в рамках своего приложения. Примерно так - http://sample.vorst.ru/googl


Как устроена структура данных Nested Set

Как сделать рубрикатор

Рубрикатор, как средство поиска интересных статей, имеет свои недостатки - трудно придумать иерархию, названия рубрик, трудно потом решить к какой конкретно рубрике относится статья. "Но, так принято" - скажите вы и будете правы.



Поиск



Как удалить не используемые CSS правила

Очистка и сжатие CSS с помощью Gulp

Сейчас много шаблонов на базе bootstrap. На сайте, из всего разнообразия стилей, предлагаемых шаблоном, используется порой 10-20%. От балласта можно избавиться с помощью on-line ресурсов. Например uncss-online. Но этот подход трудоемок.

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


    Поделиться

Установка утилиты проста и описана в Gulp quick-start. После установки, в папке проекта появится каталог node_modules с большим количеством подкаталогов. Если не нужно, чтобы каталог попал на сервер, добавьте строчку в .gitignore.

# JS
node_modules

Дополнительные модули

Кроме Gulp для работы с CSS необходимы еще несколько модулей - gulp-uncss, gulp-cssnano, gulp-concat-css. Каждый нужно установить локально.

npm install gulp-uncss --save-dev

Gulpfile.js пример & структура

Для работы утилиты нужно подготовить специальный файл gulpfile.js в корне проекта.

var gulp = require('gulp');
var uncss = require('gulp-uncss');
var cssnano = require('gulp-cssnano');
var concatCss = require('gulp-concat-css');
gulp.task('uncss', function () {
    return gulp.src([
        './vendor/bower-asset/bootstrap/dist/css/bootstrap.min.css',
    ])
    .pipe(concatCss('bundle.css'))
    .pipe(uncss({
        html: [
            'http://localhost/site/index',
            'http://localhost/post/rubric/trade-union-news',
            'http://localhost/post/15-spartakiada',
            'http://localhost/site/feedback'
        ],
        ignore: [/\.collapse\.in/, /\.dropdown/, /\.dropdown-menu/, /\.dropdown-toggle/]
    }))
    .pipe(cssnano())
    .pipe(gulp.dest('./frontend/web/out/css'));
});
gulp.task('mincss', function () {
    return gulp.src([
        './frontend/web/css/site.css',
        './frontend/web/css/magnific-popup.css',
        './frontend/web/css/responsive.css',
        './frontend/web/css/BootsnippQuoteCarousel/style.css'
    ])
    .pipe(concatCss('all.css'))
    .pipe(cssnano())
    .pipe(gulp.dest('./frontend/web/out/css'));
});

В секции gulp.src, через запятую, указываются все CSS ресурсы, которые нуждаются в чистке. В данном случае указан только один файл.

В функции concatCSS указывается имя финального файла.

В uncss.html нужно перечислить все страницы, которые имеют стили, отличные от остальных страниц.

Многие элементы появляются и исчезают на экране при взаимодействии с посетителем. Стили таких элементов не видны при обходе и не попадают в финальный файл. Такие элементы нужно искать вручную и добавлять в секцию uncss.ignore.

Наконец в секции gulp.dest нужно указать каталог, в который будет записан финальный файл.

Assets

Для работы утилиты нужен полный CSS файл, а для тестирования результатов - сжатый. Обычно все необходимые ресурсы подключаются в frontend/views/layouts/main.php одним вызовом.

frontend\assets\AppAsset::register($this);

Все необходимые ресурсы указаны либо в самом классе, либо в зависимостях. В данном случае зависимостей, кроме стандартных, пара.

namespace frontend\assets;
use yii\web\AssetBundle;
class AppAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
        'css/site.css',
    ];
    public $js = [
    ];
    public $depends = [
        'yii\web\YiiAsset',
        'yii\bootstrap\BootstrapAsset',
        'yii\bootstrap\BootstrapPluginAsset',
        'frontend\assets\TextualAsset',
        'frontend\assets\BootsnippQuoteCarouselAsset',
    ];
}

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

namespace frontend\assets\prod;
use yii\web\AssetBundle;
class AppAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
        'out/css/bundle.css',
        'out/css/all.css',
    ];
    public $js = [
    ];
    public $depends = [
        'yii\web\YiiAsset',
        'yii\bootstrap\BootstrapAsset',
        'yii\bootstrap\BootstrapPluginAsset',
        'frontend\assets\prod\TextualAsset',
        'frontend\assets\prod\BootsnippQuoteCarouselAsset',
    ];
}

Теперь, для тестирования, почти достаточно поменять регистрацию ресурсов в файле frontend/views/layouts/main.php.

frontend\assets\prod\AppAsset::register($this);

Почти, потому что нужно жестко отключить стандартные ресурсы. Например в конфигурации frontend/config/main.php.

    'components' => [
        'assetManager' => [
            'bundles' => [
                'yii\web\JqueryAsset' => [
                    'js' => ['jquery.min.js'],
                ],
                'yii\bootstrap\BootstrapAsset' => [
                    'css' => [], //['css/bootstrap.min.css'],
                ],
                'yii\bootstrap\BootstrapPluginAsset' => [
                    'js' => ['js/bootstrap.min.js'],
                ],
            ],
        ],

Запуск

При "полных" ресурсах в корне проекта нужно выполнить пару команд, затем переключиться на вариант prod и тестировать результат.

gulp uncss
gulp mincss

Заключение

От хлама стоит избавляться в больших файлах стилей. Связанные с темой стилевые файлы проще просто сжимать.

Оставьте комментарий

Только зарегистрированные пользователи могут оставлять комментарии. Пожалуйста войдите или пройдите регистрацию.