Полный курс Laravel 10 Компоненты + Вёрстка в Blade (Blade Components)

• Макс Орлов, веб-разработчик на удаленке, приветствует зрителей.  

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

• Рекомендует подписаться на его телеграм-канал и чат для получения дополнительных материалов и общения.  

• Макс планирует продолжить изучение Laravel и вернуться к разделу Blade Templating.  

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

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

• Макс объясняет, как быстро подключить темы и начать работу.  

• Он упоминает, что для продакшна можно использовать Laravel Mix для оптимизации.  

• Подчеркивает, что подключение тем через Laravel Mix подходит для личных кабинетов и интернет-магазинов.  

• Макс начинает с верстки шапки сайта, используя Bootstrap.  

• Он объясняет, как использовать компоненты Bootstrap для создания меню.  

• Подчеркивает, что не будет подробно объяснять все классы и элементы, так как это тема для отдельного видео.  

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

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

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

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

• Он показывает, как настроить меню для разных размеров экрана.  

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

• Макс делится лайфхаком по верстке текстов с использованием глобальной функции.  

• Он объясняет, как использовать эту функцию для создания мультиязычных сайтов.  

• Подчеркивает, что переводы будут храниться в каталоге lang.  

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

• Изначально тексты писались вручную, что создало проблемы при переводе.  

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

• Laravel позволяет легко добавлять переводы текстов через глобальную функцию.  

• В других фреймворках, таких как JQuery, требуется дополнительная настройка и пакеты.  

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

• Начинается работа над страницей входа, создается секция и контейнер.  

• Используется карточка Bootstrap для создания формы.  

• Форма настраивается для разных устройств: мобильный, планшет, компьютер.  

• Добавляются элементы формы: лейбл, ввод, автофокус.  

• Используется класс для лейбла с красной звездочкой для обязательных полей.  

• Добавляется чекбокс для запоминания пользователя.  

• Проверяется работа автофокуса и чекбокса.  

• Добавляется текст в футер для красоты.  

• Форма выглядит минималистично и функционально благодаря Bootstrap.  

• Компоненты позволяют создавать и использовать повторяющиеся элементы на сайте.  

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

• Изменение в компоненте влияет на все страницы, где он используется.  

• Компоненты можно создавать через консоль с помощью команды `create-component`.  

• Создается класс компонента и шаблон в каталоге `app/views/components`.  

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

• Компоненты могут содержать логику и стили.  

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

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

• Компоненты имеют префикс `x-`, чтобы избежать конфликтов с тегами.  

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

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

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

• Компоненты можно расширять для добавления новых элементов.  

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

• Компоненты могут получать и обрабатывать атрибуты.  

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

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

• Компоненты помогают организовать и управлять повторяющимися элементами.  

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

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

• Создаем компонент формы и копируем его.  

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

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

• Атрибуты используются для валидации и не требуют значений.  

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

• Параметры объявляются через директиву props.  

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

• Параметры могут иметь значения по умолчанию.  

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

• Компоненты могут принимать атрибуты и параметры.  

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

• Метод class позволяет добавлять классы по условию.  

• Создаем компонент импута и добавляем атрибуты по умолчанию.  

• Используем метод merge для добавления атрибутов по умолчанию.  

• Компонент импута становится документацией для себя.  

• Атрибуты по умолчанию заменяются переданными параметрами.  

• Метод merge позволяет добавлять атрибуты по умолчанию.  

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

• Обсуждение создания компонентов для ввода данных.  

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

• Подход к разработке компонентов: сначала интерфейс, затем функционал.  

• Создание компонента для чекбокса.  

• Передача атрибутов name и value.  

• Использование метода merge для объединения значений.  

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

• Решение с использованием метода generateId из класса String.  

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

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

• Передача атрибутов type и value.  

• Использование метода merge для объединения значений.  

• Настройка цвета и размера кнопки.  

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

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

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

• Советы по улучшению качества кода.  

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

• Копирование и вставка элементов в логин и регистр.  

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

• Удаление ненужных элементов и настройка автофокуса.  

• Создание общего слоя для регистрации и входа.  

• Перенос общих элементов в новый слой.  

• Оптимизация кода для упрощения работы.  

• Проверка текущего маршрута для активации ссылок.  

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

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

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

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

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

