Может войдёшь?
Черновики Написать статью Профиль

Основы Laravel 5: Сообщения-вспышки

перевод Основы Laravel 5 Laracasts

Это перевод видео-урока с Laracasts, серия Laravel 5 Fundamentals, урок №20Flash Messaging от . Перевод обновлён . Опечатка? Выдели и нажми Ctrl+Enter.

(0:00)
Вот о чём я хочу, чтобы вы подумали. Часто когда пользователь выполняет какое-либо действие в вашем приложении, вы хотите дать ему какое-то уведомление, чтобы сообщить, например: «Эй, ваша учетная запись была успешно деактивирована».
Поэтому, возможно, это было бы полезно и для нашего маленького блога здесь. Введём Blog Article, небольшой текст и опубликуем статью. И заметьте, что, да, нас сюда перенаправили, и если честно, в данном случае совершенно очевидно, что всё прошло успешно.

(0:30)
Но, как вы можете себе представить, во многих других случаях, вам действительно понадобятся какие-то уведомления. Даже нечто настолько простое, как нажатие на кнопку Log Out, может выдать вам сообщение, подтверждающее статус: «Вы вышли из системы».
Давайте в этом уроке разберёмся как с этим справиться. Я покажу вам два способа, во-первых, мы сделаем это вручную, а затем дальше, я покажу вам небольшой пакет, который вы сможете притянуть, и с его помощью можно до смешного просто всё это сделать.
Наш первый шаг — идём на PHPArticlesController.

(1:00)
Теперь, когда пользователь создаёт новую статью, как мы знаем, метод PHPstore() вызывается, когда мы сделали новую статью и сохранили её. И на самом деле, немного не в тему — здесь мы создаём статью и передаём её методу сохранения PHPsave(), но также, если вы предпочитаете, то могли бы использовать метод PHPcreate().
Так же, как мы это делали, когда мы передавали массив атрибутов:

PHP
Article::create([]);

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

PHP
Auth::user()->articles()->create($request->all());

(1:30)
так что, если мы удалим вот это, то всё будет по-прежнему работать точно таким же образом.
Хорошо, но в любом случае, мы создали новую статью, и мы перенаправим пользователя назад к списку статей, но я также хочу отобразить то, что мы называем «сообщением-вспышкой» (flash). Сообщение, которое показывается на экране для следующего запроса, а позднее, если перезагрузить страницу, его больше не будет видно.
Вот как мы можем сделать это в Laravel. У нас есть фасад сессии, так что мы могли бы сказать:

PHP
\Session::flash('flash message''Your article has been created!');

(2:00)
Я хочу показать сообщение, мы даём ему какой-нибудь идентификатор, flash message, а затем тело, как насчет Your article has been created (т.е. ваша статья была создана). Хорошо, это сработает для конкретной сессии. Однако, когда мы перенаправляем, то мы не увидим это сообщение, нам всё равно нужно отобразить его где-то в нашем представлении.
Так давайте сделаем это. Давайте вернёмся к нашей мастер-странице; если это относится к каждому виду, то мастер-страница – хорошее место, куда это стоит поместить.

(2:30)
И давайте вставим это прямо здесь, в верхней части нашего контейнера, и позднее мы сможем извлечь паршл, но сейчас давайте просто вставим наш код прямо здесь.
Давайте скажем, если у сессии есть этот ключ:

PHP
@if (Session::has('flash message'))

то в этом случае мы хотим отобразить его. Так почему бы нам не использовать:

<div class="alert alert-success"></div>

Это специфические классы из Twitter Bootstrap, которые просто немного облегчат нам работу. И потом внутри здесь мы выведем сообщение

PHP
{{ Session::get('flash_message') }}

(3:00)
ОК, таким образом, мы уже узнали несколько методов API.
Для начала – PHP\Session::flash(). Думайте о нём, в качестве единовременного флэш-сообщения. Также есть такие вещи, как PHP\Session::put() – поместить это в сессию. Разница между этим и flash-сообщением в том, что последнее носит временный характер, только для одного запроса.
Так что у нас есть эти два, и ещё мы можем увидеть такие методы, как PHPSession::has(). Есть ли у нас этот ключ в сессии?

