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

Разработка web-приложений с использованием программных платформ
Практика
Автор

Бизюк Андрей

Дата публикации

27 февраля 2025 г.

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

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

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

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

    php artisan make:controller PageController

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

    public function home() {
    return view('pages.home', ['title' => 'Главная страница']);
}

public function about() {
    return view('pages.about', ['title' => 'О нас']);
}

public function contact() {
    return view('pages.contact', ['title' => 'Контакты']);
}

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

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

use App\Http\Controllers\PageController;

// Статические страницы
Route::get('/', [PageController::class, 'home'])->name('home');
Route::get('/about', [PageController::class, 'about'])->name('about');
Route::get('/contact', [PageController::class, 'contact'])->name('contact');

// Динамический маршрут с параметром
Route::get('/post/{slug}', function ($slug) {
    return view('pages.post', ['slug' => $slug]);
})->where('slug', '[a-z0-9-]+');

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

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

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ $title ?? 'Блог' }}</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="bg-gray-100">
    <!-- Навигационное меню -->
    <nav class="bg-white shadow">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16">
                <div class="flex items-center">
                    <a href="{{ route('home') }}" class="text-xl font-bold text-gray-800">Мой Блог</a>
                </div>
                <div class="flex space-x-8">
                    <a href="{{ route('about') }}" class="text-gray-600 hover:text-gray-800">О нас</a>
                    <a href="{{ route('contact') }}" class="text-gray-600 hover:text-gray-800">Контакты</a>
                </div>
            </div>
        </div>
    </nav>

    <!-- Контент страницы -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        @yield('content')
    </div>
</body>
</html>

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

    @extends('layouts.app')

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

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

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

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

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

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

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

  • Создайте маршрут /post/{slug}, который принимает строковый параметр slug.

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

  • Пример шаблона:

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

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

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

    php artisan make:component Form

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

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

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

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

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

  • Модифицируйте навигационное меню, чтобы оно сворачивалось на мобильных устройствах.

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

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

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

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

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

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

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

  • Компиляция: Для применения изменений запустите:

    npm run dev

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

Наверх