• Подведение итогов и обсуждение полезности видео.  

• Анонс следующей темы о слотах.  

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

• На странице входа нужно добавить ссылку на страницу регистрации.  

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

• Добавляем слот "right" в компонент "card-header".  

• Проверяем наличие слота "right" с помощью директивы "if-set".  

• Используем директиву "if-set" для краткости кода.  

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

• Используем Flex-классы для разделения элементов.  

• Добавляем ссылку на регистрацию в правую часть контейнера.  

• Проверяем, что ссылка выводится только при наличии слота "right".  

• Создаем компоненты для блоков сайта, таких как "login-card".  

• Используем компоненты для дублирования элементов на разных страницах.  

• Компоненты позволяют создавать и использовать элементы повторно.  

• Выводим посты в цикле, создавая секции и контейнеры.  

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

• Создаем компонент "card" для отображения постов.  

• Передаем данные в компонент "card" через атрибут.  

• Указываем, что переменная "post" должна быть передана в компонент.  

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

• Двоеточие в шаблонах может быть использовано для разделения между браузером и шаблоном.  

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

• Это позволяет избежать ошибок при рендеринге.  

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

• Компоненты можно использовать в разных местах сайта.  

• Заголовок поста можно уменьшить до h2.  

• Использование пакета Carbon для работы с датой и временем.  

• Метод now возвращает объект с текущим временем и датой.  

• Дата и время форматируются с помощью метода format.  

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

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

• Тестирование и исправление ошибок в шаблонах.  

• Добавление кнопки назад в компонент поста.  

• Использование слота для ссылки.  

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

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

• Использование каталога user для хранения страниц кабинета пользователя.  

• Возвращение страниц с помощью глобальной функции view.  

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

• Использование метода redirect для перенаправления на нужную страницу.  

• Верстка страниц с использованием шаблонов и компонентов.  

• Копирование постов из блога и вставка их в кабинет пользователя.  

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

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

• Удаление ненужных элементов и добавление заголовка h2.  

• Вывод ссылки на пост и названия поста.  

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

• Создание страницы для просмотра поста.  

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

• Вывод заголовка, даты и контента поста.  

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

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

• Уменьшение маржинов для лучшего визуального восприятия.  

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

• Использование слота для размещения кнопки.  

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

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

• Вставка кнопки в ссылку для создания поста.  

• Проверка работы ссылки и кнопки.  

• Копирование страницы индекса и создание страницы создания поста.  

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

• Настройка ссылки на страницу "Мои посты" или "Назад".  

• Использование компонента x-form для создания формы.  

• Добавление обязательных полей для названия и содержания поста.  

• Настройка автофокуса и высоты для текста.  

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

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

• Введение новой директивы из шаблонизатора.  

• Для создания поста используется редактор Trix.  

• Trix используется в официальной админке Laravel Nova.  

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

• Создаем папку и файл для Trix.  

• Подключаем Trix как скрипт на страницу создания поста.  

• Используем директиву `stack` для подключения Trix только на нужных страницах.  

• `stack` позволяет подключать скрипты и плагины на нужных страницах.  

• `push` используется для передачи контента в стек.  

• `stack` удобен для подключения нескольких скриптов на одной странице.  

• Тестируем подключение Trix и исправляем ошибки.  

• Создаем компонент Trix и интегрируем его в форму.  

• Контент из Trix автоматически помещается в скрытое поле формы.  

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

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

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

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

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

• Проверяем работу компонента и передаваемых переменных.  

• Компонент Trix принимает имя и стили.  

• Использование компонента Trix позволяет легко подключать стили.  

• Компонент Trix можно использовать несколько раз на странице.  

• Директива uniq позволяет вставлять элементы только один раз.  

• Это предотвращает дублирование файлов и улучшает производительность.  

• Фреймворк Laravel поддерживает эту функцию из коробки.  

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

• Необходимо передать переменную post в форму поста.  

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

• Компонент Trix использует атрибуты name и value.  

• Атрибуты можно вывести через трибью.  

• Удаление ненужных атрибутов улучшает читаемость кода.  

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

• Передача поста в экшены для корректной работы.  

• Указание параметров в компоненте для предотвращения ошибок.  

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

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

• Благодарность за просмотр и приглашение к дальнейшему взаимодействию.