Главная » Софт

Руководство по добавлению класса «active» в шаблон Laravel 9 blade

На чтение 9 мин Опубликовано Обновлено

Веб-разработка с использованием фреймворка Laravel предлагает множество возможностей для создания динамических и интерактивных веб-приложений. Одна из распространенных задач — добавление класса «active» к активному пункту меню или элементу интерфейса. В этой статье я расскажу, как можно реализовать это в Laravel 9 blade.

В Laravel 9 blade есть множество способов добавления класса «active». Один из самых простых — использование встроенной директивы @if. Для начала, необходимо определить текущий путь, на котором находится пользователь. Это можно сделать с помощью встроенной функции `request()->path()`. Затем, можно использовать условие @if, чтобы проверить, совпадает ли текущий путь с путем активного элемента. Если условие верно, то добавляем класс «active» к элементу.

Вот пример кода:



<ul class="navbar-nav">


<li class="nav-item">


<a class="nav-link @if(request()->path() == '') active @endif" href="/">Главная


</li>


<li class="nav-item">
 
<a class="nav-link @if(request()->path() == 'about') active @endif" href="/about">О нас


</li>


</ul>

В этом примере мы используем условие @if для проверки текущего пути и добавления класса «active» к активному пункту меню. Для этого мы используем встроенную функцию `request()->path()`, которая возвращает текущий путь. Если текущий путь совпадает с путем активного элемента, то мы добавляем класс «active» к элементу.

Содержание
  1. Установка и настройка Laravel 9
  2. Шаг 1: Установка Laravel
  3. Шаг 2: Создание маршрутов в Laravel
  4. Добавление класса active в blade шаблоны
  5. 1. Использование функции Request
  6. 2. Использование встроенной функции route
  7. 3. Использование встроенной функции currentRouteName
  8. Шаг 1: Определение текущего маршрута

Установка и настройка Laravel 9

Laravel 9 — это последняя версия популярного фреймворка PHP, который предоставляет разработчикам удобные инструменты для создания высококачественных веб-приложений. В этом разделе мы рассмотрим процесс установки и настройки Laravel 9.

Шаг 1: Установка Composer

Первым шагом в установке Laravel 9 является установка Composer, пакетного менеджера для PHP, который позволит нам установить и поддерживать зависимости Laravel.

  1. Посетите официальный сайт Composer (getcomposer.org) и следуйте инструкциям для установки Composer на свою операционную систему.
  2. После установки Composer откройте командную строку или терминал и выполните команду composer --version, чтобы убедиться, что Composer успешно установлен.

Шаг 2: Установка Laravel 9

После успешной установки Composer мы готовы установить Laravel 9.

  1. Откройте командную строку или терминал и перейдите в каталог, где вы хотите создать новый проект Laravel 9.
  2. Выполните следующую команду, чтобы создать новый проект Laravel 9:
    composer create-project --prefer-dist laravel/laravel:^9.0 проект-имя
  3. Подождите, пока Composer завершит процесс установки. По завершении вы увидите сообщение «Application ready! Build something amazing.»

Шаг 3: Настройка окружения

После установки Laravel 9 необходимо настроить ваше окружение.

  1. В корневом каталоге вашего проекта откройте файл .env.
  2. Настройте файл .env согласно вашим потребностям, указав настройки базы данных и другие параметры окружения.
  3. Сохраните и закройте файл .env.

Шаг 4: Запуск сервера разработки

Последний шаг — запустить сервер разработки Laravel 9, чтобы начать работать над вашим проектом.

  1. Откройте командную строку или терминал и перейдите в корневой каталог вашего проекта.
  2. Выполните следующую команду, чтобы запустить сервер разработки Laravel 9:
    php artisan serve
  3. После выполнения этой команды вы увидите сообщение «Laravel development server started».
  4. Теперь вы можете открыть веб-браузер и перейти по адресу http://localhost:8000, чтобы увидеть ваше новое Laravel 9 приложение.

Теперь вы успешно установили и настроили Laravel 9. Вы готовы начать разрабатывать ваше новое веб-приложение с использованием этого мощного фреймворка.

Шаг 1: Установка Laravel

Перед тем, как начать использовать Laravel, необходимо установить его на свой компьютер. В этом разделе описано, как выполнить установку Laravel с использованием Composer.

  1. Установите Composer:

    2. Первым шагом необходимо установить Composer. Composer — это инструмент для управления зависимостями в проектах PHP. Вы можете скачать Composer с официального сайта:

    https://getcomposer.org/download/

  2. Создайте новый проект Laravel:

    3. После установки Composer вы можете создать новый проект Laravel с помощью следующей команды в терминале:

    composer create-project --prefer-dist laravel/laravel проект

    Вместо слова «проект» вы можете указать имя своего проекта.

  3. Запустите сервер разработки:

    4. Для запуска сервера разработки Laravel, перейдите в каталог вашего проекта и выполните следующую команду в терминале:

    php artisan serve

    После этого сервер будет запущен и ваше приложение Laravel будет доступно по адресу http://localhost:8000.

  4. Настройка базы данных:

    5. По умолчанию проект Laravel использует базу данных SQLite. Если вы хотите использовать другую базу данных, необходимо настроить файл .env в корневом каталоге вашего проекта.

    В файле .env вы можете установить информацию о соединении с базой данных, такую как имя пользователя, пароль, хост и название базы данных.

  5. Проверьте установку:

    6. Чтобы проверить, что Laravel был установлен корректно, вы можете открыть свой веб-браузер и перейти по адресу http://localhost:8000. Если все настроено правильно, вы должны увидеть страницу приветствия Laravel.

