vorst.ru - Как написать валидатор на стороне клиента
Статьи из рубрики root

Пример работы с сессией

Если читатель хочет вспомнить, что просмотрено и прочитано

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


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

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

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

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


Как сделать галерею фотографий "До и После"

Показ фотографий до и после момента времени

Представьте, что вы продаете курс похудания. Вам нужно наглядно представить результат вашего курса. Фото "До" и "После", что может быть лучшей иллюстрацией?

Как и в предыдущем примере примем, что участников ограниченное количество. Например 4. Забудем про похудающих - слишком скучно. Будем "работать" с кинозвездами. Для каждого можно загрузить только 4 фотографии. Таким образом всего 16 фото. Если загружены все 16 и кому-то захочется добавить "свои" фото, то придется что-то удалить. Демо.


Делаем демо для загрузки фото

Загрузка жестко определенного количества файлов

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

Например, можно устроить, что-то вроде надписи в столовой - "Уберите, пожалуйста, за собой посуду" (демо).


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

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

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


Доступ к таблицам Google

Рредактирование таблиц Google из приложения

В предыдущей статье уже была ссылка на работающий пример.

Следующим шагом стало выделение процесса аутентификации на сервисе Google в отдельный класс. А это, в свою очередь, позволило сделать расширение, немного упрощающее решение задачи.


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

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

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

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

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


Как разместить контент на двух языках

Перевод контента сайта

Для перевода интерфейса в Yii применяется таблица из двух колонок. В первой колонке записываются слова или фразы на английском, во второй - перевод на русском. Строки отсортированы по первой колонке. В тексте программы вместо нужного слова или фразы вызывается функция t('Word or Phrase'). Если текущий язык сайта английский, функция возвращает параметр, иначе соответствующий перевод.

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


Виджет для вывода списка рубрик Nested Set

Выбор всех статей по рубрике

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

Первая из них - необходимо добавить поле rubric в таблицу post. С этой операцией связано и изменения в модели common/models/Post, которые очевидно касаются методов rules() и attributeLabels().

Кроме этого нужно добавить обработку выбранной пользователем рубрики в actionIndex() контроллера frontend/controllers/PostController.


Простые действия над деревом Nested Set

Что нужно учесть для CRUD

Все необходимые методы, для управления деревом Nested Set уже определены в расширении.

Поэтому изменения в стандартном контроллере совсем небольшие. Нужно, например, вместо стандартного метода save() модели использовать метод prependTo() расширения, а вместо delete(), deleteWithChildren().


Представления для операций с Nested Set

Что нужно учесть в представлениях при редактировании Nested Set

Мы, в общих чертах, разобрались с деревьями Nested Set и создали модель для хранения дерева. В модели определили пару простых методов.

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


Подключение расширения Nested Set

Определение данных и необходимых методов в модели

Мы получили общее представление о древовидной структуре данных называемой Nested Set. Теперь пришло время подключить к блогу соответствующее расширение.

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


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

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

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

Поэтому, давайте делать рубрикатор.


Какую статью выбрать следующей или предыдущей

Как выбрать все статьи в цепочке

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

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


Цепочки статей в блоге

Можно ли сделать блог удобнее?

Ну, во-первых, удобнее по отношению к чему? К WordPress, например. Некоторое время назад я использовал эту программу для ведения блога.

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



Поиск



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

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

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

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


    Поделиться

Для обычной формы задать проверку может показаться не сложным common/models/Price.php.