(3:30)
И если он есть, то через PHPget() получим значение, связанное с этим ключом. Давайте посмотрим, как это выглядит в браузере.
Поэтому ещё раз я создам новую статью. Просто напишем test (в название) и test (в тело), и, когда мы добавим статью, точно, вы увидите сообщение прямо здесь. Теперь вот что я имел в виду про то, что это одноразовое сообщение. Если мы перезагрузим эту страницу, сообщение только промелькнуло, так что мы его больше не видим, и это значит, что это идеально подходит для таких маленьких сообщений с уведомлениями.

(4:00)
Вы вероятно обнаружите, что для большинства производственных приложений вам понадобится немного больше гибкости.
Например, когда нас перенаправляют назад на эту страницу с flash-сообщением, оно как бы отображается всё время. Может быть, вы хотите отображать сообщение в течение четырех секунд и чтобы затем оно ускользнуло наверх? Вы хотите, чтобы оно исчезло.
Но в других ситуациях, для действительно важных сообщений, вы и правда хотите, чтобы они отображались постоянно. И чтобы пользователь должен был нажать на маленькую кнопку 'х', чтобы признать, что «Да», он прочитал сообщение и теперь хочет удалить его.

(4:30)
Так что, похоже, что на самом деле, нам нужно здесь чуть больше гибкости. Давайте посмотрим, как мы могли бы это сделать. Ну, для начала, если мы вернёмся к нашему представлению, то почему бы нам не добавить маленький х наверху, и я просто вставлю вот этот код:

<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>

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

laravel5.dev/articles/create

test2, опубликуем статью. И теперь мы получаем сообщение, и вы увидите, вот он маленький х.

(5:00)
Но если я нажму на него, то ничего пока не происходит, потому что Twitter Bootstrap там требуется немного JavaScript. Так почему бы нам не добавить его? Давайте разместим это внизу, прямо перед закрывающим </body>.
И для реального проекта вы, вероятно, будете хранить его локально. Но я просто вставлю это здесь. Мы получаем последнюю версию jQuery, даже не версию в кэше, просто будем ссылаться на неё напрямую. И далее у нас есть весь JavaScript для Twitter Bootstrap, который хранится на CDN.

(5:30)
Так что имейте в виду, мы делаем это для удобства. На самом деле, если вы используете Twitter Bootstrap, вы можете загрузить специальный файл JavaScript, который будет включать в себя только те компоненты, которые ваше приложение на самом деле станет использовать.
Но это всего лишь пример, и для нас этого здесь вполне достаточно. Так что теперь давайте попробуем ещё разок. Мы создадим третью тестовую статью test3, и если мы добавим её сейчас, то у нас есть кнопка х, и если мы нажимаем на неё, наше сообщение будет удалено. Довольно просто.

(6:00)
Но, как я уже сказал, в некоторых ситуациях, вы можете захотеть это использовать, а в других, вам не нужно, чтобы пользователь нажимал на кнопку закрытия. Вы просто захотите быстрое сообщение, которое исчезнет через две-три секунды.
Так что, может быть, вы могли бы отображать кнопку только тогда, когда в сессии устанавливается некоторое другое значение. Например:

PHP
@if (Session::has('flash_message_important'))

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

(6:30)
Мы могли бы сказать: если у нас есть flash_message_important, в этом случае давайте добавим здесь класс alert_important. В противном случае мы не должны ничего отображать:

PHP
{{ Session::has('flash_message_important') ? 'alert-important' '' }}

И кстати, здесь, у нас также есть функции-помощники, в Laravel 5 есть функция PHPsession(). И она на самом деле может быть довольно гибкой. Если мы посмотрим на неё вот здесь (в Foundation/helpers.php).

(7:00)
Если мы просто вызовем session(), и мы ничего не передадим, нам вернётся то, что хранится в контейнере IoC, так что вы всё ещё можете делать нечто вроде PHPsession()->get() or PHPsession()->flash(), и всё прочее. Очень похоже на использование PHPredirect() или PHPview(). Но если мы передаем туда массив, то Laravel будет считать, что мы даём что-то для сессии. И, наконец, если мы просто передаём какую-то строку, то предполагается, что мы делаем эквивалент PHPSession::get().
И это значит, если я переключусь обратно (к app.blade.php), вы могли бы изменить это примерно так:

PHP
{{ session('flash_message') }}

(7:30)
и получить точно такой же эффект. Также это означает, идём назад в PHPArticlesController, что вместо того, чтобы добавлять PHPuse Session в верхней части файла или глобально ссылаться на него, как мы сделали здесь, вы могли бы просто сказать PHPsession()->flash(). Вот так.
Хорошо, давайте вернемся к нашему представлению. Теперь, если мы даём сессии ключ flash_message, то на самый следующий запрос мы отобразим его. Но также, если существует нечто под названием flash_message_important, то мы хотим также отобразить кнопку закрытия.

(8:00)
Наконец, мы могли бы написать немного JavaScript, чтобы скрыть сообщение. И я просто использую здесь немного jQuery. Мы по сути хотим сказать: "дайте мне div, с классом alert, то есть, дайте мне коллекцию всех элементов на странице, которые соответствуют CSS, но отфильтруйте их, потому что я не заинтересован в элементах класса alert_important, которые не должны применяться.

js$('div.alert').not('.alert-important')

Тогда мы просто хотим подождать, задержку в течение примерно 3 секунд, и затем сдвинуть сообщение вверх.

js$('div.alert').not('.alert-important').delay(3000).slideUp(300)

(8:30)
Хорошо, давайте посмотрим на это в браузере. Так что ещё раз мы создаем четвёртый пост в блоге. Мы добавляем его и обратите внимание, что сообщение отображается в течение нескольких секунд, а затем ускользает наверх. Круто, не так ли? Но теперь мы передадим дополнительный ключ к этой сессии.
Вернёмся к нашему редактору, открываем PHPArticlesController, и теперь, на самом деле, мы можем это сделать несколькими способами.
Один, продублируем это, вот так:

PHP
session()->flash('flash_message''Your article has been created!');
session()->flash('flash_message_important'true)

(9:00)
Давайте посмотрим, если это сработает.
Это будет наша пятая попытка (пишем Fifth). Таким образом, мы добавим статью, и теперь вы увидите, что она не скрылась, но у нас есть кнопка х, так что вы можете вручную отключить сообщение, когда его прочитаете.
Круто, но, как я уже сказал, есть несколько способов сделать это.
Так что да, мы могли бы сделать это так, но также мы могли бы добавить здесь метод PHPwith(). Итак, когда мы делаем PHPredirect() и вызываем PHPwith(), это предполагает, что мы выведем flash-сообщение.

(9:30)
Так что мы могли бы сделать так:

PHP
return redirect('articles')->with([
    
'flash_message' => 'Your article has been created',
    
'flash_message_important' => true
]);

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

(10:00)
Так что, если мы вернемся к app.blade.php, это прекрасный пример того, что можно выделить в partial. Давайте откроем нашу боковую панель и перейдём в resources/views. И давайте добавим здесь каталог partialspartials/flash.blade.php и сюда я его и вставлю.
Теперь, если я переключусь назад, я могу сказать:

PHP
@include('partials.flash')

и мы получим тот же конечный результат.

(10:30)
Здорово, теперь вы знаете, как это делать, но до сих пор это не меняет тот факт, что код всё ещё является немного громоздким.
На самом деле, вот что я предпочёл бы сделать в моём реальном проекте. Может быть, я бы вызвал функцию PHPflash() например так:

PHP
flash('Your article has been created');

и затем я мог бы удалить всё это и перенаправить. И это бы всё ещё дало тот же самый результат. И потом, если бы я захотел показать что это важно, то может быть, я бы ещё добавил метод important():

PHP
flash('Your article has been created')->important();

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

(11:00)
Я уже забежал вперёд и сделал это, так что если вы хотите, то можете притянуть небольшой пакет, который даёт вам такого рода API. Давайте я покажу как это сделать.
Назад в терминал, я сделаю:

shcomposer require laracasts/flash

и теперь пока это притягивается, мы можем пойти в наш файл config/app.php и нам нужно добавить поставщика услуг, так что мы можем сделать это прямо здесь:

PHP
'Laracasts\Flash\FlashServiceProvider'

