Уроки Ruby on Rails - 5. Формы, layouts, assets pipeline 🛤️

• Приветствие и представление автора.  

• Обзор предыдущих уроков по Ruby on Rails.  

• Переход к практике и использованию форм для создания вопросов.  

• Обучение созданию редиректов, форм для редактирования и удаления вопросов.  

• Изменение внешнего вида сайта и добавление стилей.  

• Переход от использования консоли к созданию форм через браузер.  

• Создание новой страницы по конвенции Rails.  

• Запуск сервера и проверка пути для новой страницы.  

• Создание файла контроллера и формы для нового вопроса.  

• Написание действия контроллера для новой страницы.  

• Создание файла формы в папке app.  

• Написание кода формы для отправки нового вопроса.  

• Добавление полей ввода текста для вопроса.  

• Ввод текста в поле "бади".  

• Добавление инпута для ввода текста "юзер".  

• Создание кнопки "создать" и добавление текста для кнопки.  

• Добавление лейблов для полей "бади" и "юзер".  

• Тестирование формы: создание вопроса и проверка в консоли сервера.  

• Исправление ошибки в запросе на создание вопроса.  

• Объяснение, почему запрос не отправляется браузером.  

• Использование обработчика JavaScript для обработки запросов.  

• Решение проблемы с отправкой формы и редиректом на страницу вопроса.  

• Введение в вспомогательные методы для создания форм в Rails.  

• Использование метода "form_with" для создания формы с нужными параметрами.  

• Передача модели для создания формы и проверка работы метода.  

• Использование метода "form_builder" для генерации полей формы.  

• Переписывание тегов формы с использованием методов "label" и "text_field".  

• Проверка работы формы и добавление кнопки "создать".  

• Обновление страницы и проверка работы формы.  

• Проверка, что лейблы и инпуты отображаются корректно.  

• Тестирование кнопки "создать" и проверка перехода на страницу вопроса.  

• Рельсы добавили в форму специальный анти-CSRF токен.  

• Этот токен автоматически генерируется и отправляется с данными формы на сервер.  

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

• Если токен не отправлен, возникает ошибка.  

• Для отключения ошибки ранее добавляли строку в контроллер skip_before_action :verify_authenticity_token.  

• Теперь эту строку можно убрать, так как она больше не нужна.  

• В реальных приложениях отключать анти-CSRF токен не рекомендуется.  

• Куки имеют параметр site, который предотвращает пересылку куки между сайтами.  

• Рекомендуется использовать последнюю стабильную версию Rails.  

• Создаем ссылку на создание нового вопроса на главной странице.  

• Создаем страницу редактирования вопроса с помощью действия edit.  

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

• Создаем шаблон для страницы редактирования и выводим идентификатор вопроса.  

• Форма редактирования вопроса аналогична форме создания, но с методом PUT.  

• Изменяем кнопку сохранения на "Сохранить".  

• Проверяем, что форма заполнена значениями из базы данных.  

• Добавляем ссылку на редактирование вопроса на страницу просмотра.  

• Проверяем работу ссылки и формы редактирования.  

• Создаем кнопку для удаления вопроса с помощью хелпера button_to.  

• Проверяем, что кнопка отправляет POST-запрос с параметром delete.  

• Завершаем действие удаления редиректом на страницу всех вопросов.  

• Укорачиваем код контроллера, передавая хэш параметров вместо отдельных значений.  

• Объясняем, почему это небезопасно и как злоумышленник может подменить параметры формы.  

• Вопросы с полем "лучший" выбираются модератором или админом.  

• Злоумышленник может вручную создать вопрос с параметром "топ" равным true.  

• Рельсы требуют проверки параметров перед передачей в модель.  

• Метод params.require требует наличия определенных ключей в хэше params.  

• Метод params.permit оставляет только заданные значения ключей.  

• Пример использования: создание переменной с параметрами для создания вопроса.  

• Пример использования дебагера для проверки параметров.  

• Метод params.permit проверяет, разрешены ли параметры для создания модели.  

• Важно оставить только нужные параметры для создания вопроса.  

• Создание приватного метода для параметров в контроллере.  

• Метод возвращает параметры, которые будут использоваться в контроллере.  

• Пример использования в действии update.  

• Выделение повторяющегося кода в отдельный метод.  

• Метод выполняется перед каждым действием контроллера.  

• Пример использования метода before_action для оптимизации кода.  

• Обновление и удаление вопросов работает корректно.  

• Убрано дублирование кода, что сделало его короче.  

• Лейауты автоматически отрисовываются рельсами.  

• Лейауты содержат код, который оборачивает содержимое шаблона.  

• Лейауты называются "лейауты" от английского layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout layout  

• Использование ASI Pipeline для добавления стилей.  

• Создание стилей с нуля, без использования фреймворков.  

• Логичное разбиение файлов стилей для удобства.  

• Сброс стилей для всех тегов.  

• Указание размера шрифта и жирности для заголовков.  

• Создание файла text.css для управления шрифтами.  

• Выбор шрифта для всего сайта.  

• Создание классов для заголовков разного размера.  

• Добавление стилей для маленького текста.  

• Проверка применения стилей на странице.  

• Склейка всех стилей в один файл.  

• Влияние стилей на внешний вид сайта.  

• Создание файла spacing.css для вертикальных отступов.  

• Определение классов для отступов сверху и снизу.  

• Применение отступов на страницах.  

• Важность управления порядком подключения стилей.  

• Использование инструкции @import для управления порядком подключения файлов.  

• Проверка порядка подключения стилей на странице.  

• Создаем файл layout.css для стилей классов и общего стиля для всех страниц.  

• Выбираем темный фон для макета и добавляем его в файл.  

• Устанавливаем фиксированный размер и отступ для контейнера.  

• Добавляем контейнеры для каждого шаблона и устанавливаем отступ.  

• Проверяем, как выглядит сайт после добавления контейнеров.  

• Возможность подключения стилей из гемов для удобства обновления.  

• Пример подключения стиля font-awesome для создания иконок.  

• Метод helper для создания иконок с помощью font-awesome.  

• Пример использования метода для создания кнопки с иконкой карандаша.  

• Сбрасываем стили для кнопок, чтобы они выглядели как ссылки.  

• Убираем отображение блока для кнопок, созданных с помощью helper.  

• Использование четвертой версии font-awesome для учебных материалов.  

• В шестой версии некоторые иконки стали платными, поэтому используется четвертая версия.  

• Создаем новый файл style.scss и класс button.  

• Устанавливаем белый текст и нулевой бордер для ссылок.  

• Добавляем падинг и радиус угла для бордера.  

• Применяем стиль к кнопкам и ссылкам.  

• Устанавливаем падинг и радиус угла для кнопок.  

• Применяем стиль к главной кнопке с использованием палитры цветов.  

• Прописываем классы для кнопок в нужных элементах.  

• Проверяем, что стили для кнопок применяются корректно.  

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

• Исправляем ошибку сохранения файла style.scss.  

• Создаем файл form.scss для стилей полей формы.  

• Устанавливаем серый бордер и падинг для полей.  

• Изменяем фон при фокусе на желтый цвет.  

• Применяем стили к полям на страницах edit и new.  

• Проверяем, что стили для полей формы применяются корректно.  

• Исправляем ошибку сохранения файла form.scss.  

• Обновляем страницу и проверяем, что стили применяются.  

• Прописываем корневой путь для сайта в конфиге.  

• Проверяем работу сайта и удобство использования.  

• Подводим итоги урока и призываем к практике и подписке на канал.