public function rules()
{
  return [
    [
      [
        'type', 'fund_id', 'accommodation', 'food', 'treatment'
      ], 
      'unique', 
      'targetAttribute' => [
        'type', 'fund_id', 'accommodation', 'food', 'treatment'
      ], 
      'message' => \Yii::t('app', 'Duplicate entry'),
    ],

Такой вариант будет работать при добавлении новой строки. Но если понадобится поменять цену, в уже определенной строке, получим ошибку так как такая строка действительно уже существует.

Нужно свое правило. И лучше использовать класс. Обе проверки - на стороне сервера и на стороне клиента находятся в одном месте и легко контролируются.

Пример собственного валидатора

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

Если же изменился один или несколько ключевых атрибутов, то ищем новую комбинацию в таблице и добавляем ошибку, если такая комбинация существует common/components/UniqueValidator.php.

namespace common\components;
use yii\helpers\Url;
use yii\validators\Validator;
use common\models\Price;
/**
 * Check uniqueness by multiple values. 
 * If the values have not changed, we believe that the uniqueness is preserved. 
 * If one or more values have changed, we looking for a combination in the table. 
 * Error if exists.
 */
class UniqueValidator extends Validator
{
    public function init()
    {
        parent::init();
        $this->message = \Yii::t('app', 'Duplicate entry.');
    }
    public function validateAttribute($model, $attribute)
    {
        $old = $model->getOldAttributes();
        // Let's check if any key attributes have been changed.
        if($old && (
            $old['type'] != $model->type || 
            $old['fund_id'] != $model->fund_id || 
            $old['accommodation'] != $model->accommodation || 
            $old['food'] != $model->food || 
            $old['treatment'] != $model->treatment
        )) {
            // Is there any entity with a new values?
            if(Price::find()->where([
                'type' => $model->type, 
                'fund_id' => $model->fund_id, 
                'accommodation' => $model->accommodation, 
                'food' => $model->food, 
                'treatment' => $model->treatment,
            ])->exists()) {
                // An error pushed if entity exists.
                $model->addError($attribute, $this->message);
            }
        }
    }
    public function clientValidateAttribute($model, $attribute, $view)
    {
        $url = json_encode(Url::to(['price/entity-exists']));
        $old = json_encode($model->getOldAttributes());
        $message = json_encode($this->message, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE);
        return <<<JS
var entity = {};
entity.url = $url;
entity.old = $old;
// Get new values from a form
entity.new = {
    type: $('#price-type').val(),
    fund_id: $('#price-fund_id').val(),
    accommodation: $('#price-accommodation').val(),
    food: $('#price-food').val(),
    treatment: $('#price-treatment').val()
};
// Let's check if any key attributes have been changed.
if(
    entity.new.type != entity.old.type ||
    entity.new.fund_id != entity.old.fund_id ||
    entity.new.accommodation != entity.old.accommodation ||
    entity.new.food != entity.old.food ||
    entity.new.treatment != entity.old.treatment
) {
    // Is there any entity with a new values?
    entity.exists = false;
    $.ajax({
        url: entity.url, 
        data: entity.new,
        dataType: "json",
        // Very important parameter. Without it entity.exists will be false in any case.
        async:false
    }).done(function(response) {
        entity.exists = response;
    });
    // An error pushed if entity exists.
    if(entity.exists)
        messages.push($message);
}
JS;
    }
}

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

Проверки на сервере и на стороне клиента имеют один алгоритм, но есть важное отличие в проверке на стороне клиента. Проверка происходит с помощью ajax-запроса и чертовски важно указать, что этот запрос не является асинхронным.

Ajax-запрос по умолчанию всегда асинхронный и, если не указать обратное, запрос будет отправлен и, не дожидаясь ответа, программа продолжит выполнение. Когда ответ готов часть done уже выполнена и entity.exists всегда получает false.

А почему сразу не использовать объект message в блоке done? Кажется это проще. Но в области видимости блока done нет объекта messages .

Controller

backend/controllers/PriceController.php

  public function actionEntityExists($type, $fund_id, $accommodation, $food, $treatment)
  {
    \Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;
    return Price::find()->where([
      'type' => $type, 
      'fund_id' => $fund_id, 
      'accommodation' => $accommodation, 
      'food' => $food, 
      'treatment' => $treatment,
    ])->exists();
  }

Model

common/models/Price.php

  [['type', 'fund_id', 'accommodation', 'food', 'treatment'], 
    'common\components\UniqueValidator'],

Заключение

Написать собственный валидатор проще, чем кажется, но нужно быть тщательне́е при написании кода для проверки на стороне клиента. Чтобы не тратить время на поиск ошибки, нужно помнить две вещи о JavaScript - область видимости и асинхронный характер выполнения.

Leave a comment

Only authorized users can leave comments. Please log in or pass a registration.