(11:30)
и быстрое замечание здесь, если вы когда-нибудь задумывались, «Откуда же я должен был это знать?». Для любого пакета, который вы можете притянуть, вам достаточно посмотреть документацию часто прямо на GitHub, и там вам скажут точно что нужно делать.

  • Шаг 1 — composer require
  • Шаг 2 — добавить поставщика услуг
  • Шаг 3 — добавить псевдоним (alias)

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

PHP
'Flash' => 'Laracasts\Flash\Flash'

(12:00)
Хорошо, это должно сработать. Назад к PHPArticlesController. Теперь, да, у нас есть вспомогательная функция, которую вы могли бы использовать. Или, если вы предпочитаете подход с фасадом, то могли бы сказать PHP\Flash... и информационное сообщение:

PHP
\Flash::info()

или сообщение об ошибке:

PHP
\Flash::error()

или сообщение об успешном выполнении:

PHP
\Flash::success()

а потом за кадром автоматически обрабатывается процесс настройки для вас этих ключей.
Позвольте мне показать вам, как это выглядит. Существует класс-уведомитель, и заметьте, к примеру, если бы мы запустили PHP\Flash::success(), то мы создаём новое flash-сообщение, и оно только передаёт несколько ключей в сессию.

(12:30)
Очень похоже на то, как мы делали раньше.
Это просто даёт вам более хороший API или более хорошую обертку, чтобы вам не пришлось повторяться снова и снова. И также круто, что у вас есть несколько представлений, которые вы могли бы притянуть и модифицировать как вам нужно. Итак, позвольте мне показать вам, как это работает.
Давайте вернёмся к app.blade.php, и мы не будем ссылаться на наш собственный partial, мы сошлёмся на partial из представления. Откроем flash/message.blade.php.

(13:00)
И вы увидите – это то, что мы получаем из пакета.
Так что, если мы переключимся назад, я могу включить представление из пакета с помощью ссылки на имя пакета – flash:: и затем имя нужного представления (в этом случае оно называется message):

PHP
@include ('flash::message')

Итак, давайте посмотрим, как это выглядит.
Просто чтобы убедиться, что вы всё поняли – мы создаём статью, мы выдаём flash-сообщение, и затем мы перенаправляемся назад к списку статей. ОК, давайте попробуем.

(13:30)
Мы создаём новую статью. Я думаю, что мы сейчас находимся на седьмой, добавим её, и ещё раз мы получим тот же самый результат.
В данном случае у нас было информационное сообщение, но может быть, вы захотите сообщение об успешном исполнении, тогда можно сказать:

PHP
flash()->success()

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

(14:00)
Так что на этот раз я думаю, что результат должен быть зелёным. И, да, сообщение зелёное.
Мы уже видели flash-сообщения, которые должны оставаться или скрываться, но, возможно, вы также захотите, своего рода, накладываемое сообщение. Так, например, если вы зарегистрируетесь на Laracasts, я отображаю модальное окно, которое говорит: «Эй, добро пожаловать на Laracasts! Большое спасибо за регистрацию!». Это немного другой стиль и он также идёт в пакете. Позвольте я вам покажу. На этот раз, вместо сообщения PHPsuccess(), мы используем сообщение PHPoverlay().

(14:30)
И вы увидите, если мы перейдём прямо к нему, к функции PHPoverlay() в FlashNotifier.php, то здесь мы даём ей сообщение, а также заголовок, так что, мы могли бы сказать:

PHP
flash()->overlay('Your article has been successfully created!''Good Job');

На самом деле не очень хороший пример для использования наложения, но вы поняли идею.
Так что если вы захотите использовать этот метод, то единственное, что вам придётся сделать, это активировать его. Так что я закомментирую вот это, и мы выберем PHPmodal(). Если мы вкратце его рассмотрим, то вы увидите, что у нас есть id="flash-overlay-modal".

(15:00)
Так что вы можете найти его просто вызывая на нём метод PHPmodal():

js$('#flash-overlay-modal').modal();

Ещё раз, мы просто используем здесь плагин Twitter Bootstrap, поэтому мы ссылаемся на скрипт, и затем мы активируем плагин, так сказать. Хорошо, так почему бы нам не попробовать это в браузере?
Последний раз уже, я думаю. Мы пишем: final, final, добавим статью, и на этот раз мы получаем накладку, которую вы можете просмотреть и закрыть, когда готовы. Итак, на самом деле это всё что нужно здесь знать.

