Выполнил: Korolev E.V. IT-12
“Добавление главной страницы и базовых маршрутов”
Выполнение работы
1. Создание контроллера для статических страниц
Создание PageController
Добавление методов для нового контроллера
class PageController extends Controller
{
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. Настройка маршрутов
// Статические страницы
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('/', function () {
return view('welcome');
});
// Динамический маршрут с параметром
Route::get('/post/{slug}', function ($slug) {
return view('pages.post', ['slug' => $slug]);
})->where('slug', '[a-z0-9-]+');
3. Создание Blade-шаблонов с Tailwind CSS
Базовый шаблон (app.blade.php)
Шаблон главной страницы (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 mb4">Добро пожаловать в блог!</h1>
<p class="text-gray-600">Здесь вы найдете интересные
статьи на разные темы.</p>
</div>
@endsection
Шаблон страницы о нас (about.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
Шаблон страницы контакт(contact.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 mb4">Контакты</h1>
<p class="text-gray-600 mb-4">Если у вас есть вопросы
или предложения, не стесняйтесь связаться с нами. Мы всегда
рады вашему мнению!</p>
<ul class="text-gray-600">
<li>Email: <a href="mailto:info@example.com"
class="text-blue-500
hover:underline">info@example.com</a></li>
<li>Телефон: +1 (234) 567-890</li>
</ul>
</div>
@endsection
Индивидуальные задания
1. Динамические страницы с параметрами
Создайте маршрут который принимает строковый параметр slug и
добавить метод showPost в PageController и шаблон post.blade.php,
выводящий заголовок поста на основе slug.
Routes/web.php
Route::get('/post/{slug}', [PageController::class,
'showPost'])->name('post.show');
PageController
public function showPost($slug){
return view('pages.post', ['slug' => $slug]);
}
…/views/pages/post.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">{{ $slug
}}</h1>
</div>
@endsection
2. Кастомный компонент формы
<?php
namespace App\View\Components;
use Illuminate\View\Component;
class Form extends Component
{
public string $buttonText;
public function __construct($buttonText = 'Отправить')
{
$this->buttonText = $buttonText;
}
public function render()
{
return view('components.form');
}
}
Components/form.blade.php
<form {{ $attributes->merge(['class' => 'space-y-4']) }}>
@csrf
{{ $slot }}
<button type="submit" class="bg-blue-600 px-4 py-2
rounded-md hover:bg-blue-700">
{{ $buttonText }}
</button>
</form>
…/views/pages/contact.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 mb4">Контакты</h1>
<x-form action="/contact" method="POST"
buttonText="Отправить сообщение">
<input type="text" name="name" placeholder="Ваше
имя" class="w-full px-4 py-2 border rounded-md" required>
<input type="email" name="email" placeholder="Ваш
Email" class="w-full px-4 py-2 border rounded-md" required>
<textarea name="message" placeholder="Сообщение"
class="w-full px-4 py-2 border rounded-md"
required></textarea>
</x-form>
</div>
@endsection
3. Адаптивная навигация
Добавить кнопку бургер-меню с использование Alpine.js
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>{{ $title ?? 'Блог' }}</title>
@vite(['resources/css/app.css', 'resources/js/app.js'])
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"
defer></script>
</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 items-center">
<a href="{{ route('home') }}" class="text-xl font-bold text-gray800">Мой Блог</a>
<!-- Меню для десктопа -->
<div class="hidden md:flex space-x-8">
<a href="{{ route('about') }}" class="text-gray-600 hover:textgray-800">О нас</a>
<a href="{{ route('contact') }}" class="text-gray-600
hover:text-gray-800">Контакты</a>
</div>
<!-- Бургер-меню для мобильных -->
<div x-data="{ isOpen: false }" class="md:hidden relative">
<button @click="isOpen = !isOpen" class="p-2 focus:outlinenone" aria-label="Toggle menu">
<svg class="w-6 h-6" fill="none" stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h16m-16 6h16"></path>
</svg>
</button>
<div
x-show="isOpen"
x-cloak
x-transition
@click.outside="isOpen = false"
class="absolute right-0 mt-2 w-40 space-y-2 bg-white shadow
rounded p-2 z-20">
<a href="{{ route('about') }}" class="block px-4 py-2 textgray-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>
</div>
</div>
</nav>
<!-- Контент страницы -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
@yield('content')
</div>
@stack('scripts')
</body>
</html>
4. Валидация формы на стороне клиента
…/views/pages/contact.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 mb4">Контакты</h1>
<x-form action="/contact" method="POST"
buttonText="Отправить сообщение">
<input type="text" name="name" placeholder="Ваше
имя" class="w-full px-4 py-2 border rounded-md" required>
<input type="email" name="email" placeholder="Ваш
Email" class="w-full px-4 py-2 border rounded-md" required>
<textarea name="message" placeholder="Сообщение"
class="w-full px-4 py-2 border rounded-md"
required></textarea>
</x-form>
</div>
@endsection
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function ()
{
const form = document.querySelector('form');
const email =
document.querySelector('input[type="email"]');
if (form) {
form.addEventListener('submit', function (e) {
if (!email.value.includes('@')) {
e.preventDefault();
alert('Введите корректный email!');
}
});
}
});
</script>
@endpush
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 itemscenter">
<a href="{{ route('home') }}" class="text-xl
font-bold text-gray-800">Мой Блог</a>
<!-- Меню для десктопа -->
<div class="hidden md: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 x-data="{ isOpen: false }"
class="md:hidden">
<button @click="isOpen = !isOpen"
class="p-2 focus:outline-none">
<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 12h16m16 6h16" />
</svg>
</button>
<div x-show="isOpen" class="mt-2 space-y-2
bg-white shadow rounded p-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-gray100">Контакты</a>
</div>
</div>
</div>
</div>
</nav>
<!-- Контент страницы -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
@yield('content')
</div>
@stack('scripts')
</body>
</html>