Лаб. работа 2 "Добавление главной страницы и базовых маршрутов"

Цель: Освоить маршрутизацию, Blade-шаблоны и организацию кода в Laravel 11 с использованием Tailwind CSS.
Задачи:

• Создать контроллеры и маршруты для статических страниц.
• Реализовать наследование шаблонов через Blade.
• Использовать Tailwind CSS для стилизации.

Методическая часть

1. Создание контроллера для статических страниц

1. Создайте контроллер PageController:

   1php artisan make:controller PageController
   

2. Добавьте методы в app/Http/Controllers/PageController.php:

    1public function home() {
    2    return view('pages.home', ['title' => 'Главная страница']);
    3}
    4
    5public function about() {
    6    return view('pages.about', ['title' => 'О нас']);
    7}
    8
    9public function contact() {
   10    return view('pages.contact', ['title' => 'Контакты']);
   11}
   

2. Настройка маршрутов

В файле routes/web.php:

 1use App\Http\Controllers\PageController;
 2
 3// Статические страницы
 4Route::get('/', [PageController::class, 'home'])->name('home');
 5Route::get('/about', [PageController::class, 'about'])->name('about');
 6Route::get('/contact', [PageController::class, 'contact'])->name('contact');
 7
 8// Динамический маршрут с параметром
 9Route::get('/post/{slug}', function ($slug) {
10    return view('pages.post', ['slug' => $slug]);
11})->where('slug', '[a-z0-9-]+');

3. Создание Blade-шаблонов с Tailwind CSS

1. Базовый шаблон (resources/views/layouts/app.blade.php):

    1<!DOCTYPE html>
    2<html lang="en">
    3<head>
    4    <meta charset="UTF-8">
    5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6    <title>{{ $title ?? 'Блог' }}</title>
    7    @vite(['resources/css/app.css', 'resources/js/app.js'])
    8</head>
    9<body class="bg-gray-100">
   10    <!-- Навигационное меню -->
   11    <nav class="bg-white shadow">
   12        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
   13            <div class="flex justify-between h-16">
   14                <div class="flex items-center">
   15                    <a href="{{ route('home') }}" class="text-xl font-bold text-gray-800">Мой Блог</a>
   16                </div>
   17                <div class="flex space-x-8">
   18                    <a href="{{ route('about') }}" class="text-gray-600 hover:text-gray-800">О нас</a>
   19                    <a href="{{ route('contact') }}" class="text-gray-600 hover:text-gray-800">Контакты</a>
   20                </div>
   21            </div>
   22        </div>
   23    </nav>
   24
   25    <!-- Контент страницы -->
   26    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
   27        @yield('content')
   28    </div>
   29</body>
   30</html>
   

2. Шаблон главной страницы (resources/views/pages/home.blade.php):

   1@extends('layouts.app')
   2
   3@section('content')
   4    <div class="bg-white p-6 rounded-lg shadow">
   5        <h1 class="text-3xl font-bold text-gray-800 mb-4">Добро пожаловать в блог!</h1>
   6        <p class="text-gray-600">Здесь вы найдете интересные статьи на разные темы.</p>
   7    </div>
   8@endsection
   

3. Создайте аналогичные шаблоны для about.blade.php и contact.blade.php.

4. Форма обратной связи с Tailwind CSS

В шаблоне contact.blade.php:

 1@section('content')
 2    <div class="bg-white p-6 rounded-lg shadow">
 3        <h1 class="text-3xl font-bold text-gray-800 mb-4">Свяжитесь с нами</h1>
 4        <form class="space-y-4">
 5            <div>
 6                <label class="block text-gray-700">Email</label>
 7                <input type="email" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm">
 8            </div>
 9            <div>
10                <label class="block text-gray-700">Сообщение</label>
11                <textarea class="mt-1 block w-full rounded-md border-gray-300 shadow-sm" rows="4"></textarea>
12            </div>
13            <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700">
14                Отправить
15            </button>
16        </form>
17    </div>
18@endsection

Индивидуальные задания

1. Динамические страницы с параметрами

• Создайте маршрут /post/{slug}, который принимает строковый параметр slug.
• Добавьте метод showPost в PageController и шаблон post.blade.php, выводящий заголовок поста на основе slug.
• Пример шаблона:

  1<div class="bg-white p-6 rounded-lg shadow">
  2    <h1 class="text-3xl font-bold text-gray-800">{{ $slug }}</h1>
  3</div>
  

2. Кастомный компонент формы

1. Создайте компонент Form:

   1php artisan make:component Form
   

2. В resources/views/components/form.blade.php:

   1<form {{ $attributes->merge(['class' => 'space-y-4']) }}>
   2    @csrf
   3    {{ $slot }}
   4    <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700">
   5        {{ $buttonText ?? 'Отправить' }}
   6    </button>
   7</form>
   

3. Используйте компонент в шаблоне контактов:

   1<x-form action="/contact" method="POST" buttonText="Отправить сообщение">
   2    <!-- Поля формы -->
   3</x-form>
   

3. Адаптивная навигация

• Модифицируйте навигационное меню, чтобы оно сворачивалось на мобильных устройствах.
• Добавьте кнопку “бургер-меню” с использованием Alpine.js (уже включен в Laravel по умолчанию):

   1<div x-data="{ isOpen: false }" class="md:hidden">
   2    <button @click="isOpen = !isOpen" class="p-2">
   3        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
   4            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-16 6h16"/>
   5        </svg>
   6    </button>
   7    <div x-show="isOpen" class="mt-2 space-y-2">
   8        <a href="{{ route('about') }}" class="block px-4 py-2 text-gray-600 hover:bg-gray-100">О нас</a>
   9        <a href="{{ route('contact') }}" class="block px-4 py-2 text-gray-600 hover:bg-gray-100">Контакты</a>
  10    </div>
  11</div>
  

4. Валидация формы на стороне клиента

• Добавьте валидацию полей формы через JavaScript:

  1<script>
  2    document.querySelector('form').addEventListener('submit', (e) => {
  3        const email = document.querySelector('input[type="email"]');
  4        if (!email.value.includes('@')) {
  5            e.preventDefault();
  6            alert('Введите корректный email!');
  7        }
  8    });
  9</script>
  

Примечания для Tailwind CSS в Laravel 11

• Интеграция: Tailwind уже настроен в Laravel 11. Файлы стилей находятся в resources/css/app.css.
• Компиляция: Для применения изменений запустите:

  1npm run dev
  

• Документация: Официальный сайт Tailwind — tailwindcss.com.