Поздравляю! Вы установили Laravel на свой компьютер и готовы приступить к разработке веб-приложений с использованием фреймворка Laravel.

Шаг 2: Создание маршрутов в Laravel

После создания базового шаблона в Laravel нам необходимо создать маршруты, по которым будут доступны различные страницы нашего приложения. Маршруты определяют, какой контроллер и какой метод должны быть вызваны при обращении к определенному URL-адресу.

Для создания маршрутов в Laravel используется файл web.php. Этот файл находится в директории routes в корневой папке проекта. Откройте файл web.php в вашем текстовом редакторе или IDE для редактирования.

В файле web.php можно определить маршруты для разных HTTP-методов (GET, POST, PUT, DELETE и т.д.). Мы сосредоточимся на создании маршрутов для отображения различных страниц нашего приложения.

В Laravel маршруты определяются с помощью функции Route::get(). Необходимо указать URL-адрес, который будет проходить при обращении к странице, и задать имя контроллера и метода, который должен быть вызван при этом URL-адресе.

Пример создания маршрута:



Route::get('/about', [App\Http\Controllers\HomeController::class, 'about']);

В этом примере, при обращении к URL-адресу «/about», будет вызван метод about класса HomeController, который находится в пространстве имен App\Http\Controllers.

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

После создания маршрутов сохраните файл web.php и перейдите к следующему шагу.

Добавление класса active в blade шаблоны

Класс active обычно используется для выделения текущей ссылки в меню или списка элементов, чтобы пользователь мог легко определить, на какой странице он находится. В Laravel 9 blade это можно сделать с помощью некоторых встроенных функций.

В Laravel 9 blade есть несколько способов добавления класса active к элементу в зависимости от текущего URL адреса. Рассмотрим несколько из них:

1. Использование функции Request

Для получения текущего URL адреса можно использовать функцию Request::url(). Затем с помощью условного оператора if можно проверить, равен ли текущий URL адрес ссылке и добавить класс active, если условие истинно.



<ul>


<li class="{{ Request::url() == route('home') ? 'active' : '' }}"><a href="{{ route('home') }}">Главная</a></li>


<li class="{{ Request::url() == route('about') ? 'active' : '' }}"><a href="{{ route('about') }}">О нас</a></li>


<li class="{{ Request::url() == route('contact') ? 'active' : '' }}"><a href="{{ route('contact') }}">Контакты</a></li>


</ul>

2. Использование встроенной функции route

Другой способ — использовать встроенную функцию route() для получения URL адреса для указанного маршрута. Затем можно использовать условный оператор if для проверки, равен ли текущий URL адрес ссылке, и добавить класс active, если условие истинно.



<ul>


<li class="{{ request()->routeIs('home') ? 'active' : '' }}"><a href="{{ route('home') }}">Главная</a></li>


<li class="{{ request()->routeIs('about') ? 'active' : '' }}"><a href="{{ route('about') }}">О нас</a></li>


<li class="{{ request()->routeIs('contact') ? 'active' : '' }}"><a href="{{ route('contact') }}">Контакты</a></li>


</ul>

3. Использование встроенной функции currentRouteName

Третий способ заключается в использовании встроенной функции currentRouteName(), которая возвращает имя текущего маршрута. Затем с помощью условного оператора if можно проверить, равно ли имя текущего маршрута ссылке, и добавить класс active, если условие истинно.



<ul>


<li class="{{ currentRouteName() == 'home' ? 'active' : '' }}"><a href="{{ route('home') }}">Главная</a></li>


<li class="{{ currentRouteName() == 'about' ? 'active' : '' }}"><a href="{{ route('about') }}">О нас</a></li>


<li class="{{ currentRouteName() == 'contact' ? 'active' : '' }}"><a href="{{ route('contact') }}">Контакты</a></li>


</ul>

Это только некоторые из способов добавления класса active в Laravel 9 blade. Вы можете выбрать тот, который наиболее удобен для вашего проекта и соответствует вашим потребностям.

Шаг 1: Определение текущего маршрута

Первым шагом для добавления класса «active» в Laravel 9 blade является определение текущего маршрута. Класс «active» будет добавляться к элементу меню, который соответствует текущему маршруту.

В Laravel 9 blade доступны несколько способов определения текущего маршрута:

  1. Использование хелпера request()->is()
  2. Использование хелпера request()->routeIs()
  3. Использование хелпера request()->is() и шаблона Route::is()
  4. Использование хелпера request()->route()->getName()

Вы можете выбрать любой из этих способов в зависимости от ваших предпочтений и требований проекта.

Пример использования хелпера request()->is():



<li class="<?php echo request()->is('home') ? 'active' : ''; ?>">


<a href="/home">Главная</a>


</li>

Пример использования хелпера request()->routeIs():



<li class="<?php echo request()->routeIs('home') ? 'active' : ''; ?>">


<a href="{{ route('home') }}">Главная</a>


</li>

Пример использования хелпера request()->is() и шаблона Route::is():

<li class="<?php echo request()->is('home')
Оцените статью
uchet-jkh.ru