(15:30)
Вы можете притянуть этот пакет, или если вы не хотите этим заморачиваться, то не забывайте, что вы всё ещё можете сказать:

PHP
session()->flash('')

и потом всё, что вам нужно сделать, это в вашем представлении слушать, существует ли ключ с таким именем, и если это так, то выдать значение, связанное с ним. «Вы зарегистрированы!» или нечто в этом роде. Так что на Laracasts, например, я использую именно этот пакет, когда вы зарегистрировались. У меня есть небольшое сообщение, которое говорит что вы вошли:

PHP
flash('You are now logged in');

(16:00)
Это чистый, быстрый, простой способ, и это намного проще, чем всегда добавлять PHPwith():

PHP
return redirect('articles')->with('flash_message''You are now logged in.');

Эти маленькие победы, когда вы делаете ваш код чуть чище и чуть короче, действительно имеют большой эффект на конечный результат.
Хорошо, так что теперь вы освоили искусство сообщений-вспышек.

Как вы считаете, полезен ли этот материал? Да Нет

Комментарии (9)

slider23

«вспышки» ? вы серьезно ? переводчик хоть как-нибудь знаком с веб-разработкой ?

Proger_XP

Как предлагаешь переводить flash?

slider23

Если одним словом — «flash-сообщения», если по-русски — «уведомления о совершенных действиях». IT-термины одним словом на русский не переводятся.
Какая польза начинающему будет, если здесь он узнает о «вспышках», придет в комьюнити, спросит что-нить релевантное про это, а там его не поймут ?

Proger_XP

Начинающие не будут писать «flash-сообщения» или, тем более, «уведомления о совершенных действиях» — они будут писать «флэш», «флеш» или как угодно ещё. Ты вот сам пишешь «комьюнити», хотя для этого есть равнозначное русское слово — «сообщество».

Если все термины писать по-английски, то, во-первых, понимания у незнающих английский не прибавится (что такое flash и почему оно названо так, а не «flush» или «flesh»?), а, во-вторых, в сообществе не прибавится именно русских устойчивых терминов.

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

slider23

Ты правда, когда пишешь сайт, говоришь внутри себя «а вот тут я сделаю вспышку» ?
UPD впрочем, сорри, это риторический вопрос, если перевод твой, то ты волен писать как хочешь.

Proger_XP

Перевод не мой, но я не знаю лучшего перевода для flash, чем «вспышка», а доводы против использования «flash» или «флэш» в тексте я уже привёл.

Когда пишешь сайт, надо думать на том же языке, который в основе этого языка программирования (для PHP — английский). Для тех, кто языка пока не знает, лучший способ это мостики между английскими терминами и русскими словами. Если тупо использовать транслит для всех терминов, то люди не будут понимать концепций — будет просто набор заученных терминов без значения (вью, дотфайл, темплэйт, сет и т.п.). Небольшой процент этого понятен и допустим, но сейчас, ИМХО, он перевалил за критическую границу.

Программирование — это же не какая-то магия, это те же идеи и обхекты, что и в реальном мире — шаблоны, наборы, сообщения. Надо их называть нормально. В русском языке много полезных, но забытых слов, типа как «обозреватель» или «проводник» вместо «эксплорера», «развёртывание» вместо «деплой».

zZz

«Когда пишешь сайт, надо думать на том же языке, который в основе этого языка программирования (для PHP — английский)»
по моему в основе всех языков английский :-)

Proger_XP

Есть множество языков программирования, в основе которых не английский. Например, язык 1С у нас, Kirikiri у японцев. В СССР были свои ЯП (или, по крайней мере, «транслированные» с английского, как АЛГОЛ). У азиатов вообще много своих языков, где одни иероглифы.

Не говоря уже о том, что ЯП типа Whitespace или APL вообще нельзя отнести к какому-то человеческому языку :)

life←{↑1 ⍵∨.∧3 4=+/,¯1 0 1∘.⊖¯1 0 1∘.⌽⊂⍵}

На Википедии есть список.

sterkh

мне кажется «всплывающие сообщения» наиболее по-русски ;)

Написать комментарий

Разметка: ? ?

Авторизуйся, чтобы прокомментировать.