PHP — крутой и надёжный язык для бэкендеров. Его любят компании и ценят разработчики. Но вся его мощь раскрывается благодаря фреймворкам.
В этой статье мы узнаем, что такое Laravel, чем он удобен и почему многие программисты предпочитают его другим PHP-фреймворкам. А чтобы закрепить знания, напишем игру «Камень, ножницы, бумага».
Всё, что нужно знать про Laravel:
Laravel — это бесплатный фреймворк для быстрой разработки веб-приложений на PHP. Это значит, что все инструменты уже под капотом и ничего не нужно придумывать самому — просто брать и делать. Вот что в Laravel доступно «из коробки»:
-
Интерактивная документация. Для каждой функции есть отдельная статья с примерами. Очень удобно как для начинающих, так и для опытных разработчиков.
-
Миграции баз данных. Laravel предоставляет удобный способ для работы с базами данных с помощью миграций. Миграции позволяют изменять структуру базы данных без необходимости писать SQL-запросы.
-
Artisan. Консоль для разработчиков, которая упрощает взаимодействие с Laravel, позволяет проводить миграции баз данных, настраивать авторизацию и взаимодействовать с компонентами фреймворка.
-
ORM (object-relational mapping). Eloquent ORM позволяет работать с базами данных в объектно-ориентированном стиле, то есть выстраивать взаимодействие с полноценными объектами, которыми можно манипулировать.
-
Шаблоны. У Laravel куча шаблонов для создания пользовательского интерфейса. Это значительно упрощает процесс разработки.
-
Регистрация и авторизация. Фреймворк предоставляет готовые шаблоны для аутентификации пользователей, чтобы разработчикам не приходилось изобретать колесо.
-
Удобный дебаггинг и тестирование приложений. Обычно в веб-разработке не очень удобно реализована проверка кода на надёжность, поэтому создатели Laravel решили упростить этот процесс.
На этом список возможностей Laravel не заканчивается. Ещё есть более специфические штуки: кэширование, маршрутизация, MVC и много других полезных фич. Но главное, что стоит знать о Laravel, — на нём можно быстро и удобно создавать сайты.
В PHP-мире постоянно идёт борьба между четырьмя популярными фреймворками: Laravel, Symfony, Yii и CodeIgniter. Каждый из них хорош, но, естественно, у каждого есть свои особенности.
Если сравнивать Laravel с другими популярными фреймворками, то различия следующие:
-
Меньшая сложность. Laravel проще изучить и использовать, чем, например, Symfony. Однако такая простота никак не ограничивает его функциональность.
-
Удобная маршрутизация. Laravel предлагает удобную маршрутизацию, например позволяя группировать, кэшировать и давать собственные названия маршрутам, а также определять действия на разные HTTP-запросы.
-
Интеграция с библиотеками. Laravel использует пакетный менеджер Composer, который позволяет быстро подключать сторонние библиотеки в проект без лишних проблем.
-
Современная архитектура. В Laravel встроена современная архитектура, включая шаблон MVC (Model-View-Controller).
В целом Laravel соблюдает отличный баланс между функциональностью, гибкостью и простотой в использовании. Правда, и у него есть свои особенности и границы применения. Поэтому его нельзя назвать «самым лучшим PHP-фреймворком». Однако создатели Laravel пытались сделать всё, чтобы он был комфортным для разработки:
«Laravel предназначен, чтобы убрать боли в разработке путём упрощения привычных задач, которые часто встречаются в веб-проектах… Laravel нужен, чтобы сделать процесс разработки приятным для программистов без ухудшения функциональности приложений. Как говорится, счастливые разработчики пишут самый лучший код».
Создатели Laravel
Раз Laravel — это популярный фреймворк для разработки веб-приложений, то на нём пишут различные веб-приложения (спасибо за очевидность):
-
Лендинги, или посадочные страницы. На Laravel можно с минимальными затратами написать как простую страничку, так и мультистраничный сайт для компании. Конечно, это будет сложнее, чем использовать Tilda, но при этом можно масштабировать сайт и добавлять любые собственные фичи. Пример: лендинг Canva.
-
API. Это прослойка для обмена данными между клиентской и серверной сторонами веб-приложения. Пример: Laravel Passport, API для безопасной авторизации пользователей в веб-приложении.
-
CMS. Системы управления контентом (content management system, или CMS) — они нужны, чтобы управлять содержимым веб-сайта. Пример: October CMS.
-
Онлайн-магазины. На Laravel также создают электронные коммерческие платформы, на которых можно продавать товары и услуги. Пример: Bagisto.
Вот ещё несколько крупных проектов, которые написаны на Laravel:
-
laravel.com — официальный сайт Laravel создан на Laravel;
-
Neighbourly — социальная сеть для общения с соседями;
-
World Walking — приложение для мотивации людей ходить больше;
-
Ko-fi — платформа для поддержки творчества;
-
The Invoice Machine — онлайн-сервис для выставления счетов;
-
Startups.com — платформа для запуска и развития стартапов;
-
Larametrics — это инструмент для мониторинга и анализа производительности приложений на Laravel.
А вот так выглядят сайты на Laravel:
Официальный сайт Laravel
Скриншот: Laravel / Skillbox MediaСоциальная сеть Neighbourly
Скриншот: Neighbourly / Skillbox MediaПлатформа для запуска и развития стартапов — Startups.com
Скриншот: Startups.com / Skillbox MediaЭто лишь часть сайтов, написанных на Laravel. Некоторые платформы могут использовать фреймворк как один из компонентов сложного веб-приложения, но обычно об этом не говорят — особенно часто отмалчиваются крупные компании.
Чтобы освоить фреймворк, теории всегда мало, обязательно нужна практика. Поэтому дальше мы займёмся именно этим — напишем простое приложение, чтобы играть с компьютером в игру «Камень, ножницы, бумага». Но для начала нам надо будет установить Laravel и MySQL.
Если у вас ещё не установлен PHP, можете прочитать, как это сделать, в нашей статье.
Composer — это пакетный менеджер для PHP. С помощью него можно устанавливать сторонние библиотеки и фреймворки, как это нужно в нашем случае. Рассмотрим установку для операционных систем Windows, macOS и Linux.
Windows. На этой ОС процесс установки самый простой:
- переходим на официальный сайт Composer и скачиваем установочный файл Composer-Setup.exe;
- запускаем его и проходим привычные шаги установки.
macOS. Установить Composer напрямую не получится, сначала нужно скачать менеджер пакетов Homebrew — о нём мы рассказывали в статье про PHP. Открываем терминал и вводим команду:
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
После установки Homebrew вводим команду:
brew install composer
Linux. Здесь установить Composer проще, чем на macOS. Для разных Linux-систем команды могут различаться (из-за особенностей системы управления пакетами), но сам процесс установки, по сути, будет идентичным. Вот как выглядит процесс установки в Debian-подобных дистрибутивах:
$ sudo apt-get update
$ sudo apt-get install composer
Если возникли трудности с установкой, можно обратиться к документации на официальном сайте. А если всё получилось — переходим дальше.
Мы будем сохранять статистику игр в базе данных, а для неё нужен собственный сервер. Поэтому скачиваем MySQL с официального сайта.
Далее надо выбрать операционную систему и пройти стандартный процесс установки. Обратите внимание: на этапе конфигурирования обязательно запомните введённый пароль, потому что с его помощью вы будете подключаться к базе данных.
Первичная настройка MySQL
Скриншот: Skillbox MediaОставьте галочку, где говорят, что MySQL Server запустится сразу после установки. И теперь всё готово.
Альтернативная установка для Linux. Если вы используете Linux, то скачивать установщик не обязательно — можно опять-таки воспользоваться пакетным менеджером. Делается это примерно так (с поправкой на ваш дистрибутив):
sudo apt-get install mysql-server
После установки нужно запустить сам сервер:
sudo service mysql status
Готово — сервер запущен!
Теперь нам необходимо установить Laravel. Это можно сделать через Composer, который автоматически умеет скачивать Laravel и все зависимости.
Откройте командную строку и введите следующую команду:
composer create-project --prefer-dist laravel/laravel myapp
Здесь myapp — это имя вашего проекта. Эта команда создаст новый проект Laravel в папке myapp.
Создание нового Laravel-проекта
Скриншот: Skillbox MediaМы установили Laravel последней версии, 10.0.4. На скриншоте выше показан успешный процесс установки. Если возникли проблемы — смотрите документацию по установке на официальном сайте.
Чтобы проверить правильность установки Laravel, нам достаточно только запустить встроенный веб-сервер. Кстати, не рекомендуем использовать встроенный веб-сервер в продакшене — для реального проекта лучше выбрать Apache или Nginx.
Запустить веб-сервер просто: переходим в папку с проектом и открываем командную строку. Вводим команду:
php artisan serve
Должно появиться такое сообщение:
Веб-сервер успешно запущен
Скриншот: Skillbox MediaОткрываем браузер и переходим по указанному адресу: http://127.0.0.1:8000/. Если всё хорошо, должен открыться примерно такой экран:
Страница по умолчанию
Скриншот: Skillbox MediaЭто страница Laravel по умолчанию. Её, конечно же, можно менять — этим мы и будем заниматься дальше. Ну а пока будет полезно перейти по ссылкам — почитать документацию и свежие новости о фреймворке.
Теперь, когда у нас установлен Laravel, можно приступать к написанию кода. Как уже упоминалось выше, мы создадим игру «Камень, ножницы, бумага» и будем играть в неё с компьютером.
План такой:
-
Создать новый проект и выбрать название.
-
Организовать базу данных, чтобы сохранять статистику игр.
-
Сделать миграцию базы данных, чтобы все таблицы были на своём месте.
-
Добавить маршрут и разобраться, что это такое.
-
Создать контроллер и тоже понять, зачем он нужен.
-
Создать кнопки для игры.
-
Украсить всё с помощью CSS-стилей.
План здоровский — приступим!
Идём уже знакомым путём: запускаем командную строку и вводим команду для Composer:
composer create-project --prefer-dist laravel/laravel rock-paper-scissors
Проект создали — файлы не поменялись:
Структура проекта
Скриншот: Skillbox MediaОставьте командную строку открытой — она нам ещё пригодится, а сами перейдите в папку с проектом с помощью следующей команды:
cd rock-paper-scissors
Команда cd позволяет двигаться вверх и вниз по папкам. Ну а раз мы уже в нужном месте, переходим дальше.
Чтобы сохранять результаты игр, нам нужна база данных. Она представляет собой обычный файл, в котором данные хранятся в удобном для использования виде.
Перейдём в файл .env, который находится в папке нашего проекта. Он может быть скрыт, потому что его название начинается с точки. Если он у вас не отображается, поменяйте настройки отображения файлов в своей системе.
В файле нам нужно поправить следующие строки:
Скриншот: Skillbox MediaНам нужны последние три опции:
DB_DATABASE=rock_paper_scissors
DB_USERNAME=root
DB_PASSWORD=password
В первой строке мы задаём название базы данных, а во второй и третьей — данные для входа в неё. Сейчас мы сделаем их простыми, но помните, что, если вы собираетесь выкладывать сайт в интернет, очень важно, чтобы пароль и логин были надёжными.
Сохраняем файл и закрываем его — база данных предварительно настроена.
Мы создали базу данных, настало время создать нужные таблицы. Открываем командную строку и убеждаемся, что находимся в папке с проектом. Вводим следующую команду:
php artisan make:migration create_game_statistics_table --create=game_statistics
Эта команда сделает миграцию базы данных, то есть изменит её содержимое и создаст файл с таблицей. В нашем случае — добавит таблицу game_statistics, а также файл с датой создания таблицы и припиской _create_game_statistics_table:
Создаём новую таблицу в БД
Скриншот: Skillbox MediaПоявился PHP-файл миграции, который находится в папке database/migrations:
Миграции в структуре Laravel-проекта
Скриншот: Skillbox MediaОткрываем его и добавляем следующий код — он поможет задать структуру нашей таблицы:
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateGameStatisticsTable extends Migration
{
public function up()
{
Schema::create('game_statistics', function (Blueprint $table) {
$table->id();
$table->string('player_name');
$table->string('computer_choice');
$table->string('player_choice');
$table->string('result');
$table->timestamps();
});
}
public function down()
{
Schema::dropIfExists('game_statistics');
}
}
Эта миграция создаст таблицы с шестью колонками: уникальным идентификатором игры (id), именем игрока (player_name), ходом компьютера (computer_choice), ходом игрока (player_choice), результатом игры (result) и временной отметкой (timestamps) — указанием времени, когда проходила игра.
Обратите внимание на типы данных в нашей таблице. У нас есть четыре колонки с типом «строка» (player_name, computer_choice, player_choice и result), а также два уникальных типа данных: id и timestamps. Первый — это айдишник строки в таблице, и он представляет собой обычное число, но с дополнительными фичами. А второй представляет собой дату в формате YYYY-MM-DD HH:MM:SS.
Сохраняем файл и закрываем его. Теперь нам нужно запустить миграцию — терминал нам поможет:
php artisan migrate
У нас спросят, хотим ли мы создать новую таблицу в базе данных. Соглашаемся:
База данных настроена и готова к работе
Скриншот: Skillbox MediaГотово — теперь у нас есть работающая база данных с нужной таблицей.
Весь бэкенд строится на маршрутах — или URL-адресах. Они помогают задавать удобную структуру и понятное поведение веб-приложениям.
Для пользователя маршруты — это отдельные «вкладки» на сайте. Например, если зайти на сайт Skillbox, откроется его главная страница www.skillbox.ru. А если кликнуть на любой курс, мы перейдём на другую страницу сайта с другим URL-адресом, например www.skillbox.ru/course/profession-python/. Мы увидим, что к адресу нашего сайта добавился текст: /course/profession-python/. Эта «приписка» и перенесла нас на другую страницу с другим содержимым. Но не просто перенесла, а запустила определённый код, который и отрисовал эту страницу.
Нам понадобятся два маршрута: корневой / и игровой /play. Чтобы их добавить, нужно перейти в папку routes, открыть файл web.php и вписать туда следующий код:
Route::get('/', [GameController::class,'index'])->name('game.index');
Route::post('/play', [GameController::class,'play'])->name('game.play');
На корневом маршруте мы будем отображать статистику и предлагать пользователю сыграть в игру, а на игровом маршруте будем собственно играть.
Этот код будет работать так: если мы заходим по корневому маршруту /, то PHP отрисует страницу game.index, а если зайдём по игровому маршруту /play, то он создаст страницу game.play. Поведение этих страниц мы опишем дальше.
В начале нужно прописать ещё одну строку:
namespace App\Http\Controllers;
Итоговый файл должен выглядеть так:
Содержимое файла web.php
Скриншот: Skillbox MediaГотово! Не забываем сохранить файл.
Контроллер — это понятие из шаблона проектирования MVC. О нём у нас есть отдельная статья.
О контроллерах простыми словами
Чтобы не вдаваться в подробности, скажем, что контроллер — это часть приложения, которая отвечает за обработку запросов от пользователя и взаимодействие с моделью (данными) и представлением (отображением).
Простыми словами, контроллер — это связующее звено между пользовательским интерфейсом и базой данных. Когда пользователь отправляет запрос на сервер, контроллер получает этот запрос, обрабатывает его и взаимодействует с базой данных, чтобы получить необходимые данные. Затем контроллер передаёт эти данные в представление, которое отображает их на экране для пользователя.
Контроллер отделяет бизнес-логику приложения от пользовательского интерфейса, что позволяет более эффективно управлять приложением и обеспечивает более гибкую архитектуру. Он также даёт возможность программистам работать с приложением по отдельности, без необходимости знать о других компонентах приложения.
Нам нужно создать контроллер для всей игры. Называться он будет GameController. Чтобы создать его, нужно запустить в терминале следующую команду:
php artisan make:controller GameController
Скриншот: Skillbox MediaЭта команда создаст новый файл с контроллером в папке app/Http/Controllers. Перейдём туда, откроем файл GameController.php и впишем следующий код:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
class GameController extends Controller
{
public function index()
{
return view('game');
}
}
Этот код определяет метод index(), который будет возвращать игровое представление, чтобы отображать элементы на сайте. Мы опишем его на следующем шаге.
А пока добавим в этот же файл ещё одну функцию — play():
public function play(Request $request)
{
$playerChoice = $request->input('choice');
// Генерируем случайный ход для компьютера
$computerChoice = rand(1, 3);
if ($computerChoice == 1) {
$computerChoice = 'rock';
} elseif ($computerChoice == 2) {
$computerChoice = 'paper';
} else {
$computerChoice = 'scissors';
}
// Получаем результат игры
if ($playerChoice == $computerChoice) {
$result = 'tie';
} elseif (($playerChoice == 'rock' && $computerChoice == 'scissors') || ($playerChoice == 'paper' && $computerChoice == 'rock') || ($playerChoice == 'scissors' && $computerChoice == 'paper')) {
$result = 'win';
} else {
$result = 'lose';
}
// Сохраняем статистику в базу данных
DB::table('game_statistics')->insert([
'player_name' => 'Player 1',
'computer_choice' => $computerChoice,
'player_choice' => $playerChoice,
'result' => $result,
'created_at' => now(),
'updated_at' => now(),
]);
// Возвращаем результат игры в представление
return view('game', ['result' => $result]);
}
Здесь мы прописали основную логику игры. На вход функция принимает объект Request, который содержит ход игрока. Экземпляр этого объекта будет приходить, когда мы нажмём на одну из кнопок в игре («Камень», «Ножницы» или «Бумага»), а потом отправим наш выбор методом POST.
Подробнее об HTTP-запросах вы можете прочитать в нашей статье о протоколе HTTP.
После того как мы обработали запрос, нам нужно сгенерировать ответ компьютера — с помощью генератора случайных чисел. И в конце мы определяем победителя и записываем результат в базу данных методом insert().
Логика игры готова! Опять же, не забываем сохранить файл.
Метод index() из файла GameController.php отображает страницу с игрой, но пока на ней ничего нет, поэтому давайте создадим пару кнопок.
Открываем папку resources/views и создаём там файл с названием game.blade.php. Добавляем туда следующий код, чтобы создать игровой интерфейс:
<!DOCTYPE html>
<html>
<head>
<title>Rock Paper Scissors</title>
</head>
<body>
<h1>Rock Paper Scissors</h1>
@if(isset($result))
<p>You {{ $result }}!</p>
@endif
<form method="POST" action="{{ route('game.play') }}">
@csrf
<label for="rock">Rock</label>
<input type="radio" name="choice" id="rock" value="rock">
<label for="paper">Paper</label>
<input type="radio" name="choice" id="paper" value="paper">
<label for="scissors">Scissors</label>
<input type="radio" name="choice" id="scissors" value="scissors">
<button type="submit">Play</button>
</form>
</body>
</html>
Не удивляйтесь, что мы вставили HTML-код в PHP-файл, — это нормально. PHP умеет работать с HTML.
Но вернёмся к коду: мы создали простой игровой интерфейс, который состоит из трёх кнопок с выбором вариантов. Также мы добавили кнопку, чтобы отправлять данные в GameController и получать результат игры $result, если она уже была сыграна.
Результат игры нужен, чтобы мы могли видеть, кто победил в прошлой игре. А чтобы постоянно не выводить этот текст, мы сперва проверяем, была ли переменная $result объявлена через GameController.
Теперь мы можем запустить наш сервер и посмотреть на результат:
php artisan serve
Видим то, что и хотели увидеть:
Скриншот: Skillbox MediaЕсли нажать на одну из кнопок, можно узнать, кто победил:
Скриншот: Skillbox MediaНо сразу проявляется одна проблема: мы не знаем, какие ходы сделал компьютер, а какие — мы. Давайте это исправим.
Заходим обратно в файл GameController.php и изменяем всего одну строку:
return view('game', ['result' => $result, 'player_choice' => $playerChoice, 'computer_choice' => $computerChoice]);
Теперь мы будем возвращать в наше представление дополнительные переменные. Внесём изменения и в файл game.blade.php:
@if(isset($result))
<p>You played {{ $player_choice }}</p>
<p>Computer played {{ $computer_choice }}</p>
<p>You {{ $result }}!</p>
@endif
Перезапускаем сервер и видим, что теперь всё работает корректно:
Скриншот: Skillbox MediaОсталось вывести результаты последних игр, и наше приложение будет готово. Для простоты будем учитывать статистику последних десяти игр.
Для этого необходимо изменить файл GameController.php, а вернее функции index() и play():
public function index()
{
$last_games = DB::table('game_statistics')
->orderBy('created_at', 'desc')
->limit(10)
->get();
return view('game', ['last_games' => $last_games]);
}
public function play(Request $request)
{
$last_games = DB::table('game_statistics')
->orderBy('created_at', 'desc')
->limit(10)
->get();
$playerChoice = $request->input('choice');
...
// Возвращаем результат игры в представление
return view('game', ['result' => $result, 'player_choice' => $playerChoice, 'computer_choice' => $computerChoice, 'last_games' => $last_games]);
}
Мы опустили несколько строк, чтобы показать лишь самые важные фрагменты. Как видите, у нас появилась новая переменная $last_games, в которую помещаются 10 последних строк базы данных. Делается это с помощью двух методов: orderBy(), который используется, чтобы доставать только самые свежие игры, и limit(10), который помогает ограничить их количество десятью.
В каждом представлении мы также добавляем этот список в качестве возвращаемого значения.
Теперь нужно поправить файл game.blade.php и отобразить эти игры:
<ul>
@foreach ($last_games as $last_game)
<li>
<p>You {{ $last_game->result }}</p>
<p>You played {{ $last_game->player_choice }}</p>
<p>Computer played {{ $last_game->computer_choice }}</p>
</li>
@endforeach
</ul>
Этот код просто создаёт ненумерованный список, который располагается после формы. Внутри списка мы добавляем элементы <li> через цикл @foreach. В нём мы проходим по всем нашим играм и выводим для каждой игры результат, ход игрока и компьютера.
Сохраним файлы и перезапустим сервер:
Скриншот: Skillbox MediaУра! У нас выводятся результаты завершённых игр, а новые игры успешно сохраняются.
Осталось немного украсить сайт с помощью CSS, а затем насладиться его красотой.
Откроем папку public и создадим файл styles.css. Добавим в него следующий код:
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
h1 {
text-align: center;
margin-top: 50px;
}
form {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 30px;
}
label {
margin-right: 70px;
margin-top: 20px;
font-size: 20px;
}
input[type="radio"] {
margin-left: 10px;
padding-bottom: 50px;
}
button[type="submit"] {
margin-top: 20px;
background-color: #008CBA;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button[type="submit"]:hover {
background-color: #006B9F;
}
p {
text-align: center;
margin-top: 20px;
font-size: 24px;
font-weight: bold;
}
ul {
list-style-type: none;
}
li {
background: #dadada;
}
Здесь мы немного причесали все элементы страницы, чтобы они отображались чуть симпатичнее. Например, в теге body мы задали шрифт и цвет фона, а для всех параграфов p задали размер шрифта, сделали его жирным и выровняли текст по центру.
Теперь сохраним CSS-файл и откроем файл game.blade.php, чтобы подключить в него новые стили:
<!DOCTYPE html>
<html>
<head>
<title>Rock Paper Scissors</title>
<link rel="stylesheet" href="{{ asset('styles.css') }}">
</head>
<body>
...
</body>
</html>
Получилось примерно так:
Скриншот: Skillbox MediaНе лучший дизайн, но концепцию вы, надеюсь, поняли. Можете попробовать самостоятельно довести стили до совершенства и отправить игру на какую-нибудь премию в области веб-дизайна.
А вот и полный код всех файлов, которые мы создавали:
web.php:
<?php
namespace App\Http\Controllers;
use Illuminate\Support\Facades\Route;
Route::get('/', [GameController::class, 'index'])->name('game.index');
Route::post('/play', [GameController::class, 'play'])->name('game.play');
GameController.php:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
class GameController extends Controller
{
public function index()
{
$last_games = DB::table('game_statistics')
->orderBy('created_at', 'desc')
->limit(10)
->get();
return view('game', ['last_games' => $last_games]);
}
public function play(Request $request)
{
$last_games = DB::table('game_statistics')
->orderBy('created_at', 'desc')
->limit(10)
->get();
$playerChoice = $request->input('choice');
// Генерируем случайный ход для компьютера
$computerChoice = rand(1, 3);
if ($computerChoice == 1) {
$computerChoice = 'rock';
} elseif ($computerChoice == 2) {
$computerChoice = 'paper';
} else {
$computerChoice = 'scissors';
}
// Получаем результат игры
if ($playerChoice == $computerChoice) {
$result = 'tie';
} elseif (($playerChoice == 'rock' && $computerChoice == 'scissors') || ($playerChoice == 'paper' && $computerChoice == 'rock') || ($playerChoice == 'scissors' && $computerChoice == 'paper')) {
$result = 'win';
} else {
$result = 'lose';
}
// Сохраняем статистику в базу данных
DB::table('game_statistics')->insert([
'player_name' => 'Player 1',
'computer_choice' => $computerChoice,
'player_choice' => $playerChoice,
'result' => $result,
'created_at' => now(),
'updated_at' => now(),
]);
// Возвращаем результат игры в представление
return view('game', ['result' => $result, 'player_choice' => $playerChoice, 'computer_choice' => $computerChoice, 'last_games' => $last_games]);
}
}
game.blade.php:
<!DOCTYPE html>
<html>
<head>
<title>Rock Paper Scissors</title>
<link rel="stylesheet" href="{{ asset('styles.css') }}">
</head>
<body>
<h1>Rock Paper Scissors</h1>
@if(isset($result))
<p>You played {{ $player_choice }}</p>
<p>Computer played {{ $computer_choice }}</p>
<p>You {{ $result }}!</p>
@endif
<form method="POST" action="{{ route('game.play') }}">
@csrf
<label for="rock">Rock</label>
<input type="radio" name="choice" id="rock" value="rock">
<label for="paper">Paper</label>
<input type="radio" name="choice" id="paper" value="paper">
<label for="scissors">Scissors</label>
<input type="radio" name="choice" id="scissors" value="scissors">
<button type="submit">Play</button>
</form>
<ul>
@foreach ($last_games as $last_game)
<li>
<p>You {{ $last_game->result }}</p>
<p>You played {{ $last_game->player_choice }}</p>
<p>Computer played {{ $last_game->computer_choice }}</p>
</li>
@endforeach
</ul>
</body>
</html>
styles.css:
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
h1 {
text-align: center;
margin-top: 50px;
}
form {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 30px;
}
label {
margin-right: 70px;
margin-top: 20px;
font-size: 20px;
}
input[type="radio"] {
margin-left: 10px;
padding-bottom: 50px;
}
button[type="submit"] {
margin-top: 20px;
background-color: #008CBA;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button[type="submit"]:hover {
background-color: #006B9F;
}
p {
text-align: center;
margin-top: 20px;
font-size: 24px;
font-weight: bold;
}
ul {
list-style-type: none;
}
li {
background: #dadada;
}
_create_game_statistics_table.php:
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*/
public function up(): void
{
Schema::create('game_statistics', function (Blueprint $table) {
$table->id();
$table->string('player_name');
$table->string('computer_choice');
$table->string('player_choice');
$table->string('result');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::dropIfExists('game_statistics');
}
};
Мы узнали, что Laravel — это мощный и довольно простой фреймворк для создания веб-приложений. Освоить его можно за пару месяцев, а начать писать на нём — уже сегодня.
Чтобы лучше понять Laravel, советуем написать собственное приложение или попробовать доработать наше, например:
Читайте документацию и набирайтесь опыта. Успехов!
<!DOCTYPE html>
<html class="l-html" lang="ru">
<head>
<script>
mindbox = window.mindbox || function() { mindbox.queue.push(arguments); };
mindbox.queue = mindbox.queue || [];
mindbox('create', {
endpointId: 'skillbox.skillboxMediaWebsite'
});
</script>
<script src="https://api.s.mindbox.ru/scripts/v1/tracker.js" async></script>
<script>window.yaContextCb = window.yaContextCb || []</script>
<script src="https://yandex.ru/ads/system/context.js" async></script>
<!-- Google Tag Manager -->
<script async data-skip-moving="true" type="text/javascript">
/** Google Tagmanager */
;(function (w, d, s, l, i) {
w[l] = w[l] || [];
w[l].push({
'gtm.start':
new Date().getTime(), event: 'gtm.js'
});
var f = d.getElementsByTagName(s)[0],
j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : '';
j.async = true;
j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-NLCGQ25');
window.dataLayer = window.dataLayer || [];
function gtag() {
window.dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'GTM-NLCGQ25');
</script>
<!-- End Google Tag Manager -->
<!-- Retail Rocket -->
<script type="text/javascript">
var rrPartnerId = "6048a0d097a52514f050731f";
var rrApi = {};
var rrApiOnReady = rrApiOnReady || [];
rrApi.addToBasket = rrApi.order = rrApi.categoryView = rrApi.view =
rrApi.recomMouseDown = rrApi.recomAddToCart = function() {};
(function(d) {
var ref = d.getElementsByTagName('script')[0];
var apiJs, apiJsId = 'rrApi-jssdk';
if (d.getElementById(apiJsId)) return;
apiJs = d.createElement('script');
apiJs.id = apiJsId;
apiJs.async = true;
apiJs.src = "//cdn.retailrocket.ru/content/javascript/tracking.js";
ref.parentNode.insertBefore(apiJs, ref);
}(document));
</script>
<!-- End Retail Rocket -->
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<meta name="google-site-verification" content="UA-kf725UpqwkHenFmDQ05SW115fL9UdD9uXiFy-ibQ"/>
<meta name="robots" content="index, follow"/>
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="canonical" href="https://skillbox.ru/media/code/freymvork-laravel-kak-rabotaet-i-zachem-nuzhen/">
<link rel="preload" href="https://marketplace.canva.com/EAD2962NKnQ/2/0/1600w/canva-rainbow-gradient-pink-and-purple-zoom-virtual-background-_Tcjok-d9b4.jpg" as="image" />
<link rel="preload" href="https://via.placeholder.com/1170x250/92c952" as="image" />
<link rel="preload" href="https://via.placeholder.com/768x250/40E0D0" as="image" />
<link rel="preload" href="https://via.placeholder.com/375x250/ffbcee" as="image" />
<title>Laravel: что это и как начать работать с этим PHP-фреймворком / Skillbox Media</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="laravel что это, php laravel, фреймворк ларавел" />
<meta name="description" content="Laravel: что это за фреймворк, чем он лучше других, как начать с ним работать и создать первое приложение. Подробный гайд по PHP-фреймворку Laravel для начинающих веб-разработчиков." />
<link href="/bitrix/cache/css/s1/media/kernel_main/kernel_main_v1.css?177096852510536" type="text/css" rel="stylesheet" />
<link href="/bitrix/js/ui/fonts/opensans/ui.font.opensans.css?16341171742599" type="text/css" rel="stylesheet" />
<link href="/bitrix/js/main/popup/dist/main.popup.bundle.css?163411696226345" type="text/css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css" type="text/css" rel="stylesheet" />
<link href="/bitrix/cache/css/s1/media/page_a1ad23d5ae1fea4c6ac7c690c80a4763/page_a1ad23d5ae1fea4c6ac7c690c80a4763_v1.css?1771490810746236" type="text/css" rel="stylesheet" />
<link href="/bitrix/cache/css/s1/media/template_176a7c2453ad8025fa7d27f65ba6a4b1/template_176a7c2453ad8025fa7d27f65ba6a4b1_v1.css?1771490810442835" type="text/css" data-template-style="true" rel="stylesheet" />
<script type="text/javascript">if(!window.BX)window.BX={};if(!window.BX.message)window.BX.message=function(mess){if(typeof mess==='object'){for(let i in mess) {BX.message[i]=mess[i];} return true;}};</script>
<script type="text/javascript">(window.BX||top.BX).message({'JS_CORE_LOADING':'Загрузка...','JS_CORE_NO_DATA':'- Нет данных -','JS_CORE_WINDOW_CLOSE':'Закрыть','JS_CORE_WINDOW_EXPAND':'Развернуть','JS_CORE_WINDOW_NARROW':'Свернуть в окно','JS_CORE_WINDOW_SAVE':'Сохранить','JS_CORE_WINDOW_CANCEL':'Отменить','JS_CORE_WINDOW_CONTINUE':'Продолжить','JS_CORE_H':'ч','JS_CORE_M':'м','JS_CORE_S':'с','JSADM_AI_HIDE_EXTRA':'Скрыть лишние','JSADM_AI_ALL_NOTIF':'Показать все','JSADM_AUTH_REQ':'Требуется авторизация!','JS_CORE_WINDOW_AUTH':'Войти','JS_CORE_IMAGE_FULL':'Полный размер'});</script>
<script type="text/javascript" src="/bitrix/js/main/core/core.js?1634117028565340"></script>
<script>BX.setJSList(['/bitrix/js/main/core/core_ajax.js','/bitrix/js/main/core/core_promise.js','/bitrix/js/main/polyfill/promise/js/promise.js','/bitrix/js/main/loadext/loadext.js','/bitrix/js/main/loadext/extension.js','/bitrix/js/main/polyfill/promise/js/promise.js','/bitrix/js/main/polyfill/find/js/find.js','/bitrix/js/main/polyfill/includes/js/includes.js','/bitrix/js/main/polyfill/matches/js/matches.js','/bitrix/js/ui/polyfill/closest/js/closest.js','/bitrix/js/main/polyfill/fill/main.polyfill.fill.js','/bitrix/js/main/polyfill/find/js/find.js','/bitrix/js/main/polyfill/matches/js/matches.js','/bitrix/js/main/polyfill/core/dist/polyfill.bundle.js','/bitrix/js/main/core/core.js','/bitrix/js/main/polyfill/intersectionobserver/js/intersectionobserver.js','/bitrix/js/main/lazyload/dist/lazyload.bundle.js','/bitrix/js/main/polyfill/core/dist/polyfill.bundle.js','/bitrix/js/main/parambag/dist/parambag.bundle.js']);
BX.setCSSList(['/bitrix/js/main/lazyload/dist/lazyload.bundle.css','/bitrix/js/main/parambag/dist/parambag.bundle.css']);</script>
<script type="text/javascript">(window.BX||top.BX).message({'AMPM_MODE':false});(window.BX||top.BX).message({'MONTH_1':'Январь','MONTH_2':'Февраль','MONTH_3':'Март','MONTH_4':'Апрель','MONTH_5':'Май','MONTH_6':'Июнь','MONTH_7':'Июль','MONTH_8':'Август','MONTH_9':'Сентябрь','MONTH_10':'Октябрь','MONTH_11':'Ноябрь','MONTH_12':'Декабрь','MONTH_1_S':'января','MONTH_2_S':'февраля','MONTH_3_S':'марта','MONTH_4_S':'апреля','MONTH_5_S':'мая','MONTH_6_S':'июня','MONTH_7_S':'июля','MONTH_8_S':'августа','MONTH_9_S':'сентября','MONTH_10_S':'октября','MONTH_11_S':'ноября','MONTH_12_S':'декабря','MON_1':'янв','MON_2':'фев','MON_3':'мар','MON_4':'апр','MON_5':'май','MON_6':'июн','MON_7':'июл','MON_8':'авг','MON_9':'сен','MON_10':'окт','MON_11':'ноя','MON_12':'дек','DAY_OF_WEEK_0':'Воскресенье','DAY_OF_WEEK_1':'Понедельник','DAY_OF_WEEK_2':'Вторник','DAY_OF_WEEK_3':'Среда','DAY_OF_WEEK_4':'Четверг','DAY_OF_WEEK_5':'Пятница','DAY_OF_WEEK_6':'Суббота','DOW_0':'Вс','DOW_1':'Пн','DOW_2':'Вт','DOW_3':'Ср','DOW_4':'Чт','DOW_5':'Пт','DOW_6':'Сб','FD_SECOND_AGO_0':'#VALUE# секунд назад','FD_SECOND_AGO_1':'#VALUE# секунду назад','FD_SECOND_AGO_10_20':'#VALUE# секунд назад','FD_SECOND_AGO_MOD_1':'#VALUE# секунду назад','FD_SECOND_AGO_MOD_2_4':'#VALUE# секунды назад','FD_SECOND_AGO_MOD_OTHER':'#VALUE# секунд назад','FD_SECOND_DIFF_0':'#VALUE# секунд','FD_SECOND_DIFF_1':'#VALUE# секунда','FD_SECOND_DIFF_10_20':'#VALUE# секунд','FD_SECOND_DIFF_MOD_1':'#VALUE# секунда','FD_SECOND_DIFF_MOD_2_4':'#VALUE# секунды','FD_SECOND_DIFF_MOD_OTHER':'#VALUE# секунд','FD_SECOND_SHORT':'#VALUE#с','FD_MINUTE_AGO_0':'#VALUE# минут назад','FD_MINUTE_AGO_1':'#VALUE# минуту назад','FD_MINUTE_AGO_10_20':'#VALUE# минут назад','FD_MINUTE_AGO_MOD_1':'#VALUE# минуту назад','FD_MINUTE_AGO_MOD_2_4':'#VALUE# минуты назад','FD_MINUTE_AGO_MOD_OTHER':'#VALUE# минут назад','FD_MINUTE_DIFF_0':'#VALUE# минут','FD_MINUTE_DIFF_1':'#VALUE# минута','FD_MINUTE_DIFF_10_20':'#VALUE# минут','FD_MINUTE_DIFF_MOD_1':'#VALUE# минута','FD_MINUTE_DIFF_MOD_2_4':'#VALUE# минуты','FD_MINUTE_DIFF_MOD_OTHER':'#VALUE# минут','FD_MINUTE_0':'#VALUE# минут','FD_MINUTE_1':'#VALUE# минуту','FD_MINUTE_10_20':'#VALUE# минут','FD_MINUTE_MOD_1':'#VALUE# минуту','FD_MINUTE_MOD_2_4':'#VALUE# минуты','FD_MINUTE_MOD_OTHER':'#VALUE# минут','FD_MINUTE_SHORT':'#VALUE#мин','FD_HOUR_AGO_0':'#VALUE# часов назад','FD_HOUR_AGO_1':'#VALUE# час назад','FD_HOUR_AGO_10_20':'#VALUE# часов назад','FD_HOUR_AGO_MOD_1':'#VALUE# час назад','FD_HOUR_AGO_MOD_2_4':'#VALUE# часа назад','FD_HOUR_AGO_MOD_OTHER':'#VALUE# часов назад','FD_HOUR_DIFF_0':'#VALUE# часов','FD_HOUR_DIFF_1':'#VALUE# час','FD_HOUR_DIFF_10_20':'#VALUE# часов','FD_HOUR_DIFF_MOD_1':'#VALUE# час','FD_HOUR_DIFF_MOD_2_4':'#VALUE# часа','FD_HOUR_DIFF_MOD_OTHER':'#VALUE# часов','FD_HOUR_SHORT':'#VALUE#ч','FD_YESTERDAY':'вчера','FD_TODAY':'сегодня','FD_TOMORROW':'завтра','FD_DAY_AGO_0':'#VALUE# дней назад','FD_DAY_AGO_1':'#VALUE# день назад','FD_DAY_AGO_10_20':'#VALUE# дней назад','FD_DAY_AGO_MOD_1':'#VALUE# день назад','FD_DAY_AGO_MOD_2_4':'#VALUE# дня назад','FD_DAY_AGO_MOD_OTHER':'#VALUE# дней назад','FD_DAY_DIFF_0':'#VALUE# дней','FD_DAY_DIFF_1':'#VALUE# день','FD_DAY_DIFF_10_20':'#VALUE# дней','FD_DAY_DIFF_MOD_1':'#VALUE# день','FD_DAY_DIFF_MOD_2_4':'#VALUE# дня','FD_DAY_DIFF_MOD_OTHER':'#VALUE# дней','FD_DAY_AT_TIME':'#DAY# в #TIME#','FD_DAY_SHORT':'#VALUE#д','FD_MONTH_AGO_0':'#VALUE# месяцев назад','FD_MONTH_AGO_1':'#VALUE# месяц назад','FD_MONTH_AGO_10_20':'#VALUE# месяцев назад','FD_MONTH_AGO_MOD_1':'#VALUE# месяц назад','FD_MONTH_AGO_MOD_2_4':'#VALUE# месяца назад','FD_MONTH_AGO_MOD_OTHER':'#VALUE# месяцев назад','FD_MONTH_DIFF_0':'#VALUE# месяцев','FD_MONTH_DIFF_1':'#VALUE# месяц','FD_MONTH_DIFF_10_20':'#VALUE# месяцев','FD_MONTH_DIFF_MOD_1':'#VALUE# месяц','FD_MONTH_DIFF_MOD_2_4':'#VALUE# месяца','FD_MONTH_DIFF_MOD_OTHER':'#VALUE# месяцев','FD_MONTH_SHORT':'#VALUE#мес','FD_YEARS_AGO_0':'#VALUE# лет назад','FD_YEARS_AGO_1':'#VALUE# год назад','FD_YEARS_AGO_10_20':'#VALUE# лет назад','FD_YEARS_AGO_MOD_1':'#VALUE# год назад','FD_YEARS_AGO_MOD_2_4':'#VALUE# года назад','FD_YEARS_AGO_MOD_OTHER':'#VALUE# лет назад','FD_YEARS_DIFF_0':'#VALUE# лет','FD_YEARS_DIFF_1':'#VALUE# год','FD_YEARS_DIFF_10_20':'#VALUE# лет','FD_YEARS_DIFF_MOD_1':'#VALUE# год','FD_YEARS_DIFF_MOD_2_4':'#VALUE# года','FD_YEARS_DIFF_MOD_OTHER':'#VALUE# лет','FD_YEARS_SHORT_0':'#VALUE#л','FD_YEARS_SHORT_1':'#VALUE#г','FD_YEARS_SHORT_10_20':'#VALUE#л','FD_YEARS_SHORT_MOD_1':'#VALUE#г','FD_YEARS_SHORT_MOD_2_4':'#VALUE#г','FD_YEARS_SHORT_MOD_OTHER':'#VALUE#л','CAL_BUTTON':'Выбрать','CAL_TIME_SET':'Установить время','CAL_TIME':'Время','FD_LAST_SEEN_TOMORROW':'завтра в #TIME#','FD_LAST_SEEN_NOW':'только что','FD_LAST_SEEN_TODAY':'сегодня в #TIME#','FD_LAST_SEEN_YESTERDAY':'вчера в #TIME#','FD_LAST_SEEN_MORE_YEAR':'более года назад'});</script>
<script type="text/javascript">(window.BX||top.BX).message({'WEEK_START':'1'});</script>
<script type="text/javascript">(window.BX||top.BX).message({'LANGUAGE_ID':'ru','FORMAT_DATE':'DD.MM.YYYY','FORMAT_DATETIME':'DD.MM.YYYY HH:MI:SS','COOKIE_PREFIX':'BITRIX_SM','SERVER_TZ_OFFSET':'10800','UTF_MODE':'Y','SITE_ID':'s1','SITE_DIR':'/','USER_ID':'','SERVER_TIME':'1771688264','USER_TZ_OFFSET':'0','USER_TZ_AUTO':'Y','bitrix_sessid':'ce5cbaac4a01098fc68660fe3bb69582'});</script>
<script type="text/javascript" src="/bitrix/js/main/date/main.date.js?159955296434530"></script>
<script type="text/javascript" src="/bitrix/js/main/popup/dist/main.popup.bundle.js?1634116962109107"></script>
<script type="text/javascript" src="/bitrix/js/main/core/core_date.js?163411653136080"></script>
<script type="text/javascript" src="/bitrix/js/ui/vue/vue2/prod/dist/vue.bundle.js?1635848017173206"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/fingerprintjs2/2.1.0/fingerprint2.min.js"></script>
<script type="text/javascript">BX.setCSSList(['/bitrix/js/main/core/css/core_date.css','/setka/css/setka_skillbox.css','/local/templates/.default/components/bitrix/news.detail/article/style.css','/static/css/newarticle.css','/local/templates/media/libs/jquery.formstyler.css','/local/templates/media/fonts/graphik-font/stylesheet.css','/static/css/main.css','/local/templates/media/template_styles.css']);</script>
<script src="https://cdn.skillbox.pro/frontend-libs/promo-banner/5.10.1/banner-plugin.min.js"></script>
<script type="text/javascript" async src="https://relap.io/api/v6/head.js?token=sI73Ph6a5BnkqK2o"></script>
<meta property="og:title" content="Фреймворк Laravel: как работает и зачем нужен" />
<meta property="og:description" content="Пишем простое приложение с помощью популярного фреймворка и разбираем основы программирования на PHP." />
<meta property="og:url" content="https://skillbox.ru/media/code/freymvork-laravel-kak-rabotaet-i-zachem-nuzhen/" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="skillbox.ru" />
<meta property="og:locale" content="ru_RU" />
<meta property="og:image" content="https://248006.selcdn.ru/main/iblock/7cb/7cbb6011a0fe74bfe8c053210e4c9ffb/d6694bf718f7457a5333237cdb2054d3.jpg" />
<meta name="relap-image" content="https://248006.selcdn.ru/main/iblock/7cb/7cbb6011a0fe74bfe8c053210e4c9ffb/d6694bf718f7457a5333237cdb2054d3.jpg" />
<meta property="og:image:width" content="600" />
<meta property="og:image:height" content="315" />
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:image" content="https://248006.selcdn.ru/main/iblock/7cb/7cbb6011a0fe74bfe8c053210e4c9ffb/d6694bf718f7457a5333237cdb2054d3.jpg" />
<meta property="vk:image" content="https://248006.selcdn.ru/main/iblock/7f7/7f729e12b056bebd032bfdbc1d9b79f1/34d83a6497492aaca1d058d6f84c5767.jpg" />
<meta property="article:author" content="Дмитрий Зверев" />
<meta property="article:tag" content="статьи" />
<meta property="article:section" content="Код" />
<script type="text/javascript" src="/static/js/vendor.js?1771489421543641"></script>
<script type="text/javascript" src="/local/assets/js/common.js?177148933727419"></script>
<script type="text/javascript" src="/static/js/main.js?1771489421125222"></script>
<script type="text/javascript" src="/local/templates/media/js/main.js?17714893372418"></script>
<script type="text/javascript" src="/local/components/prmedia/popup.subscribe/templates/.default/script.js?17714893376820"></script>
<script type="text/javascript" src="/local/templates/.default/components/bitrix/news.detail/article/infinity.js?177148933713735"></script>
<script type="text/javascript" src="/local/templates/.default/components/bitrix/news/articles/script.js?1771489337246"></script>
<script type="text/javascript" src="/setka/js/setka_skillbox.js?1771489337106775"></script>
<script type="text/javascript" src="/local/templates/.default/components/bitrix/news.detail/article/script.js?17714893377503"></script>
<script type="text/javascript">var _ba = _ba || []; _ba.push(["aid", "84a6082a990bbac8858fb733b97bed30"]); _ba.push(["host", "skillbox.ru"]); (function() {var ba = document.createElement("script"); ba.type = "text/javascript"; ba.async = true;ba.src = (document.location.protocol == "https:" ? "https://" : "http://") + "bitrix.info/ba.js";var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(ba, s);})();</script>
</head>
<body>
<div class="js-sticky-delimiter"></div>
<div class="bx-panel"></div>
<!-- Google Tag Manager (noscript) -->
<noscript>
<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NLCGQ25" height="0" width="0"
style="display:none;visibility:hidden"></iframe>
</noscript>
<!-- End Google Tag Manager (noscript) -->
<svg class="app-svg-visually-hidden" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="def-arrow-down-a" d="M223 20813l4 5 4-5z"/>
<path id="def-arrow-a" d="M1044.6 803.2a.81.81 0 01-.5.18.8.8 0 01-.8-.8v-3.24c-2.97.1-5.17.88-6.52 2.3a4.86 4.86 0 00-1.39 3.29.8.8 0 01-.75.83h-.04a.79.79 0 01-.79-.74c-.22-3.78.69-6.76 2.69-8.84a10.76 10.76 0 016.81-3.07v-3.3a.8.8 0 011.29-.63l7.91 6.39a.8.8 0 010 1.25zm.3-11.73v2.42a.5.5 0 01-.03.1.8.8 0 01-.05.21.78.78 0 01-.47.42.67.67 0 01-.25.05h-.01c-.06 0-3.93-.04-6.46 2.62-.8.85-1.4 1.87-1.74 2.99 1.79-1.7 4.55-2.57 8.21-2.57.44 0 .8.36.8.8v2.4l5.85-4.72z"/>
<path id="def-be-a" d="M55.6 29.58h6.12v-1.59H55.6zm.64 5.74s.26-2.23 2.58-2.23c2.32 0 2.26 2.23 2.26 2.23zm-3.23 1.27S52.56 42 58.72 42c0 0 5.26.37 5.26-3.81H61.4s-.09 1.59-2.58 1.59c0 0-2.58.17-2.58-2.55l7.74-.01c-.08-.32.9-6.42-5.16-6.36-5.77.05-5.81 5.73-5.81 5.73zm-10.34 2.8v-4.24H47s1.7.16 1.7 2.24c0 1.76-1.06 1.99-1.7 2zM47 29.61s1.16.06 1.16 1.62-.76 1.64-1.49 1.64h-4v-3.26zm4.33 1.3c0-2.68-1.81-3.91-4.26-3.91H39v15.01h8.07s4.92.15 4.92-4.43c0 0 .22-3.73-2.9-3.73 0 0 2.24-.25 2.24-2.94z"/>
<path id="def-briefcase-a" d="M855 13538c0-1.7 1.3-3 3-3s3 1.3 3 3v7c0 1.7-1.3 3-3 3s-3-1.3-3-3v-7z"/>
<path id="def-comments-a" d="M752 8958l-4 4v-12a1 1 0 011-1h11a1 1 0 011 1v7a1 1 0 01-1 1zm12-6v13l-3.2-4H751l2-2h9v-8h1c1 0 1 .45 1 1z"/>
<path id="def-eaye-a" d="M630 8956.22c0 1.04-3.58 5.21-8 5.21s-8-4.26-8-5.21c0-1.05 3.58-5.22 8-5.22s8 4.17 8 5.22zm-5 0h-3v-3.13a3.13 3.13 0 100 6.26 3.07 3.07 0 003-3.13z"/>
<path id="def-file-a" d="M493 9457a2 2 0 01-1.98-2v-16a2 2 0 011.98-2h19.82c1.13 0 2.07.87 2.15 2v16a2.15 2.15 0 01-2.15 2zm0-18v8.83l5.3-4.59a.98.98 0 011.35.05l5.34 5.39 3.27-2.48a.98.98 0 011.36.16l3.35 4.07V9439zm19.97 14.55l-4.27-5.18-3.21 2.43c-.4.3-.95.26-1.3-.09l-5.3-5.35-5.9 5.1v4.54h19.98zm-6.1-10.55a1.98 1.98 0 113.97.04 1.98 1.98 0 01-3.97-.04z"/>
<path id="def-gplus-a" d="M466 10169a4 4 0 013.87-3.99 4.14 4.14 0 012.93.99c-.33.36-.67.71-1.03 1.04-.72-.42-1.58-.75-2.41-.46a2.52 2.52 0 00-1.67 3.23c.41 1.35 2.09 2.1 3.4 1.52a2.22 2.22 0 001.33-1.51c-.78-.01-1.56 0-2.34-.03v-1.36h3.9a4.45 4.45 0 01-.83 3.2c-1 1.28-2.88 1.66-4.4 1.16a4 4 0 01-2.75-3.79z"/><path id="def-gplus-b" d="M476.34 10166h1.32l.01 1.33H479v1.33l-1.33.01v1.33h-1.33l-.01-1.33H475v-1.33l1.33-.01.01-1.33z"/>
<path id="def-inst-a" d="M1480.93 332c-3.5 0-3.95.02-5.32.07-1.37.07-2.3.28-3.14.6-.84.34-1.57.77-2.28 1.5a6.36 6.36 0 00-1.5 2.28 9.84 9.84 0 00-.6 3.14c-.07 1.37-.07 1.82-.07 5.32s.02 3.96.07 5.32c.07 1.37.28 2.31.6 3.14.34.85.77 1.58 1.5 2.29a6.51 6.51 0 002.28 1.5c.82.3 1.77.53 3.14.6 1.37.07 1.82.07 5.32.07s3.96-.02 5.32-.07a9.48 9.48 0 003.14-.6 6.14 6.14 0 002.29-1.5 6.36 6.36 0 001.5-2.29c.3-.81.53-1.77.6-3.14.07-1.36.07-1.82.07-5.32s-.02-3.95-.07-5.32a9.48 9.48 0 00-.6-3.14 6.14 6.14 0 00-1.5-2.28 6.36 6.36 0 00-2.29-1.5 9.84 9.84 0 00-3.14-.6c-1.38-.05-1.82-.07-5.32-.07zm0 2.32c3.45 0 3.85.02 5.22.07 1.27.05 1.94.26 2.4.45.6.25 1.03.52 1.48.97.45.45.73.89.97 1.5.18.44.39 1.14.45 2.39.07 1.37.07 1.76.07 5.21s-.01 3.85-.07 5.22a6.55 6.55 0 01-.45 2.4c-.24.6-.52 1.03-.97 1.48-.45.45-.88.73-1.49.97-.45.18-1.14.39-2.39.45-1.37.07-1.77.07-5.22.07-3.45 0-3.84-.01-5.21-.07a6.55 6.55 0 01-2.4-.45 4.11 4.11 0 01-1.49-.97 4.11 4.11 0 01-.97-1.49 7.52 7.52 0 01-.45-2.39c-.07-1.37-.07-1.77-.07-5.22 0-3.45.02-3.84.07-5.21.05-1.27.26-1.95.45-2.4.25-.6.52-1.04.97-1.49.45-.45.89-.72 1.5-.97a7.52 7.52 0 012.39-.45c1.35-.05 1.76-.07 5.21-.07z"/><path id="def-inst-b" d="M1480.93 349.2a4.3 4.3 0 110-8.59 4.3 4.3 0 010 8.6zm0-10.93a6.62 6.62 0 100 13.24 6.62 6.62 0 000-13.24z"/><path id="def-inst-c" d="M1486.27 338.01a1.54 1.54 0 113.09 0 1.54 1.54 0 01-3.09 0z"/>
<path id="def-like-down-a" d="M1004.33 543.66c-1.1 0-2.45-.86-2.61-3.31-.05-1.41.11-2.82.48-4.19h-2.96c-2.15 0-3.42-1.35-3.42-2.67 0-.39.05-.77.17-1.13a2.4 2.4 0 01-.99-2.03 2.35 2.35 0 011.02-2.05c-.12-.34-.18-.7-.17-1.06.86-.6 1.2-1.7.86-2.7 0-2.52 3.45-2.52 4.57-2.52h2.85c1.3.06 2.56.4 3.71 1 .67.36 1.41.6 2.18.67h3.23c.25 0 .5.11.65.31.12.14 1.1 1.47 1.1 4.69.03 1.8-.28 3.6-.9 5.31a.83.83 0 01-.67.5c-.03 0-3.27.4-4.85 1.98a10.32 10.32 0 00-2.8 5.94 1.4 1.4 0 01-1.45 1.26zm-6.84-10.17c0 .34.52 1 1.75 1h4.06a.83.83 0 01.8 1.1c-.5 1.5-.73 3.07-.72 4.65.08 1.1.44 1.6.79 1.72a11.94 11.94 0 013.23-6.67c1.57-1.58 4.2-2.18 5.32-2.38.41-1.37.62-2.8.61-4.24a8.18 8.18 0 00-.56-3.34h-2.75c-1-.07-1.97-.35-2.85-.81a7.53 7.53 0 00-3.04-.85h-2.85c-1.32 0-2.9.15-2.9.85-.02.11.02.22.09.3a.73.73 0 01.75.77.92.92 0 01-.85.87.85.85 0 00-.85.77c-.05.22.01.44.17.6.42.07.71.45.67.88a.87.87 0 01-.86.77.77.77 0 00-.83.85.8.8 0 00.87.85c.46.01.82.4.81.85 0 .43-.33.78-.76.8-.09.21-.12.44-.1.66z"/>
<path id="def-like-up-a" d="M944.67 520c1.1 0 2.45.87 2.61 3.32.05 1.4-.11 2.82-.48 4.18h2.96c2.15 0 3.42 1.36 3.42 2.67 0 .39-.05.77-.17 1.14a2.4 2.4 0 01.99 2.02c.04.81-.35 1.59-1.02 2.05.12.34.18.7.17 1.07-.86.6-1.2 1.7-.86 2.69 0 2.52-3.45 2.52-4.57 2.52h-2.85a8.94 8.94 0 01-3.71-.99 5.67 5.67 0 00-2.18-.67h-3.23a.83.83 0 01-.65-.32c-.12-.14-1.1-1.47-1.1-4.68-.03-1.81.28-3.62.9-5.32a.83.83 0 01.67-.5c.03 0 3.27-.4 4.85-1.98a10.32 10.32 0 002.8-5.93 1.4 1.4 0 011.45-1.27zm6.84 10.17c0-.34-.52-1-1.75-1h-4.06a.83.83 0 01-.8-1.1c.5-1.5.73-3.07.72-4.65-.08-1.1-.44-1.6-.79-1.72a11.94 11.94 0 01-3.23 6.67c-1.57 1.58-4.2 2.19-5.32 2.38a14.38 14.38 0 00-.61 4.25 8.18 8.18 0 00.56 3.33h2.75c1 .07 1.97.35 2.85.82.94.49 1.98.78 3.04.85h2.85c1.32 0 2.9-.15 2.9-.86a.35.35 0 00-.09-.3.73.73 0 01-.75-.77.92.92 0 01.85-.87c.44 0 .81-.33.85-.77a.65.65 0 00-.17-.6.81.81 0 01-.67-.87.87.87 0 01.86-.78.77.77 0 00.83-.85.8.8 0 00-.87-.85.83.83 0 01-.81-.85c0-.43.33-.78.76-.8.09-.21.12-.43.1-.66z"/>
<path id="def-like-a" d="M701.32 8960.32a.95.95 0 01-.95.95h-5.72c-.96 0-1.92-.95-2.87-.95h-.95v-6.68c.04-.6.4-1.12.95-1.36a4.78 4.78 0 002.87-4.37v-.96a.95.95 0 01.95-.95h.95c.53 0 .95.43.95.95v5.73h3.82a.9.9 0 01.96.96zm-14.31.95v-9.54h1.9a.96.96 0 01.97.95v7.64a.96.96 0 01-.96.95zm.99-8.3a.48.48 0 10.88.38.48.48 0 00-.88-.38z"/>
<path id="def-link-a" d="M626.02 1163.93l-.02 15.99 13.02.01v-4a.86.86 0 01.24-.68.9.9 0 01.66-.28 1 1 0 011 1v4.95a1 1 0 01-.29.7 1 1 0 01-.71.29H625a1 1 0 01-.71-.29 1 1 0 01-.29-.7V1163a1 1 0 011-1h3.95a1 1 0 011 1 .89.89 0 01-.93.93z"/><path id="def-link-b" d="M641.95 1171a1 1 0 01-1-1v-5.59l-9.25 9.3a.99.99 0 01-1.41-.01.99.99 0 01.01-1.41l9.24-9.29h-5.56a1 1 0 01-1-1 1 1 0 011-1h7.97a1 1 0 011 1v8a1 1 0 01-1 1z"/>
<path id="def-mail-a" d="M1058 261c0-.6-.4-1-1-1h-14c-.6 0-1 .4-1 1l8 6.5z"/><path id="def-mail-b" d="M1042 262.5v8.5c0 .6.4 1 1 1h14c.6 0 1-.4 1-1v-8.5l-8 6.5z"/>
<path id="def-outside-a" d="M1204.24 9231.16h-10.05c-.92 0-1.67-.75-1.67-1.68v-4.2c0-.46.38-.84.84-.84a.81.81 0 01.8.84v4.2h10.08v-16.8h-10.08v4.2a.81.81 0 01-.8.84.84.84 0 01-.84-.84v-4.2c0-.93.75-1.68 1.67-1.68h10.05c.92 0 1.67.75 1.67 1.68v16.8c0 .93-.75 1.68-1.67 1.68zm-15.56-10.92h11.37a.84.84 0 110 1.68h-11.36l1.91 1.92a.84.84 0 11-1.18 1.2l-3.35-3.36a.86.86 0 01-.24-.6v-.02a.83.83 0 01.24-.58l3.35-3.36a.83.83 0 011.18 0c.33.33.33.87 0 1.2z"/>
<path id="def-pencil-a" d="M1190.84 9818.68a.64.64 0 01-.19.13l-.07.06-4.42 1.82c-.1.05-.21.07-.32.07a.83.83 0 01-.77-1.15l1.84-4.4v-.02a.38.38 0 01.09-.13l.08-.13v-.01l10.82-10.82-.44-.44-3.56 3.57a.83.83 0 01-1.18-1.18l4.16-4.15a.81.81 0 011.17 0l1.03 1.03 1.86-1.86a.84.84 0 011.17 0l2.58 2.58c.33.32.33.85 0 1.18zm-2.88-1.7l-.58 1.41 1.41-.58zm.88-1.47l1.41 1.4 10.24-10.23-1.4-1.4zm12.69-12.68l-1.27 1.27 1.4 1.4 1.28-1.27z"/>
<path id="def-phone-a" d="M732.62 41c-2.25 0-6.37-2.73-10.24-6.78a33.08 33.08 0 01-5.22-6.96c-1.33-2.53-1.52-4.32-.56-5.31l2.91-2.72c.17-.16.4-.24.63-.23.24.02.46.13.61.32l3.79 4.58c.23.28.28.68.12 1.01l-1.47 3.08 5.24 5.48 2.93-1.54a.83.83 0 01.96.12l4.38 3.96c.17.16.28.38.3.63a.97.97 0 01-.22.67l-2.53 3.02c-.33.34-.81.67-1.63.67zm-14.76-17.78c-.15.21-.25 1.09.83 3.15 1.06 2 2.8 4.32 4.93 6.55 3.87 4.06 7.53 6.25 9 6.25.2 0 .3-.04.33-.08l1.94-2.3-3.27-2.95-2.98 1.56a.84.84 0 01-1.01-.17l-6.12-6.42a.92.92 0 01-.16-1.05l1.48-3.12-2.82-3.42z"/>
<path id="def-plus-a" d="M1223.33 4172.67h-6.66v6.66a.67.67 0 01-1.34 0v-6.66h-6.66a.67.67 0 010-1.34h6.66v-6.66a.67.67 0 011.34 0v6.66h6.66a.67.67 0 010 1.34z"/>
<path id="def-search-a" d="M1092.53 24.87a6.7 6.7 0 10-.05 13.4 6.7 6.7 0 00.05-13.4zm12.1 18.85a.95.95 0 01-1.35 0l-5.4-5.43a8.62 8.62 0 111.35-1.35l5.4 5.43c.37.37.37.98 0 1.35z"/>
<path id="def-shape-a" d="M879 13323h-4a1 1 0 01-1-1v-4a1 1 0 011-1h.85c-1.29-8.14-8.38-15.22-16.85-16.81v.81a1 1 0 01-1 1h-4a1 1 0 01-1-1v-.81c-8.47 1.6-15.56 8.67-16.85 16.81h.85a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4a1 1 0 011-1h1.13c1.03-7.24 6.24-13.76 13.07-17h-6.48a1.98 1.98 0 01-1.72 1.01c-.97 0-1.8-.69-1.98-1.65a2 2 0 011.28-2.23 2 2 0 012.42.87H853v-1a1 1 0 011-1h4a1 1 0 011 1v1h12.27a2.01 2.01 0 110 2h-6.47c6.83 3.24 12.04 9.76 13.07 17H879a1 1 0 011 1v4a1 1 0 01-1 1zm-43-4h-2v2h2zm21-21h-2v2h2zm21 21h-2v2h2zm-22.93-12.51a.52.52 0 01.1-.18l.01-.03.03-.03a1 1 0 01.2-.21l.06-.04c.06-.04.12-.08.19-.1l.04-.02.09-.01.05-.01.16-.03.15.03h.04l.11.01.04.02.19.1.02.02.02.01a.92.92 0 01.24.25l.02.03c.04.05.08.12.1.18l.03.05c.02.07 2.33 7.26 8.51 10.59.26.14.45.39.51.68a.97.97 0 01-.2.82 23.7 23.7 0 00-3.99 8.81 8.02 8.02 0 012.21 5.57 1 1 0 01-1 1h-14a1 1 0 01-1-1 8.02 8.02 0 012.21-5.57 23.66 23.66 0 00-3.99-8.8 1 1 0 01.31-1.51c6.21-3.34 8.49-10.52 8.51-10.59l.03-.04zm.93 20.49a6 6 0 00-5.92 5.02h11.84a6 6 0 00-5.92-5.02zm-4.06-.9a8.17 8.17 0 018.12 0 25.8 25.8 0 013.47-7.78 20.33 20.33 0 01-6.53-6.96v6.93a2 2 0 01-.97 3.73 2.03 2.03 0 01-2.03-2 2 2 0 011-1.7v-6.96a20.33 20.33 0 01-6.53 6.96 25.8 25.8 0 013.47 7.78z"/>
<path id="def-strawberry-a" d="M873.26 13427.96a7.49 7.49 0 01-4.13-1.21 20.45 20.45 0 012.02 8.92c0 10.41-17.26 18.25-28.46 18.25-3.71 0-6.53-.86-8.17-2.48l-.1-.1c-3.9-4.01-2.65-13.97.62-21.78 3.77-9.01 9.53-14.39 15.41-14.39 3.1 0 6.17.68 8.97 1.99a8.12 8.12 0 01-.65-1.24c-1.09-2.7-.53-5.87 1.68-9.44a1 1 0 011.11-.45c.21.06 5.12 1.38 6.8 5.49.8 2.19.7 4.61-.29 6.72 1.25-.51 2.58-.79 3.92-.83 5.12 0 7.74 4.75 8.4 7.26a.97.97 0 01-.45 1.1 12.95 12.95 0 01-6.68 2.19zm-36.36 2.36c-3.42 8.19-3.85 16.84-.97 19.69l.08.09c1.26 1.18 3.62 1.82 6.68 1.82a38.27 38.27 0 0017.26-4.82c3.43-1.92 9.18-5.96 9.18-11.43a18.4 18.4 0 00-18.68-18.5c-5.93 0-10.89 6.79-13.55 13.15zm29.59-18.05c-.97-2.38-3.49-3.6-4.73-4.07-1.52 2.71-1.89 5.05-1.12 6.96.96 2.37 3.48 3.6 4.73 4.08 1.52-2.71 1.89-5.05 1.12-6.97zm5.5 7.13c-1.75.08-3.45.6-4.95 1.51.59 1.54 2.36 5.06 6.22 5.06 1.75-.08 3.45-.6 4.94-1.5-.59-1.55-2.36-5.07-6.21-5.07zm-13.43 13.54h3v3h-3zm-4-5h3v3h-3zm2 13h-3v-3h3zm-7-8h3v3h-3zm0-9h3v3h-3zm2 22h-3v-3h3zm-7-8h3v3h-3zm0-9h3v3h-3zm-5 14h3v3h-3zm0-9h3v3h-3z"/>
<path id="def-telegram-a" d="M823.8 272.93l-4.09 20.05c-.3 1.42-1.16 1.76-2.36 1.1l-6.52-4.77-3.13 3c-.55.47-.75.66-1.27.65-.5 0-.74-.3-1.03-1.1l-2.4-7.29-6.26-1.94c-1.01-.32-1.06-1.66.31-2.05l25.01-9.39c1.14-.52 2.18 0 1.74 1.74zm-17.39 18.55l.6-5.26 11.83-10.54c.31-.36.09-.88-.61-.42l-14.24 8.87z"/>
<path id="def-tm-a" d="M1406.46 346.34l13.28-8.34c.65-.44.86.05.57.39l-11.02 9.91-.57 4.96zm16.84-12.16l-23.32 8.83c-1.27.37-1.24 1.62-.3 1.93l5.84 1.82 2.24 6.86c.28.75.5 1.04.96 1.04.49 0 .67-.18 1.19-.62.58-.55 1.5-1.43 2.92-2.83l6.08 4.49c1.12.62 1.92.3 2.21-1.04l3.8-18.85c.41-1.63-.55-2.12-1.62-1.63z"/>
<path id="def-trash-a" d="M1175 9805h-1.09l-1.8 13.12a2.15 2.15 0 01-2.11 1.88h-8a2.14 2.14 0 01-2.1-1.88l-1.78-13.12H1157a1 1 0 010-2h5v-1a3 3 0 013-3h2a3 3 0 013 3v1h5a1 1 0 010 2zm-7-3a1 1 0 00-1-1h-2a1 1 0 00-1 1v1h4zm-7.87 3l1.75 12.9c.02.05.07.09.12.1h8c.06-.01.1-.05.12-.11l1.78-12.89zm6.87 3h2v6h-2zm-4 0h2v6h-2z"/>
<path id="def-triangle-a" d="M1238 6883l7.22 7.22 7.22-7.22z"/>
<path id="def-user-circle-a" d="M1265.24 30.18a10 10 0 01-2.18 10.9 6.94 6.94 0 00-4.7-4.69 5 5 0 10-4.66.01c-2.24.72-4 2.47-4.72 4.71a10 10 0 1116.26-10.93zm-6.22 1.82a3 3 0 11-6-.01 3 3 0 016 .01zm-8.3 10.48c.4-2.6 2.65-4.5 5.28-4.48 2.73 0 5.1 1.96 5.27 4.37l.03.09a9.9 9.9 0 01-10.57.02zM1256 46a12.01 12.01 0 000-24 12 12 0 100 24z"/>
<path id="def-vb-a" d="M955.45 276.38c.68 3.25.79 6.51-.02 9.76-.14.57-.36 1.11-.58 1.65-.84 2.05-2.5 3.13-4.57 3.73-1.63.48-3.31.69-5 .82-.89.07-2.29.03-3.18.02-.76-.01-.55-.04-1.04.45-.96.97-1.84 1.82-2.76 2.84a28 28 0 01-1.35 1.35v-4.93c0-.25-.07-.4-.3-.5-.26-.1-.5-.24-.75-.34a6.95 6.95 0 01-4.35-4.98 19.93 19.93 0 01-.51-6.16c.07-1.4.26-2.79.64-4.15a6.8 6.8 0 013.48-4.25 13.83 13.83 0 014.79-1.47 25.9 25.9 0 019.8.59 8.9 8.9 0 013.5 1.69 6.59 6.59 0 012.2 3.88zm-12.05-1.52c.54.04 1.07.15 1.6.28 1.98.5 3.52 1.53 4.32 3.43.42.99.63 2.02.7 3.08.02.27.15.42.43.42.27-.01.38-.19.39-.43.02-.21.01-.42.01-.64a7.41 7.41 0 00-1.39-4.12c-1.49-1.96-3.43-2.7-6-2.82-.31-.02-.49.1-.51.42-.01.31.21.36.45.38zm4.39 4.61c.11.4.21.81.26 1.22.03.27-.03.64.42.65.32.01.4-.13.43-.67a4.58 4.58 0 00-.68-2.46c-.96-1.52-2.37-2.16-4.16-2.32-.28-.03-.48.08-.52.37-.05.3.14.44.41.48.55.08 1.08.22 1.6.4a3.32 3.32 0 012.24 2.33zm-2.22-1.46a2.29 2.29 0 00-.89-.22c-.38.03-.58.19-.58.45.01.33.3.33.52.39l.27.06c.72.19 1.13.65 1.27 1.36.03.13.04.27.08.4.06.18.18.31.4.31.21-.01.34-.13.39-.32l.04-.35a2.4 2.4 0 00-1.5-2.08zm4.89 7.94c-.78-.65-1.6-1.25-2.47-1.78-1.02-.62-1.77-.45-2.47.49l-.11.14c-.32.39-.72.54-1.22.4a5.89 5.89 0 01-1.51-.74 6.76 6.76 0 01-2.77-3.19c-.35-.82-.19-1.35.54-1.88l.28-.2c.55-.45.68-.89.37-1.52a9.94 9.94 0 00-2.3-3.05 1.3 1.3 0 00-.97-.36 2.9 2.9 0 00-2.62 2.74c-.01.37.08.78.24 1.17 2.23 5.38 6.16 9.1 11.6 11.36.4.17.82.27 1.25.15a3.75 3.75 0 002.55-2.16c.28-.61.14-1.13-.39-1.57z"/>
<path id="def-ynadex-a" d="M471.93 10326.44h-.59c-.92 0-1.8-.64-1.8-2.24 0-1.67.83-2.35 1.68-2.35h.7v4.59zm.92-5.44h-1.6c-1.55 0-2.87 1.13-2.87 3.33 0 1.32.64 2.3 1.78 2.78l-2.13 3.68c-.07.12 0 .21.1.21h1c.08 0 .14-.03.17-.1l1.93-3.6h.7v3.6c0 .05.04.1.1.1h.86c.08 0 .11-.04.11-.1v-9.77c0-.09-.06-.13-.15-.13z"/>
<path id="def-ytube-a" d="M1343.37 349.72v-9.44l6.27 4.72zm-7.81-14.03a3.54 3.54 0 00-3.56 3.51v11.6a3.54 3.54 0 003.56 3.51h19.88a3.54 3.54 0 003.56-3.5V339.2a3.54 3.54 0 00-3.56-3.51h-19.88z"/>
</defs>
<symbol id="icon-arrow-chevron" viewBox="0 0 9 15"><path d="M7.07.862L0 7.93 7.072 15l1.06-1.06-6.011-6.01L8.13 1.922 7.07.862z"/></symbol>
<symbol id="icon-arrow-down" viewBox="0 0 8 5"><use xlink:href="#def-arrow-down-a" transform="translate(-223 -20813)"/></symbol>
<symbol id="icon-arrow-left" viewBox="0 0 18 12"><path d="M.1 6.3c-.1-.3 0-.6.1-.8l4.3-4.3c.3-.3.7-.3 1 0 .3.3.3.7 0 1l-3 3.1h14.1c.4 0 .7.3.7.7 0 .4-.3.7-.7.7H2.5l3.1 3.1c.3.3.3.8 0 1-.2.2-.3.2-.4.3-.2.1-.5 0-.7-.2L.2 6.6c-.1-.1-.1-.2-.1-.3z"/></symbol>
<symbol id="icon-arrow-menu" viewBox="0 0 10 5"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 0l5 5 5-5H0z"/></symbol>
<symbol id="icon-arrow-right" viewBox="0 0 15 12"><path d="M14.19 5.77c.11.26.05.57-.15.78l-4.32 4.33a.72.72 0 01-1.02 0 .72.72 0 010-1.02l3.09-3.1H.69A.72.72 0 010 6.04c0-.38.31-.7.69-.72h11.1L8.7 2.23a.73.73 0 01.33-1.21c.24-.06.51.01.69.19l4.32 4.32a.6.6 0 01.15.24z"/></symbol>
<symbol id="icon-arrow" viewBox="0 0 20 17"><use xlink:href="#def-arrow-a" transform="translate(-1033 -789)"/></symbol>
<symbol id="icon-be" viewBox="0 0 25 16"><use xlink:href="#def-be-a" transform="translate(-39 -27)"/></symbol>
<symbol id="icon-be2-mob" viewBox="0 0 34 34"><path d="M15.426 16.508s1.507-.112 1.507-1.879S15.7 12 14.138 12H9v9.875h5.138s3.137.099 3.137-2.915c0 0 .137-2.452-1.85-2.452zm-4.162-2.753h2.874s.699 0 .699 1.027c0 1.028-.411 1.177-.877 1.177h-2.696v-2.204zm2.742 6.365h-2.742v-2.64h2.874s1.041-.013 1.041 1.357c0 1.142-.761 1.271-1.173 1.283zM23.408 12.582h-4.074v1.216h4.074v-1.216zM21.458 14.513c-3.797 0-3.794 3.793-3.794 3.793s-.26 3.775 3.794 3.775c0 0 3.38.193 3.38-2.626H23.1s.058 1.062-1.584 1.062c0 0-1.737.116-1.737-1.718h5.116s.56-4.286-3.437-4.286zm1.545 2.968h-3.244s.213-1.522 1.738-1.522 1.506 1.522 1.506 1.522z"/></symbol>
<symbol id="icon-be2" viewBox="0 0 56 56"><path d="M27.475 27.946s1.987-.148 1.987-2.479c0-2.33-1.625-3.467-3.685-3.467H19v13.024h6.777s4.137.13 4.137-3.844c0 0 .18-3.234-2.439-3.234zm-5.489-3.631h3.791s.921 0 .921 1.355-.542 1.551-1.156 1.551h-3.556v-2.906zm3.616 8.394h-3.616v-3.48h3.79s1.374-.018 1.374 1.788c0 1.506-1.004 1.677-1.548 1.692zM38.004 22.767H32.63v1.604h5.373v-1.604zM35.432 25.314c-5.009 0-5.004 5.003-5.004 5.003s-.344 4.98 5.004 4.98c0 0 4.456.254 4.456-3.464h-2.292s.077 1.4-2.088 1.4c0 0-2.291.154-2.291-2.266h6.748s.738-5.653-4.533-5.653zm2.037 3.915H33.19s.28-2.008 2.291-2.008c2.013 0 1.987 2.008 1.987 2.008z"/></symbol>
<symbol id="icon-briefcase" viewBox="834 13519 48 44"><path d="M836.5 13563c-1.4 0-2.5-1.2-2.5-2.6v-19.4c0 .6.4 1 1 1h1v18.4c0 .3.2.6.5.6h42.9c.3 0 .5-.3.5-.6v-18.4h1c.6 0 1-.4 1-1s-.4-1-1-1h-1v-10.4c0-.3-.2-.5-.5-.6h-42.9c-.3 0-.5.3-.5.6v10.4h-1c-.6 0-1 .4-1 1v-11.4c0-1.4 1.1-2.5 2.5-2.6H849v1c0 .6.4 1 1 1s1-.4 1-1v-1h14v1c0 .6.4 1 1 1 .3 0 .5-.1.7-.3.2-.2.3-.4.3-.7v-1h12.5c1.4 0 2.5 1.2 2.5 2.6v30.9c0 1.4-1.1 2.6-2.5 2.6h-43zm18.4-21H836v-2h18.9c.6 0 1 .4 1 1s-.4 1-1 1zm25.1-2v2h-18.9c-.6 0-1-.4-1-1s.4-1 1-1H880zm-13-16.8c0-2.3-1.9-4.2-4.2-4.2h-9.6c-2.3 0-4.2 1.9-4.2 4.2v3.8h2v-3.8c0-1.2 1-2.2 2.2-2.2h9.6c1.2 0 2.2 1 2.2 2.2v3.8h2v-3.8z"/><clipPath id="def-briefcase-b"><use xlink:href="#def-briefcase-a" overflow="visible"/></clipPath><g clip-path="url(#def-briefcase-b)"><path stroke-width="4" stroke-miterlimit="50" d="M855 13538c0-1.7 1.3-3 3-3s3 1.3 3 3v7c0 1.7-1.3 3-3 3s-3-1.3-3-3v-7z"/></g></symbol>
<symbol id="icon-burger" viewBox="0 0 20 14"><g fill-rule="evenodd"><path d="M0 0h20v2H0zM0 6h20v2H0zM0 12h20v2H0z"/></g></symbol>
<symbol id="icon-cancel-circle" viewBox="0 0 24 24"><path d="M12 24a12 12 0 110-24 12 12 0 010 24zm0-22a10 10 0 100 20 10 10 0 000-20zm4.71 13.29L13.41 12l3.3-3.29a1 1 0 00-.02-1.4 1 1 0 00-1.4-.02L12 10.59l-3.29-3.3a1 1 0 00-1.4.02 1 1 0 00-.02 1.4l3.3 3.29-3.3 3.29a1 1 0 00.02 1.4 1 1 0 001.4.02l3.29-3.3 3.29 3.3a1 1 0 001.42 0 1 1 0 000-1.42z"/></symbol>
<symbol id="icon-clip" viewBox="0 0 25 22"><path d="M12.1 21.37a1.02 1.02 0 01-.71-1.73L21.74 9.11a4.19 4.19 0 000-5.87 4.04 4.04 0 00-5.78 0l-12 12.21c-.59.49-.94 1.2-.97 1.97.05.49.28.95.63 1.29.31.35.77.53 1.23.48.74-.17 1.4-.57 1.89-1.15l9.42-9.58a.98.98 0 011.41 0c.39.4.39 1.04 0 1.44l-9.42 9.58A5.3 5.3 0 015.1 21.2a3.37 3.37 0 01-2.89-1.05A4.16 4.16 0 011 17.54a4.62 4.62 0 011.55-3.53l12-12.2a6.03 6.03 0 018.6 0 6.24 6.24 0 010 8.74L12.8 21.07a.98.98 0 01-.7.3z"/></symbol>
<symbol id="icon-clock" viewBox="0 0 24 24"><path d="M0 12a12 12 0 1124 0 12 12 0 01-24 0zm2 0a10 10 0 1020 0 10 10 0 00-20 0zm14 5a1 1 0 00.71-1.71L13 11.59V5a1 1 0 00-1-1 1 1 0 00-1 1v7a1 1 0 00.08.38c.05.12.12.24.21.33l4 4c.19.18.45.29.71.29z"/></symbol>
<symbol id="icon-close-menu" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.636 2.303L13.97.636 8.136 6.469 2.303.636.636 2.303 6.47 8.136.636 13.97l1.667 1.667 5.833-5.833 5.833 5.833 1.667-1.666-5.833-5.834 5.833-5.833z"/></symbol>
<symbol id="icon-close" viewBox="0 0 16 15"><g fill-rule="evenodd"><path d="M1.963.045l13.791 12.86-1.364 1.463L.6 1.508z"/><path d="M14.39.045L.6 12.905l1.364 1.463 13.79-12.86z"/></g></symbol>
<symbol id="icon-comments" viewBox="0 0 16 16"><use xlink:href="#def-comments-a" transform="translate(-748 -8949)"/></symbol>
<symbol id="icon-eaye" viewBox="0 0 16 11"><use xlink:href="#def-eaye-a" transform="translate(-614 -8951)"/></symbol>
<symbol id="icon-fb" viewBox="0 0 13 25"><path d="M8.44 25V13.6h3.83l.58-4.45H8.44V6.31c0-1.28.36-2.16 2.2-2.16H13V.18A29.7 29.7 0 009.57 0c-3.4 0-5.73 2.07-5.73 5.87v3.28H0v4.45h3.84V25z"/></symbol>
<symbol id="icon-fb2-mob" viewBox="0 0 34 34"><path fill-rule="evenodd" clip-rule="evenodd" d="M18.415 24.638v-7.131h2.457l.366-2.784h-2.823v-1.776c0-.8.23-1.351 1.411-1.351h1.514v-2.49A21.931 21.931 0 0019.14 9c-2.182 0-3.677 1.295-3.677 3.672v2.051H13v2.784h2.463v7.13h2.952z"/></symbol>
<symbol id="icon-fb2" viewBox="0 0 56 56"><path fill-rule="evenodd" clip-rule="evenodd" d="M30.142 38.625V29.22h3.24l.483-3.671H30.14v-2.343c0-1.056.305-1.782 1.862-1.782H34V18.14a28.937 28.937 0 00-2.902-.14c-2.877 0-4.849 1.708-4.849 4.843v2.706H23v3.671h3.25v9.405h3.892z"/></symbol>
<symbol id="icon-file" viewBox="0 0 24 20"><use xlink:href="#def-file-a" transform="translate(-491 -9437)"/></symbol>
<symbol id="icon-github-mob" viewBox="0 0 34 34"><path d="M17.2 10c-3.978 0-7.2 3.307-7.2 7.386 0 3.263 2.063 6.031 4.923 7.007.36.07.492-.16.492-.355 0-.175-.006-.64-.009-1.256-2.003.445-2.425-.99-2.425-.99-.328-.853-.801-1.081-.801-1.081-.652-.458.05-.449.05-.449.723.052 1.103.761 1.103.761.642 1.13 1.685.803 2.097.615.065-.478.25-.803.456-.988-1.599-.185-3.28-.82-3.28-3.65 0-.806.28-1.464.741-1.981-.08-.187-.324-.938.063-1.955 0 0 .603-.198 1.98.757a6.754 6.754 0 011.8-.25 6.754 6.754 0 011.8.25c1.368-.955 1.971-.757 1.971-.757.387 1.017.144 1.768.072 1.955.46.517.738 1.175.738 1.981 0 2.838-1.683 3.462-3.285 3.644.252.222.486.674.486 1.366 0 .989-.009 1.783-.009 2.023 0 .193.126.424.495.35 2.881-.969 4.942-3.739 4.942-6.997 0-4.079-3.224-7.386-7.2-7.386z"/></symbol>
<symbol id="icon-github" viewBox="0 0 56 56"><path d="M27.913 19C22.436 19 18 23.362 18 28.741c0 4.305 2.84 7.955 6.778 9.242.496.092.677-.21.677-.468 0-.232-.008-.844-.012-1.657-2.758.588-3.34-1.306-3.34-1.306-.45-1.125-1.102-1.425-1.102-1.425-.898-.604.07-.592.07-.592.995.068 1.518 1.004 1.518 1.004.884 1.49 2.32 1.059 2.887.81.09-.63.344-1.059.628-1.302-2.202-.244-4.515-1.082-4.515-4.814 0-1.063.384-1.932 1.02-2.614-.112-.246-.446-1.236.086-2.578 0 0 .83-.26 2.727.999a9.676 9.676 0 012.478-.329 9.676 9.676 0 012.478.329c1.883-1.26 2.714-.999 2.714-.999.532 1.342.198 2.332.099 2.578a3.737 3.737 0 011.016 2.614c0 3.742-2.317 4.566-4.523 4.805.347.293.67.89.67 1.803 0 1.303-.013 2.35-.013 2.667 0 .255.173.56.681.463 3.966-1.279 6.804-4.932 6.804-9.23 0-5.38-4.439-9.741-9.913-9.741z"/></symbol>
<symbol id="icon-gplus" viewBox="0 0 13 8"><use xlink:href="#def-gplus-a" transform="translate(-466 -10165)"/><use xlink:href="#def-gplus-b" transform="translate(-466 -10165)"/></symbol>
<symbol id="icon-head" viewBox="0 0 54 45"><g transform="translate(2 2)" fill-rule="evenodd"><path d="M9.23 19.458v17.61s14.232 8.328 28.462 0V19.231" fill-rule="nonzero"/><path stroke-width="3" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" d="M46.923 13.25L22.99 0 0 14.007l23.179 13.44L46.923 13.25V30"/><path d="M9.23 19.458v17.61s14.232 8.328 28.462 0V19.231" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><circle stroke-width="3" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" cx="47.308" cy="32.692" r="2.692"/><path d="M32.733 18.745c.53.295 1.074.575 1.604.87 1.302.7 2.468-1.164 1.181-1.865-3.694-1.99-7.403-3.98-11.097-5.957-.53-.294-1.075-.575-1.604-.869-1.302-.7-2.468 1.163-1.181 1.864 3.694 1.99 7.403 3.981 11.097 5.957zM36.733 15.745c.53.295 1.074.575 1.604.87 1.302.7 2.468-1.164 1.181-1.865a4281.61 4281.61 0 00-11.097-5.957c-.53-.294-1.075-.575-1.604-.869-1.302-.7-2.468 1.163-1.181 1.864 3.694 1.99 7.403 3.981 11.097 5.957z" fill-rule="nonzero"/></g></symbol>
<symbol id="icon-inst" viewBox="0 0 26 26"><use xlink:href="#def-inst-a" transform="translate(-1468 -332)"/><use xlink:href="#def-inst-b" transform="translate(-1468 -332)"/><use xlink:href="#def-inst-c" transform="translate(-1468 -332)"/></symbol>
<symbol id="icon-instagram-mob" viewBox="0 0 34 34"><path fill-rule="evenodd" clip-rule="evenodd" d="M24.027 20.23a3.801 3.801 0 01-3.797 3.797h-6.433A3.801 3.801 0 0110 20.23v-6.433A3.801 3.801 0 0113.797 10h6.433a3.801 3.801 0 013.797 3.797v6.433zm-7.014-7.052a3.84 3.84 0 00-3.835 3.835 3.84 3.84 0 003.835 3.836 3.84 3.84 0 003.836-3.836 3.84 3.84 0 00-3.836-3.835zm0 6.848A3.016 3.016 0 0114 17.013 3.016 3.016 0 0117.013 14a3.016 3.016 0 013.013 3.013 3.016 3.016 0 01-3.013 3.013zm2.794-7.077c0-.625.509-1.133 1.133-1.133.625 0 1.134.508 1.134 1.133s-.509 1.134-1.134 1.134a1.135 1.135 0 01-1.133-1.134z"/></symbol>
<symbol id="icon-instagram" viewBox="0 0 56 56"><path fill-rule="evenodd" clip-rule="evenodd" d="M37.5 32.492a5.014 5.014 0 01-5.008 5.008h-8.484A5.014 5.014 0 0119 32.492v-8.484A5.014 5.014 0 0124.008 19h8.484a5.014 5.014 0 015.008 5.008v8.484zm-9.25-9.3a5.064 5.064 0 00-5.058 5.058c0 2.79 2.269 5.059 5.058 5.059 2.79 0 5.059-2.27 5.059-5.059 0-2.79-2.27-5.058-5.059-5.058zm0 9.032a3.978 3.978 0 01-3.974-3.974 3.978 3.978 0 013.974-3.974 3.978 3.978 0 013.974 3.974 3.978 3.978 0 01-3.974 3.974zm3.685-9.334c0-.825.67-1.495 1.494-1.495.825 0 1.495.67 1.495 1.495 0 .824-.67 1.495-1.495 1.495-.824 0-1.494-.67-1.494-1.495z"/></symbol>
<symbol id="icon-like-down" viewBox="0 0 20 22"><use xlink:href="#def-like-down-a" transform="translate(-995 -522)"/></symbol>
<symbol id="icon-like-up" viewBox="0 0 20 22"><use xlink:href="#def-like-up-a" transform="translate(-934 -520)"/></symbol>
<symbol id="icon-like" viewBox="0 0 16 16"><use xlink:href="#def-like-a" transform="translate(-687 -8946)"/></symbol>
<symbol id="icon-link" viewBox="0 0 19 21"><use xlink:href="#def-link-a" transform="translate(-624 -1161)"/><use xlink:href="#def-link-b" transform="translate(-624 -1161)"/></symbol>
<symbol id="icon-mail" viewBox="0 0 16 12"><use xlink:href="#def-mail-a" transform="translate(-1042 -260)"/><use xlink:href="#def-mail-b" transform="translate(-1042 -260)"/></symbol>
<symbol id="icon-minus-zoom" viewBox="0 0 26 2"><path stroke-linecap="square" stroke-miterlimit="50" stroke-width="2" d="M1.5 1h23.19"/></symbol>
<symbol id="icon-outside" viewBox="0 0 21 21"><use xlink:href="#def-outside-a" transform="translate(-1185 -9211)"/></symbol>
<symbol id="icon-pencil" viewBox="0 0 20 21"><use xlink:href="#def-pencil-a" transform="translate(-1185 -9800)"/></symbol>
<symbol id="icon-phone" viewBox="0 0 21 22"><use xlink:href="#def-phone-a" transform="translate(-716 -19)"/></symbol>
<symbol id="icon-play-circle" viewBox="0 0 24 24"><path d="M12 24a12 12 0 110-24 12 12 0 010 24zM2 12a10 10 0 1020 0 10 10 0 00-20 0z"/><path d="M11.01 14.52c-.05.28.1.55.35.67.25.13.55.07.74-.14l2.85-2.94c.26-.27.27-.7.02-.98l-2.83-2.94a.69.69 0 00-.75-.13.67.67 0 00-.38.65z"/></symbol>
<symbol id="icon-play-reviews" viewBox="0 0 9 9"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.074 4.507c0 .41-.745.741-.745.741l-5.854 2.91a.619.619 0 01-.563-.054.649.649 0 01-.294-.494V1.392A.586.586 0 01.895.853a.557.557 0 01.595.01l5.839 2.903s.745.331.745.741z"/></symbol>
<symbol id="icon-play" viewBox="0 0 17 17"><path d="M17 9.02c0 .88-1.6 1.59-1.6 1.59L2.84 16.86c-.4.16-.84.12-1.21-.12A1.4 1.4 0 011 15.68V2.33c-.03-.47.2-.92.6-1.16.39-.24.89-.23 1.27.02L15.4 7.43s1.6.71 1.6 1.59z"/></symbol>
<symbol id="icon-plus-zoom" viewBox="0 0 24 24"><path d="M23 13H13v10a1 1 0 01-1 1 1 1 0 01-1-1V13H1a1 1 0 01-1-1 1 1 0 011-1h10V1a1 1 0 011-1 1 1 0 011 1v10h10a1 1 0 011 1 1 1 0 01-1 1z"/></symbol>
<symbol id="icon-plus" viewBox="0 0 16 16"><use xlink:href="#def-plus-a" transform="translate(-1208 -4164)"/></symbol>
<symbol id="icon-search" viewBox="0 0 22 22"><use xlink:href="#def-search-a" transform="translate(-1083 -22)"/></symbol>
<symbol id="icon-shape" viewBox="0 0 48 38"><use xlink:href="#def-shape-a" transform="translate(-832 -13296)"/></symbol>
<symbol id="icon-share" viewBox="0 0 26 24"><path d="M21.03 8a3.95 3.95 0 01-3.02-1.41l-9.08 4.54c.12.55.13 1.11.02 1.66l9.06 4.61a3.98 3.98 0 11-.9 1.79l-9.05-4.61a4 4 0 11-.05-5.22l9.1-4.55A4 4 0 1121.03 8zm0 14a2 2 0 002-2 2 2 0 10-2 2zm-18-10a2 2 0 104 0 2 2 0 00-4 0zm16-8a2 2 0 104 0 2 2 0 00-4 0z"/></symbol>
<symbol id="icon-smile" viewBox="0 0 23 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.5 23.278c-6.351 0-11.5-5.148-11.5-11.5C0 5.427 5.149.278 11.5.278S23 5.427 23 11.778c-.005 6.35-5.15 11.495-11.5 11.5zm0-21.083a9.583 9.583 0 00-9.583 9.583 9.584 9.584 0 1019.167 0A9.599 9.599 0 0011.5 2.195zm-6.613 12.87a7.38 7.38 0 006.613 4.38 7.333 7.333 0 006.613-4.38.957.957 0 00-.93-1.427.96.96 0 00-.796.603 5.277 5.277 0 01-9.774 0 .959.959 0 00-1.726.824zm10.447-3.287a1.917 1.917 0 110-3.833 1.917 1.917 0 010 3.833zM5.75 9.862a1.917 1.917 0 103.833 0 1.917 1.917 0 00-3.833 0z"/></symbol>
<symbol id="icon-socials" viewBox="0 0 40 40"><g fill-rule="evenodd"><circle cx="20" cy="20" r="20"/><path d="M20.021 31h-.485C13.717 31 9 26.08 9 20.009c0-6.07 4.717-10.991 10.536-10.991.309-.024.619-.024.928 0 5.819 0 10.536 4.92 10.536 10.99C31 26.08 26.283 31 20.464 31h-.443zm0-2.198h.316c4.655 0 8.43-3.937 8.43-8.793s-3.775-8.793-8.43-8.793h-.632c-4.655 0-8.43 3.937-8.43 8.793s3.775 8.793 8.43 8.793h.316z"/><path d="M19.382 31C13.648 31 9 26.08 9 20.009c0-6.07 4.648-10.991 10.382-10.991.305-.024.61-.024.914 0 .252.02.488.138.665.33 5.385 5.95 5.385 15.338 0 21.29a.998.998 0 01-1.142.252.992.992 0 01-.437.11zm.322-19.784h-.238c-4.588 0-8.306 3.937-8.306 8.793s3.718 8.793 8.306 8.793a.981.981 0 01.26 0c4.23-5.007 4.23-12.58 0-17.586h-.022z" clip-rule="evenodd"/><path d="M19.91 30.967a1.101 1.101 0 01-.419-.077 1.101 1.101 0 01-1.21-.253c-5.708-5.95-5.708-15.337 0-21.288a1.1 1.1 0 01.704-.33 6.664 6.664 0 011.012 0C26.074 9.02 31 13.94 31 20.01S26.074 31 19.997 31l-.088-.033zm-.353-19.783a13.177 13.177 0 000 17.585c.091-.012.184-.012.275 0 4.861 0 8.802-3.936 8.802-8.792s-3.94-8.793-8.802-8.793h-.275z" clip-rule="evenodd"/><path d="M27.944 17H11.056C10.473 17 10 16.552 10 16s.473-1 1.056-1h16.888c.583 0 1.056.448 1.056 1s-.473 1-1.056 1zM27.944 25H11.056C10.473 25 10 24.552 10 24s.473-1 1.056-1h16.888c.583 0 1.056.448 1.056 1s-.473 1-1.056 1z"/></g></symbol>
<symbol id="icon-strawberry" viewBox="0 0 49 48"><use xlink:href="#def-strawberry-a" transform="translate(-832 -13406)"/></symbol>
<symbol id="icon-telegram" viewBox="0 0 29 24"><use xlink:href="#def-telegram-a" transform="translate(-795 -271)"/></symbol>
<symbol id="icon-telegram2-mob" viewBox="0 0 34 34"><path d="M14.95 19.329l-.25 3.528c.358 0 .514-.154.7-.34l1.683-1.607 3.486 2.553c.64.356 1.09.168 1.263-.588L24.12 12.15c.204-.946-.341-1.316-.964-1.084l-13.452 5.15c-.918.357-.904.869-.156 1.1l3.44 1.07 7.988-4.998c.375-.25.717-.112.436.137L14.95 19.33z"/></symbol>
<symbol id="icon-telegram2" viewBox="0 0 56 56"><path d="M25.848 30.985l-.331 4.653c.473 0 .678-.203.924-.447l2.22-2.121 4.598 3.367c.843.47 1.437.223 1.665-.776l3.018-14.143.001-.001c.268-1.247-.45-1.734-1.272-1.428L18.929 26.88c-1.211.47-1.193 1.145-.206 1.451l4.536 1.411 10.536-6.593c.495-.328.946-.146.575.182l-8.522 7.653z"/></symbol>
<symbol id="icon-tm" viewBox="0 0 26 22"><use xlink:href="#def-tm-a" transform="translate(-1399 -334)"/></symbol>
<symbol id="icon-trash" viewBox="0 0 20 21"><use xlink:href="#def-trash-a" transform="translate(-1156 -9799)"/></symbol>
<symbol id="icon-triangle" viewBox="0 0 16 8"><use xlink:href="#def-triangle-a" transform="translate(-1237 -6883)"/></symbol>
<symbol id="icon-tw" viewBox="0 0 18 15"><path d="M18 1.75c-.66.3-1.37.5-2.12.59A3.7 3.7 0 0017.5.27c-.71.43-1.5.74-2.34.91a3.68 3.68 0 00-6.39 2.56c0 .3.03.58.09.85A10.45 10.45 0 011.25.69 3.75 3.75 0 002.4 5.68a3.67 3.67 0 01-1.68-.47v.05a3.75 3.75 0 002.97 3.67 3.51 3.51 0 01-1.67.06 3.7 3.7 0 003.45 2.6A7.33 7.33 0 010 13.14a10.37 10.37 0 005.66 1.68c6.79 0 10.51-5.7 10.51-10.64l-.01-.49A7.35 7.35 0 0018 1.76z"/></symbol>
<symbol id="icon-twitter-mob" viewBox="0 0 34 34"><path d="M24.406 12.386a6.16 6.16 0 01-1.702.466 2.937 2.937 0 001.3-1.632c-.572.34-1.202.58-1.873.715a2.952 2.952 0 00-5.109 2.02c0 .233.02.458.068.672a8.36 8.36 0 01-6.087-3.089 2.957 2.957 0 00.908 3.947 2.917 2.917 0 01-1.335-.363v.032a2.967 2.967 0 002.366 2.902c-.24.066-.502.097-.774.097-.189 0-.38-.01-.56-.05a2.981 2.981 0 002.76 2.057 5.934 5.934 0 01-3.661 1.26c-.242 0-.475-.011-.707-.04a8.314 8.314 0 004.53 1.325c5.435 0 8.406-4.502 8.406-8.404 0-.13-.004-.257-.01-.382a5.89 5.89 0 001.48-1.533z"/></symbol>
<symbol id="icon-twitter" viewBox="0 0 56 56"><path d="M38 21.828c-.707.31-1.46.515-2.244.615a3.874 3.874 0 001.713-2.153 7.783 7.783 0 01-2.47.943 3.894 3.894 0 00-6.738 2.664c0 .308.026.605.09.887a11.025 11.025 0 01-8.028-4.074 3.922 3.922 0 00-.533 1.969 3.9 3.9 0 001.73 3.237 3.847 3.847 0 01-1.76-.48v.043a3.913 3.913 0 003.12 3.827 3.887 3.887 0 01-1.02.129c-.25 0-.502-.015-.738-.067.505 1.543 1.937 2.677 3.64 2.714a7.827 7.827 0 01-4.83 1.66c-.32 0-.626-.013-.932-.052a10.966 10.966 0 005.976 1.748c7.167 0 11.086-5.938 11.086-11.085a9.95 9.95 0 00-.014-.503A7.77 7.77 0 0038 21.828z"/></symbol>
<symbol id="icon-user-circle" viewBox="0 0 24 24"><use xlink:href="#def-user-circle-a" transform="translate(-1244 -22)"/></symbol>
<symbol id="icon-vb" viewBox="0 0 25 27"><use xlink:href="#def-vb-a" transform="translate(-931 -270)"/></symbol>
<symbol id="icon-view-list" viewBox="0 0 15 15"><path d="M0 6V0h15v6zm0 9V9h15v6z"/></symbol>
<symbol id="icon-view-tile" viewBox="0 0 15 15"><path d="M0 6V0h6v6zm9 0V0h6v6zm0 9V9h6v6zm-9 0V9h6v6z"/></symbol>
<symbol id="icon-vk" viewBox="0 0 22 14"><path d="M10.61 13.8h1.3s.39-.04.59-.27c.19-.2.18-.59.18-.59s-.02-1.8.78-2.07c.8-.26 1.82 1.75 2.91 2.52.81.58 1.44.46 1.44.46l2.89-.05s1.52-.09.8-1.33c-.06-.1-.42-.92-2.15-2.59-1.82-1.75-1.58-1.47.61-4.5 1.33-1.84 1.87-2.97 1.7-3.45-.16-.46-1.14-.34-1.14-.34l-3.26.02s-.24-.03-.42.08-.29.36-.29.36-.52 1.43-1.2 2.64c-1.46 2.57-2.04 2.7-2.27 2.54-.56-.37-.42-1.49-.42-2.28 0-2.49.36-3.52-.71-3.79A5.26 5.26 0 0010.43 1c-1.16-.01-2.15.01-2.7.29-.38.19-.66.61-.49.63.22.03.71.14.97.51.33.47.32 1.53.32 1.53s.19 2.92-.45 3.29c-.44.25-1.04-.26-2.34-2.59-.66-1.19-1.16-2.5-1.16-2.5s-.1-.25-.27-.38c-.21-.16-.5-.21-.5-.21l-3.1.02s-.47.01-.64.22c-.15.19-.01.58-.01.58s2.43 5.89 5.17 8.87c2.52 2.72 5.38 2.54 5.38 2.54z"/></symbol>
<symbol id="icon-vk2-mob" viewBox="0 0 34 34"><path fill-rule="evenodd" clip-rule="evenodd" d="M16.79 21.913h.947a.77.77 0 00.436-.201.795.795 0 00.13-.459s-.016-1.399.573-1.608c.588-.209 1.336 1.351 2.13 1.954.297.259.68.383 1.063.346l2.123-.032s1.116-.073.589-1.03a7.642 7.642 0 00-1.582-2.002c-1.337-1.35-1.153-1.134.451-3.473.978-1.424 1.367-2.3 1.245-2.67a.866.866 0 00-.832-.257l-2.4.016a.463.463 0 00-.305.056.702.702 0 00-.214.282 15.134 15.134 0 01-.886 2.042c-1.062 1.978-1.49 2.082-1.665 1.962-.405-.29-.306-1.15-.306-1.77 0-1.913.268-2.717-.511-2.926a4.053 4.053 0 00-1.123-.12 4.804 4.804 0 00-1.987.225c-.275.144-.48.466-.351.49.273.03.524.167.703.386.165.37.246.774.237 1.182 0 0 .145 2.26-.329 2.54-.32.194-.764-.2-1.719-1.993a17.581 17.581 0 01-.848-1.938.803.803 0 00-.198-.29.84.84 0 00-.367-.16l-2.276.016a.723.723 0 00-.466.169.581.581 0 00-.016.442s1.788 4.559 3.805 6.859c.99 1.217 2.427 1.931 3.95 1.962z"/></symbol>
<symbol id="icon-vk2" viewBox="0 0 56 56"><path fill-rule="evenodd" clip-rule="evenodd" d="M28.274 34.074h1.25c.213-.024.413-.117.574-.265.117-.177.177-.39.172-.605 0 0-.02-1.845.755-2.12.776-.276 1.763 1.78 2.811 2.576.391.342.895.506 1.4.456l2.802-.042s1.47-.096.775-1.358a10.079 10.079 0 00-2.085-2.64c-1.763-1.782-1.522-1.495.594-4.582 1.29-1.877 1.804-3.033 1.642-3.52a1.143 1.143 0 00-1.098-.34l-3.163.021a.61.61 0 00-.403.075.925.925 0 00-.282.37 19.972 19.972 0 01-1.17 2.694c-1.4 2.61-1.964 2.747-2.196 2.588-.534-.382-.403-1.516-.403-2.333 0-2.524.353-3.584-.675-3.86a5.345 5.345 0 00-1.48-.16 6.336 6.336 0 00-2.62.298c-.363.19-.635.615-.464.646.36.039.691.221.927.51.218.487.325 1.02.312 1.558 0 0 .192 2.98-.433 3.352-.423.254-1.007-.265-2.267-2.63a23.184 23.184 0 01-1.118-2.556 1.06 1.06 0 00-.262-.382 1.109 1.109 0 00-.484-.212l-3.002.021a.953.953 0 00-.615.223.767.767 0 00-.02.583s2.358 6.013 5.018 9.046c1.305 1.606 3.2 2.548 5.209 2.588z"/></symbol>
<symbol id="icon-yandex" viewBox="0 0 5 11"><path d="M4.847 0H3.259C1.7 0 .376 1.169.376 3.438c0 1.36.64 2.364 1.783 2.86L.028 10.092c-.07.123 0 .22.111.22h.99c.083 0 .139-.028.166-.097L3.231 6.49h.697v3.726c0 .041.041.097.097.097h.864c.083 0 .111-.042.111-.11V.138C5 .04 4.944 0 4.847 0zm-.92 5.61h-.584c-.92 0-1.81-.66-1.81-2.31 0-1.719.835-2.42 1.684-2.42h.71v4.73z" fill-rule="nonzero"/></symbol>
<symbol id="icon-ynadex" viewBox="0 0 5 10"><use xlink:href="#def-ynadex-a" transform="translate(-468 -10321)"/></symbol>
<symbol id="icon-ytube" viewBox="0 0 27 20"><use xlink:href="#def-ytube-a" transform="translate(-1332 -335)"/></symbol>
</svg>
<div class="header-banner topBanner" data-type="header" style="display: block; position: sticky; top: 0; z-index: 999;">
<a data-source="214906" data-banner="226288" class="universal-notice js-universal-notice-notice universal-notice--webp universal-notice--bitrix universal-notice--active" href="https://skillbox.ru/sale/main/?utm_source=media&utm_medium=banners&utm_campaign=all_all_media_banners_banners_header_all_all_skillbox" target="_blank" style="--banner-bg: #5927E9;--banner-color: #fff;--button-font-color: #000000;--button-bg-color: #FFFFFF;--banner-img-left: url(https://cdn.skillbox.pro/mainsite/banners/promo_picture_left/602754/f9ac17dd-a1d4-46c6-aa14-4f7b949defd1.png);--banner-img-left-webp: url(https://cdn.skillbox.pro/mainsite/banners/promo_picture_left/602754/f9ac17dd-a1d4-46c6-aa14-4f7b949defd1.webp);--banner-img-center: url(https://cdn.skillbox.pro/mainsite/banners/promo_picture_center/602507/232fc4a5-b130-4af2-a629-bdb293a4dd2e.png);--banner-img-center-webp: url(https://cdn.skillbox.pro/mainsite/banners/promo_picture_center/602507/232fc4a5-b130-4af2-a629-bdb293a4dd2e.webp);--banner-img-center-mobile: url(https://cdn.skillbox.pro/mainsite/banners/promo_picture_center/602507/232fc4a5-b130-4af2-a629-bdb293a4dd2e.png);--banner-img-center-mobile-webp: url(https://cdn.skillbox.pro/mainsite/banners/promo_picture_center/602507/232fc4a5-b130-4af2-a629-bdb293a4dd2e.webp);--banner-img-right: url(https://cdn.skillbox.pro/mainsite/banners/promo_picture_right/602755/ad7a7fe5-b8d3-47a3-885b-51a7971c12a9.png);--banner-img-right-webp: url(https://cdn.skillbox.pro/mainsite/banners/promo_picture_right/602755/ad7a7fe5-b8d3-47a3-885b-51a7971c12a9.webp);">
<span class="universal-notice__wrapper">
<b class="universal-notice__title">
Скидка до 55% и 3 курса в подарок
</b>
<span class="universal-timer js-universal-notice-timer js-universal-notice-active">
<span class="universal-timer__days js-universal-notice-days">2 дня</span>
<span class="js-universal-notice-hours">13</span>
:<span class="js-universal-notice-minutes">30</span>
:<span class="js-universal-notice-seconds">09</span>
</span>
<span class="universal-notice__button">Выбрать курс</span>
</span>
</a><script>
document.addEventListener('DOMContentLoaded', () => {
// Установите конечную дату
const deadline = new Date();
deadline.setDate(5);
deadline.setHours(0, 0, 0);
// Найдите элементы DOM
var timer = document.querySelector('.universal-timer');
const elDays = timer.querySelector('.js-universal-notice-days');
const elHours = timer.querySelector('.js-universal-notice-hours');
const elMinutes = timer.querySelector('.js-universal-notice-minutes');
const elSeconds = timer.querySelector('.js-universal-notice-seconds');
// Функция обновления таймера
const updateTimer = () => {
const now = new Date();
let diff = Math.max(0, deadline - now);
if (diff === 0) {
let lastDayOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0);
let lastDay = lastDayOfMonth.getDate();
if (lastDay - now.getDate() < 4) {
deadline.setMonth(deadline.getMonth() + 1, 1);
} else {
deadline.setDate(deadline.getDate() + 4);
}
diff = Math.max(0, deadline - now);
}
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(diff / (1000 * 60 * 60 * 24));
var hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)).toString();
var minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)).toString();
var seconds = Math.floor((diff % (1000 * 60)) / 1000).toString();
if (timer) {
let dayTitles = ['день', 'дня', 'дней'];
let daySuffix = dayTitles[(days % 100 > 4 && days % 100 < 20) ? 2 : [2, 0, 1, 1, 1, 2][days % 10 < 5 ? days % 10 : 5]]
elDays.innerHTML = days + ' ' + daySuffix;
elHours.innerHTML = hours.padStart(2, '0');
elMinutes.innerHTML = minutes.padStart(2, '0');
elSeconds.innerHTML = seconds.padStart(2, '0');
}
};
updateTimer();
const timerId = setInterval(updateTimer, 1000);
});
</script>
<style>@font-face{font-display:swap;font-family:Graphik;font-weight:500;font-style:normal;src:url(https://248006.selcdn.ru/Shared/fonts/GraphikLCTT-VA-Medium.woff2) format("woff2")}@font-face{font-display:swap;font-family:Graphik;font-weight:700;font-style:normal;src:url(https://248006.selcdn.ru/Shared/fonts/GraphikLCTT-VA-Bold.woff2) format("woff2")}.universal-notice{position:sticky;z-index:5;top:0;box-sizing:border-box;text-decoration:none;display:none;justify-content:space-between;overflow:hidden;color:var(--banner-color);background-color:var(--banner-bg);font-family:Graphik,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:opacity .25s ease-in-out}.universal-notice--active{display:flex}.universal-notice--bitrix{z-index:1000}.universal-notice *,.universal-notice ::after,.universal-notice ::before{box-sizing:inherit}.universal-notice::after,.universal-notice::before{display:none;width:194px;height:56px;content:"";background-size:194px 56px;background-repeat:no-repeat}.universal-notice--no-webp::before{background-image:var(--banner-img-left)}.universal-notice--no-webp::after{background-image:var(--banner-img-right)}.universal-notice--webp::before{background-image:var(--banner-img-left-webp)}.universal-notice--webp::after{background-image:var(--banner-img-right-webp)}.universal-notice--new-design{position:static;margin:4px;border-radius:16px}.universal-notice--new-design::after,.universal-notice--new-design::before{width:166px;height:48px;background-size:166px 48px}.universal-notice__wrapper{display:grid;grid-template-columns:1fr auto;align-items:center;grid-gap:12px;padding:12px;width:100%}.universal-notice--new-design .universal-notice__wrapper::after{height:48px}.universal-notice__title{font-weight:500;font-size:15px;line-height:16px}.universal-notice--new-design .universal-notice__title{font-size:14px;line-height:15px}.universal-timer{display:none;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;font-weight:500;font-size:24px;line-height:26px}.universal-notice--new-design .universal-timer{font-size:22px;line-height:24px}.universal-timer__days{margin-right:8px}.universal-notice__button{grid-column:2/3;padding:6px 16px;border-radius:6px;color:var(--button-font-color);background-color:var(--button-bg-color);font-weight:500;font-size:14px;line-height:20px}.universal-notice-sticky{position:fixed;z-index:5;top:0;left:0;width:100%;padding:11px 8px;color:var(--banner-color);background-color:var(--banner-bg);text-align:center;transition:transform .3s ease-in-out;will-change:transform;transform:translateY(-200%)}.universal-notice-sticky--show{transform:translateY(0)}@media (min-width:360px) and (max-width:0px){.universal-notice__wrapper{padding:0 12px;grid-template-columns:1fr 56px auto}.universal-notice__wrapper::after{grid-column:2/3;grid-row:1/2;width:100%;height:56px;background-size:cover;background-repeat:no-repeat;content:""}.universal-notice--new-design .universal-notice__wrapper{grid-template-columns:1fr 48px auto}.universal-notice--no-webp .universal-notice__wrapper::after{background-image:var(--banner-img-center-mobile)}.universal-notice--webp .universal-notice__wrapper::after{background-image:var(--banner-img-center-mobile-webp)}.universal-notice__button{grid-column:3/4}}@media (min-width:360px){.universal-notice__wrapper{padding:0 12px;grid-template-columns:1fr 56px auto}.universal-notice__wrapper::after{grid-column:2/3;grid-row:1/2;width:100%;height:56px;background-size:cover;background-repeat:no-repeat;content:""}.universal-notice--new-design .universal-notice__wrapper{grid-template-columns:1fr 48px auto}.universal-notice--no-webp .universal-notice__wrapper::after{background-image:var(--banner-img-center-mobile)}.universal-notice--webp .universal-notice__wrapper::after{background-image:var(--banner-img-center-mobile-webp)}.universal-notice__button{grid-column:3/4}}@media (min-width:768px){.universal-notice::before{background-position:right center;flex-shrink:0;display:block}.universal-notice--no-webp .universal-notice__wrapper::after{background-image:var(--banner-img-center)}.universal-notice--webp .universal-notice__wrapper::after{background-image:var(--banner-img-center-webp)}}@media (min-width:768px) and (max-width:0px){.universal-notice::before{background-position:right center;flex-shrink:0;display:block}.universal-notice--no-webp .universal-notice__wrapper::after{background-image:var(--banner-img-center)}.universal-notice--webp .universal-notice__wrapper::after{background-image:var(--banner-img-center-webp)}}@media (min-width:1024px){.universal-notice::after,.universal-notice::before{width:250px;height:72px;background-size:250px 72px}.universal-notice--new-design{height:64px;border-radius:32px}.universal-notice--new-design::after,.universal-notice--new-design::before{width:226px;height:64px;background-size:226px 64px}.universal-notice__wrapper{grid-template-columns:1fr 72px auto;grid-gap:24px;padding-right:16px;padding-left:24px}.universal-notice__wrapper::after{height:72px}.universal-notice--new-design .universal-notice__wrapper{grid-template-columns:1fr 64px auto}.universal-notice--new-design .universal-notice__wrapper::after{height:64px}.universal-notice__title{font-size:24px;line-height:26px}.universal-notice--new-design .universal-notice__title{font-size:22px;line-height:24px}.universal-notice__button{padding:10px 24px;border-radius:8px}.universal-notice-sticky{padding:14px 24px}}@media (min-width:1024px) and (max-width:0px){.universal-notice::after,.universal-notice::before{width:250px;height:72px;background-size:250px 72px}.universal-notice--new-design{height:64px;border-radius:32px}.universal-notice--new-design::after,.universal-notice--new-design::before{width:226px;height:64px;background-size:226px 64px}.universal-notice__wrapper{grid-template-columns:1fr 72px auto;grid-gap:24px;padding-right:16px;padding-left:24px}.universal-notice__wrapper::after{height:72px}.universal-notice--new-design .universal-notice__wrapper{grid-template-columns:1fr 64px auto}.universal-notice--new-design .universal-notice__wrapper::after{height:64px}.universal-notice__title{font-size:24px;line-height:26px}.universal-notice--new-design .universal-notice__title{font-size:22px;line-height:24px}.universal-notice__button{padding:10px 24px;border-radius:8px}.universal-notice-sticky{padding:14px 24px}}@media (min-width:1280px){.universal-notice::before{flex-shrink:1}.universal-notice::after{background-position:left center;display:block}.universal-notice__wrapper{grid-template-columns:1fr 72px minmax(202px,auto) auto;min-width:940px;max-width:1020px;padding-right:24px}.universal-notice--new-design .universal-notice__wrapper{grid-template-columns:1fr 64px minmax(202px,auto) auto}.universal-timer.js-universal-notice-active{display:flex}.universal-notice__timer-nuxt{display:flex}.universal-notice__button{grid-column:4/5}}@media (min-width:1280px) and (max-width:0px){.universal-notice::before{flex-shrink:1}.universal-notice::after{background-position:left center;display:block}.universal-notice__wrapper{grid-template-columns:1fr 72px minmax(202px,auto) auto;min-width:940px;max-width:1020px;padding-right:24px}.universal-notice--new-design .universal-notice__wrapper{grid-template-columns:1fr 64px minmax(202px,auto) auto}.universal-timer.js-universal-notice-active{display:flex}.universal-notice__timer-nuxt{display:flex}.universal-notice__button{grid-column:4/5}}@media (min-width:1400px) and (max-width:0px){.universal-notice::before{flex-shrink:0}.universal-notice::after{flex-shrink:0}}@media (min-width:1400px){.universal-notice::before{flex-shrink:0}.universal-notice::after{flex-shrink:0}}</style> </div>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
window.TopBanner = true;
});
$(document).ready(function () {
$.ajax({
url: '/local/ajax/advert.php',
type: 'POST',
data: {
'type': 'top-banner-show',
'id': 226288,
'section_id': 0,
},
success: function (result) {
}
});
});
$(document).on('click', '.header-banner', function () {
$.ajax({
url: '/local/ajax/advert.php',
type: 'POST',
data: {
'type': 'top-banner-click',
'id': 226288,
'section_id': 0,
},
success: function (result) {
}
});
var page = window.location;
var $article = $('section[data-article-text]');
var pageId = $article.data('articleid');
if(pageId === undefined)
{
pageId = 0;
}
window.dataLayer.push({
'event': 'go_to_course',
'courseID': 226288,
'page': page,
'pageID': pageId
});
});
</script>
<header class="header">
<div id="menu" class="header__wrapper container">
<div class="header__logo link-active">
<a href="/media/" class="header__media-main-link">
<img src="/local/templates/media/images/logo/skillbox-media.svg" alt="Skillbox"/>
</a>
<a href="/media/code/" class="header__media-category-link">
<span class="header__media-category js-category ">Код</span>
</a>
</div>
<a href="/media/about-media/" v-if="!isMobile" rel="nofollow" class="menu-nav__link menu-nav__link--about" target="_blank" style="display: none">
Про медиа
</a>
<button v-if="!isMobile" v-show="!isMobile" rel="nofollow" class="toggle-menu header__toggle toggle-menu--course"
@click="openCourseMenu()"
:class="{ 'toggle-menu--active': isOpenCourseMenu }"
style="display: none">
Онлайн-курсы
<svg width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg"
:class="{
'animated-chevron--default': isOpenCourseMenu,
'animated-chevron--active animated-chevron--default': ! isOpenCourseMenu
}"
class="animated-chevron toggle-menu__arrow select-arrow select-arrow--small">
<line x1="6.48415" y1="5.92242" x2="11.4909" y2="10.9291" stroke="currentColor" stroke-width="1.78"
class=" animated-chevron__line animated-chevron__line1 animated-chevron__line1--default"></line>
<line x1="6.3701" y1="5.9224" x2="11.3768" y2="0.915678" stroke="currentColor" stroke-width="1.78"
class="animated-chevron__line"></line>
<line x1="1.36337" y1="10.9291" x2="6.3701" y2="5.9224" stroke="currentColor" stroke-width="1.78"
class="animated-chevron__line animated-chevron__line2 animated-chevron__line2--default"></line>
<line x1="1.47743" y1="0.915681" x2="6.48415" y2="5.9224" stroke="currentColor" stroke-width="1.78"
class="animated-chevron__line"></line>
</svg>
</button>
<a href="https://skillbox.ru/?utm_source=media&utm_medium=button&utm_campaign=button_main_skillbox&utm_term=mainskillbox" v-if="!isMobile" v-show="!isMobile" rel="nofollow" class="menu-nav__link menu-nav__link-ml0 menu-nav__link--main" target="_blank" style="display: none">
Главная Skillbox
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.9375 10.0618L9.9161 4.08203" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3.93811 3.93665H10.0631V10.0616" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</a>
<div v-if="isOpenCourseMenu && !isMobile" class="menu-block menu-block--desktop" @click="closeCourseMenu($event)" style="display: none">
<div class="menu-block__wrapper menu-block__wrapper--desktop">
<div class="menu-block__content vue-container">
<span class="menu-block__title">
Направления обучения
</span>
<ul class="menu-directions menu-block__direction">
<li class="menu-directions__item">
<a href="https://skillbox.ru/courses/?utm_source=media&utm_medium=button&utm_campaign=button_courses_all&utm_term=button" target="_blank"
class="ui-tab ui-tab--link menu-directions__tab ui-tab--small"
data-code="All directions">
Все направления
</a>
</li>
<li class="menu-directions__item">
<a href="https://skillbox.ru/code/?utm_source=media&utm_medium=button&utm_campaign=button_courses_code&utm_term=button" target="_blank"
class="ui-tab ui-tab--link menu-directions__tab ui-tab--small"
data-code="Code">
Программирование
</a>
</li>
<li class="menu-directions__item">
<a href="https://skillbox.ru/design/?utm_source=media&utm_medium=button&utm_campaign=button_courses_design&utm_term=button" target="_blank"
class="ui-tab ui-tab--link menu-directions__tab ui-tab--small"
data-code="Design">
Дизайн
</a>
</li>
<li class="menu-directions__item">
<a href="https://skillbox.ru/management?utm_source=media&utm_medium=button&utm_campaign=button_courses_management&utm_term=button" target="_blank"
class="ui-tab ui-tab--link menu-directions__tab ui-tab--small"
data-code="Management">
Управление
</a>
</li>
<li class="menu-directions__item">
<a href="https://skillbox.ru/marketing?utm_source=media&utm_medium=button&utm_campaign=button_courses_marketing&utm_term=button" target="_blank"
class="ui-tab ui-tab--link menu-directions__tab ui-tab--small"
data-code="Marketing">
Маркетинг
</a>
</li>
<li class="menu-directions__item">
<a href="https://skillbox.ru/games?utm_source=media&utm_medium=button&utm_campaign=button_courses_games&utm_term=button" target="_blank"
class="ui-tab ui-tab--link menu-directions__tab ui-tab--small"
data-code="GameDev">
Игры
</a>
</li>
<li class="menu-directions__item">
<a href="https://skillbox.ru/multimedia?utm_source=media&utm_medium=button&utm_campaign=button_courses_multimedia&utm_term=button" target="_blank"
class="ui-tab ui-tab--link menu-directions__tab ui-tab--small"
data-code="">
Кино и Музыка
</a>
</li>
<li class="menu-directions__item">
<a href="https://skillbox.ru/psychology?utm_source=media&utm_medium=button&utm_campaign=button_courses_psychology&utm_term=button" target="_blank"
class="ui-tab ui-tab--link menu-directions__tab ui-tab--small"
data-code="Development">
Психология
</a>
</li>
<li class="menu-directions__item">
<a href="https://skillbox.ru/health?utm_source=media&utm_medium=button&utm_campaign=button_courses_health&utm_term=button" target="_blank"
class="ui-tab ui-tab--link menu-directions__tab ui-tab--small"
data-code="Development">
Здоровье
</a>
</li>
<li class="menu-directions__item">
<a href="https://skillbox.ru/spo/?utm_source=media&utm_medium=button&utm_campaign=button_courses_spo&utm_term=button" target="_blank"
class="ui-tab ui-tab--link menu-directions__tab ui-tab--small"
data-code="Development">
Цифровой колледж
</a>
</li>
<li class="menu-directions__item">
<a href="https://skillbox.ru/general-development/?utm_source=media&utm_medium=button&utm_campaign=button_courses_general-development&utm_term=button" target="_blank"
class="ui-tab ui-tab--link menu-directions__tab ui-tab--small"
data-code="Education">
Общее развитие
</a>
</li>
<li class="menu-directions__item">
<a href="https://skillbox.ru/engineering/?utm_source=media&utm_medium=button&utm_campaign=button_courses_engineering&utm_term=button" target="_blank"
class="ui-tab ui-tab--link menu-directions__tab ui-tab--small"
data-code="engineering">
Инженерия
</a>
</li>
<li class="menu-directions__item">
<a href="https://skillbox.ru/english/?utm_source=media&utm_medium=button&utm_campaign=button_courses_english&utm_term=button" target="_blank"
class="ui-tab ui-tab--link menu-directions__tab ui-tab--small"
data-code="english">
Английский язык
</a>
</li>
<li class="menu-directions__item">
<a href="https://skillbox.ru/other/?utm_source=media&utm_medium=button&utm_campaign=button_courses_other&utm_term=button" target="_blank"
class="ui-tab ui-tab--link menu-directions__tab ui-tab--small"
data-code="Other">
Другое
</a>
</li>
</ul>
</div>
</div>
</div>
<div v-show="isOpenMenu" class="menu-block" @click="closeMenu($event)" style="display: none">
<div class="menu-block__wrapper">
<div class="menu-block__content vue-container">
<h2 class="menu-block__header">Редакции</h2>
<div class="tab-nav" data-tab-parent="" data-action="index">
<div class="tab-nav__item">
<a class="" data-tab-name="media_nav" data-section-id="0" data-code="All directions" href="/media/">
<img src="/local/templates/media/images/common/menu-icon-mobile-1.png" alt=""/>
Все
</a>
</div>
<div class="tab-nav__item tab-nav__item--custom tab-nav__item--spec"
data-nav-parent-item>
<a
data-tab-name="media_nav"
data-code=""
href="/media/topic/history/">
<img src="/local/templates/media/images/common/menu-icon-mobile-19.png"
alt=""/>
Истории</a>
</div>
<div class="tab-nav__item">
<a class=""
data-tab-name="media_nav"
data-section-id="8"
data-code="Design"
href="/media/design/">
<img src="/local/templates/media/images/common/menu-icon-mobile-2.png" alt=""/>
Дизайн</a>
</div>
<div class="tab-nav__item">
<a class="tab-active"
data-tab-name="media_nav"
data-section-id="10"
data-code="Code"
href="/media/code/">
<img src="/local/templates/media/images/common/menu-icon-mobile-3.png" alt=""/>
Код</a>
</div>
<div class="tab-nav__item">
<a class=""
data-tab-name="media_nav"
data-section-id="18"
data-code="GameDev"
href="/media/gamedev/">
<img src="/local/templates/media/images/common/menu-icon-mobile-4.png" alt=""/>
Геймдев</a>
</div>
<div class="tab-nav__item">
<a class=""
data-tab-name="media_nav"
data-section-id="21"
data-code="Business"
href="/media/business/">
<img src="/local/templates/media/images/common/menu-icon-mobile-9.png" alt=""/>
Бизнес</a>
</div>
<div class="tab-nav__item">
<a class=""
data-tab-name="media_nav"
data-section-id="9"
data-code="Marketing"
href="/media/marketing/">
<img src="/local/templates/media/images/common/menu-icon-mobile-5.png" alt=""/>
Маркетинг</a>
</div>
<div class="tab-nav__item">
<a class=""
data-tab-name="media_nav"
data-section-id="11"
data-code=""
href="/media/management/">
<img src="/local/templates/media/images/common/menu-icon-mobile-6.png" alt=""/>
Управление</a>
</div>
<div class="tab-nav__item">
<a class=""
data-tab-name="media_nav"
data-section-id="29"
data-code=""
href="/media/cinemusic/">
<img src="/local/templates/media/images/common/menu-icon-mobile-22.png" alt=""/>
Кино</a>
</div>
<div class="tab-nav__item">
<a class=""
data-tab-name="media_nav"
data-section-id="36"
data-code=""
href="/media/music/">
<img src="/local/templates/media/images/common/menu-icon-mobile-23.png" alt=""/>
Музыка</a>
</div>
<div class="tab-nav__item">
<a class=""
data-tab-name="media_nav"
data-section-id="34"
data-code=""
href="/media/photo/">
<img src="/local/templates/media/images/common/menu-icon-mobile-20.png" alt=""/>
Проектная фотография</a>
</div>
<div class="tab-nav__item">
<a class=""
data-tab-name="media_nav"
data-section-id="17"
data-code="Development"
href="/media/growth/">
<img src="/local/templates/media/images/common/menu-icon-mobile-7.png" alt=""/>
Развитие</a>
</div>
<div class="tab-nav__item">
<a class=""
data-tab-name="media_nav"
data-section-id="33"
data-code=""
href="/media/health/">
<img src="/local/templates/media/images/common/menu-icon-mobile-16.png" alt=""/>
Здоровье</a>
</div>
<div class="tab-nav__item">
<a class=""
data-tab-name="media_nav"
data-section-id="32"
data-code=""
href="/media/money/">
<img src="/local/templates/media/images/common/menu-icon-mobile-17.png" alt=""/>
Деньги</a>
</div>
<div class="tab-nav__item">
<a class=""
data-tab-name="media_nav"
data-section-id="22"
data-code="Education"
href="/media/education/">
<img src="/local/templates/media/images/common/menu-icon-mobile-8.png" alt=""/>
Образование</a>
</div>
<div class="tab-nav__item">
<a class=""
data-tab-name="media_nav"
data-section-id="31"
data-code=""
href="/media/edtech/">
<img src="/local/templates/media/images/common/menu-icon-mobile-11.png" alt=""/>
EdTech</a>
</div>
<div class="tab-nav__item">
<a class=""
data-tab-name="media_nav"
data-section-id="30"
data-code=""
href="/media/corptrain/">
<img src="/local/templates/media/images/common/menu-icon-mobile-10.png" alt=""/>
Корп. обучение</a>
</div>
<div class="tab-nav__item">
<a class=""
data-tab-name="media_nav"
data-section-id="35"
data-code=""
href="/media/skillbox-blog/">
<img src="/local/templates/media/images/common/menu-icon-mobile-21.png" alt=""/>
Блог Skillbox</a>
</div>
<div class="tab-nav__item tab-nav__item--custom tab-nav__item--spec"
data-nav-parent-item>
<a
data-tab-name="media_nav"
data-code=""
href="https://skillbox.ru/media/glossary/">
<img src="/local/templates/media/images/common/menu-icon-mobile-18.png"
alt=""/>
Глоссарий</a>
</div>
<div class="tab-nav__item tab-nav__item--custom tab-nav__item--spec"
data-nav-parent-item>
<a
data-tab-name="media_nav"
data-code=""
href="/media/topic/specials/">
<img src="/local/templates/media/images/common/menu-icon-mobile-13.png"
alt=""/>
Спецпроекты</a>
</div>
<div class="tab-nav__item tab-nav__item--custom tab-nav__item--spec"
data-nav-parent-item>
<a
data-tab-name="media_nav"
data-code=""
href="https://skillbox.ru/course/career-guide-free/">
<img src="/local/templates/media/images/common/menu-icon-mobile-15.png"
alt=""/>
Профориентация</a>
</div>
</div>
<h2 class="menu-block__header">Онлайн-курсы</h2>
<ul class="menu-directions menu-block__direction">
<li class="menu-directions__item">
<a href="https://skillbox.ru/courses/" target="_blank"
class="ui-tab ui-tab--link menu-directions__tab ui-tab--small"
data-code="All directions">
Все направления
</a>
</li>
<li class="menu-directions__item">
<a href="https://skillbox.ru/code/" target="_blank"
class="ui-tab ui-tab--link menu-directions__tab ui-tab--small"
data-code="Code">
Программирование
</a>
</li>
<li class="menu-directions__item">
<a href="https://skillbox.ru/design/" target="_blank"
class="ui-tab ui-tab--link menu-directions__tab ui-tab--small"
data-code="Design">
Дизайн
</a>
</li>
<li class="menu-directions__item">
<a href="https://skillbox.ru/marketing/" target="_blank"
class="ui-tab ui-tab--link menu-directions__tab ui-tab--small"
data-code="Marketing">
Маркетинг
</a>
</li>
<li class="menu-directions__item">
<a href="https://skillbox.ru/management/" target="_blank"
class="ui-tab ui-tab--link menu-directions__tab ui-tab--small"
data-code="Management">
Управление
</a>
</li>
<li class="menu-directions__item">
<a href="https://skillbox.ru/games/" target="_blank"
class="ui-tab ui-tab--link menu-directions__tab ui-tab--small"
data-code="GameDev">
Игры
</a>
</li>
<li class="menu-directions__item">
<a href="https://skillbox.ru/multimedia/" target="_blank"
class="ui-tab ui-tab--link menu-directions__tab ui-tab--small"
data-code="">
Мультимедиа
</a>
</li>
<li class="menu-directions__item">
<a href="https://skillbox.ru/psychology/" target="_blank"
class="ui-tab ui-tab--link menu-directions__tab ui-tab--small"
data-code="Development">
Психология
</a>
</li>
<li class="menu-directions__item">
<a href="https://skillbox.ru/general-development/" target="_blank"
class="ui-tab ui-tab--link menu-directions__tab ui-tab--small"
data-code="Education">
Общее развитие
</a>
</li>
<li class="menu-directions__item">
<a href="https://skillbox.ru/engineering/" target="_blank"
class="ui-tab ui-tab--link menu-directions__tab ui-tab--small"
data-code="engineering">
Инженерия
</a>
</li>
<li class="menu-directions__item">
<a href="https://skillbox.ru/english/" target="_blank"
class="ui-tab ui-tab--link menu-directions__tab ui-tab--small"
data-code="english">
Английский язык
</a>
</li>
<li class="menu-directions__item">
<a href="https://skillbox.ru/other/" target="_blank"
class="ui-tab ui-tab--link menu-directions__tab ui-tab--small"
data-code="Other">
Другое
</a>
</li>
</ul>
<a href="/media/about-media/" rel="nofollow" class="menu-nav__link">
Про медиа
</a>
<a href="https://skillbox.ru/" rel="nofollow" class="menu-nav__link">
Главная Skillbox
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.9375 10.0618L9.9161 4.08203" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3.93811 3.93665H10.0631V10.0616" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</a>
</div>
</div>
</div>
<button v-if="isMobile" class="menu-toggle"
@click="openMenu()"
:class="{ 'menu-toggle--opened': isOpenMenu }" style="opacity: 0">
<span v-if="isOpenMenu" class="menu-toggle__line"></span>
<svg v-if="!isOpenMenu" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M24 5.5H0V4H24V5.5ZM24 11.5H0V13H24V11.5ZM24 19H0V20.5H24V19Z" fill="black"/>
</svg>
</button>
</div>
<script>
BX.Vue.create({
el: '#menu',
data: {
isOpenMenu: false,
isOpenCourseMenu: false,
isMobile: false,
isSubOpen: false,
display: 'none'
},
computed: {
isMobile() {
const w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
return w < 1024;
}
},
methods: {
openMenu() {
this.isOpenMenu = !this.isOpenMenu;
document.getElementsByTagName('body')[0].classList.toggle('scroll-locked');
window.addEventListener('keyup', this.closeMenu);
},
closeMenu(event) {
if (event.target.classList.contains('menu-block') || event.keyCode === 27) {
this.isOpenMenu = false;
document.getElementsByTagName('body')[0].classList.remove('scroll-locked');
window.removeEventListener('keyup', this.closeMenu);
}
},
openCourseMenu() {
this.isOpenCourseMenu = !this.isOpenCourseMenu;
if (this.isOpenCourseMenu) {
document.getElementsByTagName('body')[0].classList.add('scroll-locked');
window.addEventListener('keyup', this.closeCourseMenu);
} else {
document.getElementsByTagName('body')[0].classList.remove('scroll-locked');
window.removeEventListener('keyup', this.closeCourseMenu);
}
},
closeCourseMenu(event) {
if (event.target.classList.contains('menu-block') || event.keyCode === 27) {
this.isOpenCourseMenu = false;
document.getElementsByTagName('body')[0].classList.remove('scroll-locked');
window.removeEventListener('keyup', this.closeCourseMenu);
}
},
openSub() {
this.isSubOpen = !this.isSubOpen;
},
isMobileFn() {
const w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
this.isMobile = (w < 1024);
}
},
created() {
window.addEventListener("resize", this.isMobileFn);
document.querySelector('.menu-block').style.display = '';
document.querySelector('.menu-toggle').style.opacity = '1';
document.querySelector('.menu-nav__link').style.display = '';
this.display = 'block';
this.isMobileFn();
},
destroyed() {
window.removeEventListener("resize", this.isMobileFn);
}
});
</script>
</header>
<main class="content">
<div class="page style-update">
<div class="page-wrap">
<style>
.article-inner .rr-widget__title {
padding-top: 0 !important;
}
.article-inner div[data-retailrocket-markup-block] {
margin-top: -32px;
display: none;
}
.article-inner {
font-family: 'Graphik';
}
</style>
<div class="under_header_banner" data-type="under_header"><!-- Yandex.RTB R-A-13443663-10 -->
<div id="yandex_rtb_R-A-13443663-10"></div>
<script>
window.yaContextCb.push(() => {
Ya.Context.AdvManager.render({
"blockId": "R-A-13443663-10",
"renderTo": "yandex_rtb_R-A-13443663-10"
})
})
</script>
</div> <div data-area="article" data-title="Laravel: что это и как начать работать с этим PHP-фреймворком / Skillbox Media" class=" noFullClass">
<div class="article-inner">
<section class="top-section-detail-page ">
<div class="container">
<div class="article-preview-info">
<div class="article-preview-info__tags ">
<div class="tag article-preview-info__tag">
<a href="/media/code/"
class="tag-item programming">
Код </a>
</div>
</div>
<a class="info-hashtag article-preview-info__hashtag" href="/media/topic/articles/">
#статьи </a>
<ul class="info article-preview__info-box">
<li class="info-item"> <time class="info-text" datatime="#">31 мар 2023</time></li>
<li class="info-item hidden">
<span class="info-icon"><img src="/local/templates/media/images/icons/like.svg" alt=""></span>
<span class="info__text js-article-like-value">0</span>
</li>
</ul>
</div>
<div class="row">
<div class="top-section-detail-page__title-block col-xl-9 col-lg-10">
<div class="article-preview">
<h1 class="article-preview__title">Фреймворк Laravel: как работает и зачем нужен</h1>
<p class="article-preview__description">Пишем простое приложение с помощью популярного фреймворка и разбираем основы программирования на PHP.</p>
</div>
</div>
</div>
</div>
</section>
<section data-article-text
data-articleId="214906"
data-courseId="3723"
>
<div class="container">
<noindex>
<div class="share" data-nosnippet>
<button class="share__handler-btn ">
<span class="share__handler-icon">
<svg width="11" height="12" viewBox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11 4.99902L6 0V2.99805C2.688 2.99805 0 5.68505 0 8.99805V11.498H0.0980225C0.765022 8.91205 3.107 6.99805 5.901 6.99805H6.00098V9.99805L11 4.99902Z" fill="currentColor"/>
</svg>
</span>
<span class="share__handler-text">Поделиться</span>
</button>
<div class="share__list">
<a href="#" class="share__item" data-code="vk">
<span class="share__item-icon share__item-icon--vk">
<svg width="9" height="5" viewBox="0 0 9 5" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.04776 4.98054H4.53996C4.62377 4.97136 4.70279 4.9361 4.76621 4.87951C4.81226 4.81209 4.83594 4.73139 4.83369 4.64925C4.83369 4.64925 4.82574 3.94629 5.1314 3.84125C5.43701 3.73621 5.826 4.51998 6.23879 4.82297C6.39281 4.95308 6.59128 5.01558 6.79053 4.99669L7.89399 4.98054C7.89399 4.98054 8.47355 4.94415 8.19965 4.46339C7.98372 4.08315 7.70589 3.743 7.37799 3.45744C6.68338 2.77872 6.77865 2.8878 7.61219 1.71216C8.12024 0.997077 8.32269 0.556717 8.25918 0.370875C8.14651 0.254767 7.98299 0.205914 7.82655 0.241594L6.58018 0.249674C6.52565 0.241067 6.46984 0.251007 6.42141 0.277954C6.37298 0.314507 6.33466 0.363228 6.31025 0.419356C6.18259 0.772814 6.0287 1.11586 5.8498 1.44552C5.29807 2.43936 5.07579 2.49188 4.98451 2.43128C4.77416 2.28584 4.82574 1.85356 4.82574 1.54248C4.82574 0.580957 4.96468 0.176954 4.55979 0.0719133C4.36879 0.0254376 4.17259 0.00505841 3.97631 0.0113129C3.62834 -0.0214164 3.27745 0.017045 2.94429 0.124433C2.8014 0.197154 2.69423 0.358753 2.76171 0.370875C2.90334 0.385518 3.03406 0.454932 3.12688 0.564795C3.21268 0.750336 3.25481 0.953675 3.24993 1.15868C3.24993 1.15868 3.32535 2.29392 3.07925 2.43532C2.91254 2.53228 2.68232 2.33432 2.18616 1.4334C2.01958 1.11848 1.87243 0.793298 1.74557 0.459754C1.72231 0.404013 1.68704 0.354309 1.64236 0.314316C1.58589 0.272672 1.52066 0.245006 1.45184 0.233514L0.268986 0.241594C0.181167 0.241154 0.0958013 0.271066 0.0268587 0.326434C-0.00595087 0.396174 -0.00882613 0.476652 0.0189202 0.548633C0.0189202 0.548633 0.947737 2.83932 1.99563 3.99477C2.51 4.60651 3.2568 4.96526 4.04776 4.98054Z" fill="white"/>
</svg>
</span>
<span class="share__item-text">Vkontakte</span>
</a>
<a href="#" class="share__item" data-code="tw">
<span class="share__item-icon share__item-icon--tw">
<svg width="9" height="7" viewBox="0 0 9 7" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.52788 0.00144284V0H5.9158L6.05754 0.027414C6.15204 0.0452114 6.23783 0.068535 6.31491 0.0973918C6.39201 0.126249 6.46661 0.159917 6.53872 0.198391C6.61083 0.236864 6.67623 0.276066 6.73492 0.315982C6.79311 0.355422 6.84533 0.397265 6.89158 0.441509C6.93733 0.486237 7.0087 0.49778 7.10568 0.476138C7.20266 0.454495 7.3071 0.424433 7.419 0.38596C7.5309 0.347487 7.64156 0.304201 7.75097 0.256104C7.86039 0.208007 7.92703 0.177469 7.95091 0.164484C7.97428 0.151022 7.98671 0.143808 7.98821 0.142841L7.98969 0.140677L7.99715 0.13707L8.00461 0.133463L8.01207 0.129856L8.01953 0.126249L8.02102 0.124084L8.02326 0.122642L8.02551 0.121199L8.02699 0.119034L8.03445 0.11687L8.04191 0.115427L8.04043 0.126249L8.03818 0.13707L8.03445 0.147891L8.03072 0.158713L8.02699 0.165927L8.02326 0.173141L8.01953 0.183962C8.01705 0.191176 8.01456 0.200793 8.01207 0.212819C8.00959 0.224845 7.98596 0.272935 7.9412 0.357103C7.89644 0.441271 7.84049 0.526637 7.77335 0.613208C7.70621 0.699778 7.64604 0.765182 7.59283 0.809434C7.53911 0.854162 7.50355 0.885421 7.48614 0.903219C7.46874 0.921492 7.4476 0.938323 7.42273 0.953718L7.38543 0.977525L7.37797 0.981132L7.37051 0.984739L7.36902 0.986903L7.36678 0.988346L7.36454 0.989789L7.36305 0.991953L7.35559 0.99556L7.34813 0.999168L7.34664 1.00133L7.3444 1.00277L7.34216 1.00422L7.34067 1.00638L7.33918 1.00855L7.33694 1.00999L7.3347 1.01143L7.33321 1.0136H7.37051L7.57939 0.970311C7.71865 0.941454 7.85168 0.906588 7.9785 0.865705L8.17992 0.800777L8.2023 0.793563L8.21349 0.789956L8.22095 0.786348L8.22841 0.782741L8.23587 0.779134L8.24333 0.775527L8.25825 0.773363L8.27317 0.77192V0.786348L8.26944 0.787791L8.26571 0.789956L8.26423 0.79212L8.26198 0.793563L8.25974 0.795006L8.25825 0.79717L8.25677 0.799334L8.25452 0.800777L8.25228 0.80222L8.25079 0.804384L8.24931 0.806548L8.24706 0.807991L8.24333 0.815205L8.2396 0.82242L8.23736 0.823862C8.23637 0.825305 8.20479 0.866181 8.14262 0.946504C8.08046 1.0273 8.04689 1.06818 8.04191 1.06915C8.03694 1.07059 8.02997 1.0778 8.02102 1.09079C8.01257 1.10425 7.95985 1.15788 7.86287 1.25166C7.76589 1.34545 7.67091 1.42889 7.57791 1.502C7.48441 1.57558 7.43716 1.666 7.43616 1.77325C7.43467 1.88002 7.42895 2.00074 7.419 2.13541C7.40905 2.27007 7.3904 2.41555 7.36305 2.57186C7.3357 2.72817 7.29342 2.90492 7.23623 3.10211C7.17904 3.29929 7.10941 3.49168 7.02735 3.67925C6.94529 3.86681 6.8595 4.03514 6.76998 4.18424C6.68046 4.33334 6.5984 4.45958 6.5238 4.56299C6.4492 4.66639 6.37336 4.76378 6.29626 4.85516C6.21918 4.94654 6.12171 5.04947 6.00384 5.16393C5.88547 5.27791 5.82082 5.34044 5.80988 5.3515C5.79844 5.36208 5.74971 5.40152 5.66365 5.46981C5.57812 5.53858 5.48611 5.60736 5.38763 5.67614C5.28966 5.74443 5.19964 5.80143 5.11758 5.84711C5.03552 5.8928 4.93655 5.94498 4.82067 6.00366C4.70529 6.06282 4.58046 6.11765 4.44618 6.16815C4.3119 6.21865 4.17016 6.26554 4.02096 6.30882C3.87176 6.35211 3.72753 6.38578 3.58827 6.40982C3.44903 6.43387 3.29112 6.45431 3.11456 6.47114L2.84973 6.49639V6.5H2.36483V6.49639L2.30142 6.49279C2.25915 6.49038 2.22433 6.48797 2.19698 6.48557C2.16963 6.48317 2.06643 6.46994 1.88739 6.44589C1.70835 6.42185 1.56785 6.3978 1.4659 6.37375C1.36395 6.34971 1.21225 6.30401 1.01083 6.23668C0.809413 6.16935 0.637087 6.10129 0.493854 6.03252C0.351121 5.96422 0.261601 5.92094 0.225293 5.90266C0.189485 5.88487 0.149201 5.86275 0.10444 5.83629L0.0373001 5.79661L0.0358156 5.79445L0.0335701 5.79301L0.0313321 5.79156L0.0298401 5.7894L0.0223801 5.78579L0.0149201 5.78219L0.0134355 5.78002L0.01119 5.77858L0.00895204 5.77714L0.00746003 5.77497L0.00597548 5.77281L0.00373001 5.77137H0V5.75694L0.00746003 5.75838L0.0149201 5.76054L0.0484902 5.76415C0.0708703 5.76655 0.131796 5.77016 0.231261 5.77497C0.330733 5.77978 0.436412 5.77978 0.548312 5.77497C0.660213 5.77016 0.774605 5.75934 0.891474 5.74251C1.00835 5.72568 1.14636 5.69682 1.30551 5.65594C1.46466 5.61505 1.61087 5.56648 1.74416 5.51021C1.87695 5.45346 1.97144 5.41114 2.02764 5.38324C2.08334 5.35583 2.16838 5.30484 2.28277 5.2303L2.45435 5.11848L2.45584 5.11632L2.45808 5.11487L2.46033 5.11343L2.46181 5.11127L2.4633 5.1091L2.46554 5.10766L2.46779 5.10622L2.46927 5.10405L2.47673 5.10189L2.48419 5.10044L2.48568 5.09323L2.48792 5.08602L2.49017 5.08457L2.49165 5.08241L2.43197 5.0788C2.39219 5.0764 2.35364 5.07399 2.31634 5.07159C2.27904 5.06918 2.2206 5.05836 2.14103 5.03912C2.06146 5.01988 1.97567 4.99103 1.88366 4.95255C1.79165 4.91408 1.70213 4.86838 1.6151 4.81548C1.52807 4.76258 1.46515 4.71857 1.42636 4.68346C1.38807 4.64883 1.33833 4.59978 1.27716 4.53629C1.21648 4.47233 1.16376 4.40668 1.119 4.33934C1.07424 4.27202 1.03148 4.19433 0.990699 4.10633L0.928774 3.97503L0.925044 3.96421L0.921314 3.95339L0.919076 3.94617L0.917584 3.93896L0.928774 3.9404L0.939964 3.94256L1.02202 3.95339C1.07674 3.9606 1.16253 3.963 1.27939 3.9606C1.39627 3.9582 1.47709 3.95339 1.52185 3.94617C1.56661 3.93896 1.59396 3.93414 1.60391 3.93174L1.61883 3.92814L1.63748 3.92453L1.65613 3.92092L1.65762 3.91876L1.65986 3.91731L1.6621 3.91587L1.66359 3.91371L1.64867 3.9101L1.63375 3.90649L1.61883 3.90289L1.60391 3.89928L1.58899 3.89567C1.57904 3.89327 1.56164 3.88846 1.53677 3.88124C1.5119 3.87403 1.44476 3.84757 1.33535 3.80189C1.22594 3.7562 1.1389 3.71171 1.07424 3.66842C1.00943 3.62501 0.947626 3.57754 0.889235 3.5263C0.831047 3.47436 0.767145 3.40751 0.697513 3.32575C0.627888 3.24399 0.565724 3.149 0.511012 3.04079C0.456308 2.93257 0.415277 2.82917 0.387922 2.73058C0.360676 2.63256 0.3427 2.53235 0.334217 2.43119L0.320781 2.27969L0.328241 2.28113L0.335701 2.2833L0.343161 2.2869L0.350621 2.29051L0.358081 2.29412L0.365541 2.29772L0.481172 2.34822C0.558264 2.38189 0.653998 2.41075 0.768383 2.43479C0.882775 2.45884 0.951154 2.47207 0.973534 2.47447L1.0071 2.47808H1.07424L1.07276 2.47592L1.07051 2.47447L1.06828 2.47303L1.06678 2.47087L1.0653 2.4687L1.06305 2.46726L1.06082 2.46582L1.05932 2.46365L1.05186 2.46004L1.0444 2.45644L1.04292 2.45427L1.04067 2.45283L1.03844 2.45139L1.03694 2.44922L1.02948 2.44562L1.02202 2.44201L1.02054 2.43984C1.01905 2.43888 0.99766 2.42349 0.956376 2.39367C0.915592 2.36337 0.872823 2.32418 0.828063 2.27608C0.783303 2.22798 0.738543 2.17749 0.693783 2.12458C0.64894 2.07156 0.609 2.01483 0.574422 1.95505C0.539614 1.89493 0.502806 1.81846 0.464014 1.72564C0.425721 1.6333 0.396627 1.54023 0.376731 1.44645C0.356843 1.35266 0.345653 1.26008 0.343161 1.1687C0.340677 1.07732 0.343161 0.999168 0.350621 0.93424C0.358081 0.869312 0.373001 0.795965 0.395382 0.714206C0.417762 0.632448 0.450093 0.545877 0.492362 0.454495L0.555772 0.317425L0.559502 0.306604L0.563232 0.295782L0.565478 0.29434L0.566962 0.292175L0.568454 0.290011L0.570692 0.288568L0.572938 0.290011L0.574422 0.292175L0.575914 0.29434L0.578152 0.295782L0.580398 0.297225L0.581882 0.29939L0.583374 0.301554L0.585612 0.302997L0.589342 0.310211L0.593072 0.317425L0.595318 0.318868L0.596802 0.321032L0.697513 0.429245C0.764653 0.501387 0.844229 0.581948 0.936234 0.670921C1.02825 0.759894 1.07922 0.806065 1.08916 0.809434C1.09912 0.813279 1.11154 0.824338 1.12646 0.842619C1.14138 0.860417 1.19112 0.902981 1.27567 0.970311C1.36022 1.03764 1.47087 1.1158 1.60764 1.20477C1.74441 1.29375 1.89609 1.38152 2.0627 1.46809C2.22931 1.55466 2.40835 1.63281 2.59982 1.70255C2.7913 1.77229 2.92558 1.81798 3.00266 1.83962C3.07975 1.86127 3.21154 1.88892 3.39804 1.92259C3.58454 1.95625 3.72505 1.9779 3.81954 1.98751C3.91403 1.99713 3.97869 2.00266 4.0135 2.00411L4.06572 2.00555L4.06423 1.99473L4.06199 1.98391L4.04707 1.89373C4.03712 1.83361 4.03215 1.74944 4.03215 1.64123C4.03215 1.53302 4.04085 1.43322 4.05826 1.34184C4.07567 1.25046 4.10178 1.15788 4.13659 1.0641C4.1714 0.970311 4.20547 0.895038 4.23879 0.838291C4.27261 0.78202 4.31687 0.717814 4.37158 0.645671C4.42629 0.573529 4.49716 0.498985 4.58419 0.422031C4.67122 0.345077 4.77069 0.276542 4.88259 0.216426C4.99449 0.15631 5.09769 0.110615 5.19218 0.0793563C5.28668 0.0480971 5.36625 0.0276521 5.4309 0.0180355C5.49556 0.00841898 5.52788 0.00288568 5.52788 0.00144284Z" fill="white"/>
</svg>
</span>
<span class="share__item-text">Twitter</span>
</a>
<a href="#" class="share__item" data-code="tg">
<span class="share__item-icon share__item-icon--tg">
<svg width="10" height="7" viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.39589 3.04852C1.39589 3.04852 5.05491 1.51189 6.32392 0.9708C6.8104 0.754384 8.46012 0.0617918 8.46012 0.0617918C8.46012 0.0617918 9.22155 -0.241191 9.15809 0.494655C9.13692 0.797667 8.96773 1.85815 8.79854 3.00523C8.54472 4.62846 8.26976 6.40316 8.26976 6.40316C8.26976 6.40316 8.22746 6.90097 7.86791 6.98753C7.50836 7.0741 6.91613 6.68455 6.8104 6.59795C6.72577 6.53304 5.22411 5.5591 4.6742 5.08295C4.52614 4.9531 4.35695 4.6934 4.69533 4.39039C5.45676 3.67617 6.36622 2.78882 6.91613 2.2261C7.16995 1.96638 7.42374 1.36038 6.36622 2.09622C4.86456 3.15674 3.38403 4.15231 3.38403 4.15231C3.38403 4.15231 3.04561 4.36873 2.41111 4.17394C1.77657 3.97918 1.03631 3.71945 1.03631 3.71945C1.03631 3.71945 0.528726 3.39481 1.39589 3.04852Z" fill="white"/>
</svg>
</span>
<span class="share__item-text">Telegram</span>
</a>
<a href="#" class="share__item js-share-item-copy">
<span class="share__item-icon share__item-icon--copy">
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.19922 5.40327C4.37217 5.63449 4.59283 5.8258 4.84622 5.96425C5.09962 6.10269 5.37982 6.18501 5.66783 6.20564C5.95584 6.22627 6.24492 6.18471 6.51546 6.08379C6.78599 5.98287 7.03166 5.82495 7.2358 5.62074L8.44399 4.41255C8.81079 4.03277 9.01375 3.52412 9.00917 2.99615C9.00458 2.46818 8.79281 1.96313 8.41946 1.58978C8.04611 1.21644 7.54106 1.00466 7.01309 1.00008C6.48512 0.995488 5.97647 1.19845 5.59669 1.56525L4.904 2.25392" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M5.81002 4.59658C5.63707 4.36536 5.41641 4.17404 5.16302 4.0356C4.90962 3.89716 4.62942 3.81483 4.34141 3.79421C4.0534 3.77358 3.76432 3.81514 3.49379 3.91605C3.22325 4.01697 2.97758 4.17489 2.77344 4.3791L1.56525 5.58729C1.19845 5.96707 0.995488 6.47572 1.00008 7.0037C1.00466 7.53167 1.21644 8.03672 1.58978 8.41006C1.96313 8.78341 2.46818 8.99518 2.99615 8.99977C3.52412 9.00436 4.03277 8.80139 4.41255 8.43459L5.10122 7.74592" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
<span class="share__item-text">Скопировать ссылку</span>
</a>
</div>
</div> <!-- //share -->
</noindex>
<div class="row">
<div class="col-xl-9 col-lg-8 col-poster">
<div class="article-poster">
<picture >
<img src="https://248006.selcdn.ru/main/iblock/5a9/5a98981f24e6b6e524f1d899f9deb8b8/44c93ff2644735f54c53446a47023d39.png" itemprop='image' class='hidden-xs' />
</picture> <picture >
<img src="https://248006.selcdn.ru/main/iblock/5a9/5a98981f24e6b6e524f1d899f9deb8b8/44c93ff2644735f54c53446a47023d39.png" itemprop='image' class='visible-xs' />
</picture> </div>
<noindex>
<p class="article-poster-text" data-nosnippet>
Иллюстрация: Оля Ежак для Skillbox Media </p>
</noindex>
</div>
<div class="col-xl-3 col-lg-4 col-author">
<div class="article-author">
<div class="article-author__image">
<a href="/media/authors/dmitriy-zverev/">
<img src="https://248006.selcdn.ru/main/iblock/96c/96cb18f378b74fd9c38f5e5d64f65b97/10100fdb91192e4b956be43a95a15cee.png" alt="Дмитрий Зверев">
</a>
</div>
<div class="article-author__info">
<div class="article-author__name">
Дмитрий Зверев </div>
<div class="article-author__description">
Любитель научной фантастики и технологического прогресса. Хорошо сочетает в себе заумного технаря и утончённого гуманитария. Пишет про IT и радуется этому. </div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row flex-row-rev">
<div class="col-xl-3 col-lg-4 col-author">
<div class="js-article-banner" data-article-banner-mobile data-type="side_mounted" data-article-banner-sticky-start>
<!--AdFox START-->
<!--yandex_skillbox.media-->
<!--Площадка: Skillbox / Сквозной для застройщика Легенда / Боковой баннер сквозной для застройщика Легенда-->
<!--Категория: <не задана>-->
<!--Тип баннера: Media banner-->
<div id="adfox_176131540100027244"></div>
<script>
window.yaContextCb.push(()=>{
Ya.adfoxCode.create({
ownerId: 11649869,
containerId: 'adfox_176131540100027244',
params: {
p1: 'dkugb',
p2: 'p'
}
})
})
</script> </div>
<div class="js-article-banner" data-article-banner-mobile data-type="vertical" data-article-banner-sticky-end></div>
</div>
<div class="col-xl-9 col-lg-8 col-poster">
<div class="container container--setka">
<div class="js-article-banner" data-type="top"></div>
<div class="article-detail-text__setka" data-detail-text>
<div class="stk-post stk-layout_12col_18068 stk-theme_26309" data-stk="{"images":[{"id":51798,"alt":"","caption":""},{"id":51797,"alt":"","caption":""},{"id":51796,"alt":"","caption":""},{"id":51795,"alt":"","caption":""},{"id":51794,"alt":"","caption":""},{"id":51793,"alt":"","caption":""},{"id":51792,"alt":"","caption":""},{"id":51784,"alt":"","caption":""},{"id":51781,"alt":"","caption":""},{"id":51782,"alt":"","caption":""},{"id":51783,"alt":"","caption":""},{"id":51780,"alt":"","caption":""},{"id":51779,"alt":"","caption":""},{"id":51776,"alt":"","caption":""},{"id":51778,"alt":"","caption":""},{"id":51777,"alt":"","caption":""},{"id":51774,"alt":"","caption":""},{"id":51775,"alt":"","caption":""},{"id":51773,"alt":"","caption":""}]}" data-ui-id="post" data-ce-tag="post" data-reset-type="class" data-layout-type="auto" data-editor-version="3.2.8-rc1"><div class="stk-theme_26309__mb_15 stk-grid" data-ce-tag="grid"><div data-col-width="12" class="stk-grid-col stk-grid-col_last" data-ce-tag="grid-col"><p class="stk-reset" data-ce-tag="paragraph">PHP — крутой и надёжный язык для бэкендеров. Его любят компании и ценят разработчики. Но вся его мощь раскрывается благодаря фреймворкам.</p><p class="stk-reset" data-ce-tag="paragraph">В этой статье мы узнаем, что такое Laravel, чем он удобен и почему многие программисты предпочитают его другим PHP-фреймворкам. А чтобы закрепить знания, напишем игру «Камень, ножницы, бумага».</p><p class="stk-theme_26309__mb_05 stk-reset" data-ce-tag="paragraph">Всё, что нужно знать про Laravel:</p><ul class="stk-theme_26309__mb_05 stk-theme_26309__pad_hor_1 stk-reset" data-ce-tag="list"><li class="stk-reset stk-list-item" data-ce-tag="list-item"><a class="stk-reset" href="#stk-1" data-gtm-vis-has-fired-10171822_255="1">что это такое</a>;</li><li class="stk-reset stk-list-item" data-ce-tag="list-item"><a class="stk-reset" href="#stk-2" data-gtm-vis-has-fired-10171822_255="1">чем этот PHP-фреймворк лучше других</a>;</li><li class="stk-reset stk-list-item" data-ce-tag="list-item"><a class="stk-reset" href="#stk-3" data-gtm-vis-has-fired-10171822_255="1">что можно делать на Laravel</a>;</li><li class="stk-reset stk-list-item" data-ce-tag="list-item"><a class="stk-reset" href="#stk-4" data-gtm-vis-has-fired-10171822_255="1">с чего начать работу</a>;</li><li class="stk-reset stk-list-item" data-ce-tag="list-item"><a class="stk-reset" href="#stk-5" data-gtm-vis-has-fired-10171822_255="1">как создать веб-приложение</a>;</li><li class="stk-reset stk-list-item" data-ce-tag="list-item"><a class="stk-reset" href="#stk-6" data-gtm-vis-has-fired-10171822_255="1">что запомнить</a>.</li></ul><hr class="stk-theme_26309__separator_divider-1498128612642 stk-reset"/></div></div><div class="stk-theme_26309__mb_15 stk-grid" data-ce-tag="grid"><div data-col-width="12" class="stk-grid-col stk-grid-col_last" data-ce-tag="grid-col"><h2 class="stk-reset stk-theme_26309__style_large_header" data-ce-tag="paragraph" id="stk-1"><strong class="stk-reset">Что такое Laravel</strong></h2><p class="stk-theme_26309__mb_05 stk-reset" data-ce-tag="paragraph">Laravel — это бесплатный фреймворк для быстрой разработки веб-приложений на PHP. Это значит, что все инструменты уже под капотом и ничего не нужно придумывать самому — просто брать и делать. Вот что в Laravel доступно «из коробки»:</p><ul class="stk-theme_26309__pad_hor_1 stk-reset" data-ce-tag="list"><li class="stk-reset stk-list-item" data-ce-tag="list-item"><strong class="stk-reset" data-gtm-vis-has-fired-10171822_255="1">Интерактивная документация. </strong>Для каждой функции есть отдельная статья с примерами. Очень удобно как для начинающих, так и для опытных разработчиков.</li><li class="stk-reset stk-list-item" data-ce-tag="list-item"><strong class="stk-reset">Миграции баз данных.</strong> Laravel предоставляет удобный способ для работы с базами данных с помощью миграций. Миграции позволяют изменять структуру базы данных без необходимости писать SQL-запросы.</li><li class="stk-reset stk-list-item" data-ce-tag="list-item"><strong class="stk-reset">Artisan.</strong> Консоль для разработчиков, которая упрощает взаимодействие с Laravel, позволяет проводить миграции баз данных, настраивать авторизацию и взаимодействовать с компонентами фреймворка.</li><li class="stk-reset stk-list-item" data-ce-tag="list-item"><strong class="stk-reset">ORM (object-relational mapping).</strong> Eloquent ORM позволяет работать с базами данных в объектно-ориентированном стиле, то есть выстраивать взаимодействие с полноценными объектами, которыми можно манипулировать.</li><li class="stk-reset stk-list-item" data-ce-tag="list-item"><strong class="stk-reset">Шаблоны.</strong> У Laravel куча шаблонов для создания пользовательского интерфейса. Это значительно упрощает процесс разработки.</li><li class="stk-reset stk-list-item" data-ce-tag="list-item"><strong class="stk-reset">Регистрация и авторизация.</strong> Фреймворк предоставляет готовые шаблоны для аутентификации пользователей, чтобы разработчикам не приходилось изобретать колесо.</li><li class="stk-reset stk-list-item" data-ce-tag="list-item"><strong class="stk-reset">Удобный дебаггинг и тестирование приложений.</strong> Обычно в веб-разработке не очень удобно реализована проверка кода на надёжность, поэтому создатели Laravel решили упростить этот процесс.</li></ul><p class="stk-reset" data-ce-tag="paragraph">На этом список возможностей Laravel не заканчивается. Ещё есть более специфические штуки: кэширование, маршрутизация, MVC и много других полезных фич. Но главное, что стоит знать о Laravel, — на нём можно быстро и удобно создавать сайты.</p></div></div><div class="stk-theme_26309__mb_15 stk-grid" data-ce-tag="grid"><div data-col-width="12" class="stk-grid-col stk-grid-col_last" data-ce-tag="grid-col"><h2 class="stk-reset stk-theme_26309__style_large_header" data-ce-tag="paragraph" id="stk-2"><strong class="stk-reset">Чем Laravel лучше других PHP‑фреймворков</strong></h2><p class="stk-reset" data-ce-tag="paragraph">В PHP-мире постоянно идёт борьба между четырьмя популярными фреймворками: <a href="https://laravel.com/" target="_blank" class="stk-reset">Laravel</a>, <a href="https://symfony.com/" target="_blank" class="stk-reset">Symfony</a>, <a href="https://www.yiiframework.com/" target="_blank" class="stk-reset">Yii</a> и <a href="https://codeigniter.com/" target="_blank" class="stk-reset">CodeIgniter</a>. Каждый из них хорош, но, естественно, у каждого есть свои особенности.</p><p class="stk-theme_26309__mb_05 stk-reset" data-ce-tag="paragraph">Если сравнивать Laravel с другими популярными фреймворками, то различия следующие:</p><ul class="stk-theme_26309__pad_hor_1 stk-reset" data-ce-tag="list"><li class="stk-reset stk-list-item" data-ce-tag="list-item"><strong class="stk-reset">Меньшая сложность.</strong> Laravel проще изучить и использовать, чем, например, Symfony. Однако такая простота никак не ограничивает его функциональность.</li><li class="stk-reset stk-list-item" data-ce-tag="list-item"><strong class="stk-reset">Удобная маршрутизация. </strong>Laravel предлагает удобную маршрутизацию, например позволяя группировать, кэшировать и давать собственные названия маршрутам, а также определять действия на разные HTTP-запросы.</li><li class="stk-reset stk-list-item" data-ce-tag="list-item"><strong class="stk-reset">Интеграция с библиотеками.</strong> Laravel использует пакетный менеджер Composer, который позволяет быстро подключать сторонние библиотеки в проект без лишних проблем.</li><li class="stk-reset stk-list-item" data-ce-tag="list-item"><strong class="stk-reset">Современная архитектура. </strong>В Laravel встроена современная архитектура, включая шаблон <a href="https://skillbox.ru/media/code/chto_takoe_mvc_bazovye_kontseptsii_i_primer_prilozheniya/" target="_blank" class="stk-reset">MVC</a> (Model-View-Controller).</li></ul><p class="stk-reset" data-ce-tag="paragraph">В целом Laravel соблюдает отличный баланс между функциональностью, гибкостью и простотой в использовании. Правда, и у него есть свои особенности и границы применения. Поэтому его нельзя назвать «самым лучшим PHP-фреймворком». Однако создатели Laravel пытались сделать всё, чтобы он был комфортным для разработки:</p><div class="stk-grid" data-ce-tag="grid" data-stk-css="stkO7xFA"><div data-col-width="1" class="stk-grid-col" data-ce-tag="grid-col" data-stk-css="" data-stk-css-m=""><p class="stk-element_no-text stk-reset" data-ce-tag="paragraph"><img alt="" class="stk-reset stk-theme_26309__symbol_custom_image_2666427 stk-icon" src="/setka/css/assets/img/__hm6D-A.svg"></p></div><div data-col-width="11" class="stk-grid-col stk-grid-col_last" data-ce-tag="grid-col"><p class="stk-reset stk-theme_26309__mb_05" data-ce-tag="paragraph">«Laravel предназначен, чтобы убрать боли в разработке путём упрощения привычных задач, которые часто встречаются в веб-проектах… Laravel нужен, чтобы сделать процесс разработки приятным для программистов без ухудшения функциональности приложений. Как говорится, счастливые разработчики пишут самый лучший код».</p><p class="stk-theme_26309__mb_05 stk-theme_26309__style_small_text stk-reset" data-ce-tag="paragraph"><a class="stk-reset" href="https://laravel.com/docs/4.2/introduction#laravel-philosophy" target="_blank"><strong class="stk-reset">Создатели Laravel</strong></a></p></div></div></div></div><div class="stk-theme_26309__mb_15 stk-grid" data-ce-tag="grid"><div data-col-width="12" class="stk-grid-col stk-grid-col_last" data-ce-tag="grid-col"><h2 class="stk-theme_26309__style_large_header stk-reset" id="stk-3" data-ce-tag="paragraph"><strong class="stk-reset">Что можно делать на Laravel</strong></h2><p class="stk-theme_26309__mb_05 stk-reset" data-ce-tag="paragraph">Раз Laravel — это популярный фреймворк для разработки веб-приложений, то на нём пишут различные веб-приложения (спасибо за очевидность):</p><ul class="stk-theme_26309__pad_hor_1 stk-reset" data-ce-tag="list"><li class="stk-reset stk-list-item" data-ce-tag="list-item"><strong class="stk-reset" data-gtm-vis-has-fired-10171822_255="1">Лендинги, или посадочные страницы.</strong> На Laravel можно с минимальными затратами написать как простую страничку, так и мультистраничный сайт для компании. Конечно, это будет сложнее, чем использовать Tilda, но при этом можно масштабировать сайт и добавлять любые собственные фичи. Пример: лендинг <a class="stk-reset" data-gtm-vis-has-fired-10171822_255="1" href="https://www.canva.com/" target="_blank">Canva</a>.</li><li class="stk-reset stk-list-item" data-ce-tag="list-item"><strong class="stk-reset">API. </strong>Это прослойка для обмена данными между клиентской и серверной сторонами веб-приложения. Пример: <a href="https://github.com/laravel/passport" target="_blank" class="stk-reset">Laravel Passport</a>, API для безопасной авторизации пользователей в веб-приложении.</li><li class="stk-reset stk-list-item" data-ce-tag="list-item"><strong class="stk-reset">CMS. </strong>Системы управления контентом (content management system, или CMS) — они нужны, чтобы управлять содержимым веб-сайта. Пример: <a href="https://octobercms.com/" target="_blank" class="stk-reset">October CMS</a>.</li><li class="stk-reset stk-list-item" data-ce-tag="list-item"><strong class="stk-reset">Онлайн-магазины. </strong>На<strong class="stk-reset"> </strong>Laravel также создают электронные коммерческие платформы, на которых можно продавать товары и услуги. Пример: <a href="https://bagisto.com/en/" target="_blank" class="stk-reset">Bagisto</a>.</li></ul><p class="stk-theme_26309__mb_05 stk-reset" data-ce-tag="paragraph">Вот ещё несколько крупных проектов, которые написаны на Laravel:</p><ul class="stk-theme_26309__pad_hor_1 stk-reset" data-ce-tag="list"><li class="stk-reset stk-list-item" data-ce-tag="list-item"><a href="http://laravel.com" target="_blank" class="stk-reset">laravel.com</a> — официальный сайт Laravel создан на Laravel;</li><li class="stk-reset stk-list-item" data-ce-tag="list-item"><a href="https://www.neighbourly.co.nz/" target="_blank" class="stk-reset">Neighbourly</a> — социальная сеть для общения с соседями;</li><li class="stk-reset stk-list-item" data-ce-tag="list-item"><a href="https://worldwalking.org/" target="_blank" class="stk-reset">World Walking</a> — приложение для мотивации людей ходить больше;</li><li class="stk-reset stk-list-item" data-ce-tag="list-item"><a href="https://ko-fi.com/" target="_blank" class="stk-reset">Ko-fi</a> — платформа для поддержки творчества;</li><li class="stk-reset stk-list-item" data-ce-tag="list-item"><a href="http://invoicemachine.com/" target="_blank" class="stk-reset">The Invoice Machine</a> — онлайн-сервис для выставления счетов;</li><li class="stk-reset stk-list-item" data-ce-tag="list-item"><a href="http://startups.co" target="_blank" class="stk-reset">Startups.com</a> — платформа для запуска и развития стартапов;</li><li class="stk-reset stk-list-item" data-ce-tag="list-item"><a href="https://larametrics.com/" target="_blank" class="stk-reset">Larametrics</a> — это инструмент для мониторинга и анализа производительности приложений на Laravel.</li></ul><p class="stk-reset" data-ce-tag="paragraph">А вот так выглядят сайты на Laravel:</p><div class="stk-gallery stk-gallery stk-gallery stk-gallery stk-gallery stk-gallery stk-gallery stk-gallery stk-gallery stk-gallery stk-gallery" data-ce-tag="gallery"><figure class="stk-reset stk-image-figure" data-ce-tag="image-figure"><div class="stk-mask" data-ce-tag="mask"><img src="/upload/setka_images/12220630032023_5c20dcbcfbab07ab6c2df7e27444d5ac2afca569.png" data-image-id="51773" data-image-name="1.png" width="1540" height="866" loading="lazy" class="stk-image stk-reset"/></div><figcaption style="display:block" class="stk-reset stk-description" data-ce-tag="description">Официальный сайт Laravel<br><em class="stk-reset">Скриншот: Laravel / Skillbox Media</em></figcaption></figure><figure class="stk-reset stk-image-figure" data-ce-tag="image-figure"><div class="stk-mask" data-ce-tag="mask"><img src="/upload/setka_images/12220630032023_278cadb5c5a600fd354bbb4a32acf34407bf98f0.png" data-image-id="51775" data-image-name="2.png" width="1540" height="866" loading="lazy" class="stk-image stk-reset"/></div><figcaption style="display:block" class="stk-reset stk-description" data-ce-tag="description">Социальная сеть Neighbourly<br><em class="stk-reset">Скриншот: Neighbourly / Skillbox Media</em></figcaption></figure><figure class="stk-reset stk-image-figure" data-ce-tag="image-figure"><div class="stk-mask" data-ce-tag="mask"><img src="/upload/setka_images/12220630032023_bd473197c461193ea9b6d317f4c236910d065887.png" data-image-id="51774" data-image-name="3.png" width="1540" height="866" loading="lazy" class="stk-image stk-reset"/></div><figcaption style="display:block" class="stk-reset stk-description" data-ce-tag="description">Платформа для запуска и развития стартапов — Startups.com<br><em class="stk-reset">Скриншот: Startups.com / Skillbox Media</em></figcaption></figure></div><p class="stk-reset" data-ce-tag="paragraph">Это лишь часть сайтов, написанных на Laravel. Некоторые платформы могут использовать фреймворк как один из компонентов сложного веб-приложения, но обычно об этом не говорят — особенно часто отмалчиваются крупные компании.</p></div></div><div class="stk-theme_26309__mb_15 stk-grid" data-ce-tag="grid"><div data-col-width="12" class="stk-grid-col stk-grid-col_last" data-ce-tag="grid-col"><h2 class="stk-reset stk-theme_26309__style_large_header" data-ce-tag="paragraph" id="stk-4"><strong class="stk-reset">С чего начать работу</strong></h2><p class="stk-reset" data-ce-tag="paragraph">Чтобы освоить фреймворк, теории всегда мало, обязательно нужна практика. Поэтому дальше мы займёмся именно этим — напишем простое приложение, чтобы играть с компьютером в игру «Камень, ножницы, бумага». Но для начала нам надо будет установить <a href="https://laravel.com/" target="_blank" class="stk-reset">Laravel</a> и <a href="https://www.mysql.com/" target="_blank" class="stk-reset">MySQL</a>.</p><p class="stk-reset" data-ce-tag="paragraph">Если у вас ещё не установлен PHP, можете прочитать, как это сделать, в <a href="https://skillbox.ru/media/code/kak_nachat_programmirovat_na_php/" target="_blank" class="stk-reset">нашей статье</a>.</p><h3 class="stk-theme_26309__style_medium_header stk-theme_26309__mb_05 stk-reset" data-ce-tag="paragraph"><strong class="stk-reset">Скачиваем Composer</strong></h3><p class="stk-reset" data-ce-tag="paragraph">Composer — это пакетный менеджер для PHP. С помощью него можно устанавливать сторонние библиотеки и фреймворки, как это нужно в нашем случае. Рассмотрим установку для операционных систем Windows, macOS и Linux.</p><p class="stk-theme_26309__mb_05 stk-reset" data-ce-tag="paragraph"><strong class="stk-reset">Windows. </strong>На этой ОС процесс установки самый простой:</p><ul class="stk-theme_26309__pad_hor_1 stk-reset" data-ce-tag="list"><li class="stk-reset stk-list-item" data-ce-tag="list-item">переходим на <a class="stk-reset" href="https://getcomposer.org/doc/00-intro.md#installation-windows" target="_blank">официальный сайт Composer</a> и скачиваем установочный файл <u class="stk-reset">Composer-Setup.exe</u>;</li><li class="stk-reset stk-list-item" data-ce-tag="list-item">запускаем его и проходим привычные шаги установки.</li></ul><p class="stk-reset" data-ce-tag="paragraph"><strong class="stk-reset">macOS.</strong> Установить Composer напрямую не получится, сначала нужно скачать менеджер пакетов <a class="stk-reset" href="https://brew.sh/" target="_blank">Homebrew</a> — о нём мы рассказывали в <a class="stk-reset" href="https://skillbox.ru/media/code/kak_nachat_programmirovat_na_php/#stk-6:~:text=sudo%20apt%20update-,%D0%9D%D0%B0%C2%A0macOS,-%D0%A1%D0%BA%D0%B0%D1%87%D0%B0%D1%82%D1%8C%20PHP%20%D1%81" target="_blank">статье про PHP</a>. Открываем терминал и вводим команду:</p><figure class="stk-reset stk-embed_rendered" data-ce-tag="embed"><code class="stk-code"><pre class="hljs" style="display: block; overflow-x: auto; padding: 0.5em; background: rgb(0, 0, 0); color: rgb(248, 248, 248);">/bin/bash -<span class="hljs-built_in">c</span> <span class="hljs-string" style="color: rgb(168, 255, 96);">"$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"</span></pre></code><figcaption class="stk-reset stk-description" data-ce-tag="description"></figcaption></figure><p class="stk-reset" data-ce-tag="paragraph">После установки Homebrew вводим команду:</p><figure class="stk-reset stk-embed_rendered" data-ce-tag="embed"><code class="stk-code"><pre class="hljs" style="display: block; overflow-x: auto; padding: 0.5em; background: rgb(0, 0, 0); color: rgb(248, 248, 248);"><span class="hljs-keyword" style="color: rgb(150, 203, 254);">brew </span><span class="hljs-keyword" style="color: rgb(150, 203, 254);">install </span>composer</pre></code><figcaption class="stk-reset stk-description" data-ce-tag="description"></figcaption></figure><p class="stk-reset" data-ce-tag="paragraph"><strong class="stk-reset">Linux.</strong> Здесь установить Composer проще, чем на macOS. Для разных Linux-систем команды могут различаться (из-за особенностей системы управления пакетами), но сам процесс установки, по сути, будет идентичным. Вот как выглядит процесс установки в Debian-подобных дистрибутивах:</p><figure class="stk-reset stk-embed_rendered" data-ce-tag="embed"><code class="stk-code"><pre class="hljs" style="display: block; overflow-x: auto; padding: 0.5em; background: rgb(0, 0, 0); color: rgb(248, 248, 248);">$ sudo apt-<span class="hljs-built_in">get</span> <span class="hljs-keyword" style="color: rgb(150, 203, 254);">update</span>
$ sudo apt-<span class="hljs-built_in">get</span> install composer</pre></code><figcaption class="stk-reset stk-description" data-ce-tag="description"></figcaption></figure><p class="stk-reset" data-ce-tag="paragraph">Если возникли трудности с установкой, можно обратиться к документации на <a href="https://getcomposer.org/doc/" target="_blank" class="stk-reset">официальном сайте</a>. А если всё получилось — переходим дальше.</p><h3 class="stk-theme_26309__style_medium_header stk-theme_26309__mb_05 stk-reset" data-ce-tag="paragraph"><strong class="stk-reset">Скачиваем MySQL</strong></h3><p class="stk-reset" data-ce-tag="paragraph">Мы будем сохранять статистику игр в базе данных, а для неё нужен собственный сервер. Поэтому скачиваем MySQL с <a href="https://dev.mysql.com/downloads/mysql/" target="_blank" class="stk-reset">официального сайта</a>.</p><p class="stk-reset" data-ce-tag="paragraph">Далее надо выбрать операционную систему и пройти стандартный процесс установки. Обратите внимание: на этапе конфигурирования обязательно запомните введённый пароль, потому что с его помощью вы будете подключаться к базе данных.</p><figure class="stk-reset stk-image-figure" data-ce-tag="image-figure"><div class="stk-mask" data-ce-tag="mask"><img src="/upload/setka_images/12245630032023_e3039f248dd555899a396179b51a05be377f9973.png" data-image-id="51777" data-image-name="4.png" width="1540" height="1102" loading="lazy" class="stk-image stk-reset"/></div><figcaption style="display:block" class="stk-reset stk-description" data-ce-tag="description">Первичная настройка MySQL<br><em class="stk-reset">Скриншот: Skillbox Media</em></figcaption></figure><p class="stk-reset" data-ce-tag="paragraph">Оставьте галочку, где говорят, что MySQL Server запустится сразу после установки. И теперь всё готово.</p><p class="stk-reset" data-ce-tag="paragraph"><strong class="stk-reset">Альтернативная установка для Linux.</strong> Если вы используете Linux, то скачивать установщик не обязательно — можно опять-таки воспользоваться пакетным менеджером. Делается это примерно так (с поправкой на ваш дистрибутив):</p><figure class="stk-reset stk-embed_rendered" data-ce-tag="embed"><code class="stk-code"><pre class="hljs" style="display: block; overflow-x: auto; padding: 0.5em; background: rgb(0, 0, 0); color: rgb(248, 248, 248);">sudo apt-<span class="hljs-keyword" style="color: rgb(150, 203, 254);">get</span> install mysql-<span class="hljs-built_in">server</span></pre></code><figcaption class="stk-reset stk-description" data-ce-tag="description"></figcaption></figure><p class="stk-reset" data-ce-tag="paragraph">После установки нужно запустить сам сервер:</p><figure class="stk-reset stk-embed_rendered" data-ce-tag="embed"><code class="stk-code"><pre class="hljs" style="display: block; overflow-x: auto; padding: 0.5em; background: rgb(0, 0, 0); color: rgb(248, 248, 248);">sudo service mysql <span class="hljs-keyword" style="color: rgb(150, 203, 254);">status</span></pre></code><figcaption class="stk-reset stk-description" data-ce-tag="description"></figcaption></figure><p class="stk-reset" data-ce-tag="paragraph">Готово — сервер запущен!</p><h3 class="stk-theme_26309__style_medium_header stk-theme_26309__mb_05 stk-reset" data-ce-tag="paragraph"><strong class="stk-reset">Устанавливаем Laravel</strong></h3><p class="stk-reset" data-ce-tag="paragraph">Теперь нам необходимо установить Laravel. Это можно сделать через Composer, который автоматически умеет скачивать Laravel и все зависимости.</p><p class="stk-reset" data-ce-tag="paragraph">Откройте командную строку и введите следующую команду:</p><figure class="stk-reset stk-embed_rendered" data-ce-tag="embed"><code class="stk-code"><pre class="hljs" style="display: block; overflow-x: auto; padding: 0.5em; background: rgb(0, 0, 0); color: rgb(248, 248, 248);">composer <span class="hljs-keyword" style="color: rgb(150, 203, 254);">create</span>-<span class="hljs-keyword" style="color: rgb(150, 203, 254);">project</span> <span class="hljs-comment" style="color: rgb(124, 124, 124);">--prefer-dist laravel/laravel myapp</span></pre></code><figcaption class="stk-reset stk-description" data-ce-tag="description"></figcaption></figure><p class="stk-reset" data-ce-tag="paragraph">Здесь <u class="stk-reset">myapp</u> — это имя вашего проекта. Эта команда создаст новый проект Laravel в папке <u class="stk-reset">myapp</u>.</p><figure class="stk-reset stk-image-figure" data-ce-tag="image-figure"><div class="stk-mask" data-ce-tag="mask"><img src="/upload/setka_images/12245630032023_ee673444daa2c4c150863fb4fe2e59385df85324.png" data-image-id="51778" data-image-name="5.png" width="1540" height="1155" loading="lazy" class="stk-image stk-reset"/></div><figcaption style="display:block" class="stk-reset stk-description" data-ce-tag="description">Создание нового Laravel-проекта<br><em class="stk-reset">Скриншот: Skillbox Media</em></figcaption></figure><p class="stk-reset" data-ce-tag="paragraph">Мы установили Laravel последней версии, 10.0.4. На скриншоте выше показан успешный процесс установки. Если возникли проблемы — смотрите документацию по установке на <a href="https://laravel.com/docs/10.x" target="_blank" class="stk-reset">официальном сайте</a>.</p><h3 class="stk-theme_26309__style_medium_header stk-theme_26309__mb_05 stk-reset" data-ce-tag="paragraph"><strong class="stk-reset">Запускаем сервер</strong></h3><p class="stk-reset" data-ce-tag="paragraph">Чтобы проверить правильность установки Laravel, нам достаточно только запустить встроенный веб-сервер. Кстати, не рекомендуем использовать встроенный веб-сервер в продакшене — для реального проекта лучше выбрать <a href="https://httpd.apache.org/" target="_blank" class="stk-reset">Apache</a> или <a href="https://nginx.org/ru/" target="_blank" class="stk-reset">Nginx</a>.</p><p class="stk-reset" data-ce-tag="paragraph">Запустить веб-сервер просто: переходим в папку с проектом и открываем командную строку. Вводим команду:</p><figure class="stk-reset stk-embed_rendered" data-ce-tag="embed"><code class="stk-code"><pre class="hljs" style="display: block; overflow-x: auto; padding: 0.5em; background: rgb(0, 0, 0); color: rgb(248, 248, 248);"><span class="hljs-attribute" style="color: rgb(255, 255, 182);">php</span> artisan serve</pre></code><figcaption class="stk-reset stk-description" data-ce-tag="description"></figcaption></figure><p class="stk-reset" data-ce-tag="paragraph">Должно появиться такое сообщение:</p><figure class="stk-reset stk-image-figure" data-ce-tag="image-figure"><div class="stk-mask" data-ce-tag="mask"><img src="/upload/setka_images/12245630032023_a3e9b924b0c79cb7169afa563a255fa0a5b1cadd.png" data-image-id="51776" data-image-name="6.png" width="1540" height="705" loading="lazy" class="stk-image stk-reset"/></div><figcaption style="display:block" class="stk-reset stk-description" data-ce-tag="description">Веб-сервер успешно запущен<br><em class="stk-reset">Скриншот: Skillbox Media</em></figcaption></figure><p class="stk-reset" data-ce-tag="paragraph">Открываем браузер и переходим по указанному адресу: <u class="stk-reset">http://127.0.0.1:8000/</u>. Если всё хорошо, должен открыться примерно такой экран:</p><figure class="stk-reset stk-image-figure" data-ce-tag="image-figure"><div class="stk-mask" data-ce-tag="mask"><img src="/upload/setka_images/12245630032023_cae856732bd4226855875d839121e46dd85999a9.png" data-image-id="51779" data-image-name="7.png" width="1540" height="941" loading="lazy" class="stk-image stk-reset"/></div><figcaption style="display:block" class="stk-reset stk-description" data-ce-tag="description">Страница по умолчанию<br><em class="stk-reset">Скриншот: Skillbox Media</em></figcaption></figure><p class="stk-reset" data-ce-tag="paragraph">Это страница Laravel по умолчанию. Её, конечно же, можно менять — этим мы и будем заниматься дальше. Ну а пока будет полезно перейти по ссылкам — почитать документацию и свежие новости о фреймворке.</p></div></div><div class="stk-theme_26309__mb_15 stk-grid" data-ce-tag="grid"><div data-col-width="12" class="stk-grid-col stk-grid-col_last" data-ce-tag="grid-col"><h2 class="stk-reset stk-theme_26309__style_large_header" data-ce-tag="paragraph" id="stk-5"><strong class="stk-reset">Как создать веб-приложение на Laravel</strong></h2><p class="stk-reset" data-ce-tag="paragraph">Теперь, когда у нас установлен Laravel, можно приступать к написанию кода. Как уже упоминалось выше, мы создадим игру «Камень, ножницы, бумага» и будем играть в неё с компьютером.</p><p class="stk-theme_26309__mb_05 stk-reset" data-ce-tag="paragraph">План такой:</p><ul class="stk-theme_26309__pad_hor_1 stk-reset" data-ce-tag="list"><li class="stk-reset stk-list-item" data-ce-tag="list-item"><strong class="stk-reset">Создать новый проект</strong> и выбрать название.</li><li class="stk-reset stk-list-item" data-ce-tag="list-item"><strong class="stk-reset">Организовать базу данных</strong>, чтобы сохранять статистику игр.</li><li class="stk-reset stk-list-item" data-ce-tag="list-item"><strong class="stk-reset">Сделать миграцию базы данных</strong>, чтобы все таблицы были на своём месте.</li><li class="stk-reset stk-list-item" data-ce-tag="list-item"><strong class="stk-reset">Добавить маршрут</strong> и разобраться, что это такое.</li><li class="stk-reset stk-list-item" data-ce-tag="list-item"><strong class="stk-reset">Создать контроллер</strong> и тоже понять, зачем он нужен.</li><li class="stk-reset stk-list-item" data-ce-tag="list-item"><strong class="stk-reset">Создать кнопки для игры</strong>.</li><li class="stk-reset stk-list-item" data-ce-tag="list-item"><strong class="stk-reset">Украсить всё с помощью CSS-стилей</strong>.</li></ul><p class="stk-reset" data-ce-tag="paragraph">План здоровский — приступим!</p><h3 class="stk-theme_26309__style_medium_header stk-theme_26309__mb_05 stk-reset" data-ce-tag="paragraph"><strong class="stk-reset">Создаём новый проект</strong></h3><p class="stk-reset" data-ce-tag="paragraph">Идём уже знакомым путём: запускаем командную строку и вводим команду для Composer:</p><figure class="stk-reset stk-embed_rendered" data-ce-tag="embed"><code class="stk-code"><pre class="hljs" style="display: block; overflow-x: auto; padding: 0.5em; background: rgb(0, 0, 0); color: rgb(248, 248, 248);">composer <span class="hljs-keyword" style="color: rgb(150, 203, 254);">create</span>-<span class="hljs-keyword" style="color: rgb(150, 203, 254);">project</span> <span class="hljs-comment" style="color: rgb(124, 124, 124);">--prefer-dist laravel/laravel rock-paper-scissors</span></pre></code><figcaption class="stk-reset stk-description" data-ce-tag="description"></figcaption></figure><p class="stk-reset" data-ce-tag="paragraph">Проект создали — файлы не поменялись:</p><figure class="stk-reset stk-image-figure" data-ce-tag="image-figure"><div class="stk-mask" data-ce-tag="mask"><img src="/upload/setka_images/12383330032023_073efc852a65b7685aeef7707c1c1bd107b26868.png" data-image-id="51780" data-image-name="8.png" width="1540" height="1155" loading="lazy" class="stk-image stk-reset"/></div><figcaption style="display:block" class="stk-reset stk-description" data-ce-tag="description">Структура проекта<br><em class="stk-reset">Скриншот: Skillbox Media</em></figcaption></figure><p class="stk-reset" data-ce-tag="paragraph">Оставьте командную строку открытой — она нам ещё пригодится, а сами перейдите в папку с проектом с помощью следующей команды:</p><figure class="stk-reset stk-embed_rendered" data-ce-tag="embed"><code class="stk-code"><pre class="hljs" style="display: block; overflow-x: auto; padding: 0.5em; background: rgb(0, 0, 0); color: rgb(248, 248, 248);"><span class="hljs-keyword" style="color: rgb(150, 203, 254);">cd</span> rock-paper-scissors</pre></code><figcaption class="stk-reset stk-description" data-ce-tag="description"></figcaption></figure><p class="stk-reset" data-ce-tag="paragraph"><a class="stk-reset" href="https://skillbox.ru/media/code/osnovnye-komandy-i-goryachie-klavishi-terminala-linux-a-takzhe-unix-macos-i-freebsd/" target="_blank">Команда</a> <u class="stk-reset">cd</u> позволяет двигаться вверх и вниз по папкам. Ну а раз мы уже в нужном месте, переходим дальше.</p><h3 class="stk-theme_26309__style_medium_header stk-theme_26309__mb_05 stk-reset" data-ce-tag="paragraph"><strong class="stk-reset">Организуем базу данных</strong></h3><p class="stk-reset" data-ce-tag="paragraph">Чтобы сохранять результаты игр, нам нужна база данных. Она представляет собой обычный файл, в котором данные хранятся в удобном для использования виде.</p><div class="stk-grid" data-ce-tag="grid" data-stk-css="stkSdiUU"><div data-col-width="12" class="stk-grid-col stk-grid-col_last" data-ce-tag="grid-col"><p class="stk-reset " data-ce-tag="paragraph">Если хотите узнать больше о базах данных, рекомендуем прочитать <a href="https://skillbox.ru/media/code/baza-dannykh-chto-eto-takoe-i-zachem-ona-nuzhna/" target="_blank" class="stk-reset">подробную статью о них</a>.</p></div></div><p class="stk-reset" data-ce-tag="paragraph">Перейдём в файл <u class="stk-reset" data-gtm-vis-has-fired-10171822_255="1">.env</u>, который находится в папке нашего проекта. Он может быть скрыт, потому что его название начинается с точки. Если он у вас не отображается, поменяйте <a class="stk-reset" href="https://support.microsoft.com/ru-ru/windows/%D0%BF%D1%80%D0%BE%D1%81%D0%BC%D0%BE%D1%82%D1%80-%D1%81%D0%BA%D1%80%D1%8B%D1%82%D1%8B%D1%85-%D1%84%D0%B0%D0%B9%D0%BB%D0%BE%D0%B2-%D0%B8-%D0%BF%D0%B0%D0%BF%D0%BE%D0%BA-%D0%B2-windows-97fbc472-c603-9d90-91d0-1166d1d9f4b5" target="_blank" data-gtm-vis-has-fired-10171822_255="1">настройки</a> отображения файлов в своей системе.</p><p class="stk-reset" data-ce-tag="paragraph">В файле нам нужно поправить следующие строки:</p><figure class="stk-reset stk-image-figure" data-ce-tag="image-figure"><div class="stk-mask" data-ce-tag="mask"><img src="/upload/setka_images/12393030032023_854dea6f537eb50a7df2fcca1a632655ba83fb34.png" data-image-id="51784" data-image-name="14.png" class="stk-image stk-reset" width="1540" height="807" loading="lazy"/></div><figcaption style="display:block" class="stk-reset stk-description" data-ce-tag="description"><em class="stk-reset">Скриншот: Skillbox Media</em></figcaption></figure><p class="stk-reset" data-ce-tag="paragraph">Нам нужны последние три опции:</p><figure class="stk-reset stk-embed_rendered" data-ce-tag="embed"><code class="stk-code"><pre class="hljs" style="display: block; overflow-x: auto; padding: 0.5em; background: rgb(0, 0, 0); color: rgb(248, 248, 248);"><span class="hljs-attr">DB_DATABASE</span>=rock_paper_scissors
<span class="hljs-attr">DB_USERNAME</span>=root
<span class="hljs-attr">DB_PASSWORD</span>=password</pre></code><figcaption class="stk-reset stk-description" data-ce-tag="description"></figcaption></figure><p class="stk-reset" data-ce-tag="paragraph">В первой строке мы задаём название базы данных, а во второй и третьей — данные для входа в неё. Сейчас мы сделаем их простыми, но помните, что, если вы собираетесь выкладывать сайт в интернет, очень важно, чтобы пароль и логин были надёжными.</p><p class="stk-reset" data-ce-tag="paragraph">Сохраняем файл и закрываем его — база данных предварительно настроена.</p><h3 class="stk-theme_26309__style_medium_header stk-theme_26309__mb_05 stk-reset" data-ce-tag="paragraph"><strong class="stk-reset">Делаем миграцию </strong></h3><p class="stk-reset" data-ce-tag="paragraph">Мы создали базу данных, настало время создать нужные таблицы. Открываем командную строку и убеждаемся, что находимся в папке с проектом. Вводим следующую команду:</p><figure class="stk-reset stk-embed_rendered" data-ce-tag="embed"><code class="stk-code"><pre class="hljs" style="display: block; overflow-x: auto; padding: 0.5em; background: rgb(0, 0, 0); color: rgb(248, 248, 248);">php artisan <span class="hljs-built_in">make</span>:migration create_game_statistics_table --<span class="hljs-keyword" style="color: rgb(150, 203, 254);">create</span>=game_statistics</pre></code><figcaption class="stk-reset stk-description" data-ce-tag="description"></figcaption></figure><p class="stk-reset" data-ce-tag="paragraph">Эта команда сделает миграцию базы данных, то есть изменит её содержимое и создаст файл с таблицей. В нашем случае — добавит таблицу <u class="stk-reset">game_statistics</u>, а также файл с датой создания таблицы и припиской <u class="stk-reset">_create_game_statistics_table</u>:</p><figure class="stk-reset stk-image-figure" data-ce-tag="image-figure"><div class="stk-mask" data-ce-tag="mask"><img src="/upload/setka_images/12383330032023_d0e289e355555cb39f9d7f499b6888c389473c54.png" data-image-id="51783" data-image-name="9.png" width="1540" height="764" loading="lazy" class="stk-image stk-reset"/></div><figcaption style="display:block" class="stk-reset stk-description" data-ce-tag="description">Создаём новую таблицу в БД<br><em class="stk-reset">Скриншот: Skillbox Media</em></figcaption></figure><p class="stk-reset" data-ce-tag="paragraph">Появился PHP-файл миграции, который находится в папке <u class="stk-reset">database/migrations</u>:</p><figure class="stk-reset stk-image-figure" data-ce-tag="image-figure"><div class="stk-mask" data-ce-tag="mask"><img src="/upload/setka_images/12383330032023_6451db2226570ea0b99a95968d54a6a08d58b1f8.png" data-image-id="51781" data-image-name="11.png" width="1540" height="865" loading="lazy" class="stk-image stk-reset"/></div><figcaption style="display:block" class="stk-reset stk-description" data-ce-tag="description">Миграции в структуре Laravel-проекта<br><em class="stk-reset">Скриншот: Skillbox Media</em></figcaption></figure><p class="stk-reset" data-ce-tag="paragraph">Открываем его и добавляем следующий код — он поможет задать структуру нашей таблицы:</p><figure class="stk-reset stk-embed_rendered" data-ce-tag="embed"><code class="stk-code"><pre class="hljs" style="display: block; overflow-x: auto; padding: 0.5em; background: rgb(0, 0, 0); color: rgb(248, 248, 248);"><span class="hljs-meta" style="color: rgb(124, 124, 124);"><?php</span>
<span class="hljs-keyword" style="color: rgb(150, 203, 254);">use</span> <span class="hljs-title" style="color: rgb(255, 255, 182);">Illuminate</span>\<span class="hljs-title" style="color: rgb(255, 255, 182);">Database</span>\<span class="hljs-title" style="color: rgb(255, 255, 182);">Migrations</span>\<span class="hljs-title" style="color: rgb(255, 255, 182);">Migration</span>;
<span class="hljs-keyword" style="color: rgb(150, 203, 254);">use</span> <span class="hljs-title" style="color: rgb(255, 255, 182);">Illuminate</span>\<span class="hljs-title" style="color: rgb(255, 255, 182);">Database</span>\<span class="hljs-title" style="color: rgb(255, 255, 182);">Schema</span>\<span class="hljs-title" style="color: rgb(255, 255, 182);">Blueprint</span>;
<span class="hljs-keyword" style="color: rgb(150, 203, 254);">use</span> <span class="hljs-title" style="color: rgb(255, 255, 182);">Illuminate</span>\<span class="hljs-title" style="color: rgb(255, 255, 182);">Support</span>\<span class="hljs-title" style="color: rgb(255, 255, 182);">Facades</span>\<span class="hljs-title" style="color: rgb(255, 255, 182);">Schema</span>;
<span class="hljs-class"><span class="hljs-keyword" style="color: rgb(150, 203, 254);">class</span> <span class="hljs-title" style="color: rgb(255, 255, 182);">CreateGameStatisticsTable</span> <span class="hljs-keyword" style="color: rgb(150, 203, 254);">extends</span> <span class="hljs-title" style="color: rgb(255, 255, 182);">Migration</span>
</span>{
<span class="hljs-keyword" style="color: rgb(150, 203, 254);">public</span> <span class="hljs-function"><span class="hljs-keyword" style="color: rgb(150, 203, 254);">function</span> <span class="hljs-title" style="color: rgb(255, 255, 182);">up</span><span class="hljs-params">()</span>
</span>{
Schema::create(<span class="hljs-string" style="color: rgb(168, 255, 96);">'game_statistics'</span>, <span class="hljs-function"><span class="hljs-keyword" style="color: rgb(150, 203, 254);">function</span> <span class="hljs-params">(Blueprint $table)</span> </span>{
$table->id();
$table->string(<span class="hljs-string" style="color: rgb(168, 255, 96);">'player_name'</span>);
$table->string(<span class="hljs-string" style="color: rgb(168, 255, 96);">'computer_choice'</span>);
$table->string(<span class="hljs-string" style="color: rgb(168, 255, 96);">'player_choice'</span>);
$table->string(<span class="hljs-string" style="color: rgb(168, 255, 96);">'result'</span>);
$table->timestamps();
});
}
<span class="hljs-keyword" style="color: rgb(150, 203, 254);">public</span> <span class="hljs-function"><span class="hljs-keyword" style="color: rgb(150, 203, 254);">function</span> <span class="hljs-title" style="color: rgb(255, 255, 182);">down</span><span class="hljs-params">()</span>
</span>{
Schema::dropIfExists(<span class="hljs-string" style="color: rgb(168, 255, 96);">'game_statistics'</span>);
}
}</pre></code><figcaption class="stk-reset stk-description" data-ce-tag="description"></figcaption></figure><p class="stk-reset" data-ce-tag="paragraph">Эта миграция создаст таблицы с шестью колонками: уникальным идентификатором игры (<u class="stk-reset">id</u>), именем игрока (<u class="stk-reset">player_name</u>), ходом компьютера (<u class="stk-reset">computer_choice</u>), ходом игрока (<u class="stk-reset">player_choice</u>), результатом игры (<u class="stk-reset">result</u>) и временной отметкой (<u class="stk-reset">timestamps</u>) — указанием времени, когда проходила игра.</p><p class="stk-reset" data-ce-tag="paragraph">Обратите внимание на типы данных в нашей таблице. У нас есть четыре колонки с типом «строка» (<u class="stk-reset" data-gtm-vis-has-fired-10171822_255="1">player_name</u>, <u class="stk-reset" data-gtm-vis-has-fired-10171822_255="1">computer_choice</u>, <u class="stk-reset" data-gtm-vis-has-fired-10171822_255="1">player_choice</u> и <u class="stk-reset" data-gtm-vis-has-fired-10171822_255="1">result</u>), а также два уникальных типа данных: <u class="stk-reset" data-gtm-vis-has-fired-10171822_255="1">id</u> и <u class="stk-reset" data-gtm-vis-has-fired-10171822_255="1">timestamps</u>. Первый — это айдишник строки в таблице, и он представляет собой обычное число, но с дополнительными фичами. А второй представляет собой дату в формате <u class="stk-reset" data-gtm-vis-has-fired-10171822_255="1">YYYY-MM-DD HH:MM:SS</u>.</p><p class="stk-reset" data-ce-tag="paragraph">Сохраняем файл и закрываем его. Теперь нам нужно запустить миграцию — терминал нам поможет:</p><figure class="stk-reset stk-embed_rendered" data-ce-tag="embed"><code class="stk-code"><pre class="hljs" style="display: block; overflow-x: auto; padding: 0.5em; background: rgb(0, 0, 0); color: rgb(248, 248, 248);"><span class="hljs-attribute" style="color: rgb(255, 255, 182);">php</span> artisan migrate</pre></code><figcaption class="stk-reset stk-description" data-ce-tag="description"></figcaption></figure><p class="stk-reset" data-ce-tag="paragraph">У нас спросят, хотим ли мы создать новую таблицу в базе данных. Соглашаемся:</p><figure class="stk-reset stk-image-figure" data-ce-tag="image-figure"><div class="stk-mask" data-ce-tag="mask"><img src="/upload/setka_images/13065930032023_79a3bf1b60dcd0c001f9454c21d4401a9576e013.png" data-image-id="51792" data-image-name="12.png" width="1540" height="966" loading="lazy" class="stk-image stk-reset"/></div><figcaption style="display:block" class="stk-reset stk-description" data-ce-tag="description">База данных настроена и готова к работе<br><em class="stk-reset">Скриншот: Skillbox Media</em></figcaption></figure><p class="stk-reset" data-ce-tag="paragraph">Готово — теперь у нас есть работающая база данных с нужной таблицей.</p><h3 class="stk-theme_26309__style_medium_header stk-theme_26309__mb_05 stk-reset" data-ce-tag="paragraph"><strong class="stk-reset">Добавляем маршрут</strong></h3><p class="stk-reset" data-ce-tag="paragraph">Весь бэкенд строится на маршрутах — или URL-адресах. Они помогают задавать удобную структуру и понятное поведение веб-приложениям.</p><p class="stk-reset" data-ce-tag="paragraph">Для пользователя маршруты — это отдельные «вкладки» на сайте. Например, если зайти на сайт Skillbox, откроется его главная страница <a class="stk-reset" href="http://www.skillbox.ru" target="_blank">www.skillbox.ru</a>. А если кликнуть на любой курс, мы перейдём на другую страницу сайта с другим URL-адресом, например <a class="stk-reset" href="http://www.skillbox.ru/course/profession-python" target="_blank">www.skillbox.ru/course/profession-python/</a>. Мы увидим, что к адресу нашего сайта добавился текст: <u class="stk-reset">/course/profession-python/</u>. Эта «приписка» и перенесла нас на другую страницу с другим содержимым. Но не просто перенесла, а запустила определённый код, который и отрисовал эту страницу.</p><p class="stk-reset" data-ce-tag="paragraph">Нам понадобятся два маршрута: корневой <u class="stk-reset" data-gtm-vis-has-fired-10171822_255="1">/</u> и игровой <u class="stk-reset" data-gtm-vis-has-fired-10171822_255="1">/play</u>. Чтобы их добавить, нужно перейти в папку <u class="stk-reset" data-gtm-vis-has-fired-10171822_255="1">routes</u>, открыть файл <u class="stk-reset" data-gtm-vis-has-fired-10171822_255="1">web.php</u> и вписать туда следующий код:</p><figure class="stk-reset stk-embed_rendered" data-ce-tag="embed"><code class="stk-code"><pre class="hljs" style="display: block; overflow-x: auto; padding: 0.5em; background: rgb(0, 0, 0); color: rgb(248, 248, 248);">Route::get(<span class="hljs-string" style="color: rgb(168, 255, 96);">'/'</span>, [GameController::class,<span class="hljs-string" style="color: rgb(168, 255, 96);">'index'</span>])->name(<span class="hljs-string" style="color: rgb(168, 255, 96);">'game.index'</span>);
Route::post(<span class="hljs-string" style="color: rgb(168, 255, 96);">'/play'</span>, [GameController::class,<span class="hljs-string" style="color: rgb(168, 255, 96);">'play'</span>])->name(<span class="hljs-string" style="color: rgb(168, 255, 96);">'game.play'</span>);
</pre></code><figcaption class="stk-reset stk-description" data-ce-tag="description"></figcaption></figure><p class="stk-reset" data-ce-tag="paragraph">На корневом маршруте мы будем отображать статистику и предлагать пользователю сыграть в игру, а на игровом маршруте будем собственно играть.</p><p class="stk-reset" data-ce-tag="paragraph">Этот код будет работать так: если мы заходим по корневому маршруту <u class="stk-reset">/</u>, то PHP отрисует страницу <u class="stk-reset">game.index</u>, а если зайдём по игровому маршруту <u class="stk-reset">/play</u>, то он создаст страницу <u class="stk-reset">game.play</u>. Поведение этих страниц мы опишем дальше.</p><p class="stk-reset" data-ce-tag="paragraph">В начале нужно прописать ещё одну строку:</p><figure class="stk-reset stk-embed_rendered" data-ce-tag="embed"><code class="stk-code"><pre class="hljs" style="display: block; overflow-x: auto; padding: 0.5em; background: rgb(0, 0, 0); color: rgb(248, 248, 248);"><span class="hljs-keyword" style="color: rgb(150, 203, 254);">namespace</span> <span class="hljs-title" style="color: rgb(255, 255, 182);">App</span>\<span class="hljs-title" style="color: rgb(255, 255, 182);">Http</span>\<span class="hljs-title" style="color: rgb(255, 255, 182);">Controllers</span>;</pre></code><figcaption class="stk-reset stk-description" data-ce-tag="description"></figcaption></figure><p class="stk-reset" data-ce-tag="paragraph">Итоговый файл должен выглядеть так:</p><figure class="stk-reset stk-image-figure" data-ce-tag="image-figure"><div class="stk-mask" data-ce-tag="mask"><img src="/upload/setka_images/13070330032023_44e69e18d5579b310b71a78d394ed8c7a91c182f.png" data-image-id="51793" data-image-name="13.png" width="1540" height="809" loading="lazy" class="stk-image stk-reset"/></div><figcaption style="display:block" class="stk-reset stk-description" data-ce-tag="description">Содержимое файла <u class="stk-reset">web.php</u><br><em class="stk-reset">Скриншот: Skillbox Media</em></figcaption></figure><p class="stk-reset" data-ce-tag="paragraph">Готово! Не забываем сохранить файл.</p><h3 class="stk-theme_26309__style_medium_header stk-theme_26309__mb_05 stk-reset" data-ce-tag="paragraph"><strong class="stk-reset">Создаём контроллер</strong></h3><p class="stk-reset" data-ce-tag="paragraph">Контроллер — это понятие из шаблона проектирования MVC. О нём у нас есть отдельная <a class="stk-reset" href="https://skillbox.ru/media/code/chto_takoe_mvc_bazovye_kontseptsii_i_primer_prilozheniya/" target="_blank">статья</a>.</p><div class="stk-grid" data-ce-tag="grid" data-stk-css="stk7UxCG"><div data-col-width="12" class="stk-grid-col stk-grid-col_last" data-ce-tag="grid-col"><p class="stk-reset stk-theme_26309__mb_05 stk-theme_26309__style_font_style-1629786048064" data-ce-tag="paragraph"><strong class="stk-reset">О контроллерах простыми словами</strong></p><p class="stk-theme_26309__mb_05 stk-reset" data-ce-tag="paragraph">Чтобы не вдаваться в подробности, скажем, что контроллер — это часть приложения, которая отвечает за обработку запросов от пользователя и взаимодействие с моделью (данными) и представлением (отображением).</p><p class="stk-theme_26309__mb_05 stk-reset" data-ce-tag="paragraph">Простыми словами, контроллер — это связующее звено между пользовательским интерфейсом и базой данных. Когда пользователь отправляет запрос на сервер, контроллер получает этот запрос, обрабатывает его и взаимодействует с базой данных, чтобы получить необходимые данные. Затем контроллер передаёт эти данные в представление, которое отображает их на экране для пользователя.</p><p class="stk-theme_26309__mb_05 stk-reset" data-ce-tag="paragraph">Контроллер отделяет бизнес-логику приложения от пользовательского интерфейса, что позволяет более эффективно управлять приложением и обеспечивает более гибкую архитектуру. Он также даёт возможность программистам работать с приложением по отдельности, без необходимости знать о других компонентах приложения.</p></div></div><p class="stk-reset" data-ce-tag="paragraph">Нам нужно создать контроллер для всей игры. Называться он будет <u class="stk-reset">GameController</u>. Чтобы создать его, нужно запустить в терминале следующую команду:</p><figure class="stk-reset stk-embed_rendered" data-ce-tag="embed"><code class="stk-code"><pre class="hljs" style="display: block; overflow-x: auto; padding: 0.5em; background: rgb(0, 0, 0); color: rgb(248, 248, 248);"><span class="hljs-attribute" style="color: rgb(255, 255, 182);">php</span> artisan make:controller GameController</pre></code><figcaption class="stk-reset stk-description" data-ce-tag="description"></figcaption></figure><figure class="stk-reset stk-image-figure" data-ce-tag="image-figure"><div class="stk-mask" data-ce-tag="mask"><img src="/upload/setka_images/12383330032023_26df41bdfacbababd13ce5a2ed7e751b3c19643a.png" data-image-id="51782" data-image-name="10.png" width="1540" height="599" loading="lazy" class="stk-image stk-reset"/></div><figcaption style="display:block" class="stk-reset stk-description" data-ce-tag="description"><em class="stk-reset">Скриншот: Skillbox Media</em></figcaption></figure><p class="stk-reset" data-ce-tag="paragraph">Эта команда создаст новый файл с контроллером в папке <u class="stk-reset">app/Http/Controllers</u>. Перейдём туда, откроем файл <u class="stk-reset">GameController.php</u> и впишем следующий код:</p><figure class="stk-reset stk-embed_rendered" data-ce-tag="embed"><code class="stk-code"><pre class="hljs" style="display: block; overflow-x: auto; padding: 0.5em; background: rgb(0, 0, 0); color: rgb(248, 248, 248);"><span class="hljs-meta" style="color: rgb(124, 124, 124);"><?php</span>
<span class="hljs-keyword" style="color: rgb(150, 203, 254);">namespace</span> <span class="hljs-title" style="color: rgb(255, 255, 182);">App</span>\<span class="hljs-title" style="color: rgb(255, 255, 182);">Http</span>\<span class="hljs-title" style="color: rgb(255, 255, 182);">Controllers</span>;
<span class="hljs-keyword" style="color: rgb(150, 203, 254);">use</span> <span class="hljs-title" style="color: rgb(255, 255, 182);">Illuminate</span>\<span class="hljs-title" style="color: rgb(255, 255, 182);">Http</span>\<span class="hljs-title" style="color: rgb(255, 255, 182);">Request</span>;
<span class="hljs-keyword" style="color: rgb(150, 203, 254);">use</span> <span class="hljs-title" style="color: rgb(255, 255, 182);">Illuminate</span>\<span class="hljs-title" style="color: rgb(255, 255, 182);">Support</span>\<span class="hljs-title" style="color: rgb(255, 255, 182);">Facades</span>\<span class="hljs-title" style="color: rgb(255, 255, 182);">DB</span>;
<span class="hljs-class"><span class="hljs-keyword" style="color: rgb(150, 203, 254);">class</span> <span class="hljs-title" style="color: rgb(255, 255, 182);">GameController</span> <span class="hljs-keyword" style="color: rgb(150, 203, 254);">extends</span> <span class="hljs-title" style="color: rgb(255, 255, 182);">Controller</span>
</span>{
<span class="hljs-keyword" style="color: rgb(150, 203, 254);">public</span> <span class="hljs-function"><span class="hljs-keyword" style="color: rgb(150, 203, 254);">function</span> <span class="hljs-title" style="color: rgb(255, 255, 182);">index</span><span class="hljs-params">()</span>
</span>{
<span class="hljs-keyword" style="color: rgb(150, 203, 254);">return</span> view(<span class="hljs-string" style="color: rgb(168, 255, 96);">'game'</span>);
}
}</pre></code><figcaption class="stk-reset stk-description" data-ce-tag="description"></figcaption></figure><p class="stk-reset" data-ce-tag="paragraph">Этот код определяет метод <u class="stk-reset" data-gtm-vis-has-fired-10171822_255="1">index()</u>, который будет возвращать игровое представление, чтобы отображать элементы на сайте. Мы опишем его на следующем шаге.</p><p class="stk-reset" data-ce-tag="paragraph">А пока добавим в этот же файл ещё одну функцию — <u class="stk-reset" data-gtm-vis-has-fired-10171822_255="1">play()</u>:</p><figure class="stk-reset stk-embed_rendered" data-ce-tag="embed"><code class="stk-code"><pre class="hljs" style="display: block; overflow-x: auto; padding: 0.5em; background: rgb(0, 0, 0); color: rgb(248, 248, 248);"><span class="hljs-keyword" style="color: rgb(150, 203, 254);">public</span> <span class="hljs-function"><span class="hljs-keyword" style="color: rgb(150, 203, 254);">function</span> <span class="hljs-title" style="color: rgb(255, 255, 182);">play</span><span class="hljs-params">(Request $request)</span>
</span>{
$playerChoice = $request->input(<span class="hljs-string" style="color: rgb(168, 255, 96);">'choice'</span>);
<span class="hljs-comment" style="color: rgb(124, 124, 124);">// Генерируем случайный ход для компьютера</span>
$computerChoice = rand(<span class="hljs-number" style="color: rgb(255, 115, 253);">1</span>, <span class="hljs-number" style="color: rgb(255, 115, 253);">3</span>);
<span class="hljs-keyword" style="color: rgb(150, 203, 254);">if</span> ($computerChoice == <span class="hljs-number" style="color: rgb(255, 115, 253);">1</span>) {
$computerChoice = <span class="hljs-string" style="color: rgb(168, 255, 96);">'rock'</span>;
} <span class="hljs-keyword" style="color: rgb(150, 203, 254);">elseif</span> ($computerChoice == <span class="hljs-number" style="color: rgb(255, 115, 253);">2</span>) {
$computerChoice = <span class="hljs-string" style="color: rgb(168, 255, 96);">'paper'</span>;
} <span class="hljs-keyword" style="color: rgb(150, 203, 254);">else</span> {
$computerChoice = <span class="hljs-string" style="color: rgb(168, 255, 96);">'scissors'</span>;
}
<span class="hljs-comment" style="color: rgb(124, 124, 124);">// Получаем результат игры</span>
<span class="hljs-keyword" style="color: rgb(150, 203, 254);">if</span> ($playerChoice == $computerChoice) {
$result = <span class="hljs-string" style="color: rgb(168, 255, 96);">'tie'</span>;
} <span class="hljs-keyword" style="color: rgb(150, 203, 254);">elseif</span> (($playerChoice == <span class="hljs-string" style="color: rgb(168, 255, 96);">'rock'</span> && $computerChoice == <span class="hljs-string" style="color: rgb(168, 255, 96);">'scissors'</span>) || ($playerChoice == <span class="hljs-string" style="color: rgb(168, 255, 96);">'paper'</span> && $computerChoice == <span class="hljs-string" style="color: rgb(168, 255, 96);">'rock'</span>) || ($playerChoice == <span class="hljs-string" style="color: rgb(168, 255, 96);">'scissors'</span> && $computerChoice == <span class="hljs-string" style="color: rgb(168, 255, 96);">'paper'</span>)) {
$result = <span class="hljs-string" style="color: rgb(168, 255, 96);">'win'</span>;
} <span class="hljs-keyword" style="color: rgb(150, 203, 254);">else</span> {
$result = <span class="hljs-string" style="color: rgb(168, 255, 96);">'lose'</span>;
}
<span class="hljs-comment" style="color: rgb(124, 124, 124);">// Сохраняем статистику в базу данных</span>
DB::table(<span class="hljs-string" style="color: rgb(168, 255, 96);">'game_statistics'</span>)->insert([
<span class="hljs-string" style="color: rgb(168, 255, 96);">'player_name'</span> => <span class="hljs-string" style="color: rgb(168, 255, 96);">'Player 1'</span>,
<span class="hljs-string" style="color: rgb(168, 255, 96);">'computer_choice'</span> => $computerChoice,
<span class="hljs-string" style="color: rgb(168, 255, 96);">'player_choice'</span> => $playerChoice,
<span class="hljs-string" style="color: rgb(168, 255, 96);">'result'</span> => $result,
<span class="hljs-string" style="color: rgb(168, 255, 96);">'created_at'</span> => now(),
<span class="hljs-string" style="color: rgb(168, 255, 96);">'updated_at'</span> => now(),
]);
<span class="hljs-comment" style="color: rgb(124, 124, 124);">// Возвращаем результат игры в представление</span>
<span class="hljs-keyword" style="color: rgb(150, 203, 254);">return</span> view(<span class="hljs-string" style="color: rgb(168, 255, 96);">'game'</span>, [<span class="hljs-string" style="color: rgb(168, 255, 96);">'result'</span> => $result]);
}</pre></code><figcaption class="stk-reset stk-description" data-ce-tag="description"></figcaption></figure><p class="stk-reset" data-ce-tag="paragraph">Здесь мы прописали основную логику игры. На вход функция принимает объект <u class="stk-reset" data-gtm-vis-has-fired-10171822_255="1">Request</u>, который содержит ход игрока. Экземпляр этого объекта будет приходить, когда мы нажмём на одну из кнопок в игре («Камень», «Ножницы» или «Бумага»), а потом отправим наш выбор методом <u class="stk-reset" data-gtm-vis-has-fired-10171822_255="1">POST</u>.</p><div class="stk-grid" data-ce-tag="grid" data-stk-css="stksQAmJ"><div data-col-width="12" class="stk-grid-col stk-grid-col_last" data-ce-tag="grid-col"><p class="stk-reset " data-ce-tag="paragraph">Подробнее об HTTP-запросах вы можете прочитать в нашей статье о <a href="https://skillbox.ru/media/code/chto-takoe-http-i-zachem-on-nuzhen/" target="_blank" class="stk-reset">протоколе HTTP</a>.</p></div></div><p class="stk-reset" data-ce-tag="paragraph">После того как мы обработали запрос, нам нужно сгенерировать ответ компьютера — с помощью генератора случайных чисел. И в конце мы определяем победителя и записываем результат в базу данных методом <u class="stk-reset" data-gtm-vis-has-fired-10171822_255="1">insert()</u>.</p><p class="stk-reset" data-ce-tag="paragraph">Логика игры готова! Опять же, не забываем сохранить файл.</p><h3 class="stk-theme_26309__style_medium_header stk-theme_26309__mb_05 stk-reset" data-ce-tag="paragraph"><strong class="stk-reset">Создаём</strong><strong class="stk-reset"> </strong><strong class="stk-reset">кнопки для игры</strong></h3><p class="stk-reset" data-ce-tag="paragraph">Метод <u class="stk-reset" data-gtm-vis-has-fired-10171822_255="1">index()</u> из файла <u class="stk-reset" data-gtm-vis-has-fired-10171822_255="1">GameController.php</u> отображает страницу с игрой, но пока на ней ничего нет, поэтому давайте создадим пару кнопок.</p><p class="stk-reset" data-ce-tag="paragraph">Открываем папку <u class="stk-reset">resources/views</u> и создаём там файл с названием <u class="stk-reset">game.blade.php</u>. Добавляем туда следующий код, чтобы создать игровой интерфейс:</p><figure class="stk-reset stk-embed_rendered" data-ce-tag="embed"><code class="stk-code"><pre class="hljs" style="display: block; overflow-x: auto; padding: 0.5em; background: rgb(0, 0, 0); color: rgb(248, 248, 248);"><span class="xml"><span class="hljs-meta" style="color: rgb(124, 124, 124);"><!DOCTYPE html></span>
<span class="hljs-tag" style="color: rgb(150, 203, 254);"><<span class="hljs-name" style="color: rgb(150, 203, 254);">html</span>></span>
<span class="hljs-tag" style="color: rgb(150, 203, 254);"><<span class="hljs-name" style="color: rgb(150, 203, 254);">head</span>></span>
<span class="hljs-tag" style="color: rgb(150, 203, 254);"><<span class="hljs-name" style="color: rgb(150, 203, 254);">title</span>></span>Rock Paper Scissors<span class="hljs-tag" style="color: rgb(150, 203, 254);"></<span class="hljs-name" style="color: rgb(150, 203, 254);">title</span>></span>
<span class="hljs-tag" style="color: rgb(150, 203, 254);"></<span class="hljs-name" style="color: rgb(150, 203, 254);">head</span>></span>
<span class="hljs-tag" style="color: rgb(150, 203, 254);"><<span class="hljs-name" style="color: rgb(150, 203, 254);">body</span>></span>
<span class="hljs-tag" style="color: rgb(150, 203, 254);"><<span class="hljs-name" style="color: rgb(150, 203, 254);">h1</span>></span>Rock Paper Scissors<span class="hljs-tag" style="color: rgb(150, 203, 254);"></<span class="hljs-name" style="color: rgb(150, 203, 254);">h1</span>></span>
@if(isset($result))
<span class="hljs-tag" style="color: rgb(150, 203, 254);"><<span class="hljs-name" style="color: rgb(150, 203, 254);">p</span>></span>You </span><span class="hljs-template-variable" style="color: rgb(198, 197, 254);">{{ $result }}</span><span class="xml">!<span class="hljs-tag" style="color: rgb(150, 203, 254);"></<span class="hljs-name" style="color: rgb(150, 203, 254);">p</span>></span>
@endif
<span class="hljs-tag" style="color: rgb(150, 203, 254);"><<span class="hljs-name" style="color: rgb(150, 203, 254);">form</span> <span class="hljs-attr">method</span>=<span class="hljs-string" style="color: rgb(168, 255, 96);">"POST"</span> <span class="hljs-attr">action</span>=<span class="hljs-string" style="color: rgb(168, 255, 96);">"</span></span></span><span class="hljs-template-variable" style="color: rgb(198, 197, 254);">{{ route('game.play') }}</span><span class="xml"><span class="hljs-tag" style="color: rgb(150, 203, 254);"><span class="hljs-string" style="color: rgb(168, 255, 96);">"</span>></span>
@csrf
<span class="hljs-tag" style="color: rgb(150, 203, 254);"><<span class="hljs-name" style="color: rgb(150, 203, 254);">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string" style="color: rgb(168, 255, 96);">"rock"</span>></span>Rock<span class="hljs-tag" style="color: rgb(150, 203, 254);"></<span class="hljs-name" style="color: rgb(150, 203, 254);">label</span>></span>
<span class="hljs-tag" style="color: rgb(150, 203, 254);"><<span class="hljs-name" style="color: rgb(150, 203, 254);">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string" style="color: rgb(168, 255, 96);">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string" style="color: rgb(168, 255, 96);">"choice"</span> <span class="hljs-attr">id</span>=<span class="hljs-string" style="color: rgb(168, 255, 96);">"rock"</span> <span class="hljs-attr">value</span>=<span class="hljs-string" style="color: rgb(168, 255, 96);">"rock"</span>></span>
<span class="hljs-tag" style="color: rgb(150, 203, 254);"><<span class="hljs-name" style="color: rgb(150, 203, 254);">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string" style="color: rgb(168, 255, 96);">"paper"</span>></span>Paper<span class="hljs-tag" style="color: rgb(150, 203, 254);"></<span class="hljs-name" style="color: rgb(150, 203, 254);">label</span>></span>
<span class="hljs-tag" style="color: rgb(150, 203, 254);"><<span class="hljs-name" style="color: rgb(150, 203, 254);">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string" style="color: rgb(168, 255, 96);">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string" style="color: rgb(168, 255, 96);">"choice"</span> <span class="hljs-attr">id</span>=<span class="hljs-string" style="color: rgb(168, 255, 96);">"paper"</span> <span class="hljs-attr">value</span>=<span class="hljs-string" style="color: rgb(168, 255, 96);">"paper"</span>></span>
<span class="hljs-tag" style="color: rgb(150, 203, 254);"><<span class="hljs-name" style="color: rgb(150, 203, 254);">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string" style="color: rgb(168, 255, 96);">"scissors"</span>></span>Scissors<span class="hljs-tag" style="color: rgb(150, 203, 254);"></<span class="hljs-name" style="color: rgb(150, 203, 254);">label</span>></span>
<span class="hljs-tag" style="color: rgb(150, 203, 254);"><<span class="hljs-name" style="color: rgb(150, 203, 254);">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string" style="color: rgb(168, 255, 96);">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string" style="color: rgb(168, 255, 96);">"choice"</span> <span class="hljs-attr">id</span>=<span class="hljs-string" style="color: rgb(168, 255, 96);">"scissors"</span> <span class="hljs-attr">value</span>=<span class="hljs-string" style="color: rgb(168, 255, 96);">"scissors"</span>></span>
<span class="hljs-tag" style="color: rgb(150, 203, 254);"><<span class="hljs-name" style="color: rgb(150, 203, 254);">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string" style="color: rgb(168, 255, 96);">"submit"</span>></span>Play<span class="hljs-tag" style="color: rgb(150, 203, 254);"></<span class="hljs-name" style="color: rgb(150, 203, 254);">button</span>></span>
<span class="hljs-tag" style="color: rgb(150, 203, 254);"></<span class="hljs-name" style="color: rgb(150, 203, 254);">form</span>></span>
<span class="hljs-tag" style="color: rgb(150, 203, 254);"></<span class="hljs-name" style="color: rgb(150, 203, 254);">body</span>></span>
<span class="hljs-tag" style="color: rgb(150, 203, 254);"></<span class="hljs-name" style="color: rgb(150, 203, 254);">html</span>></span></span></pre></code><figcaption class="stk-reset stk-description" data-ce-tag="description"></figcaption></figure><p class="stk-reset" data-ce-tag="paragraph">Не удивляйтесь, что мы вставили HTML-код в PHP-файл, — это нормально. PHP умеет работать с HTML.</p><p class="stk-reset" data-ce-tag="paragraph">Но вернёмся к коду: мы создали простой игровой интерфейс, который состоит из трёх кнопок с выбором вариантов. Также мы добавили кнопку, чтобы отправлять данные в <u class="stk-reset">GameController</u> и получать результат игры <u class="stk-reset">$result</u>, если она уже была сыграна.</p><p class="stk-reset" data-ce-tag="paragraph">Результат игры нужен, чтобы мы могли видеть, кто победил в прошлой игре. А чтобы постоянно не выводить этот текст, мы сперва проверяем, была ли переменная <u class="stk-reset">$result</u> объявлена через <u class="stk-reset">GameController</u>.</p><p class="stk-reset" data-ce-tag="paragraph">Теперь мы можем запустить наш сервер и посмотреть на результат:</p><figure class="stk-reset stk-embed_rendered" data-ce-tag="embed"><code class="stk-code"><pre class="hljs" style="display: block; overflow-x: auto; padding: 0.5em; background: rgb(0, 0, 0); color: rgb(248, 248, 248);"><span class="hljs-attribute" style="color: rgb(255, 255, 182);">php</span> artisan serve</pre></code><figcaption class="stk-reset stk-description" data-ce-tag="description"></figcaption></figure><p class="stk-reset" data-ce-tag="paragraph">Видим то, что и хотели увидеть:</p><figure class="stk-reset stk-image-figure" data-ce-tag="image-figure"><div class="stk-mask" data-ce-tag="mask"><img src="/upload/setka_images/13133230032023_35e8ec2c216ebe3b8a886221f50a89fb11b30057.png" data-image-id="51794" data-image-name="15.png" width="1540" height="866" loading="lazy" class="stk-image stk-reset"/></div><figcaption style="display:block" class="stk-reset stk-description" data-ce-tag="description"><em class="stk-reset">Скриншот: Skillbox Media</em></figcaption></figure><p class="stk-reset" data-ce-tag="paragraph">Если нажать на одну из кнопок, можно узнать, кто победил:</p><figure class="stk-reset stk-image-figure" data-ce-tag="image-figure"><div class="stk-mask" data-ce-tag="mask"><img src="/upload/setka_images/13133230032023_977ecce833acf31fb612a48f20161dd32ced1cab.png" data-image-id="51795" data-image-name="16.png" width="1540" height="866" loading="lazy" class="stk-image stk-reset"/></div><figcaption style="display:block" class="stk-reset stk-description" data-ce-tag="description"><em class="stk-reset">Скриншот: Skillbox Media</em></figcaption></figure><p class="stk-reset" data-ce-tag="paragraph">Но сразу проявляется одна проблема: мы не знаем, какие ходы сделал компьютер, а какие — мы. Давайте это исправим.</p><p class="stk-reset" data-ce-tag="paragraph">Заходим обратно в файл <u class="stk-reset">GameController.php</u> и изменяем всего одну строку:</p><figure class="stk-reset stk-embed_rendered" data-ce-tag="embed"><code class="stk-code"><pre class="hljs" style="display: block; overflow-x: auto; padding: 0.5em; background: rgb(0, 0, 0); color: rgb(248, 248, 248);"><span class="hljs-keyword" style="color: rgb(150, 203, 254);">return</span> view(<span class="hljs-string" style="color: rgb(168, 255, 96);">'game'</span>, [<span class="hljs-string" style="color: rgb(168, 255, 96);">'result'</span> => $result, <span class="hljs-string" style="color: rgb(168, 255, 96);">'player_choice'</span> => $playerChoice, <span class="hljs-string" style="color: rgb(168, 255, 96);">'computer_choice'</span> => $computerChoice]);</pre></code><figcaption class="stk-reset stk-description" data-ce-tag="description"></figcaption></figure><p class="stk-reset" data-ce-tag="paragraph">Теперь мы будем возвращать в наше представление дополнительные переменные. Внесём изменения и в файл <u class="stk-reset">game.blade.php</u>:</p><figure class="stk-reset stk-embed_rendered" data-ce-tag="embed"><code class="stk-code"><pre class="hljs" style="display: block; overflow-x: auto; padding: 0.5em; background: rgb(0, 0, 0); color: rgb(248, 248, 248);">@<span class="hljs-keyword" style="color: rgb(150, 203, 254);">if</span>(isset($result))
<p>You played {{ $player_choice }}</p>
<p>Computer played {{ $computer_choice }}</p>
<p>You {{ $result }}!</p>
@endif</pre></code><figcaption class="stk-reset stk-description" data-ce-tag="description"></figcaption></figure><p class="stk-reset" data-ce-tag="paragraph">Перезапускаем сервер и видим, что теперь всё работает корректно:</p><figure class="stk-reset stk-image-figure" data-ce-tag="image-figure"><div class="stk-mask" data-ce-tag="mask"><img src="/upload/setka_images/13143130032023_3511985f8d2fe60f5a689701dcfbe84110df1893.png" data-image-id="51796" data-image-name="17.png" width="1540" height="866" loading="lazy" class="stk-image stk-reset"/></div><figcaption style="display:block" class="stk-reset stk-description" data-ce-tag="description"><em class="stk-reset">Скриншот: Skillbox Media</em></figcaption></figure><p class="stk-reset" data-ce-tag="paragraph">Осталось вывести результаты последних игр, и наше приложение будет готово. Для простоты будем учитывать статистику последних десяти игр.</p><p class="stk-reset" data-ce-tag="paragraph">Для этого необходимо изменить файл <u class="stk-reset" data-gtm-vis-has-fired-10171822_255="1">GameController.php</u>, а вернее функции <u class="stk-reset" data-gtm-vis-has-fired-10171822_255="1">index()</u> и <u class="stk-reset" data-gtm-vis-has-fired-10171822_255="1">play()</u>:</p><figure class="stk-reset stk-embed_rendered" data-ce-tag="embed"><code class="stk-code"><pre class="hljs" style="display: block; overflow-x: auto; padding: 0.5em; background: rgb(0, 0, 0); color: rgb(248, 248, 248);"><span class="hljs-keyword" style="color: rgb(150, 203, 254);">public</span> <span class="hljs-function"><span class="hljs-keyword" style="color: rgb(150, 203, 254);">function</span> <span class="hljs-title" style="color: rgb(255, 255, 182);">index</span><span class="hljs-params">()</span>
</span>{
$last_games = DB::table(<span class="hljs-string" style="color: rgb(168, 255, 96);">'game_statistics'</span>)
->orderBy(<span class="hljs-string" style="color: rgb(168, 255, 96);">'created_at'</span>, <span class="hljs-string" style="color: rgb(168, 255, 96);">'desc'</span>)
->limit(<span class="hljs-number" style="color: rgb(255, 115, 253);">10</span>)
->get();
<span class="hljs-keyword" style="color: rgb(150, 203, 254);">return</span> view(<span class="hljs-string" style="color: rgb(168, 255, 96);">'game'</span>, [<span class="hljs-string" style="color: rgb(168, 255, 96);">'last_games'</span> => $last_games]);
}
<span class="hljs-keyword" style="color: rgb(150, 203, 254);">public</span> <span class="hljs-function"><span class="hljs-keyword" style="color: rgb(150, 203, 254);">function</span> <span class="hljs-title" style="color: rgb(255, 255, 182);">play</span><span class="hljs-params">(Request $request)</span>
</span>{
$last_games = DB::table(<span class="hljs-string" style="color: rgb(168, 255, 96);">'game_statistics'</span>)
->orderBy(<span class="hljs-string" style="color: rgb(168, 255, 96);">'created_at'</span>, <span class="hljs-string" style="color: rgb(168, 255, 96);">'desc'</span>)
->limit(<span class="hljs-number" style="color: rgb(255, 115, 253);">10</span>)
->get();
$playerChoice = $request->input(<span class="hljs-string" style="color: rgb(168, 255, 96);">'choice'</span>);
...
<span class="hljs-comment" style="color: rgb(124, 124, 124);">// Возвращаем результат игры в представление</span>
<span class="hljs-keyword" style="color: rgb(150, 203, 254);">return</span> view(<span class="hljs-string" style="color: rgb(168, 255, 96);">'game'</span>, [<span class="hljs-string" style="color: rgb(168, 255, 96);">'result'</span> => $result, <span class="hljs-string" style="color: rgb(168, 255, 96);">'player_choice'</span> => $playerChoice, <span class="hljs-string" style="color: rgb(168, 255, 96);">'computer_choice'</span> => $computerChoice, <span class="hljs-string" style="color: rgb(168, 255, 96);">'last_games'</span> => $last_games]);
}</pre></code><figcaption class="stk-reset stk-description" data-ce-tag="description"></figcaption></figure><p class="stk-reset" data-ce-tag="paragraph">Мы опустили несколько строк, чтобы показать лишь самые важные фрагменты. Как видите, у нас появилась новая переменная <u class="stk-reset" data-gtm-vis-has-fired-10171822_255="1">$last_games</u>, в которую помещаются 10 последних строк базы данных. Делается это с помощью двух методов: <u class="stk-reset" data-gtm-vis-has-fired-10171822_255="1">orderBy()</u>, который используется, чтобы доставать только самые свежие игры, и <u class="stk-reset" data-gtm-vis-has-fired-10171822_255="1">limit(10)</u>, который помогает ограничить их количество десятью.</p><p class="stk-reset" data-ce-tag="paragraph">В каждом представлении мы также добавляем этот список в качестве возвращаемого значения.</p><p class="stk-reset" data-ce-tag="paragraph">Теперь нужно поправить файл <u class="stk-reset">game.blade.php</u> и отобразить эти игры:</p><figure class="stk-reset stk-embed_rendered" data-ce-tag="embed"><code class="stk-code"><pre class="hljs" style="display: block; overflow-x: auto; padding: 0.5em; background: rgb(0, 0, 0); color: rgb(248, 248, 248);"><span class="xml"><span class="hljs-tag" style="color: rgb(150, 203, 254);"><<span class="hljs-name" style="color: rgb(150, 203, 254);">ul</span>></span>
@foreach ($last_games as $last_game)
<span class="hljs-tag" style="color: rgb(150, 203, 254);"><<span class="hljs-name" style="color: rgb(150, 203, 254);">li</span>></span>
<span class="hljs-tag" style="color: rgb(150, 203, 254);"><<span class="hljs-name" style="color: rgb(150, 203, 254);">p</span>></span>You </span><span class="hljs-template-variable" style="color: rgb(198, 197, 254);">{{ $last_game->result }}</span><span class="xml"><span class="hljs-tag" style="color: rgb(150, 203, 254);"></<span class="hljs-name" style="color: rgb(150, 203, 254);">p</span>></span>
<span class="hljs-tag" style="color: rgb(150, 203, 254);"><<span class="hljs-name" style="color: rgb(150, 203, 254);">p</span>></span>You played </span><span class="hljs-template-variable" style="color: rgb(198, 197, 254);">{{ $last_game->player_choice }}</span><span class="xml"><span class="hljs-tag" style="color: rgb(150, 203, 254);"></<span class="hljs-name" style="color: rgb(150, 203, 254);">p</span>></span>
<span class="hljs-tag" style="color: rgb(150, 203, 254);"><<span class="hljs-name" style="color: rgb(150, 203, 254);">p</span>></span>Computer played </span><span class="hljs-template-variable" style="color: rgb(198, 197, 254);">{{ $last_game->computer_choice }}</span><span class="xml"><span class="hljs-tag" style="color: rgb(150, 203, 254);"></<span class="hljs-name" style="color: rgb(150, 203, 254);">p</span>></span>
<span class="hljs-tag" style="color: rgb(150, 203, 254);"></<span class="hljs-name" style="color: rgb(150, 203, 254);">li</span>></span>
@endforeach
<span class="hljs-tag" style="color: rgb(150, 203, 254);"></<span class="hljs-name" style="color: rgb(150, 203, 254);">ul</span>></span></span></pre></code><figcaption class="stk-reset stk-description" data-ce-tag="description"></figcaption></figure><p class="stk-reset" data-ce-tag="paragraph">Этот код просто создаёт ненумерованный список, который располагается после формы. Внутри списка мы добавляем элементы <u class="stk-reset"><li></u> через цикл <u class="stk-reset">@foreach</u>. В нём мы проходим по всем нашим играм и выводим для каждой игры результат, ход игрока и компьютера.</p><p class="stk-reset" data-ce-tag="paragraph">Сохраним файлы и перезапустим сервер:</p><figure class="stk-reset stk-image-figure" data-ce-tag="image-figure"><div class="stk-mask" data-ce-tag="mask"><img src="/upload/setka_images/13161430032023_5df0b482fb1dc77b26b81c121d5af0d3e5869e14.png" data-image-id="51797" data-image-name="18.png" width="1540" height="928" loading="lazy" class="stk-image stk-reset"/></div><figcaption style="display:block" class="stk-reset stk-description" data-ce-tag="description"><em class="stk-reset">Скриншот: Skillbox Media</em></figcaption></figure><p class="stk-reset" data-ce-tag="paragraph">Ура! У нас выводятся результаты завершённых игр, а новые игры успешно сохраняются.</p><h3 class="stk-theme_26309__style_medium_header stk-theme_26309__mb_05 stk-reset" data-ce-tag="paragraph"><strong class="stk-reset">Украшаем игру с помощью CSS</strong></h3><p class="stk-reset" data-ce-tag="paragraph">Осталось немного украсить сайт с помощью CSS, а затем насладиться его красотой.</p><div class="stk-grid" data-ce-tag="grid" data-stk-css="stkSw1bl"><div data-col-width="12" class="stk-grid-col stk-grid-col_last" data-ce-tag="grid-col"><p class="stk-reset " data-ce-tag="paragraph">Если вы не знаете, что такое CSS и как с ним работать, советуем прочитать <a href="https://skillbox.ru/media/code/chto_takoe_css/" target="_blank" class="stk-reset">нашу статью про каскадные таблицы стилей</a>.</p></div></div><p class="stk-reset" data-ce-tag="paragraph">Откроем папку <u class="stk-reset">public</u> и создадим файл <u class="stk-reset">styles.css</u>. Добавим в него следующий код:</p><figure class="stk-reset stk-embed_rendered" data-ce-tag="embed"><code class="stk-code"><pre class="hljs" style="display: block; overflow-x: auto; padding: 0.5em; background: rgb(0, 0, 0); color: rgb(248, 248, 248);"><span class="hljs-selector-tag" style="color: rgb(150, 203, 254);">body</span> {
<span class="hljs-attribute" style="color: rgb(255, 255, 182);">font-family</span>: Arial, sans-serif;
<span class="hljs-attribute" style="color: rgb(255, 255, 182);">background-color</span>: <span class="hljs-number" style="color: rgb(255, 115, 253);">#f5f5f5</span>;
}
<span class="hljs-selector-tag" style="color: rgb(150, 203, 254);">h1</span> {
<span class="hljs-attribute" style="color: rgb(255, 255, 182);">text-align</span>: center;
<span class="hljs-attribute" style="color: rgb(255, 255, 182);">margin-top</span>: <span class="hljs-number" style="color: rgb(255, 115, 253);">50px</span>;
}
<span class="hljs-selector-tag" style="color: rgb(150, 203, 254);">form</span> {
<span class="hljs-attribute" style="color: rgb(255, 255, 182);">display</span>: flex;
<span class="hljs-attribute" style="color: rgb(255, 255, 182);">flex-direction</span>: column;
<span class="hljs-attribute" style="color: rgb(255, 255, 182);">align-items</span>: center;
<span class="hljs-attribute" style="color: rgb(255, 255, 182);">margin-top</span>: <span class="hljs-number" style="color: rgb(255, 115, 253);">30px</span>;
}
<span class="hljs-selector-tag" style="color: rgb(150, 203, 254);">label</span> {
<span class="hljs-attribute" style="color: rgb(255, 255, 182);">margin-right</span>: <span class="hljs-number" style="color: rgb(255, 115, 253);">70px</span>;
<span class="hljs-attribute" style="color: rgb(255, 255, 182);">margin-top</span>: <span class="hljs-number" style="color: rgb(255, 115, 253);">20px</span>;
<span class="hljs-attribute" style="color: rgb(255, 255, 182);">font-size</span>: <span class="hljs-number" style="color: rgb(255, 115, 253);">20px</span>;
}
<span class="hljs-selector-tag" style="color: rgb(150, 203, 254);">input</span><span class="hljs-selector-attr" style="color: rgb(168, 255, 96);">[type="radio"]</span> {
<span class="hljs-attribute" style="color: rgb(255, 255, 182);">margin-left</span>: <span class="hljs-number" style="color: rgb(255, 115, 253);">10px</span>;
<span class="hljs-attribute" style="color: rgb(255, 255, 182);">padding-bottom</span>: <span class="hljs-number" style="color: rgb(255, 115, 253);">50px</span>;
}
<span class="hljs-selector-tag" style="color: rgb(150, 203, 254);">button</span><span class="hljs-selector-attr" style="color: rgb(168, 255, 96);">[type="submit"]</span> {
<span class="hljs-attribute" style="color: rgb(255, 255, 182);">margin-top</span>: <span class="hljs-number" style="color: rgb(255, 115, 253);">20px</span>;
<span class="hljs-attribute" style="color: rgb(255, 255, 182);">background-color</span>: <span class="hljs-number" style="color: rgb(255, 115, 253);">#008CBA</span>;
<span class="hljs-attribute" style="color: rgb(255, 255, 182);">color</span>: white;
<span class="hljs-attribute" style="color: rgb(255, 255, 182);">border</span>: none;
<span class="hljs-attribute" style="color: rgb(255, 255, 182);">padding</span>: <span class="hljs-number" style="color: rgb(255, 115, 253);">10px</span> <span class="hljs-number" style="color: rgb(255, 115, 253);">20px</span>;
<span class="hljs-attribute" style="color: rgb(255, 255, 182);">border-radius</span>: <span class="hljs-number" style="color: rgb(255, 115, 253);">5px</span>;
<span class="hljs-attribute" style="color: rgb(255, 255, 182);">cursor</span>: pointer;
<span class="hljs-attribute" style="color: rgb(255, 255, 182);">transition</span>: background-color <span class="hljs-number" style="color: rgb(255, 115, 253);">0.3s</span> ease;
}
<span class="hljs-selector-tag" style="color: rgb(150, 203, 254);">button</span><span class="hljs-selector-attr" style="color: rgb(168, 255, 96);">[type="submit"]</span><span class="hljs-selector-pseudo" style="color: rgb(168, 255, 96);">:hover</span> {
<span class="hljs-attribute" style="color: rgb(255, 255, 182);">background-color</span>: <span class="hljs-number" style="color: rgb(255, 115, 253);">#006B9F</span>;
}
<span class="hljs-selector-tag" style="color: rgb(150, 203, 254);">p</span> {
<span class="hljs-attribute" style="color: rgb(255, 255, 182);">text-align</span>: center;
<span class="hljs-attribute" style="color: rgb(255, 255, 182);">margin-top</span>: <span class="hljs-number" style="color: rgb(255, 115, 253);">20px</span>;
<span class="hljs-attribute" style="color: rgb(255, 255, 182);">font-size</span>: <span class="hljs-number" style="color: rgb(255, 115, 253);">24px</span>;
<span class="hljs-attribute" style="color: rgb(255, 255, 182);">font-weight</span>: bold;
}
<span class="hljs-selector-tag" style="color: rgb(150, 203, 254);">ul</span> {
<span class="hljs-attribute" style="color: rgb(255, 255, 182);">list-style-type</span>: none;
}
<span class="hljs-selector-tag" style="color: rgb(150, 203, 254);">li</span> {
<span class="hljs-attribute" style="color: rgb(255, 255, 182);">background</span>: <span class="hljs-number" style="color: rgb(255, 115, 253);">#dadada</span>;
}
</pre></code><figcaption class="stk-reset stk-description" data-ce-tag="description"></figcaption></figure><p class="stk-reset" data-ce-tag="paragraph">Здесь мы немного причесали все элементы страницы, чтобы они отображались чуть симпатичнее. Например, в теге <u class="stk-reset">body</u> мы задали шрифт и цвет фона, а для всех параграфов <u class="stk-reset">p</u> задали размер шрифта, сделали его жирным и выровняли текст по центру.</p><p class="stk-reset" data-ce-tag="paragraph">Теперь сохраним CSS-файл и откроем файл <u class="stk-reset">game.blade.php</u>, чтобы подключить в него новые стили:</p><figure class="stk-reset stk-embed_rendered" data-ce-tag="embed"><code class="stk-code"><pre class="hljs" style="display: block; overflow-x: auto; padding: 0.5em; background: rgb(0, 0, 0); color: rgb(248, 248, 248);"><span class="xml"><span class="hljs-meta" style="color: rgb(124, 124, 124);"><!DOCTYPE html></span>
<span class="hljs-tag" style="color: rgb(150, 203, 254);"><<span class="hljs-name" style="color: rgb(150, 203, 254);">html</span>></span>
<span class="hljs-tag" style="color: rgb(150, 203, 254);"><<span class="hljs-name" style="color: rgb(150, 203, 254);">head</span>></span>
<span class="hljs-tag" style="color: rgb(150, 203, 254);"><<span class="hljs-name" style="color: rgb(150, 203, 254);">title</span>></span>Rock Paper Scissors<span class="hljs-tag" style="color: rgb(150, 203, 254);"></<span class="hljs-name" style="color: rgb(150, 203, 254);">title</span>></span>
<span class="hljs-tag" style="color: rgb(150, 203, 254);"><<span class="hljs-name" style="color: rgb(150, 203, 254);">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string" style="color: rgb(168, 255, 96);">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string" style="color: rgb(168, 255, 96);">"</span></span></span><span class="hljs-template-variable" style="color: rgb(198, 197, 254);">{{ asset('styles.css') }}</span><span class="xml"><span class="hljs-tag" style="color: rgb(150, 203, 254);"><span class="hljs-string" style="color: rgb(168, 255, 96);">"</span>></span>
<span class="hljs-tag" style="color: rgb(150, 203, 254);"></<span class="hljs-name" style="color: rgb(150, 203, 254);">head</span>></span>
<span class="hljs-tag" style="color: rgb(150, 203, 254);"><<span class="hljs-name" style="color: rgb(150, 203, 254);">body</span>></span>
...
<span class="hljs-tag" style="color: rgb(150, 203, 254);"></<span class="hljs-name" style="color: rgb(150, 203, 254);">body</span>></span>
<span class="hljs-tag" style="color: rgb(150, 203, 254);"></<span class="hljs-name" style="color: rgb(150, 203, 254);">html</span>></span></span></pre></code><figcaption class="stk-reset stk-description" data-ce-tag="description"></figcaption></figure><p class="stk-reset" data-ce-tag="paragraph">Получилось примерно так:</p><figure class="stk-reset stk-image-figure" data-ce-tag="image-figure"><div class="stk-mask" data-ce-tag="mask"><img src="/upload/setka_images/13161730032023_4cbe6f4354dda2f27002951462e6105f47be6d89.png" data-image-id="51798" data-image-name="19.png" width="1540" height="930" loading="lazy" class="stk-image stk-reset"/></div><figcaption style="display:block" class="stk-reset stk-description" data-ce-tag="description"><em class="stk-reset">Скриншот: Skillbox Media</em></figcaption></figure><p class="stk-reset" data-ce-tag="paragraph">Не лучший дизайн, но концепцию вы, надеюсь, поняли. Можете попробовать самостоятельно довести стили до совершенства и отправить игру на какую-нибудь премию в области веб-дизайна.</p><p class="stk-reset" data-ce-tag="paragraph">А вот и полный код всех файлов, которые мы создавали:</p><details class="stk-content-spoiler stk-container stk-reset stk-theme_26309__mb_05" data-ce-tag="container" data-container-name="Спойлер"><summary class="stk-container stk-reset" data-ce-tag="container" data-container-name="Переключатель спойлера"><p class="stk-reset stk-theme_26309__style_font_style-1629786048064" data-ce-tag="paragraph"><strong class="stk-reset">web.php:</strong></p></summary><div class="stk-container" data-ce-tag="container" data-container-name="Контент спойлера"><figure class="stk-reset stk-embed_rendered" data-ce-tag="embed"><code class="stk-code"><pre class="hljs" style="display: block; overflow-x: auto; padding: 0.5em; background: rgb(0, 0, 0); color: rgb(248, 248, 248);"><span class="hljs-meta" style="color: rgb(124, 124, 124);"><?php</span>
<span class="hljs-keyword" style="color: rgb(150, 203, 254);">namespace</span> <span class="hljs-title" style="color: rgb(255, 255, 182);">App</span>\<span class="hljs-title" style="color: rgb(255, 255, 182);">Http</span>\<span class="hljs-title" style="color: rgb(255, 255, 182);">Controllers</span>;
<span class="hljs-keyword" style="color: rgb(150, 203, 254);">use</span> <span class="hljs-title" style="color: rgb(255, 255, 182);">Illuminate</span>\<span class="hljs-title" style="color: rgb(255, 255, 182);">Support</span>\<span class="hljs-title" style="color: rgb(255, 255, 182);">Facades</span>\<span class="hljs-title" style="color: rgb(255, 255, 182);">Route</span>;
Route::get(<span class="hljs-string" style="color: rgb(168, 255, 96);">'/'</span>, [GameController::class, <span class="hljs-string" style="color: rgb(168, 255, 96);">'index'</span>])->name(<span class="hljs-string" style="color: rgb(168, 255, 96);">'game.index'</span>);
Route::post(<span class="hljs-string" style="color: rgb(168, 255, 96);">'/play'</span>, [GameController::class, <span class="hljs-string" style="color: rgb(168, 255, 96);">'play'</span>])->name(<span class="hljs-string" style="color: rgb(168, 255, 96);">'game.play'</span>);</pre></code><figcaption class="stk-reset stk-description" data-ce-tag="description"></figcaption></figure></div></details><details class="stk-content-spoiler stk-container stk-reset stk-theme_26309__mb_05" data-ce-tag="container" data-container-name="Спойлер"><summary class="stk-container stk-reset" data-ce-tag="container" data-container-name="Переключатель спойлера"><p class="stk-reset stk-theme_26309__style_font_style-1629786048064" data-ce-tag="paragraph"><strong class="stk-reset">GameController.php:</strong></p></summary><div class="stk-container" data-ce-tag="container" data-container-name="Контент спойлера"><figure class="stk-reset stk-embed_rendered" data-ce-tag="embed"><code class="stk-code"><pre class="hljs" style="display: block; overflow-x: auto; padding: 0.5em; background: rgb(0, 0, 0); color: rgb(248, 248, 248);"><span class="hljs-meta" style="color: rgb(124, 124, 124);"><?php</span>
<span class="hljs-keyword" style="color: rgb(150, 203, 254);">namespace</span> <span class="hljs-title" style="color: rgb(255, 255, 182);">App</span>\<span class="hljs-title" style="color: rgb(255, 255, 182);">Http</span>\<span class="hljs-title" style="color: rgb(255, 255, 182);">Controllers</span>;
<span class="hljs-keyword" style="color: rgb(150, 203, 254);">use</span> <span class="hljs-title" style="color: rgb(255, 255, 182);">Illuminate</span>\<span class="hljs-title" style="color: rgb(255, 255, 182);">Http</span>\<span class="hljs-title" style="color: rgb(255, 255, 182);">Request</span>;
<span class="hljs-keyword" style="color: rgb(150, 203, 254);">use</span> <span class="hljs-title" style="color: rgb(255, 255, 182);">Illuminate</span>\<span class="hljs-title" style="color: rgb(255, 255, 182);">Support</span>\<span class="hljs-title" style="color: rgb(255, 255, 182);">Facades</span>\<span class="hljs-title" style="color: rgb(255, 255, 182);">DB</span>;
<span class="hljs-class"><span class="hljs-keyword" style="color: rgb(150, 203, 254);">class</span> <span class="hljs-title" style="color: rgb(255, 255, 182);">GameController</span> <span class="hljs-keyword" style="color: rgb(150, 203, 254);">extends</span> <span class="hljs-title" style="color: rgb(255, 255, 182);">Controller</span>
</span>{
<span class="hljs-keyword" style="color: rgb(150, 203, 254);">public</span> <span class="hljs-function"><span class="hljs-keyword" style="color: rgb(150, 203, 254);">function</span> <span class="hljs-title" style="color: rgb(255, 255, 182);">index</span><span class="hljs-params">()</span>
</span>{
$last_games = DB::table(<span class="hljs-string" style="color: rgb(168, 255, 96);">'game_statistics'</span>)
->orderBy(<span class="hljs-string" style="color: rgb(168, 255, 96);">'created_at'</span>, <span class="hljs-string" style="color: rgb(168, 255, 96);">'desc'</span>)
->limit(<span class="hljs-number" style="color: rgb(255, 115, 253);">10</span>)
->get();
<span class="hljs-keyword" style="color: rgb(150, 203, 254);">return</span> view(<span class="hljs-string" style="color: rgb(168, 255, 96);">'game'</span>, [<span class="hljs-string" style="color: rgb(168, 255, 96);">'last_games'</span> => $last_games]);
}
<span class="hljs-keyword" style="color: rgb(150, 203, 254);">public</span> <span class="hljs-function"><span class="hljs-keyword" style="color: rgb(150, 203, 254);">function</span> <span class="hljs-title" style="color: rgb(255, 255, 182);">play</span><span class="hljs-params">(Request $request)</span>
</span>{
$last_games = DB::table(<span class="hljs-string" style="color: rgb(168, 255, 96);">'game_statistics'</span>)
->orderBy(<span class="hljs-string" style="color: rgb(168, 255, 96);">'created_at'</span>, <span class="hljs-string" style="color: rgb(168, 255, 96);">'desc'</span>)
->limit(<span class="hljs-number" style="color: rgb(255, 115, 253);">10</span>)
->get();
$playerChoice = $request->input(<span class="hljs-string" style="color: rgb(168, 255, 96);">'choice'</span>);
<span class="hljs-comment" style="color: rgb(124, 124, 124);">// Генерируем случайный ход для компьютера</span>
$computerChoice = rand(<span class="hljs-number" style="color: rgb(255, 115, 253);">1</span>, <span class="hljs-number" style="color: rgb(255, 115, 253);">3</span>);
<span class="hljs-keyword" style="color: rgb(150, 203, 254);">if</span> ($computerChoice == <span class="hljs-number" style="color: rgb(255, 115, 253);">1</span>) {
$computerChoice = <span class="hljs-string" style="color: rgb(168, 255, 96);">'rock'</span>;
} <span class="hljs-keyword" style="color: rgb(150, 203, 254);">elseif</span> ($computerChoice == <span class="hljs-number" style="color: rgb(255, 115, 253);">2</span>) {
$computerChoice = <span class="hljs-string" style="color: rgb(168, 255, 96);">'paper'</span>;
} <span class="hljs-keyword" style="color: rgb(150, 203, 254);">else</span> {
$computerChoice = <span class="hljs-string" style="color: rgb(168, 255, 96);">'scissors'</span>;
}
<span class="hljs-comment" style="color: rgb(124, 124, 124);">// Получаем результат игры</span>
<span class="hljs-keyword" style="color: rgb(150, 203, 254);">if</span> ($playerChoice == $computerChoice) {
$result = <span class="hljs-string" style="color: rgb(168, 255, 96);">'tie'</span>;
} <span class="hljs-keyword" style="color: rgb(150, 203, 254);">elseif</span> (($playerChoice == <span class="hljs-string" style="color: rgb(168, 255, 96);">'rock'</span> && $computerChoice == <span class="hljs-string" style="color: rgb(168, 255, 96);">'scissors'</span>) || ($playerChoice == <span class="hljs-string" style="color: rgb(168, 255, 96);">'paper'</span> && $computerChoice == <span class="hljs-string" style="color: rgb(168, 255, 96);">'rock'</span>) || ($playerChoice == <span class="hljs-string" style="color: rgb(168, 255, 96);">'scissors'</span> && $computerChoice == <span class="hljs-string" style="color: rgb(168, 255, 96);">'paper'</span>)) {
$result = <span class="hljs-string" style="color: rgb(168, 255, 96);">'win'</span>;
} <span class="hljs-keyword" style="color: rgb(150, 203, 254);">else</span> {
$result = <span class="hljs-string" style="color: rgb(168, 255, 96);">'lose'</span>;
}
<span class="hljs-comment" style="color: rgb(124, 124, 124);">// Сохраняем статистику в базу данных</span>
DB::table(<span class="hljs-string" style="color: rgb(168, 255, 96);">'game_statistics'</span>)->insert([
<span class="hljs-string" style="color: rgb(168, 255, 96);">'player_name'</span> => <span class="hljs-string" style="color: rgb(168, 255, 96);">'Player 1'</span>,
<span class="hljs-string" style="color: rgb(168, 255, 96);">'computer_choice'</span> => $computerChoice,
<span class="hljs-string" style="color: rgb(168, 255, 96);">'player_choice'</span> => $playerChoice,
<span class="hljs-string" style="color: rgb(168, 255, 96);">'result'</span> => $result,
<span class="hljs-string" style="color: rgb(168, 255, 96);">'created_at'</span> => now(),
<span class="hljs-string" style="color: rgb(168, 255, 96);">'updated_at'</span> => now(),
]);
<span class="hljs-comment" style="color: rgb(124, 124, 124);">// Возвращаем результат игры в представление</span>
<span class="hljs-keyword" style="color: rgb(150, 203, 254);">return</span> view(<span class="hljs-string" style="color: rgb(168, 255, 96);">'game'</span>, [<span class="hljs-string" style="color: rgb(168, 255, 96);">'result'</span> => $result, <span class="hljs-string" style="color: rgb(168, 255, 96);">'player_choice'</span> => $playerChoice, <span class="hljs-string" style="color: rgb(168, 255, 96);">'computer_choice'</span> => $computerChoice, <span class="hljs-string" style="color: rgb(168, 255, 96);">'last_games'</span> => $last_games]);
}
}</pre></code><figcaption class="stk-reset stk-description" data-ce-tag="description"></figcaption></figure></div></details><details class="stk-content-spoiler stk-container stk-reset stk-theme_26309__mb_05" data-ce-tag="container" data-container-name="Спойлер"><summary class="stk-container stk-reset" data-ce-tag="container" data-container-name="Переключатель спойлера"><p class="stk-reset stk-theme_26309__style_font_style-1629786048064" data-ce-tag="paragraph"><strong class="stk-reset">game.blade.php:</strong></p></summary><div class="stk-container" data-ce-tag="container" data-container-name="Контент спойлера"><figure class="stk-reset stk-embed_rendered" data-ce-tag="embed"><code class="stk-code"><pre class="hljs" style="display: block; overflow-x: auto; padding: 0.5em; background: rgb(0, 0, 0); color: rgb(248, 248, 248);"><span class="xml"><span class="hljs-meta" style="color: rgb(124, 124, 124);"><!DOCTYPE html></span>
<span class="hljs-tag" style="color: rgb(150, 203, 254);"><<span class="hljs-name" style="color: rgb(150, 203, 254);">html</span>></span>
<span class="hljs-tag" style="color: rgb(150, 203, 254);"><<span class="hljs-name" style="color: rgb(150, 203, 254);">head</span>></span>
<span class="hljs-tag" style="color: rgb(150, 203, 254);"><<span class="hljs-name" style="color: rgb(150, 203, 254);">title</span>></span>Rock Paper Scissors<span class="hljs-tag" style="color: rgb(150, 203, 254);"></<span class="hljs-name" style="color: rgb(150, 203, 254);">title</span>></span>
<span class="hljs-tag" style="color: rgb(150, 203, 254);"><<span class="hljs-name" style="color: rgb(150, 203, 254);">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string" style="color: rgb(168, 255, 96);">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string" style="color: rgb(168, 255, 96);">"</span></span></span><span class="hljs-template-variable" style="color: rgb(198, 197, 254);">{{ asset('styles.css') }}</span><span class="xml"><span class="hljs-tag" style="color: rgb(150, 203, 254);"><span class="hljs-string" style="color: rgb(168, 255, 96);">"</span>></span>
<span class="hljs-tag" style="color: rgb(150, 203, 254);"></<span class="hljs-name" style="color: rgb(150, 203, 254);">head</span>></span>
<span class="hljs-tag" style="color: rgb(150, 203, 254);"><<span class="hljs-name" style="color: rgb(150, 203, 254);">body</span>></span>
<span class="hljs-tag" style="color: rgb(150, 203, 254);"><<span class="hljs-name" style="color: rgb(150, 203, 254);">h1</span>></span>Rock Paper Scissors<span class="hljs-tag" style="color: rgb(150, 203, 254);"></<span class="hljs-name" style="color: rgb(150, 203, 254);">h1</span>></span>
@if(isset($result))
<span class="hljs-tag" style="color: rgb(150, 203, 254);"><<span class="hljs-name" style="color: rgb(150, 203, 254);">p</span>></span>You played </span><span class="hljs-template-variable" style="color: rgb(198, 197, 254);">{{ $player_choice }}</span><span class="xml"><span class="hljs-tag" style="color: rgb(150, 203, 254);"></<span class="hljs-name" style="color: rgb(150, 203, 254);">p</span>></span>
<span class="hljs-tag" style="color: rgb(150, 203, 254);"><<span class="hljs-name" style="color: rgb(150, 203, 254);">p</span>></span>Computer played </span><span class="hljs-template-variable" style="color: rgb(198, 197, 254);">{{ $computer_choice }}</span><span class="xml"><span class="hljs-tag" style="color: rgb(150, 203, 254);"></<span class="hljs-name" style="color: rgb(150, 203, 254);">p</span>></span>
<span class="hljs-tag" style="color: rgb(150, 203, 254);"><<span class="hljs-name" style="color: rgb(150, 203, 254);">p</span>></span>You </span><span class="hljs-template-variable" style="color: rgb(198, 197, 254);">{{ $result }}</span><span class="xml">!<span class="hljs-tag" style="color: rgb(150, 203, 254);"></<span class="hljs-name" style="color: rgb(150, 203, 254);">p</span>></span>
@endif
<span class="hljs-tag" style="color: rgb(150, 203, 254);"><<span class="hljs-name" style="color: rgb(150, 203, 254);">form</span> <span class="hljs-attr">method</span>=<span class="hljs-string" style="color: rgb(168, 255, 96);">"POST"</span> <span class="hljs-attr">action</span>=<span class="hljs-string" style="color: rgb(168, 255, 96);">"</span></span></span><span class="hljs-template-variable" style="color: rgb(198, 197, 254);">{{ route('game.play') }}</span><span class="xml"><span class="hljs-tag" style="color: rgb(150, 203, 254);"><span class="hljs-string" style="color: rgb(168, 255, 96);">"</span>></span>
@csrf
<span class="hljs-tag" style="color: rgb(150, 203, 254);"><<span class="hljs-name" style="color: rgb(150, 203, 254);">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string" style="color: rgb(168, 255, 96);">"rock"</span>></span>Rock<span class="hljs-tag" style="color: rgb(150, 203, 254);"></<span class="hljs-name" style="color: rgb(150, 203, 254);">label</span>></span>
<span class="hljs-tag" style="color: rgb(150, 203, 254);"><<span class="hljs-name" style="color: rgb(150, 203, 254);">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string" style="color: rgb(168, 255, 96);">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string" style="color: rgb(168, 255, 96);">"choice"</span> <span class="hljs-attr">id</span>=<span class="hljs-string" style="color: rgb(168, 255, 96);">"rock"</span> <span class="hljs-attr">value</span>=<span class="hljs-string" style="color: rgb(168, 255, 96);">"rock"</span>></span>
<span class="hljs-tag" style="color: rgb(150, 203, 254);"><<span class="hljs-name" style="color: rgb(150, 203, 254);">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string" style="color: rgb(168, 255, 96);">"paper"</span>></span>Paper<span class="hljs-tag" style="color: rgb(150, 203, 254);"></<span class="hljs-name" style="color: rgb(150, 203, 254);">label</span>></span>
<span class="hljs-tag" style="color: rgb(150, 203, 254);"><<span class="hljs-name" style="color: rgb(150, 203, 254);">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string" style="color: rgb(168, 255, 96);">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string" style="color: rgb(168, 255, 96);">"choice"</span> <span class="hljs-attr">id</span>=<span class="hljs-string" style="color: rgb(168, 255, 96);">"paper"</span> <span class="hljs-attr">value</span>=<span class="hljs-string" style="color: rgb(168, 255, 96);">"paper"</span>></span>
<span class="hljs-tag" style="color: rgb(150, 203, 254);"><<span class="hljs-name" style="color: rgb(150, 203, 254);">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string" style="color: rgb(168, 255, 96);">"scissors"</span>></span>Scissors<span class="hljs-tag" style="color: rgb(150, 203, 254);"></<span class="hljs-name" style="color: rgb(150, 203, 254);">label</span>></span>
<span class="hljs-tag" style="color: rgb(150, 203, 254);"><<span class="hljs-name" style="color: rgb(150, 203, 254);">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string" style="color: rgb(168, 255, 96);">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string" style="color: rgb(168, 255, 96);">"choice"</span> <span class="hljs-attr">id</span>=<span class="hljs-string" style="color: rgb(168, 255, 96);">"scissors"</span> <span class="hljs-attr">value</span>=<span class="hljs-string" style="color: rgb(168, 255, 96);">"scissors"</span>></span>
<span class="hljs-tag" style="color: rgb(150, 203, 254);"><<span class="hljs-name" style="color: rgb(150, 203, 254);">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string" style="color: rgb(168, 255, 96);">"submit"</span>></span>Play<span class="hljs-tag" style="color: rgb(150, 203, 254);"></<span class="hljs-name" style="color: rgb(150, 203, 254);">button</span>></span>
<span class="hljs-tag" style="color: rgb(150, 203, 254);"></<span class="hljs-name" style="color: rgb(150, 203, 254);">form</span>></span>
<span class="hljs-tag" style="color: rgb(150, 203, 254);"><<span class="hljs-name" style="color: rgb(150, 203, 254);">ul</span>></span>
@foreach ($last_games as $last_game)
<span class="hljs-tag" style="color: rgb(150, 203, 254);"><<span class="hljs-name" style="color: rgb(150, 203, 254);">li</span>></span>
<span class="hljs-tag" style="color: rgb(150, 203, 254);"><<span class="hljs-name" style="color: rgb(150, 203, 254);">p</span>></span>You </span><span class="hljs-template-variable" style="color: rgb(198, 197, 254);">{{ $last_game->result }}</span><span class="xml"><span class="hljs-tag" style="color: rgb(150, 203, 254);"></<span class="hljs-name" style="color: rgb(150, 203, 254);">p</span>></span>
<span class="hljs-tag" style="color: rgb(150, 203, 254);"><<span class="hljs-name" style="color: rgb(150, 203, 254);">p</span>></span>You played </span><span class="hljs-template-variable" style="color: rgb(198, 197, 254);">{{ $last_game->player_choice }}</span><span class="xml"><span class="hljs-tag" style="color: rgb(150, 203, 254);"></<span class="hljs-name" style="color: rgb(150, 203, 254);">p</span>></span>
<span class="hljs-tag" style="color: rgb(150, 203, 254);"><<span class="hljs-name" style="color: rgb(150, 203, 254);">p</span>></span>Computer played </span><span class="hljs-template-variable" style="color: rgb(198, 197, 254);">{{ $last_game->computer_choice }}</span><span class="xml"><span class="hljs-tag" style="color: rgb(150, 203, 254);"></<span class="hljs-name" style="color: rgb(150, 203, 254);">p</span>></span>
<span class="hljs-tag" style="color: rgb(150, 203, 254);"></<span class="hljs-name" style="color: rgb(150, 203, 254);">li</span>></span>
@endforeach
<span class="hljs-tag" style="color: rgb(150, 203, 254);"></<span class="hljs-name" style="color: rgb(150, 203, 254);">ul</span>></span>
<span class="hljs-tag" style="color: rgb(150, 203, 254);"></<span class="hljs-name" style="color: rgb(150, 203, 254);">body</span>></span>
<span class="hljs-tag" style="color: rgb(150, 203, 254);"></<span class="hljs-name" style="color: rgb(150, 203, 254);">html</span>></span></span></pre></code><figcaption class="stk-reset stk-description" data-ce-tag="description"></figcaption></figure></div></details><details class="stk-content-spoiler stk-container stk-reset stk-theme_26309__mb_05" data-ce-tag="container" data-container-name="Спойлер"><summary class="stk-container stk-reset" data-ce-tag="container" data-container-name="Переключатель спойлера"><p class="stk-reset" data-ce-tag="paragraph"><strong class="stk-reset">styles.css:</strong></p></summary><div class="stk-container" data-ce-tag="container" data-container-name="Контент спойлера"><figure class="stk-reset stk-embed_rendered" data-ce-tag="embed"><code class="stk-code"><pre class="hljs" style="display: block; overflow-x: auto; padding: 0.5em; background: rgb(0, 0, 0); color: rgb(248, 248, 248);"><span class="hljs-selector-tag" style="color: rgb(150, 203, 254);">body</span> {
<span class="hljs-attribute" style="color: rgb(255, 255, 182);">font-family</span>: Arial, sans-serif;
<span class="hljs-attribute" style="color: rgb(255, 255, 182);">background-color</span>: <span class="hljs-number" style="color: rgb(255, 115, 253);">#f5f5f5</span>;
}
<span class="hljs-selector-tag" style="color: rgb(150, 203, 254);">h1</span> {
<span class="hljs-attribute" style="color: rgb(255, 255, 182);">text-align</span>: center;
<span class="hljs-attribute" style="color: rgb(255, 255, 182);">margin-top</span>: <span class="hljs-number" style="color: rgb(255, 115, 253);">50px</span>;
}
<span class="hljs-selector-tag" style="color: rgb(150, 203, 254);">form</span> {
<span class="hljs-attribute" style="color: rgb(255, 255, 182);">display</span>: flex;
<span class="hljs-attribute" style="color: rgb(255, 255, 182);">flex-direction</span>: column;
<span class="hljs-attribute" style="color: rgb(255, 255, 182);">align-items</span>: center;
<span class="hljs-attribute" style="color: rgb(255, 255, 182);">margin-top</span>: <span class="hljs-number" style="color: rgb(255, 115, 253);">30px</span>;
}
<span class="hljs-selector-tag" style="color: rgb(150, 203, 254);">label</span> {
<span class="hljs-attribute" style="color: rgb(255, 255, 182);">margin-right</span>: <span class="hljs-number" style="color: rgb(255, 115, 253);">70px</span>;
<span class="hljs-attribute" style="color: rgb(255, 255, 182);">margin-top</span>: <span class="hljs-number" style="color: rgb(255, 115, 253);">20px</span>;
<span class="hljs-attribute" style="color: rgb(255, 255, 182);">font-size</span>: <span class="hljs-number" style="color: rgb(255, 115, 253);">20px</span>;
}
<span class="hljs-selector-tag" style="color: rgb(150, 203, 254);">input</span><span class="hljs-selector-attr" style="color: rgb(168, 255, 96);">[type="radio"]</span> {
<span class="hljs-attribute" style="color: rgb(255, 255, 182);">margin-left</span>: <span class="hljs-number" style="color: rgb(255, 115, 253);">10px</span>;
<span class="hljs-attribute" style="color: rgb(255, 255, 182);">padding-bottom</span>: <span class="hljs-number" style="color: rgb(255, 115, 253);">50px</span>;
}
<span class="hljs-selector-tag" style="color: rgb(150, 203, 254);">button</span><span class="hljs-selector-attr" style="color: rgb(168, 255, 96);">[type="submit"]</span> {
<span class="hljs-attribute" style="color: rgb(255, 255, 182);">margin-top</span>: <span class="hljs-number" style="color: rgb(255, 115, 253);">20px</span>;
<span class="hljs-attribute" style="color: rgb(255, 255, 182);">background-color</span>: <span class="hljs-number" style="color: rgb(255, 115, 253);">#008CBA</span>;
<span class="hljs-attribute" style="color: rgb(255, 255, 182);">color</span>: white;
<span class="hljs-attribute" style="color: rgb(255, 255, 182);">border</span>: none;
<span class="hljs-attribute" style="color: rgb(255, 255, 182);">padding</span>: <span class="hljs-number" style="color: rgb(255, 115, 253);">10px</span> <span class="hljs-number" style="color: rgb(255, 115, 253);">20px</span>;
<span class="hljs-attribute" style="color: rgb(255, 255, 182);">border-radius</span>: <span class="hljs-number" style="color: rgb(255, 115, 253);">5px</span>;
<span class="hljs-attribute" style="color: rgb(255, 255, 182);">cursor</span>: pointer;
<span class="hljs-attribute" style="color: rgb(255, 255, 182);">transition</span>: background-color <span class="hljs-number" style="color: rgb(255, 115, 253);">0.3s</span> ease;
}
<span class="hljs-selector-tag" style="color: rgb(150, 203, 254);">button</span><span class="hljs-selector-attr" style="color: rgb(168, 255, 96);">[type="submit"]</span><span class="hljs-selector-pseudo" style="color: rgb(168, 255, 96);">:hover</span> {
<span class="hljs-attribute" style="color: rgb(255, 255, 182);">background-color</span>: <span class="hljs-number" style="color: rgb(255, 115, 253);">#006B9F</span>;
}
<span class="hljs-selector-tag" style="color: rgb(150, 203, 254);">p</span> {
<span class="hljs-attribute" style="color: rgb(255, 255, 182);">text-align</span>: center;
<span class="hljs-attribute" style="color: rgb(255, 255, 182);">margin-top</span>: <span class="hljs-number" style="color: rgb(255, 115, 253);">20px</span>;
<span class="hljs-attribute" style="color: rgb(255, 255, 182);">font-size</span>: <span class="hljs-number" style="color: rgb(255, 115, 253);">24px</span>;
<span class="hljs-attribute" style="color: rgb(255, 255, 182);">font-weight</span>: bold;
}
<span class="hljs-selector-tag" style="color: rgb(150, 203, 254);">ul</span> {
<span class="hljs-attribute" style="color: rgb(255, 255, 182);">list-style-type</span>: none;
}
<span class="hljs-selector-tag" style="color: rgb(150, 203, 254);">li</span> {
<span class="hljs-attribute" style="color: rgb(255, 255, 182);">background</span>: <span class="hljs-number" style="color: rgb(255, 115, 253);">#dadada</span>;
}</pre></code><figcaption class="stk-reset stk-description" data-ce-tag="description"></figcaption></figure></div></details><details class="stk-content-spoiler stk-container stk-reset stk-theme_26309__mb_05" data-ce-tag="container" data-container-name="Спойлер"><summary class="stk-container stk-reset" data-ce-tag="container" data-container-name="Переключатель спойлера"><p class="stk-reset" data-ce-tag="paragraph"><strong class="stk-reset">_create_game_statistics_table.php:</strong></p></summary><div class="stk-container" data-ce-tag="container" data-container-name="Контент спойлера"><figure class="stk-reset stk-embed_rendered" data-ce-tag="embed"><code class="stk-code"><pre class="hljs" style="display: block; overflow-x: auto; padding: 0.5em; background: rgb(0, 0, 0); color: rgb(248, 248, 248);"><span class="hljs-meta" style="color: rgb(124, 124, 124);"><?php</span>
<span class="hljs-keyword" style="color: rgb(150, 203, 254);">use</span> <span class="hljs-title" style="color: rgb(255, 255, 182);">Illuminate</span>\<span class="hljs-title" style="color: rgb(255, 255, 182);">Database</span>\<span class="hljs-title" style="color: rgb(255, 255, 182);">Migrations</span>\<span class="hljs-title" style="color: rgb(255, 255, 182);">Migration</span>;
<span class="hljs-keyword" style="color: rgb(150, 203, 254);">use</span> <span class="hljs-title" style="color: rgb(255, 255, 182);">Illuminate</span>\<span class="hljs-title" style="color: rgb(255, 255, 182);">Database</span>\<span class="hljs-title" style="color: rgb(255, 255, 182);">Schema</span>\<span class="hljs-title" style="color: rgb(255, 255, 182);">Blueprint</span>;
<span class="hljs-keyword" style="color: rgb(150, 203, 254);">use</span> <span class="hljs-title" style="color: rgb(255, 255, 182);">Illuminate</span>\<span class="hljs-title" style="color: rgb(255, 255, 182);">Support</span>\<span class="hljs-title" style="color: rgb(255, 255, 182);">Facades</span>\<span class="hljs-title" style="color: rgb(255, 255, 182);">Schema</span>;
<span class="hljs-keyword" style="color: rgb(150, 203, 254);">return</span> <span class="hljs-keyword" style="color: rgb(150, 203, 254);">new</span> <span class="hljs-class"><span class="hljs-keyword" style="color: rgb(150, 203, 254);">class</span> <span class="hljs-keyword" style="color: rgb(150, 203, 254);">extends</span> <span class="hljs-title" style="color: rgb(255, 255, 182);">Migration</span>
</span>{
<span class="hljs-comment" style="color: rgb(124, 124, 124);">/**
* Run the migrations.
*/</span>
<span class="hljs-keyword" style="color: rgb(150, 203, 254);">public</span> <span class="hljs-function"><span class="hljs-keyword" style="color: rgb(150, 203, 254);">function</span> <span class="hljs-title" style="color: rgb(255, 255, 182);">up</span><span class="hljs-params">()</span>: <span class="hljs-title" style="color: rgb(255, 255, 182);">void</span>
</span>{
Schema::create(<span class="hljs-string" style="color: rgb(168, 255, 96);">'game_statistics'</span>, <span class="hljs-function"><span class="hljs-keyword" style="color: rgb(150, 203, 254);">function</span> <span class="hljs-params">(Blueprint $table)</span> </span>{
$table->id();
$table->string(<span class="hljs-string" style="color: rgb(168, 255, 96);">'player_name'</span>);
$table->string(<span class="hljs-string" style="color: rgb(168, 255, 96);">'computer_choice'</span>);
$table->string(<span class="hljs-string" style="color: rgb(168, 255, 96);">'player_choice'</span>);
$table->string(<span class="hljs-string" style="color: rgb(168, 255, 96);">'result'</span>);
$table->timestamps();
});
}
<span class="hljs-comment" style="color: rgb(124, 124, 124);">/**
* Reverse the migrations.
*/</span>
<span class="hljs-keyword" style="color: rgb(150, 203, 254);">public</span> <span class="hljs-function"><span class="hljs-keyword" style="color: rgb(150, 203, 254);">function</span> <span class="hljs-title" style="color: rgb(255, 255, 182);">down</span><span class="hljs-params">()</span>: <span class="hljs-title" style="color: rgb(255, 255, 182);">void</span>
</span>{
Schema::dropIfExists(<span class="hljs-string" style="color: rgb(168, 255, 96);">'game_statistics'</span>);
}
};</pre></code><figcaption class="stk-reset stk-description" data-ce-tag="description"></figcaption></figure></div></details></div></div><div class="stk-theme_26309__mb_15 stk-grid" data-ce-tag="grid"><div data-col-width="12" class="stk-grid-col stk-grid-col_last" data-ce-tag="grid-col"><h2 class="stk-reset stk-theme_26309__style_large_header" data-ce-tag="paragraph" id="stk-6"><strong class="stk-reset">Что запомнить</strong></h2><p class="stk-reset" data-ce-tag="paragraph">Мы узнали, что Laravel — это мощный и довольно простой фреймворк для создания веб-приложений. Освоить его можно за пару месяцев, а начать писать на нём — уже сегодня.</p><p class="stk-theme_26309__mb_05 stk-reset" data-ce-tag="paragraph">Чтобы лучше понять Laravel, советуем написать собственное приложение или попробовать доработать наше, например:</p><ul class="stk-theme_26309__pad_hor_1 stk-reset" data-ce-tag="list"><li class="stk-reset stk-list-item" data-ce-tag="list-item"><a href="https://laravel.com/docs/10.x/authorization" target="_blank" class="stk-reset">добавить авторизацию</a>;</li><li class="stk-reset stk-list-item" data-ce-tag="list-item"><a href="https://laravel.com/docs/10.x/testing" target="_blank" class="stk-reset">протестировать приложение</a>;</li><li class="stk-reset stk-list-item" data-ce-tag="list-item"><a href="https://laravel.com/docs/10.x/eloquent" target="_blank" class="stk-reset">встроить ORM</a>.</li></ul><p class="stk-reset" data-ce-tag="paragraph">Читайте <a class="stk-reset" href="https://laravel.com/docs/10.x" target="_blank">документацию</a> и набирайтесь опыта. Успехов!</p><div class="stk-grid stk-grid__layout_columns" data-stk-css="stkR6PEz" data-ce-tag="grid"><div data-col-width="1" class="stk-grid-col align-left valign-top stk-mobile-hidden" data-ce-tag="grid-col" data-stk-css="" data-stk-css-m=""><a class="sklbx-link sklbx-link--fb stk-container stk-container-link stk-reset" data-ce-tag="container" data-container-name="Telegram" href="https://t.me/skillbox_media_code" target="_blank"><svg class="sklbx-link__icon" width="25" height="20" xmlns="http://www.w3.org/2000/svg">
<path d="m9.417 15.181-.397 5.584c.568 0 .814-.244 1.109-.537l2.663-2.545 5.518 4.041c1.012.564 1.725.267 1.998-.931l3.622-16.972.001-.001c.321-1.496-.541-2.081-1.527-1.714l-21.29 8.151c-1.453.564-1.431 1.374-.247 1.741l5.443 1.693 12.643-7.911c.595-.394 1.136-.176.691.218z" fill-rule="evenodd"></path>
</svg></a></div><div data-col-width="11" class="stk-grid-col stk-grid-col_last" data-ce-tag="grid-col"><p class="stk-reset stk-theme_26309__mb_05 stk-theme_26309__style_font_style-1629786048064" data-ce-tag="paragraph" data-stk-css="stkxjW8Z">Больше интересного про код в нашем <a class="stk-reset" href="https://t.me/skillbox_media_code" target="_blank">телеграм-канале</a>. Подписывайтесь!</p></div></div><div class="stk-grid" data-ce-tag="grid" data-stk-css="stkLSIXh"><div data-col-width="12" class="stk-grid-col stk-grid-col_last" data-ce-tag="grid-col" data-stk-css="" data-stk-css-m=""><p class="stk-reset stk-theme_26309__style_small_text stk-theme_26309__mb_05" data-ce-tag="paragraph"><strong class="stk-reset">Читайте также:</strong></p><ul class="stk-theme_26309__style_small_text stk-theme_26309__pad_hor_1 stk-reset" data-ce-tag="list"><li class="stk-theme_26309__style_small_text stk-reset stk-list-item" data-ce-tag="list-item"><a href="https://skillbox.ru/media/code/kak_nachat_programmirovat_na_php/" target="_blank" class="stk-reset">Как начать программировать на PHP</a></li><li class="stk-theme_26309__style_small_text stk-reset stk-list-item" data-ce-tag="list-item"><a href="https://skillbox.ru/media/code/story-maksim-saxarov/" target="_blank" class="stk-reset">«Из рекламного агентства меня уволили за то, что я учился делать сайты прямо на работе»</a></li><li class="stk-theme_26309__style_small_text stk-reset stk-list-item" data-ce-tag="list-item"><a href="https://skillbox.ru/media/code/frontend_i_backend_razrabotka/" target="_blank" class="stk-reset">Frontend и backend: что это, в чём различия и что выбрать</a></li></ul></div></div></div></div><style data-stk-css="stksQAmJ" media="all" class="">
[data-stk-css="stksQAmJ"]:not(#stk):not(#stk):not(style) {
border-left: 4px solid #f5a74f;
padding: 20px;
background-color: rgba(254, 245, 224, 1)
}
</style><style data-stk-css="stkLSIXh" media="all" class="">
[data-stk-css="stkLSIXh"]:not(#stk):not(#stk):not(style) {
padding: 20px;
background-color: rgba(254, 245, 224, 1)
}
</style><style data-stk-css="stkR6PEz" class="" media="all">
[data-stk-css="stkR6PEz"]:not(#stk):not(#stk):not(style) {
border-radius: 16px;
padding: 20px;
border: 1px solid;
border-color: #E4E4E4;
background-color: rgba(241, 242, 246, 1)
}
</style><style data-stk-css="stkxjW8Z" class="" media="all">
[data-stk-css="stkxjW8Z"]:not(#stk):not(#stk):not(style) {
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
-o-hyphens: none;
hyphens: none
}
</style><style data-stk-css="stkSw1bl" media="all" class="">
[data-stk-css="stkSw1bl"]:not(#stk):not(#stk):not(style) {
border-left: 4px solid #f5a74f;
padding: 20px;
background-color: rgba(254, 245, 224, 1)
}
</style><style data-stk-css="stk7UxCG" media="all" class="">
[data-stk-css="stk7UxCG"]:not(#stk):not(#stk):not(style) {
border-left: 4px solid #f5a74f;
padding: 20px;
background-color: rgba(254, 245, 224, 1)
}
</style><style data-stk-css="stkSdiUU" media="all" class="">
[data-stk-css="stkSdiUU"]:not(#stk):not(#stk):not(style) {
border-left: 4px solid #f5a74f;
padding: 20px;
background-color: rgba(254, 245, 224, 1)
}
</style><style data-stk-css="stkO7xFA" media="all" class="">
[data-stk-css="stkO7xFA"]:not(#stk):not(#stk):not(style) {
border-left: 4px solid #f5a74f;
padding: 20px;
background-color: rgba(254, 245, 224, 1)
}
</style></div> </div>
</div>
</div>
</div>
<div class="col-xl-9 col-lg-8 col-poster">
<div class="article-preview-info">
</div>
</div>
<noindex>
<div class="share" data-nosnippet>
<button class="share__handler-btn ">
<span class="share__handler-icon">
<svg width="11" height="12" viewBox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11 4.99902L6 0V2.99805C2.688 2.99805 0 5.68505 0 8.99805V11.498H0.0980225C0.765022 8.91205 3.107 6.99805 5.901 6.99805H6.00098V9.99805L11 4.99902Z" fill="currentColor"/>
</svg>
</span>
<span class="share__handler-text">Поделиться</span>
</button>
<div class="share__list">
<a href="#" class="share__item" data-code="vk">
<span class="share__item-icon share__item-icon--vk">
<svg width="9" height="5" viewBox="0 0 9 5" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.04776 4.98054H4.53996C4.62377 4.97136 4.70279 4.9361 4.76621 4.87951C4.81226 4.81209 4.83594 4.73139 4.83369 4.64925C4.83369 4.64925 4.82574 3.94629 5.1314 3.84125C5.43701 3.73621 5.826 4.51998 6.23879 4.82297C6.39281 4.95308 6.59128 5.01558 6.79053 4.99669L7.89399 4.98054C7.89399 4.98054 8.47355 4.94415 8.19965 4.46339C7.98372 4.08315 7.70589 3.743 7.37799 3.45744C6.68338 2.77872 6.77865 2.8878 7.61219 1.71216C8.12024 0.997077 8.32269 0.556717 8.25918 0.370875C8.14651 0.254767 7.98299 0.205914 7.82655 0.241594L6.58018 0.249674C6.52565 0.241067 6.46984 0.251007 6.42141 0.277954C6.37298 0.314507 6.33466 0.363228 6.31025 0.419356C6.18259 0.772814 6.0287 1.11586 5.8498 1.44552C5.29807 2.43936 5.07579 2.49188 4.98451 2.43128C4.77416 2.28584 4.82574 1.85356 4.82574 1.54248C4.82574 0.580957 4.96468 0.176954 4.55979 0.0719133C4.36879 0.0254376 4.17259 0.00505841 3.97631 0.0113129C3.62834 -0.0214164 3.27745 0.017045 2.94429 0.124433C2.8014 0.197154 2.69423 0.358753 2.76171 0.370875C2.90334 0.385518 3.03406 0.454932 3.12688 0.564795C3.21268 0.750336 3.25481 0.953675 3.24993 1.15868C3.24993 1.15868 3.32535 2.29392 3.07925 2.43532C2.91254 2.53228 2.68232 2.33432 2.18616 1.4334C2.01958 1.11848 1.87243 0.793298 1.74557 0.459754C1.72231 0.404013 1.68704 0.354309 1.64236 0.314316C1.58589 0.272672 1.52066 0.245006 1.45184 0.233514L0.268986 0.241594C0.181167 0.241154 0.0958013 0.271066 0.0268587 0.326434C-0.00595087 0.396174 -0.00882613 0.476652 0.0189202 0.548633C0.0189202 0.548633 0.947737 2.83932 1.99563 3.99477C2.51 4.60651 3.2568 4.96526 4.04776 4.98054Z" fill="white"/>
</svg>
</span>
<span class="share__item-text">Vkontakte</span>
</a>
<a href="#" class="share__item" data-code="tw">
<span class="share__item-icon share__item-icon--tw">
<svg width="9" height="7" viewBox="0 0 9 7" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.52788 0.00144284V0H5.9158L6.05754 0.027414C6.15204 0.0452114 6.23783 0.068535 6.31491 0.0973918C6.39201 0.126249 6.46661 0.159917 6.53872 0.198391C6.61083 0.236864 6.67623 0.276066 6.73492 0.315982C6.79311 0.355422 6.84533 0.397265 6.89158 0.441509C6.93733 0.486237 7.0087 0.49778 7.10568 0.476138C7.20266 0.454495 7.3071 0.424433 7.419 0.38596C7.5309 0.347487 7.64156 0.304201 7.75097 0.256104C7.86039 0.208007 7.92703 0.177469 7.95091 0.164484C7.97428 0.151022 7.98671 0.143808 7.98821 0.142841L7.98969 0.140677L7.99715 0.13707L8.00461 0.133463L8.01207 0.129856L8.01953 0.126249L8.02102 0.124084L8.02326 0.122642L8.02551 0.121199L8.02699 0.119034L8.03445 0.11687L8.04191 0.115427L8.04043 0.126249L8.03818 0.13707L8.03445 0.147891L8.03072 0.158713L8.02699 0.165927L8.02326 0.173141L8.01953 0.183962C8.01705 0.191176 8.01456 0.200793 8.01207 0.212819C8.00959 0.224845 7.98596 0.272935 7.9412 0.357103C7.89644 0.441271 7.84049 0.526637 7.77335 0.613208C7.70621 0.699778 7.64604 0.765182 7.59283 0.809434C7.53911 0.854162 7.50355 0.885421 7.48614 0.903219C7.46874 0.921492 7.4476 0.938323 7.42273 0.953718L7.38543 0.977525L7.37797 0.981132L7.37051 0.984739L7.36902 0.986903L7.36678 0.988346L7.36454 0.989789L7.36305 0.991953L7.35559 0.99556L7.34813 0.999168L7.34664 1.00133L7.3444 1.00277L7.34216 1.00422L7.34067 1.00638L7.33918 1.00855L7.33694 1.00999L7.3347 1.01143L7.33321 1.0136H7.37051L7.57939 0.970311C7.71865 0.941454 7.85168 0.906588 7.9785 0.865705L8.17992 0.800777L8.2023 0.793563L8.21349 0.789956L8.22095 0.786348L8.22841 0.782741L8.23587 0.779134L8.24333 0.775527L8.25825 0.773363L8.27317 0.77192V0.786348L8.26944 0.787791L8.26571 0.789956L8.26423 0.79212L8.26198 0.793563L8.25974 0.795006L8.25825 0.79717L8.25677 0.799334L8.25452 0.800777L8.25228 0.80222L8.25079 0.804384L8.24931 0.806548L8.24706 0.807991L8.24333 0.815205L8.2396 0.82242L8.23736 0.823862C8.23637 0.825305 8.20479 0.866181 8.14262 0.946504C8.08046 1.0273 8.04689 1.06818 8.04191 1.06915C8.03694 1.07059 8.02997 1.0778 8.02102 1.09079C8.01257 1.10425 7.95985 1.15788 7.86287 1.25166C7.76589 1.34545 7.67091 1.42889 7.57791 1.502C7.48441 1.57558 7.43716 1.666 7.43616 1.77325C7.43467 1.88002 7.42895 2.00074 7.419 2.13541C7.40905 2.27007 7.3904 2.41555 7.36305 2.57186C7.3357 2.72817 7.29342 2.90492 7.23623 3.10211C7.17904 3.29929 7.10941 3.49168 7.02735 3.67925C6.94529 3.86681 6.8595 4.03514 6.76998 4.18424C6.68046 4.33334 6.5984 4.45958 6.5238 4.56299C6.4492 4.66639 6.37336 4.76378 6.29626 4.85516C6.21918 4.94654 6.12171 5.04947 6.00384 5.16393C5.88547 5.27791 5.82082 5.34044 5.80988 5.3515C5.79844 5.36208 5.74971 5.40152 5.66365 5.46981C5.57812 5.53858 5.48611 5.60736 5.38763 5.67614C5.28966 5.74443 5.19964 5.80143 5.11758 5.84711C5.03552 5.8928 4.93655 5.94498 4.82067 6.00366C4.70529 6.06282 4.58046 6.11765 4.44618 6.16815C4.3119 6.21865 4.17016 6.26554 4.02096 6.30882C3.87176 6.35211 3.72753 6.38578 3.58827 6.40982C3.44903 6.43387 3.29112 6.45431 3.11456 6.47114L2.84973 6.49639V6.5H2.36483V6.49639L2.30142 6.49279C2.25915 6.49038 2.22433 6.48797 2.19698 6.48557C2.16963 6.48317 2.06643 6.46994 1.88739 6.44589C1.70835 6.42185 1.56785 6.3978 1.4659 6.37375C1.36395 6.34971 1.21225 6.30401 1.01083 6.23668C0.809413 6.16935 0.637087 6.10129 0.493854 6.03252C0.351121 5.96422 0.261601 5.92094 0.225293 5.90266C0.189485 5.88487 0.149201 5.86275 0.10444 5.83629L0.0373001 5.79661L0.0358156 5.79445L0.0335701 5.79301L0.0313321 5.79156L0.0298401 5.7894L0.0223801 5.78579L0.0149201 5.78219L0.0134355 5.78002L0.01119 5.77858L0.00895204 5.77714L0.00746003 5.77497L0.00597548 5.77281L0.00373001 5.77137H0V5.75694L0.00746003 5.75838L0.0149201 5.76054L0.0484902 5.76415C0.0708703 5.76655 0.131796 5.77016 0.231261 5.77497C0.330733 5.77978 0.436412 5.77978 0.548312 5.77497C0.660213 5.77016 0.774605 5.75934 0.891474 5.74251C1.00835 5.72568 1.14636 5.69682 1.30551 5.65594C1.46466 5.61505 1.61087 5.56648 1.74416 5.51021C1.87695 5.45346 1.97144 5.41114 2.02764 5.38324C2.08334 5.35583 2.16838 5.30484 2.28277 5.2303L2.45435 5.11848L2.45584 5.11632L2.45808 5.11487L2.46033 5.11343L2.46181 5.11127L2.4633 5.1091L2.46554 5.10766L2.46779 5.10622L2.46927 5.10405L2.47673 5.10189L2.48419 5.10044L2.48568 5.09323L2.48792 5.08602L2.49017 5.08457L2.49165 5.08241L2.43197 5.0788C2.39219 5.0764 2.35364 5.07399 2.31634 5.07159C2.27904 5.06918 2.2206 5.05836 2.14103 5.03912C2.06146 5.01988 1.97567 4.99103 1.88366 4.95255C1.79165 4.91408 1.70213 4.86838 1.6151 4.81548C1.52807 4.76258 1.46515 4.71857 1.42636 4.68346C1.38807 4.64883 1.33833 4.59978 1.27716 4.53629C1.21648 4.47233 1.16376 4.40668 1.119 4.33934C1.07424 4.27202 1.03148 4.19433 0.990699 4.10633L0.928774 3.97503L0.925044 3.96421L0.921314 3.95339L0.919076 3.94617L0.917584 3.93896L0.928774 3.9404L0.939964 3.94256L1.02202 3.95339C1.07674 3.9606 1.16253 3.963 1.27939 3.9606C1.39627 3.9582 1.47709 3.95339 1.52185 3.94617C1.56661 3.93896 1.59396 3.93414 1.60391 3.93174L1.61883 3.92814L1.63748 3.92453L1.65613 3.92092L1.65762 3.91876L1.65986 3.91731L1.6621 3.91587L1.66359 3.91371L1.64867 3.9101L1.63375 3.90649L1.61883 3.90289L1.60391 3.89928L1.58899 3.89567C1.57904 3.89327 1.56164 3.88846 1.53677 3.88124C1.5119 3.87403 1.44476 3.84757 1.33535 3.80189C1.22594 3.7562 1.1389 3.71171 1.07424 3.66842C1.00943 3.62501 0.947626 3.57754 0.889235 3.5263C0.831047 3.47436 0.767145 3.40751 0.697513 3.32575C0.627888 3.24399 0.565724 3.149 0.511012 3.04079C0.456308 2.93257 0.415277 2.82917 0.387922 2.73058C0.360676 2.63256 0.3427 2.53235 0.334217 2.43119L0.320781 2.27969L0.328241 2.28113L0.335701 2.2833L0.343161 2.2869L0.350621 2.29051L0.358081 2.29412L0.365541 2.29772L0.481172 2.34822C0.558264 2.38189 0.653998 2.41075 0.768383 2.43479C0.882775 2.45884 0.951154 2.47207 0.973534 2.47447L1.0071 2.47808H1.07424L1.07276 2.47592L1.07051 2.47447L1.06828 2.47303L1.06678 2.47087L1.0653 2.4687L1.06305 2.46726L1.06082 2.46582L1.05932 2.46365L1.05186 2.46004L1.0444 2.45644L1.04292 2.45427L1.04067 2.45283L1.03844 2.45139L1.03694 2.44922L1.02948 2.44562L1.02202 2.44201L1.02054 2.43984C1.01905 2.43888 0.99766 2.42349 0.956376 2.39367C0.915592 2.36337 0.872823 2.32418 0.828063 2.27608C0.783303 2.22798 0.738543 2.17749 0.693783 2.12458C0.64894 2.07156 0.609 2.01483 0.574422 1.95505C0.539614 1.89493 0.502806 1.81846 0.464014 1.72564C0.425721 1.6333 0.396627 1.54023 0.376731 1.44645C0.356843 1.35266 0.345653 1.26008 0.343161 1.1687C0.340677 1.07732 0.343161 0.999168 0.350621 0.93424C0.358081 0.869312 0.373001 0.795965 0.395382 0.714206C0.417762 0.632448 0.450093 0.545877 0.492362 0.454495L0.555772 0.317425L0.559502 0.306604L0.563232 0.295782L0.565478 0.29434L0.566962 0.292175L0.568454 0.290011L0.570692 0.288568L0.572938 0.290011L0.574422 0.292175L0.575914 0.29434L0.578152 0.295782L0.580398 0.297225L0.581882 0.29939L0.583374 0.301554L0.585612 0.302997L0.589342 0.310211L0.593072 0.317425L0.595318 0.318868L0.596802 0.321032L0.697513 0.429245C0.764653 0.501387 0.844229 0.581948 0.936234 0.670921C1.02825 0.759894 1.07922 0.806065 1.08916 0.809434C1.09912 0.813279 1.11154 0.824338 1.12646 0.842619C1.14138 0.860417 1.19112 0.902981 1.27567 0.970311C1.36022 1.03764 1.47087 1.1158 1.60764 1.20477C1.74441 1.29375 1.89609 1.38152 2.0627 1.46809C2.22931 1.55466 2.40835 1.63281 2.59982 1.70255C2.7913 1.77229 2.92558 1.81798 3.00266 1.83962C3.07975 1.86127 3.21154 1.88892 3.39804 1.92259C3.58454 1.95625 3.72505 1.9779 3.81954 1.98751C3.91403 1.99713 3.97869 2.00266 4.0135 2.00411L4.06572 2.00555L4.06423 1.99473L4.06199 1.98391L4.04707 1.89373C4.03712 1.83361 4.03215 1.74944 4.03215 1.64123C4.03215 1.53302 4.04085 1.43322 4.05826 1.34184C4.07567 1.25046 4.10178 1.15788 4.13659 1.0641C4.1714 0.970311 4.20547 0.895038 4.23879 0.838291C4.27261 0.78202 4.31687 0.717814 4.37158 0.645671C4.42629 0.573529 4.49716 0.498985 4.58419 0.422031C4.67122 0.345077 4.77069 0.276542 4.88259 0.216426C4.99449 0.15631 5.09769 0.110615 5.19218 0.0793563C5.28668 0.0480971 5.36625 0.0276521 5.4309 0.0180355C5.49556 0.00841898 5.52788 0.00288568 5.52788 0.00144284Z" fill="white"/>
</svg>
</span>
<span class="share__item-text">Twitter</span>
</a>
<a href="#" class="share__item" data-code="tg">
<span class="share__item-icon share__item-icon--tg">
<svg width="10" height="7" viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.39589 3.04852C1.39589 3.04852 5.05491 1.51189 6.32392 0.9708C6.8104 0.754384 8.46012 0.0617918 8.46012 0.0617918C8.46012 0.0617918 9.22155 -0.241191 9.15809 0.494655C9.13692 0.797667 8.96773 1.85815 8.79854 3.00523C8.54472 4.62846 8.26976 6.40316 8.26976 6.40316C8.26976 6.40316 8.22746 6.90097 7.86791 6.98753C7.50836 7.0741 6.91613 6.68455 6.8104 6.59795C6.72577 6.53304 5.22411 5.5591 4.6742 5.08295C4.52614 4.9531 4.35695 4.6934 4.69533 4.39039C5.45676 3.67617 6.36622 2.78882 6.91613 2.2261C7.16995 1.96638 7.42374 1.36038 6.36622 2.09622C4.86456 3.15674 3.38403 4.15231 3.38403 4.15231C3.38403 4.15231 3.04561 4.36873 2.41111 4.17394C1.77657 3.97918 1.03631 3.71945 1.03631 3.71945C1.03631 3.71945 0.528726 3.39481 1.39589 3.04852Z" fill="white"/>
</svg>
</span>
<span class="share__item-text">Telegram</span>
</a>
<a href="#" class="share__item js-share-item-copy">
<span class="share__item-icon share__item-icon--copy">
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.19922 5.40327C4.37217 5.63449 4.59283 5.8258 4.84622 5.96425C5.09962 6.10269 5.37982 6.18501 5.66783 6.20564C5.95584 6.22627 6.24492 6.18471 6.51546 6.08379C6.78599 5.98287 7.03166 5.82495 7.2358 5.62074L8.44399 4.41255C8.81079 4.03277 9.01375 3.52412 9.00917 2.99615C9.00458 2.46818 8.79281 1.96313 8.41946 1.58978C8.04611 1.21644 7.54106 1.00466 7.01309 1.00008C6.48512 0.995488 5.97647 1.19845 5.59669 1.56525L4.904 2.25392" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M5.81002 4.59658C5.63707 4.36536 5.41641 4.17404 5.16302 4.0356C4.90962 3.89716 4.62942 3.81483 4.34141 3.79421C4.0534 3.77358 3.76432 3.81514 3.49379 3.91605C3.22325 4.01697 2.97758 4.17489 2.77344 4.3791L1.56525 5.58729C1.19845 5.96707 0.995488 6.47572 1.00008 7.0037C1.00466 7.53167 1.21644 8.03672 1.58978 8.41006C1.96313 8.78341 2.46818 8.99518 2.99615 8.99977C3.52412 9.00436 4.03277 8.80139 4.41255 8.43459L5.10122 7.74592" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
<span class="share__item-text">Скопировать ссылку</span>
</a>
</div>
</div>
</noindex>
</div>
<section class="container inset" data-banner="223321" data-source="214906" data-format="horizontal">
<section class="container inset" data-format="horizontal">
<div class="row">
<div class="col-lg-8 col-sm-12">
<a data-source="214906" data-banner="223321" target="_blank" href="https://skillbox.ru/course/profession-webdev/" class="article-advert-banner__link courseLink" data-format="horizontal" data-type="horizontal" data-courseid="3254">
<div class="inset__wrapper" style="background-color: #f2eeff;">
<div class="inset__content">
<h2 class="inset__header">Курс с помощью в трудоустройстве</h2>
<p class="inset__description">
Веб-разработчик
</p>
<ul class="inset__text" style="color:#000!important; list-style:'\2022 ' outside; margin-left:20px;">
<li style="list-style:'\2022 '; padding-left:10px; margin-bottom:6px">
Новый формат обучения по методике 4C/ID с интерактивными тренажёрами</li>
<li style="list-style:'\2022 '; padding-left:10px; margin-bottom:6px">
Вебинары с разработчиками из крупных компаний </li>
<li style="list-style:'\2022 '; padding-left:10px; margin-bottom:6px">
Более 25 актуальных инструментов для программистов </li>
</ul>
<p class="inset__button article-advert-banner__link" style="color:#000; background-color:#ffafff">
Узнать о курсе
</p>
</div>
<div class="inset__image">
<img width="250" src="https://cdn.skillbox.pro/landgen/blocks/start-screen/303997/lg/5afd2f4d-2bd5-4d5d-b9ed-d6ec819ac163.webp" height="250" alt="">
</div>
</div>
</a>
</div>
</div>
</section> </section>
<div style="align-content: center; background-color: black; overflow: hidden;">
<noindex>
<div style="display: flex; align-items: center; justify-content: center; background-color: black; height: 60px; color: white; text-align: center">
Листая дальше, вы перейдете на страницу <a style="text-decoration: underline;" data-type="scroll" href="https://bootcamp.skillbox.ru/it-jobs/?utm_source=media&utm_medium=banners&utm_campaign=all_all_media_banners_invite_bootcamp-759_all_code_skillbox">Как зарабатывать деньги на IT в 2026 - бесплатный курс «Старт с нуля»</a>
</div>
<div class="iframe-wrapper" style="height: 100vh; transform: scale(0.5);">
<iframe id="test_iframe" scrolling="no" style="overflow: hidden;margin: 0 auto;display: block; width: 100%; height: 100%" src="https://bootcamp.skillbox.ru/it-jobs/?utm_source=media&utm_medium=banners&utm_campaign=all_all_media_banners_invite_bootcamp-759_all_code_skillbox">
</iframe>
</div>
</noindex>
</div>
<script>
jQuery(document).ready(function($) {
$('footer.without-buttons').remove();
let iframeWrapper = $('.iframe-wrapper');
var check = false;
$(window).on('scroll', function() {
let iframeWrapperHeight = iframeWrapper.height();
let iframeWrapperOffset = iframeWrapper.offset().top - iframeWrapperHeight;
let scrollTop = $(window).scrollTop();
const {scrollHeight, clientHeight } = document.documentElement;
const maxScroll = scrollHeight - clientHeight;
const power = 1
const scale = (scrollTop / maxScroll) * power;
iframeWrapper.css('height', `${clientHeight}`)
if (scrollTop > iframeWrapperOffset) {
if(!check) {
document.dispatchEvent(new CustomEvent('articleAdvertBanner', {
detail: {
event: 'show',
id: 226244,
sourceId: 214906,
format: "new_banner"
}
}));
}
check = true;
iframeWrapper.css({'transform': `scale(${scale})`})
if (maxScroll === scrollTop || maxScroll === iframeWrapper.offset().top) {
redirect();
} else if (maxScroll <= scrollTop + 1 ) {
redirect();
}
}
function isNeedAddUtm(url)
{
if (typeof url !== 'string') {
return false;
}
var externalLinks = [
'freelancer.skillbox.ru',
'sale.skillbox.ru',
'course.skillbox.ru',
'interiordesign.skillbox.ru',
'iamwebdev.skillbox.ru',
'iammarketer.skillbox.ru',
'iamdesigner.skillbox.ru',
'live.skillbox.ru',
'b2b.skillbox.ru',
'highereducation.skillbox.ru',
'skillbox.ru/courses',
'skillbox.ru/sale',
'skillbox.ru/media'
];
for (var i = 0; i < externalLinks.length; i++) {
externalLinks[i] = escapeRegExp(externalLinks[i]);
}
var regexp = new RegExp('^http[s]?:\/\/(skillbox\.ru|' + escapeRegExp(window.location.host) + '|' + externalLinks.join('|') + ')\/(?!media/)[a-zA-Z0-9-_/]*');
return !!url.match(regexp);
}
function escapeRegExp(string) {
return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
}
function redirect() {
document.dispatchEvent(new CustomEvent('articleAdvertBanner', {
detail: {
event: 'click',
id: 226244,
sourceId: 214906,
format: "new_banner"
}
}));
var page = window.location.href;
var $article = $('section[data-article-text]');
var pageId = $article.data('articleid');
if(pageId === undefined)
{
pageId = 0;
}
window.dataLayer.push({
'event': 'go_to_course',
'courseID': 226244,
'page': page,
'pageID': pageId
});
var link = "https://bootcamp.skillbox.ru/it-jobs/?utm_source=media&utm_medium=banners&utm_campaign=all_all_media_banners_invite_bootcamp-759_all_code_skillbox";
if(isNeedAddUtm(link)) {
var urlSplit = link.split('?');
var urlBase = urlSplit[0] ? urlSplit[0] : '';
link = urlBase + '?utm_source=media&utm_medium=banners&utm_campaign=all_all_media_banners_banners_scroll_all_all_skillbox';
}
window.location.assign(link);
// var iframe = document.getElementById("test_iframe");
// var src = iframe.src;
// var document_frame = iframe.contentWindow.document.documentElement;
// var body = window.document.body.innerHTML;
// var title = iframe.contentWindow.document.head.title;
//
// window.history.pushState({
// "html": body,
// "pageTitle": title,
// "src": document.location.href
// }, '', src);
// window.addEventListener("popstate", function(e) {
// window.location.href = document.location;
// });
//
// document.documentElement.replaceWith(document_frame);
}
});
});
</script> </section>
<div class="article-banner" data-banner="223202" data-source="214906" data-format="vertical" data-type="vertical">
<div class="row">
<div class="col-sm-4 col-sm-12">
<a data-source="214906" data-banner="223202" href="https://skillbox.ru/course/profession-webdev/" target="_blank" style="display: block; text-decoration: none; color: inherit;">
<div class="inset__wrapper" style="background-color: #f2eeff;">
<div class="inset__content">
<h2 class="inset__header">Курс с помощью в трудоустройстве</h2>
<div class="inset__image" style="text-align: center; margin-bottom:-20px">
<img src="https://cdn.skillbox.pro/landgen/blocks/start-screen/303997/lg/5afd2f4d-2bd5-4d5d-b9ed-d6ec819ac163.webp" width="350" height="350" alt="">
</div>
<p class="inset__description" style="color:#000!important; padding-bottom:13px;">
Профессия Веб-разработчик
</p>
<p class="inset__text" style="color:#000!important">
Освойте востребованную профессию с нуля и добавьте более 60 проектов в портфолио. Учитесь онлайн, в удобном вам темпе.
</p>
<div class="inset__button article-advert-banner__link" style="color:#000; background-color:#ffafff; display: inline-block;">Узнать больше →</div>
</div>
</div>
</a>
</div>
</div> </div>
<a data-source="214906" data-banner="225164" target="_blank" href="https://skillbox.ru/course/profession-webdev/" class="article-banner article-advert-banner__link courseLink" style="background-color: #E9E9F5;" data-format="top" data-type="top" data-courseid="3522">
<div class="article-banner__img">
<img src="https://skillbox.ru/upload/setka_images/php.png" alt="">
</div>
<span class="article-banner__title">Курс с трудоустройством: «<u>Веб-разработчик</u>»</span>
<span class="article-banner__link">Узнать о курсе</span>
</a>
<div class="question">
<div class="container">
<div class="question__inner">
<div class="question__title">Понравилась статья?</div>
<a href="#" data-cur-url="/media/code/freymvork-laravel-kak-rabotaet-i-zachem-nuzhen/"
class="question__btn js-modalLink" data-mfp-src="#modalAuth">Да</a>
</div>
</div>
</div>
</div>
<span
data-area="article-bottom"
data-current-url="/media/code/freymvork-laravel-kak-rabotaet-i-zachem-nuzhen/"
data-id="214906">
</span>
</div>
<script type="application/ld+json">
{"@context":"http:\/\/schema.org","@type":"Article","url":"https:\/\/skillbox.ru\/media\/code\/freymvork-laravel-kak-rabotaet-i-zachem-nuzhen\/","headline":"\u0424\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a Laravel: \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0438\u00a0\u0437\u0430\u0447\u0435\u043c \u043d\u0443\u0436\u0435\u043d","articleSection":"\u041a\u043e\u0434","articleBody":"PHP \u2014 \u043a\u0440\u0443\u0442\u043e\u0439 \u0438 \u043d\u0430\u0434\u0451\u0436\u043d\u044b\u0439 \u044f\u0437\u044b\u043a \u0434\u043b\u044f \u0431\u044d\u043a\u0435\u043d\u0434\u0435\u0440\u043e\u0432. \r\n\u0415\u0433\u043e \u043b\u044e\u0431\u044f\u0442 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438 \u0438 \u0446\u0435\u043d\u044f\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438. \u041d\u043e \u0432\u0441\u044f \u0435\u0433\u043e \u043c\u043e\u0449\u044c \u0440\u0430\u0441\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430\u043c.\r\n\r\n\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u0443\u0437\u043d\u0430\u0435\u043c, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \r\nLaravel, \u0447\u0435\u043c \u043e\u043d \u0443\u0434\u043e\u0431\u0435\u043d \u0438 \u043f\u043e\u0447\u0435\u043c\u0443 \u043c\u043d\u043e\u0433\u0438\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442\u044b \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0438\u0442\u0430\u044e\u0442 \u0435\u0433\u043e \u0434\u0440\u0443\u0433\u0438\u043c PHP-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430\u043c. \u0410 \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u043a\u0440\u0435\u043f\u0438\u0442\u044c \u0437\u043d\u0430\u043d\u0438\u044f, \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u0438\u0433\u0440\u0443 \u00ab\u041a\u0430\u043c\u0435\u043d\u044c, \u043d\u043e\u0436\u043d\u0438\u0446\u044b, \u0431\u0443\u043c\u0430\u0433\u0430\u00bb.\r\n\r\n\u0412\u0441\u0451, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0437\u043d\u0430\u0442\u044c \u043f\u0440\u043e Laravel:\r\n\r\n- \u0447\u0442\u043e \u044d\u0442\u043e \u0442\u0430\u043a\u043e\u0435 [ #stk-1 ] ;\r\n- \u0447\u0435\u043c \u044d\u0442\u043e\u0442 PHP-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u043b\u0443\u0447\u0448\u0435 \u0434\u0440\u0443\u0433\u0438\u0445 [ #stk-2 ] \r\n;\r\n- \u0447\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0430 Laravel [ #stk-3 ] ;\r\n- \u0441 \u0447\u0435\u0433\u043e \u043d\u0430\u0447\u0430\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0443 [ #stk-4 ] ;\r\n- \u043a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 [ #stk-5 ] ;\r\n- \u0447\u0442\u043e \u0437\u0430\u043f\u043e\u043c\u043d\u0438\u0442\u044c [ #stk-6 ] .\r\n----------------------\r\n\r\n\r\n\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 Laravel\r\n\r\nLaravel \u2014 \u044d\u0442\u043e \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0434\u043b\u044f \r\n\u0431\u044b\u0441\u0442\u0440\u043e\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043d\u0430 PHP. \u042d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u0432\u0441\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0443\u0436\u0435 \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c \u0438 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u0438\u0434\u0443\u043c\u044b\u0432\u0430\u0442\u044c \u0441\u0430\u043c\u043e\u043c\u0443 \u2014 \u043f\u0440\u043e\u0441\u0442\u043e \u0431\u0440\u0430\u0442\u044c \u0438 \u0434\u0435\u043b\u0430\u0442\u044c. \u0412\u043e\u0442 \u0447\u0442\u043e \u0432 Laravel \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u00ab\u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438\u00bb:\r\n\r\n- \u0418\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u0430\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f. \u0414\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \r\n\u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0435\u0441\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f \u0441 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c\u0438. \u041e\u0447\u0435\u043d\u044c \u0443\u0434\u043e\u0431\u043d\u043e \u043a\u0430\u043a \u0434\u043b\u044f \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u0445, \u0442\u0430\u043a \u0438 \u0434\u043b\u044f \u043e\u043f\u044b\u0442\u043d\u044b\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432.\r\n- \u041c\u0438\u0433\u0440\u0430\u0446\u0438\u0438 \u0431\u0430\u0437 \u0434\u0430\u043d\u043d\u044b\u0445. Laravel \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \r\n\u0443\u0434\u043e\u0431\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0431\u0430\u0437\u0430\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u0439. \u041c\u0438\u0433\u0440\u0430\u0446\u0438\u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0431\u0430\u0437\u044b \u0434\u0430\u043d\u043d\u044b\u0445 \u0431\u0435\u0437 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043f\u0438\u0441\u0430\u0442\u044c SQL-\u0437\u0430\u043f\u0440\u043e\u0441\u044b.\r\n- Artisan. \u041a\u043e\u043d\u0441\u043e\u043b\u044c \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \r\n\u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0441 Laravel, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0440\u043e\u0432\u043e\u0434\u0438\u0442\u044c \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u0438 \u0431\u0430\u0437 \u0434\u0430\u043d\u043d\u044b\u0445, \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u044e \u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430.\r\n- ORM (object-relational mapping). Eloquent ORM \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \r\n\u0441 \u0431\u0430\u0437\u0430\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u043d\u043e-\u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u043c \u0441\u0442\u0438\u043b\u0435, \u0442\u043e \u0435\u0441\u0442\u044c \u0432\u044b\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0441 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u043c\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043c\u043e\u0436\u043d\u043e \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c.\r\n- \u0428\u0430\u0431\u043b\u043e\u043d\u044b. \u0423 Laravel \u043a\u0443\u0447\u0430 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \r\n\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430. \u042d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438.\r\n- \u0420\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u0438 \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u044f. \u0424\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \r\n\u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0433\u043e\u0442\u043e\u0432\u044b\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u044b \u0434\u043b\u044f \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439, \u0447\u0442\u043e\u0431\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u043d\u0435 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u043b\u043e\u0441\u044c \u0438\u0437\u043e\u0431\u0440\u0435\u0442\u0430\u0442\u044c \u043a\u043e\u043b\u0435\u0441\u043e.\r\n- \u0423\u0434\u043e\u0431\u043d\u044b\u0439 \u0434\u0435\u0431\u0430\u0433\u0433\u0438\u043d\u0433 \u0438 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \r\n\u041e\u0431\u044b\u0447\u043d\u043e \u0432 \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u0443\u0434\u043e\u0431\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u0430 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u043a\u043e\u0434\u0430 \u043d\u0430 \u043d\u0430\u0434\u0451\u0436\u043d\u043e\u0441\u0442\u044c, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441\u043e\u0437\u0434\u0430\u0442\u0435\u043b\u0438 Laravel \u0440\u0435\u0448\u0438\u043b\u0438 \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u0442\u044c \u044d\u0442\u043e\u0442 \u043f\u0440\u043e\u0446\u0435\u0441\u0441.\r\n\r\n\u041d\u0430 \u044d\u0442\u043e\u043c \u0441\u043f\u0438\u0441\u043e\u043a \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 Laravel \u043d\u0435 \u0437\u0430\u043a\u0430\u043d\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f. \r\n\u0415\u0449\u0451 \u0435\u0441\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0448\u0442\u0443\u043a\u0438: \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435, \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u044f, MVC \u0438 \u043c\u043d\u043e\u0433\u043e \u0434\u0440\u0443\u0433\u0438\u0445 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0445 \u0444\u0438\u0447. \u041d\u043e \u0433\u043b\u0430\u0432\u043d\u043e\u0435, \u0447\u0442\u043e \u0441\u0442\u043e\u0438\u0442 \u0437\u043d\u0430\u0442\u044c \u043e Laravel, \u2014 \u043d\u0430 \u043d\u0451\u043c \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u0441\u0442\u0440\u043e \u0438 \u0443\u0434\u043e\u0431\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0441\u0430\u0439\u0442\u044b.\r\n\r\n\u0427\u0435\u043c Laravel \u043b\u0443\u0447\u0448\u0435 \u0434\u0440\u0443\u0433\u0438\u0445 PHP\u2011\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432\r\n\r\n\u0412 PHP-\u043c\u0438\u0440\u0435 \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u0438\u0434\u0451\u0442 \u0431\u043e\u0440\u044c\u0431\u0430 \u043c\u0435\u0436\u0434\u0443 \r\n\u0447\u0435\u0442\u044b\u0440\u044c\u043c\u044f \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u043c\u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430\u043c\u0438: Laravel , Symfony , Yii \u0438 CodeIgniter . \u041a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u043d\u0438\u0445 \u0445\u043e\u0440\u043e\u0448, \u043d\u043e, \u0435\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0443 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0435\u0441\u0442\u044c \u0441\u0432\u043e\u0438 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438.\r\n\r\n\u0415\u0441\u043b\u0438 \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0442\u044c Laravel \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u043c\u0438 \r\n\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430\u043c\u0438, \u0442\u043e \u0440\u0430\u0437\u043b\u0438\u0447\u0438\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435:\r\n\r\n- \u041c\u0435\u043d\u044c\u0448\u0430\u044f \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c. Laravel \u043f\u0440\u043e\u0449\u0435 \u0438\u0437\u0443\u0447\u0438\u0442\u044c \r\n\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c, \u0447\u0435\u043c, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, Symfony. \u041e\u0434\u043d\u0430\u043a\u043e \u0442\u0430\u043a\u0430\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0442\u0430 \u043d\u0438\u043a\u0430\u043a \u043d\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0435\u0442 \u0435\u0433\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c.\r\n- \u0423\u0434\u043e\u0431\u043d\u0430\u044f \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u044f. Laravel \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \r\n\u0443\u0434\u043e\u0431\u043d\u0443\u044e \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u044e, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044f \u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u0434\u0430\u0432\u0430\u0442\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0430\u043c, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043d\u0430 \u0440\u0430\u0437\u043d\u044b\u0435 HTTP-\u0437\u0430\u043f\u0440\u043e\u0441\u044b.\r\n- \u0418\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f \u0441 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u043c\u0438. Laravel \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \r\n\u043f\u0430\u043a\u0435\u0442\u043d\u044b\u0439 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440 Composer, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0431\u044b\u0441\u0442\u0440\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442 \u0431\u0435\u0437 \u043b\u0438\u0448\u043d\u0438\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c.\r\n- \u0421\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430. \u0412 Laravel \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u0430 \r\n\u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u0448\u0430\u0431\u043b\u043e\u043d MVC (Model-View-Controller).\r\n\r\n\u0412 \u0446\u0435\u043b\u043e\u043c Laravel \u0441\u043e\u0431\u043b\u044e\u0434\u0430\u0435\u0442 \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u0439 \u0431\u0430\u043b\u0430\u043d\u0441 \r\n\u043c\u0435\u0436\u0434\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e, \u0433\u0438\u0431\u043a\u043e\u0441\u0442\u044c\u044e \u0438 \u043f\u0440\u043e\u0441\u0442\u043e\u0442\u043e\u0439 \u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438. \u041f\u0440\u0430\u0432\u0434\u0430, \u0438 \u0443 \u043d\u0435\u0433\u043e \u0435\u0441\u0442\u044c \u0441\u0432\u043e\u0438 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0438 \u0433\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0435\u0433\u043e \u043d\u0435\u043b\u044c\u0437\u044f \u043d\u0430\u0437\u0432\u0430\u0442\u044c \u00ab\u0441\u0430\u043c\u044b\u043c \u043b\u0443\u0447\u0448\u0438\u043c PHP-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u043c\u00bb. \u041e\u0434\u043d\u0430\u043a\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u0435\u043b\u0438 Laravel \u043f\u044b\u0442\u0430\u043b\u0438\u0441\u044c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432\u0441\u0451, \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u0431\u044b\u043b \u043a\u043e\u043c\u0444\u043e\u0440\u0442\u043d\u044b\u043c \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438:\r\n\r\n\r\n\r\n \r\n\r\n\r\n\u00abLaravel \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d, \u0447\u0442\u043e\u0431\u044b \u0443\u0431\u0440\u0430\u0442\u044c \u0431\u043e\u043b\u0438 \u0432 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \r\n\u043f\u0443\u0442\u0451\u043c \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u0438\u044f \u043f\u0440\u0438\u0432\u044b\u0447\u043d\u044b\u0445 \u0437\u0430\u0434\u0430\u0447, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0447\u0430\u0441\u0442\u043e \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u044e\u0442\u0441\u044f \u0432 \u0432\u0435\u0431-\u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445\u2026 Laravel \u043d\u0443\u0436\u0435\u043d, \u0447\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u0440\u0438\u044f\u0442\u043d\u044b\u043c \u0434\u043b\u044f \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442\u043e\u0432 \u0431\u0435\u0437 \u0443\u0445\u0443\u0434\u0448\u0435\u043d\u0438\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u041a\u0430\u043a \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u0441\u044f, \u0441\u0447\u0430\u0441\u0442\u043b\u0438\u0432\u044b\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043f\u0438\u0448\u0443\u0442 \u0441\u0430\u043c\u044b\u0439 \u043b\u0443\u0447\u0448\u0438\u0439 \u043a\u043e\u0434\u00bb.\r\n\r\n\u0421\u043e\u0437\u0434\u0430\u0442\u0435\u043b\u0438 Laravel [ https:\/\/laravel.com\/docs\/4.2\/introduction#laravel-philosophy ]\r\n \r\n\r\n\u0427\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0430 Laravel\r\n\r\n\u0420\u0430\u0437 Laravel \u2014 \u044d\u0442\u043e \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \r\n\u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u0442\u043e \u043d\u0430 \u043d\u0451\u043c \u043f\u0438\u0448\u0443\u0442 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f (\u0441\u043f\u0430\u0441\u0438\u0431\u043e \u0437\u0430 \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u043e\u0441\u0442\u044c):\r\n\r\n- \u041b\u0435\u043d\u0434\u0438\u043d\u0433\u0438, \u0438\u043b\u0438 \u043f\u043e\u0441\u0430\u0434\u043e\u0447\u043d\u044b\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u041d\u0430 Laravel \r\n\u043c\u043e\u0436\u043d\u043e \u0441 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u0437\u0430\u0442\u0440\u0430\u0442\u0430\u043c\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043a\u0430\u043a \u043f\u0440\u043e\u0441\u0442\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043a\u0443, \u0442\u0430\u043a \u0438 \u043c\u0443\u043b\u044c\u0442\u0438\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u044b\u0439 \u0441\u0430\u0439\u0442 \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438. \u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0441\u043b\u043e\u0436\u043d\u0435\u0435, \u0447\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Tilda, \u043d\u043e \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0430\u0439\u0442 \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043b\u044e\u0431\u044b\u0435 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u0444\u0438\u0447\u0438. \u041f\u0440\u0438\u043c\u0435\u0440: \u043b\u0435\u043d\u0434\u0438\u043d\u0433 Canva .\r\n- API. \u042d\u0442\u043e \u043f\u0440\u043e\u0441\u043b\u043e\u0439\u043a\u0430 \u0434\u043b\u044f \u043e\u0431\u043c\u0435\u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u043c\u0435\u0436\u0434\u0443 \r\n\u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0439 \u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u0430\u043c\u0438 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041f\u0440\u0438\u043c\u0435\u0440: Laravel Passport , API \u0434\u043b\u044f \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0439 \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u0432 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438.\r\n- CMS. \u0421\u0438\u0441\u0442\u0435\u043c\u044b \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u043e\u043c (content \r\nmanagement system, \u0438\u043b\u0438 CMS) \u2014 \u043e\u043d\u0438 \u043d\u0443\u0436\u043d\u044b, \u0447\u0442\u043e\u0431\u044b \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c \u0432\u0435\u0431-\u0441\u0430\u0439\u0442\u0430. \u041f\u0440\u0438\u043c\u0435\u0440: October CMS .\r\n- \u041e\u043d\u043b\u0430\u0439\u043d-\u043c\u0430\u0433\u0430\u0437\u0438\u043d\u044b. \u041d\u0430 Laravel \u0442\u0430\u043a\u0436\u0435 \u0441\u043e\u0437\u0434\u0430\u044e\u0442 \r\n\u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u044b\u0435 \u043a\u043e\u043c\u043c\u0435\u0440\u0447\u0435\u0441\u043a\u0438\u0435 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0434\u0430\u0432\u0430\u0442\u044c \u0442\u043e\u0432\u0430\u0440\u044b \u0438 \u0443\u0441\u043b\u0443\u0433\u0438. \u041f\u0440\u0438\u043c\u0435\u0440: Bagisto .\r\n\r\n\u0412\u043e\u0442 \u0435\u0449\u0451 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u0440\u0443\u043f\u043d\u044b\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \r\n\u043d\u0430\u043f\u0438\u0441\u0430\u043d\u044b \u043d\u0430 Laravel:\r\n\r\n- laravel.com \u2014 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0430\u0439\u0442 \r\nLaravel \u0441\u043e\u0437\u0434\u0430\u043d \u043d\u0430 Laravel;\r\n- Neighbourly \u2014 \u0441\u043e\u0446\u0438\u0430\u043b\u044c\u043d\u0430\u044f \r\n\u0441\u0435\u0442\u044c \u0434\u043b\u044f \u043e\u0431\u0449\u0435\u043d\u0438\u044f \u0441 \u0441\u043e\u0441\u0435\u0434\u044f\u043c\u0438;\r\n- World Walking \u2014 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \r\n\u0434\u043b\u044f \u043c\u043e\u0442\u0438\u0432\u0430\u0446\u0438\u0438 \u043b\u044e\u0434\u0435\u0439 \u0445\u043e\u0434\u0438\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435;\r\n- Ko-fi \u2014 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430 \u0434\u043b\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \r\n\u0442\u0432\u043e\u0440\u0447\u0435\u0441\u0442\u0432\u0430;\r\n- The Invoice Machine \u2014 \u043e\u043d\u043b\u0430\u0439\u043d-\u0441\u0435\u0440\u0432\u0438\u0441 \r\n\u0434\u043b\u044f \u0432\u044b\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u0447\u0435\u0442\u043e\u0432;\r\n- Startups.com \u2014 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430 \u0434\u043b\u044f \r\n\u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0438 \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u044f \u0441\u0442\u0430\u0440\u0442\u0430\u043f\u043e\u0432;\r\n- Larametrics \u2014 \u044d\u0442\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \r\n\u0434\u043b\u044f \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0438\u043d\u0433\u0430 \u0438 \u0430\u043d\u0430\u043b\u0438\u0437\u0430 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043d\u0430 Laravel.\r\n\r\n\u0410 \u0432\u043e\u0442 \u0442\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u044f\u0442 \u0441\u0430\u0439\u0442\u044b \u043d\u0430 Laravel:\r\n\r\n \r\n\u041e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0430\u0439\u0442 Laravel\r\n\u0421\u043a\u0440\u0438\u043d\u0448\u043e\u0442: Laravel \/ Skillbox Media\r\n \r\n\u0421\u043e\u0446\u0438\u0430\u043b\u044c\u043d\u0430\u044f \u0441\u0435\u0442\u044c Neighbourly\r\n\u0421\u043a\u0440\u0438\u043d\u0448\u043e\u0442: Neighbourly \/ Skillbox Media\r\n \r\n\u041f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430 \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0438 \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u044f \u0441\u0442\u0430\u0440\u0442\u0430\u043f\u043e\u0432 \u2014 Startups.com\r\n\u0421\u043a\u0440\u0438\u043d\u0448\u043e\u0442: Startups.com \/ Skillbox Media\r\n\r\n\u042d\u0442\u043e \u043b\u0438\u0448\u044c \u0447\u0430\u0441\u0442\u044c \u0441\u0430\u0439\u0442\u043e\u0432, \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0445 \u043d\u0430 Laravel. \r\n\u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b \u043c\u043e\u0433\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u043a\u0430\u043a \u043e\u0434\u0438\u043d \u0438\u0437 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0441\u043b\u043e\u0436\u043d\u043e\u0433\u043e \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043d\u043e \u043e\u0431\u044b\u0447\u043d\u043e \u043e\u0431 \u044d\u0442\u043e\u043c \u043d\u0435 \u0433\u043e\u0432\u043e\u0440\u044f\u0442 \u2014 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0447\u0430\u0441\u0442\u043e \u043e\u0442\u043c\u0430\u043b\u0447\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u043a\u0440\u0443\u043f\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438.\r\n\r\n\u0421 \u0447\u0435\u0433\u043e \u043d\u0430\u0447\u0430\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0443\r\n\r\n\u0427\u0442\u043e\u0431\u044b \u043e\u0441\u0432\u043e\u0438\u0442\u044c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a, \u0442\u0435\u043e\u0440\u0438\u0438 \u0432\u0441\u0435\u0433\u0434\u0430 \r\n\u043c\u0430\u043b\u043e, \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0443\u0436\u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0430. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u0430\u043b\u044c\u0448\u0435 \u043c\u044b \u0437\u0430\u0439\u043c\u0451\u043c\u0441\u044f \u0438\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u0438\u043c \u2014 \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0447\u0442\u043e\u0431\u044b \u0438\u0433\u0440\u0430\u0442\u044c \u0441 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u043e\u043c \u0432 \u0438\u0433\u0440\u0443 \u00ab\u041a\u0430\u043c\u0435\u043d\u044c, \u043d\u043e\u0436\u043d\u0438\u0446\u044b, \u0431\u0443\u043c\u0430\u0433\u0430\u00bb. \u041d\u043e \u0434\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0430\u043c \u043d\u0430\u0434\u043e \u0431\u0443\u0434\u0435\u0442 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c Laravel \u0438 MySQL .\r\n\r\n\u0415\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0435\u0449\u0451 \u043d\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d PHP, \u043c\u043e\u0436\u0435\u0442\u0435 \r\n\u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c, \u043a\u0430\u043a \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u0432 \u043d\u0430\u0448\u0435\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 .\u0421\u043a\u0430\u0447\u0438\u0432\u0430\u0435\u043c Composer\r\n\r\nComposer \u2014 \u044d\u0442\u043e \u043f\u0430\u043a\u0435\u0442\u043d\u044b\u0439 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440 \u0434\u043b\u044f PHP. \r\n\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043d\u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438, \u043a\u0430\u043a \u044d\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435. \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0443 \u0434\u043b\u044f \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0445 \u0441\u0438\u0441\u0442\u0435\u043c Windows, macOS \u0438 Linux.\r\n\r\nWindows. \u041d\u0430 \u044d\u0442\u043e\u0439 \u041e\u0421 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \r\n\u0441\u0430\u043c\u044b\u0439 \u043f\u0440\u043e\u0441\u0442\u043e\u0439:\r\n\r\n- \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043d\u0430 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0430\u0439\u0442 Composer \r\n[ https:\/\/getcomposer.org\/doc\/00-intro.md#installation-windows ] \u0438 \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u0435\u043c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043e\u0447\u043d\u044b\u0439 \u0444\u0430\u0439\u043b Composer-Setup.exe;\r\n- \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0435\u0433\u043e \u0438 \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u043c \u043f\u0440\u0438\u0432\u044b\u0447\u043d\u044b\u0435 \r\n\u0448\u0430\u0433\u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438.\r\n\r\nmacOS. \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c Composer \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f, \r\n\u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0443\u0436\u043d\u043e \u0441\u043a\u0430\u0447\u0430\u0442\u044c \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440 \u043f\u0430\u043a\u0435\u0442\u043e\u0432 Homebrew \u2014 \u043e \u043d\u0451\u043c \u043c\u044b \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u043b\u0438 \u0432 \u0441\u0442\u0430\u0442\u044c\u0435 \u043f\u0440\u043e PHP [ https:\/\/skillbox.ru\/media\/code\/kak_nachat_programmirovat_na_php\/#stk-6:~:text=sudo%20apt%20update-,%D0%9D%D0%B0%C2%A0macOS,-%D0%A1%D0%BA%D0%B0%D1%87%D0%B0%D1%82%D1%8C%20PHP%20%D1%81 ] . \u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b \u0438 \u0432\u0432\u043e\u0434\u0438\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u0443:\r\n\r\n\/bin\/bash -c \"$(curl -fsSL https:\/\/raw.githubusercontent.com\/Homebrew\/install\/HEAD\/install.sh)\"\r\n\r\n\u041f\u043e\u0441\u043b\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 Homebrew \u0432\u0432\u043e\u0434\u0438\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u0443:\r\n\r\nbrew install composer\r\n\r\nLinux. \u0417\u0434\u0435\u0441\u044c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c Composer \u043f\u0440\u043e\u0449\u0435, \u0447\u0435\u043c \u043d\u0430 macOS. \r\n\u0414\u043b\u044f \u0440\u0430\u0437\u043d\u044b\u0445 Linux-\u0441\u0438\u0441\u0442\u0435\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u043c\u043e\u0433\u0443\u0442 \u0440\u0430\u0437\u043b\u0438\u0447\u0430\u0442\u044c\u0441\u044f (\u0438\u0437-\u0437\u0430 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0435\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u0430\u043a\u0435\u0442\u0430\u043c\u0438), \u043d\u043e \u0441\u0430\u043c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438, \u043f\u043e \u0441\u0443\u0442\u0438, \u0431\u0443\u0434\u0435\u0442 \u0438\u0434\u0435\u043d\u0442\u0438\u0447\u043d\u044b\u043c. \u0412\u043e\u0442 \u043a\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0432 Debian-\u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0445 \u0434\u0438\u0441\u0442\u0440\u0438\u0431\u0443\u0442\u0438\u0432\u0430\u0445:\r\n\r\n$ sudo apt-get update $ sudo apt-get install composer\r\n\r\n\u0415\u0441\u043b\u0438 \u0432\u043e\u0437\u043d\u0438\u043a\u043b\u0438 \u0442\u0440\u0443\u0434\u043d\u043e\u0441\u0442\u0438 \u0441 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u043e\u0439, \r\n\u043c\u043e\u0436\u043d\u043e \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c\u0441\u044f \u043a \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u043d\u0430 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u043c \u0441\u0430\u0439\u0442\u0435 . \u0410 \u0435\u0441\u043b\u0438 \u0432\u0441\u0451 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u2014 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u0434\u0430\u043b\u044c\u0448\u0435.\u0421\u043a\u0430\u0447\u0438\u0432\u0430\u0435\u043c MySQL\r\n\r\n\u041c\u044b \u0431\u0443\u0434\u0435\u043c \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c \u0441\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0443 \u0438\u0433\u0440 \u0432 \u0431\u0430\u0437\u0435 \r\n\u0434\u0430\u043d\u043d\u044b\u0445, \u0430 \u0434\u043b\u044f \u043d\u0435\u0451 \u043d\u0443\u0436\u0435\u043d \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0441\u0435\u0440\u0432\u0435\u0440. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u0435\u043c MySQL \u0441 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u0430\u0439\u0442\u0430 .\r\n\r\n\u0414\u0430\u043b\u0435\u0435 \u043d\u0430\u0434\u043e \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u0443\u044e \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \r\n\u0438 \u043f\u0440\u043e\u0439\u0442\u0438 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438. \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435: \u043d\u0430 \u044d\u0442\u0430\u043f\u0435 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0437\u0430\u043f\u043e\u043c\u043d\u0438\u0442\u0435 \u0432\u0432\u0435\u0434\u0451\u043d\u043d\u044b\u0439 \u043f\u0430\u0440\u043e\u043b\u044c, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0441 \u0435\u0433\u043e \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0432\u044b \u0431\u0443\u0434\u0435\u0442\u0435 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c\u0441\u044f \u043a \u0431\u0430\u0437\u0435 \u0434\u0430\u043d\u043d\u044b\u0445.\r\n \r\n\u041f\u0435\u0440\u0432\u0438\u0447\u043d\u0430\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 MySQL\r\n\u0421\u043a\u0440\u0438\u043d\u0448\u043e\u0442: Skillbox Media\r\n\r\n\u041e\u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u0433\u0430\u043b\u043e\u0447\u043a\u0443, \u0433\u0434\u0435 \u0433\u043e\u0432\u043e\u0440\u044f\u0442, \u0447\u0442\u043e MySQL Server \r\n\u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0441\u044f \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u0441\u043b\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438. \u0418 \u0442\u0435\u043f\u0435\u0440\u044c \u0432\u0441\u0451 \u0433\u043e\u0442\u043e\u0432\u043e.\r\n\r\n\u0410\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043d\u0430\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0434\u043b\u044f Linux. \u0415\u0441\u043b\u0438 \r\n\u0432\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 Linux, \u0442\u043e \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u0442\u044c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0449\u0438\u043a \u043d\u0435 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u2014 \u043c\u043e\u0436\u043d\u043e \u043e\u043f\u044f\u0442\u044c-\u0442\u0430\u043a\u0438 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u0430\u043a\u0435\u0442\u043d\u044b\u043c \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u043e\u043c. \u0414\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u044d\u0442\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a (\u0441 \u043f\u043e\u043f\u0440\u0430\u0432\u043a\u043e\u0439 \u043d\u0430 \u0432\u0430\u0448 \u0434\u0438\u0441\u0442\u0440\u0438\u0431\u0443\u0442\u0438\u0432):\r\n\r\nsudo apt-get install mysql-server\r\n\r\n\u041f\u043e\u0441\u043b\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0441\u0430\u043c \u0441\u0435\u0440\u0432\u0435\u0440:\r\n\r\nsudo service mysql status\r\n\r\n\u0413\u043e\u0442\u043e\u0432\u043e \u2014 \u0441\u0435\u0440\u0432\u0435\u0440 \u0437\u0430\u043f\u0443\u0449\u0435\u043d!\u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \r\nLaravel\r\n\r\n\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c Laravel. \r\n\u042d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0447\u0435\u0440\u0435\u0437 Composer, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0443\u043c\u0435\u0435\u0442 \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u0442\u044c Laravel \u0438 \u0432\u0441\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438.\r\n\r\n\u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u043d\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443 \u0438 \u0432\u0432\u0435\u0434\u0438\u0442\u0435 \r\n\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u043a\u043e\u043c\u0430\u043d\u0434\u0443:\r\n\r\ncomposer create-project --prefer-dist laravel\/laravel myapp\r\n\r\n\u0417\u0434\u0435\u0441\u044c myapp \u2014 \u044d\u0442\u043e \u0438\u043c\u044f \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u042d\u0442\u0430 \r\n\u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0441\u043e\u0437\u0434\u0430\u0441\u0442 \u043d\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 Laravel \u0432 \u043f\u0430\u043f\u043a\u0435 myapp.\r\n \r\n\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043d\u043e\u0432\u043e\u0433\u043e Laravel-\u043f\u0440\u043e\u0435\u043a\u0442\u0430\r\n\u0421\u043a\u0440\u0438\u043d\u0448\u043e\u0442: Skillbox Media\r\n\r\n\u041c\u044b \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u0438 Laravel \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0439 \u0432\u0435\u0440\u0441\u0438\u0438, \r\n10.0.4. \u041d\u0430 \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u0435 \u0432\u044b\u0448\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u043d \u0443\u0441\u043f\u0435\u0448\u043d\u044b\u0439 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438. \u0415\u0441\u043b\u0438 \u0432\u043e\u0437\u043d\u0438\u043a\u043b\u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u2014 \u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e \u043f\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0435 \u043d\u0430 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u043c \u0441\u0430\u0439\u0442\u0435 .\u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0441\u0435\u0440\u0432\u0435\u0440\r\n\r\n\u0427\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \r\nLaravel, \u043d\u0430\u043c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 \u0432\u0435\u0431-\u0441\u0435\u0440\u0432\u0435\u0440. \u041a\u0441\u0442\u0430\u0442\u0438, \u043d\u0435 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 \u0432\u0435\u0431-\u0441\u0435\u0440\u0432\u0435\u0440 \u0432 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u0435\u043d\u0435 \u2014 \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043b\u0443\u0447\u0448\u0435 \u0432\u044b\u0431\u0440\u0430\u0442\u044c Apache \u0438\u043b\u0438 Nginx .\r\n\r\n\u0417\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0432\u0435\u0431-\u0441\u0435\u0440\u0432\u0435\u0440 \u043f\u0440\u043e\u0441\u0442\u043e: \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \r\n\u0432 \u043f\u0430\u043f\u043a\u0443 \u0441 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c \u0438 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u043d\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443. \u0412\u0432\u043e\u0434\u0438\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u0443:\r\n\r\nphp artisan serve\r\n\r\n\u0414\u043e\u043b\u0436\u043d\u043e \u043f\u043e\u044f\u0432\u0438\u0442\u044c\u0441\u044f \u0442\u0430\u043a\u043e\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435:\r\n \r\n\u0412\u0435\u0431-\u0441\u0435\u0440\u0432\u0435\u0440 \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u0437\u0430\u043f\u0443\u0449\u0435\u043d\r\n\u0421\u043a\u0440\u0438\u043d\u0448\u043e\u0442: Skillbox Media\r\n\r\n\u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043f\u043e \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u043c\u0443 \r\n\u0430\u0434\u0440\u0435\u0441\u0443: http:\/\/127.0.0.1:8000\/. \u0415\u0441\u043b\u0438 \u0432\u0441\u0451 \u0445\u043e\u0440\u043e\u0448\u043e, \u0434\u043e\u043b\u0436\u0435\u043d \u043e\u0442\u043a\u0440\u044b\u0442\u044c\u0441\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a\u043e\u0439 \u044d\u043a\u0440\u0430\u043d:\r\n \r\n\u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e\r\n\u0421\u043a\u0440\u0438\u043d\u0448\u043e\u0442: Skillbox Media\r\n\r\n\u042d\u0442\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 Laravel \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e. \u0415\u0451, \u043a\u043e\u043d\u0435\u0447\u043d\u043e \u0436\u0435, \r\n\u043c\u043e\u0436\u043d\u043e \u043c\u0435\u043d\u044f\u0442\u044c \u2014 \u044d\u0442\u0438\u043c \u043c\u044b \u0438 \u0431\u0443\u0434\u0435\u043c \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c\u0441\u044f \u0434\u0430\u043b\u044c\u0448\u0435. \u041d\u0443 \u0430 \u043f\u043e\u043a\u0430 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0430\u043c \u2014 \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e \u0438 \u0441\u0432\u0435\u0436\u0438\u0435 \u043d\u043e\u0432\u043e\u0441\u0442\u0438 \u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0435.\r\n\r\n\u041a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 Laravel\r\n\r\n\u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u043e\u0433\u0434\u0430 \u0443 \u043d\u0430\u0441 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d Laravel, \u043c\u043e\u0436\u043d\u043e \r\n\u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0430\u0442\u044c \u043a \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044e \u043a\u043e\u0434\u0430. \u041a\u0430\u043a \u0443\u0436\u0435 \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u043b\u043e\u0441\u044c \u0432\u044b\u0448\u0435, \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0438\u0433\u0440\u0443 \u00ab\u041a\u0430\u043c\u0435\u043d\u044c, \u043d\u043e\u0436\u043d\u0438\u0446\u044b, \u0431\u0443\u043c\u0430\u0433\u0430\u00bb \u0438 \u0431\u0443\u0434\u0435\u043c \u0438\u0433\u0440\u0430\u0442\u044c \u0432 \u043d\u0435\u0451 \u0441 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u043e\u043c.\r\n\r\n\u041f\u043b\u0430\u043d \u0442\u0430\u043a\u043e\u0439:\r\n\r\n- \u0421\u043e\u0437\u0434\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u0438 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435.\r\n- \u041e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u0430\u0437\u0443 \u0434\u0430\u043d\u043d\u044b\u0445, \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c \r\n\u0441\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0443 \u0438\u0433\u0440.\r\n- \u0421\u0434\u0435\u043b\u0430\u0442\u044c \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u044e \u0431\u0430\u0437\u044b \u0434\u0430\u043d\u043d\u044b\u0445, \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0435 \r\n\u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0431\u044b\u043b\u0438 \u043d\u0430 \u0441\u0432\u043e\u0451\u043c \u043c\u0435\u0441\u0442\u0435.\r\n- \u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043c\u0430\u0440\u0448\u0440\u0443\u0442 \u0438 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \r\n\u044d\u0442\u043e \u0442\u0430\u043a\u043e\u0435.\r\n- \u0421\u043e\u0437\u0434\u0430\u0442\u044c \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440 \u0438 \u0442\u043e\u0436\u0435 \u043f\u043e\u043d\u044f\u0442\u044c, \u0437\u0430\u0447\u0435\u043c \r\n\u043e\u043d \u043d\u0443\u0436\u0435\u043d.\r\n- \u0421\u043e\u0437\u0434\u0430\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0438 \u0434\u043b\u044f \u0438\u0433\u0440\u044b.\r\n- \u0423\u043a\u0440\u0430\u0441\u0438\u0442\u044c \u0432\u0441\u0451 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e CSS-\u0441\u0442\u0438\u043b\u0435\u0439.\r\n\r\n\u041f\u043b\u0430\u043d \u0437\u0434\u043e\u0440\u043e\u0432\u0441\u043a\u0438\u0439 \u2014 \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u043c!\u0421\u043e\u0437\u0434\u0430\u0451\u043c \r\n\u043d\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442\r\n\r\n\u0418\u0434\u0451\u043c \u0443\u0436\u0435 \u0437\u043d\u0430\u043a\u043e\u043c\u044b\u043c \u043f\u0443\u0442\u0451\u043c: \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u043d\u0443\u044e \r\n\u0441\u0442\u0440\u043e\u043a\u0443 \u0438 \u0432\u0432\u043e\u0434\u0438\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u0434\u043b\u044f Composer:\r\n\r\ncomposer create-project --prefer-dist laravel\/laravel rock-paper-scissors\r\n\r\n\u041f\u0440\u043e\u0435\u043a\u0442 \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u2014 \u0444\u0430\u0439\u043b\u044b \u043d\u0435 \u043f\u043e\u043c\u0435\u043d\u044f\u043b\u0438\u0441\u044c:\r\n \r\n\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\r\n\u0421\u043a\u0440\u0438\u043d\u0448\u043e\u0442: Skillbox Media\r\n\r\n\u041e\u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u043d\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443 \u043e\u0442\u043a\u0440\u044b\u0442\u043e\u0439 \u2014 \r\n\u043e\u043d\u0430 \u043d\u0430\u043c \u0435\u0449\u0451 \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u0441\u044f, \u0430 \u0441\u0430\u043c\u0438 \u043f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u0432 \u043f\u0430\u043f\u043a\u0443 \u0441 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u044b:\r\n\r\ncd rock-paper-scissors\r\n\r\n\u041a\u043e\u043c\u0430\u043d\u0434\u0430 \r\ncd \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0434\u0432\u0438\u0433\u0430\u0442\u044c\u0441\u044f \u0432\u0432\u0435\u0440\u0445 \u0438 \u0432\u043d\u0438\u0437 \u043f\u043e \u043f\u0430\u043f\u043a\u0430\u043c. \u041d\u0443 \u0430 \u0440\u0430\u0437 \u043c\u044b \u0443\u0436\u0435 \u0432 \u043d\u0443\u0436\u043d\u043e\u043c \u043c\u0435\u0441\u0442\u0435, \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u0434\u0430\u043b\u044c\u0448\u0435.\u041e\u0440\u0433\u0430\u043d\u0438\u0437\u0443\u0435\u043c \u0431\u0430\u0437\u0443 \u0434\u0430\u043d\u043d\u044b\u0445\r\n\r\n\u0427\u0442\u043e\u0431\u044b \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0438\u0433\u0440, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u0430 \r\n\u0431\u0430\u0437\u0430 \u0434\u0430\u043d\u043d\u044b\u0445. \u041e\u043d\u0430 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u043e\u0431\u044b\u0447\u043d\u044b\u0439 \u0444\u0430\u0439\u043b, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u0432 \u0443\u0434\u043e\u0431\u043d\u043e\u043c \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432\u0438\u0434\u0435.\r\n\r\n\r\n\r\n\u0415\u0441\u043b\u0438 \u0445\u043e\u0442\u0438\u0442\u0435 \u0443\u0437\u043d\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u043e \u0431\u0430\u0437\u0430\u0445 \u0434\u0430\u043d\u043d\u044b\u0445, \r\n\u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u043c \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0443\u044e \u0441\u0442\u0430\u0442\u044c\u044e \u043e \u043d\u0438\u0445 .\r\n\r\n\u041f\u0435\u0440\u0435\u0439\u0434\u0451\u043c \u0432 \u0444\u0430\u0439\u043b .env, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \r\n\u0432 \u043f\u0430\u043f\u043a\u0435 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u041e\u043d \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0441\u043a\u0440\u044b\u0442, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0435\u0433\u043e \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0441 \u0442\u043e\u0447\u043a\u0438. \u0415\u0441\u043b\u0438 \u043e\u043d \u0443 \u0432\u0430\u0441 \u043d\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f, \u043f\u043e\u043c\u0435\u043d\u044f\u0439\u0442\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 [ https:\/\/support.microsoft.com\/ru-ru\/windows\/%D0%BF%D1%80%D0%BE%D1%81%D0%BC%D0%BE%D1%82%D1%80-%D1%81%D0%BA%D1%80%D1%8B%D1%82%D1%8B%D1%85-%D1%84%D0%B0%D0%B9%D0%BB%D0%BE%D0%B2-%D0%B8-%D0%BF%D0%B0%D0%BF%D0%BE%D0%BA-%D0%B2-windows-97fbc472-c603-9d90-91d0-1166d1d9f4b5 ] \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0444\u0430\u0439\u043b\u043e\u0432 \u0432 \u0441\u0432\u043e\u0435\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u0435.\r\n\r\n\u0412 \u0444\u0430\u0439\u043b\u0435 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \r\n\u0441\u0442\u0440\u043e\u043a\u0438:\r\n \r\n\u0421\u043a\u0440\u0438\u043d\u0448\u043e\u0442: Skillbox Media\r\n\r\n\u041d\u0430\u043c \u043d\u0443\u0436\u043d\u044b \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0435 \u0442\u0440\u0438 \u043e\u043f\u0446\u0438\u0438:\r\n\r\nDB_DATABASE=rock_paper_scissors DB_USERNAME=root DB_PASSWORD=password\r\n\r\n\u0412 \u043f\u0435\u0440\u0432\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0435 \u043c\u044b \u0437\u0430\u0434\u0430\u0451\u043c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \r\n\u0431\u0430\u0437\u044b \u0434\u0430\u043d\u043d\u044b\u0445, \u0430 \u0432\u043e \u0432\u0442\u043e\u0440\u043e\u0439 \u0438 \u0442\u0440\u0435\u0442\u044c\u0435\u0439 \u2014 \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u0432\u0445\u043e\u0434\u0430 \u0432 \u043d\u0435\u0451. \u0421\u0435\u0439\u0447\u0430\u0441 \u043c\u044b \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0438\u0445 \u043f\u0440\u043e\u0441\u0442\u044b\u043c\u0438, \u043d\u043e \u043f\u043e\u043c\u043d\u0438\u0442\u0435, \u0447\u0442\u043e, \u0435\u0441\u043b\u0438 \u0432\u044b \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442\u0435\u0441\u044c \u0432\u044b\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0442\u044c \u0441\u0430\u0439\u0442 \u0432 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442, \u043e\u0447\u0435\u043d\u044c \u0432\u0430\u0436\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u0430\u0440\u043e\u043b\u044c \u0438 \u043b\u043e\u0433\u0438\u043d \u0431\u044b\u043b\u0438 \u043d\u0430\u0434\u0451\u0436\u043d\u044b\u043c\u0438.\r\n\r\n\u0421\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0444\u0430\u0439\u043b \u0438 \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0435\u0433\u043e \u2014 \r\n\u0431\u0430\u0437\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043d\u0430.\u0414\u0435\u043b\u0430\u0435\u043c \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u044e \r\n\r\n\u041c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u0431\u0430\u0437\u0443 \u0434\u0430\u043d\u043d\u044b\u0445, \u043d\u0430\u0441\u0442\u0430\u043b\u043e \u0432\u0440\u0435\u043c\u044f \r\n\u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043d\u0443\u0436\u043d\u044b\u0435 \u0442\u0430\u0431\u043b\u0438\u0446\u044b. \u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u043d\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443 \u0438 \u0443\u0431\u0435\u0436\u0434\u0430\u0435\u043c\u0441\u044f, \u0447\u0442\u043e \u043d\u0430\u0445\u043e\u0434\u0438\u043c\u0441\u044f \u0432 \u043f\u0430\u043f\u043a\u0435 \u0441 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c. \u0412\u0432\u043e\u0434\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u043a\u043e\u043c\u0430\u043d\u0434\u0443:\r\n\r\nphp artisan make:migration create_game_statistics_table --create=game_statistics\r\n\r\n\u042d\u0442\u0430 \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0441\u0434\u0435\u043b\u0430\u0435\u0442 \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u044e \u0431\u0430\u0437\u044b \u0434\u0430\u043d\u043d\u044b\u0445, \r\n\u0442\u043e \u0435\u0441\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0438\u0442 \u0435\u0451 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0438 \u0441\u043e\u0437\u0434\u0430\u0441\u0442 \u0444\u0430\u0439\u043b \u0441 \u0442\u0430\u0431\u043b\u0438\u0446\u0435\u0439. \u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u2014 \u0434\u043e\u0431\u0430\u0432\u0438\u0442 \u0442\u0430\u0431\u043b\u0438\u0446\u0443 game_statistics, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0444\u0430\u0439\u043b \u0441 \u0434\u0430\u0442\u043e\u0439 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0438 \u043f\u0440\u0438\u043f\u0438\u0441\u043a\u043e\u0439 _create_game_statistics_table:\r\n \r\n\u0421\u043e\u0437\u0434\u0430\u0451\u043c \u043d\u043e\u0432\u0443\u044e \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0432 \u0411\u0414\r\n\u0421\u043a\u0440\u0438\u043d\u0448\u043e\u0442: Skillbox Media\r\n\r\n\u041f\u043e\u044f\u0432\u0438\u043b\u0441\u044f PHP-\u0444\u0430\u0439\u043b \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \r\n\u0432 \u043f\u0430\u043f\u043a\u0435 database\/migrations:\r\n \r\n\u041c\u0438\u0433\u0440\u0430\u0446\u0438\u0438 \u0432 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0435 Laravel-\u043f\u0440\u043e\u0435\u043a\u0442\u0430\r\n\u0421\u043a\u0440\u0438\u043d\u0448\u043e\u0442: Skillbox Media\r\n\r\n\u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0435\u0433\u043e \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \r\n\u043a\u043e\u0434 \u2014 \u043e\u043d \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0437\u0430\u0434\u0430\u0442\u044c \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u043d\u0430\u0448\u0435\u0439 \u0442\u0430\u0431\u043b\u0438\u0446\u044b:\r\n\r\n<?php use Illuminate\\Database\\Migrations\\Migration; use Illuminate\\Database\\Schema\\Blueprint; \r\nuse Illuminate\\Support\\Facades\\Schema; class CreateGameStatisticsTable extends Migration { public function up() { Schema::create('game_statistics', function (Blueprint $table) { $table->id(); $table->string('player_name'); $table->string('computer_choice'); $table->string('player_choice'); $table->string('result'); $table->timestamps(); }); } public function down() { Schema::dropIfExists('game_statistics'); } }\r\n\r\n\u042d\u0442\u0430 \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u044f \u0441\u043e\u0437\u0434\u0430\u0441\u0442 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0441 \u0448\u0435\u0441\u0442\u044c\u044e \r\n\u043a\u043e\u043b\u043e\u043d\u043a\u0430\u043c\u0438: \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u043c \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u043e\u043c \u0438\u0433\u0440\u044b (id), \u0438\u043c\u0435\u043d\u0435\u043c \u0438\u0433\u0440\u043e\u043a\u0430 (player_name), \u0445\u043e\u0434\u043e\u043c \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0430 (computer_choice), \u0445\u043e\u0434\u043e\u043c \u0438\u0433\u0440\u043e\u043a\u0430 (player_choice), \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u043c \u0438\u0433\u0440\u044b (result) \u0438 \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u043e\u0442\u043c\u0435\u0442\u043a\u043e\u0439 (timestamps) \u2014 \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u0435\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u043a\u043e\u0433\u0434\u0430 \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u043b\u0430 \u0438\u0433\u0440\u0430.\r\n\r\n\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0442\u0438\u043f\u044b \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u043d\u0430\u0448\u0435\u0439 \r\n\u0442\u0430\u0431\u043b\u0438\u0446\u0435. \u0423 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0447\u0435\u0442\u044b\u0440\u0435 \u043a\u043e\u043b\u043e\u043d\u043a\u0438 \u0441 \u0442\u0438\u043f\u043e\u043c \u00ab\u0441\u0442\u0440\u043e\u043a\u0430\u00bb (player_name, computer_choice, player_choice \u0438 result), \u0430 \u0442\u0430\u043a\u0436\u0435 \u0434\u0432\u0430 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0445 \u0442\u0438\u043f\u0430 \u0434\u0430\u043d\u043d\u044b\u0445: id \u0438 timestamps. \u041f\u0435\u0440\u0432\u044b\u0439 \u2014 \u044d\u0442\u043e \u0430\u0439\u0434\u0438\u0448\u043d\u0438\u043a \u0441\u0442\u0440\u043e\u043a\u0438 \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0435, \u0438 \u043e\u043d \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u043e\u0431\u044b\u0447\u043d\u043e\u0435 \u0447\u0438\u0441\u043b\u043e, \u043d\u043e \u0441 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c\u0438 \u0444\u0438\u0447\u0430\u043c\u0438. \u0410 \u0432\u0442\u043e\u0440\u043e\u0439 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u0434\u0430\u0442\u0443 \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 YYYY-MM-DD HH:MM:SS.\r\n\r\n\u0421\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0444\u0430\u0439\u043b \u0438 \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0435\u0433\u043e. \u0422\u0435\u043f\u0435\u0440\u044c \r\n\u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u044e \u2014 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b \u043d\u0430\u043c \u043f\u043e\u043c\u043e\u0436\u0435\u0442:\r\n\r\nphp artisan migrate\r\n\r\n\u0423 \u043d\u0430\u0441 \u0441\u043f\u0440\u043e\u0441\u044f\u0442, \u0445\u043e\u0442\u0438\u043c \u043b\u0438 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0442\u044c \r\n\u043d\u043e\u0432\u0443\u044e \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0432 \u0431\u0430\u0437\u0435 \u0434\u0430\u043d\u043d\u044b\u0445. \u0421\u043e\u0433\u043b\u0430\u0448\u0430\u0435\u043c\u0441\u044f:\r\n \r\n\u0411\u0430\u0437\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043d\u0430 \u0438 \u0433\u043e\u0442\u043e\u0432\u0430 \u043a \u0440\u0430\u0431\u043e\u0442\u0435\r\n\u0421\u043a\u0440\u0438\u043d\u0448\u043e\u0442: Skillbox Media\r\n\r\n\u0413\u043e\u0442\u043e\u0432\u043e \u2014 \u0442\u0435\u043f\u0435\u0440\u044c \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0430\u044f \r\n\u0431\u0430\u0437\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u0441 \u043d\u0443\u0436\u043d\u043e\u0439 \u0442\u0430\u0431\u043b\u0438\u0446\u0435\u0439.\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043c\u0430\u0440\u0448\u0440\u0443\u0442\r\n\r\n\u0412\u0435\u0441\u044c \u0431\u044d\u043a\u0435\u043d\u0434 \u0441\u0442\u0440\u043e\u0438\u0442\u0441\u044f \u043d\u0430 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0430\u0445 \u2014 \r\n\u0438\u043b\u0438 URL-\u0430\u0434\u0440\u0435\u0441\u0430\u0445. \u041e\u043d\u0438 \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0442 \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0443\u0434\u043e\u0431\u043d\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0438 \u043f\u043e\u043d\u044f\u0442\u043d\u043e\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u043c.\r\n\r\n\u0414\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u044b \u2014 \u044d\u0442\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \r\n\u00ab\u0432\u043a\u043b\u0430\u0434\u043a\u0438\u00bb \u043d\u0430 \u0441\u0430\u0439\u0442\u0435. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 \u0437\u0430\u0439\u0442\u0438 \u043d\u0430 \u0441\u0430\u0439\u0442 Skillbox, \u043e\u0442\u043a\u0440\u043e\u0435\u0442\u0441\u044f \u0435\u0433\u043e \u0433\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 www.skillbox.ru . \u0410 \u0435\u0441\u043b\u0438 \u043a\u043b\u0438\u043a\u043d\u0443\u0442\u044c \u043d\u0430 \u043b\u044e\u0431\u043e\u0439 \u043a\u0443\u0440\u0441, \u043c\u044b \u043f\u0435\u0440\u0435\u0439\u0434\u0451\u043c \u043d\u0430 \u0434\u0440\u0443\u0433\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0441\u0430\u0439\u0442\u0430 \u0441 \u0434\u0440\u0443\u0433\u0438\u043c URL-\u0430\u0434\u0440\u0435\u0441\u043e\u043c, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 www.skillbox.ru\/course\/profession-python\/ . \u041c\u044b \u0443\u0432\u0438\u0434\u0438\u043c, \u0447\u0442\u043e \u043a \u0430\u0434\u0440\u0435\u0441\u0443 \u043d\u0430\u0448\u0435\u0433\u043e \u0441\u0430\u0439\u0442\u0430 \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0441\u044f \u0442\u0435\u043a\u0441\u0442: \/course\/profession-python\/. \u042d\u0442\u0430 \u00ab\u043f\u0440\u0438\u043f\u0438\u0441\u043a\u0430\u00bb \u0438 \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u043b\u0430 \u043d\u0430\u0441 \u043d\u0430 \u0434\u0440\u0443\u0433\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0441 \u0434\u0440\u0443\u0433\u0438\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c. \u041d\u043e \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u043b\u0430, \u0430 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043b\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u0439 \u043a\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u043b \u044d\u0442\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443.\r\n\r\n\u041d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u044f\u0442\u0441\u044f \u0434\u0432\u0430 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0430: \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \r\n\/ \u0438 \u0438\u0433\u0440\u043e\u0432\u043e\u0439 \/play. \u0427\u0442\u043e\u0431\u044b \u0438\u0445 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c, \u043d\u0443\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u0432 \u043f\u0430\u043f\u043a\u0443 routes, \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0444\u0430\u0439\u043b web.php \u0438 \u0432\u043f\u0438\u0441\u0430\u0442\u044c \u0442\u0443\u0434\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434:\r\n\r\nRoute::get('\/', [GameController::class,'index'])->name('game.index'); \r\nRoute::post('\/play', [GameController::class,'play'])->name('game.play'); \r\n\r\n\u041d\u0430 \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u043c \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0435 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \r\n\u0441\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0443 \u0438 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u0441\u044b\u0433\u0440\u0430\u0442\u044c \u0432 \u0438\u0433\u0440\u0443, \u0430 \u043d\u0430 \u0438\u0433\u0440\u043e\u0432\u043e\u043c \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0435 \u0431\u0443\u0434\u0435\u043c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0438\u0433\u0440\u0430\u0442\u044c.\r\n\r\n\u042d\u0442\u043e\u0442 \u043a\u043e\u0434 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0442\u0430\u043a: \u0435\u0441\u043b\u0438 \u043c\u044b \u0437\u0430\u0445\u043e\u0434\u0438\u043c \r\n\u043f\u043e \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u043c\u0443 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0443 \/, \u0442\u043e PHP \u043e\u0442\u0440\u0438\u0441\u0443\u0435\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 game.index, \u0430 \u0435\u0441\u043b\u0438 \u0437\u0430\u0439\u0434\u0451\u043c \u043f\u043e \u0438\u0433\u0440\u043e\u0432\u043e\u043c\u0443 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0443 \/play, \u0442\u043e \u043e\u043d \u0441\u043e\u0437\u0434\u0430\u0441\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 game.play. \u041f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u044d\u0442\u0438\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u043c\u044b \u043e\u043f\u0438\u0448\u0435\u043c \u0434\u0430\u043b\u044c\u0448\u0435.\r\n\r\n\u0412 \u043d\u0430\u0447\u0430\u043b\u0435 \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0435\u0449\u0451 \u043e\u0434\u043d\u0443 \u0441\u0442\u0440\u043e\u043a\u0443:\r\n\r\nnamespace App\\Http\\Controllers;\r\n\r\n\u0418\u0442\u043e\u0433\u043e\u0432\u044b\u0439 \u0444\u0430\u0439\u043b \u0434\u043e\u043b\u0436\u0435\u043d \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a:\r\n \r\n\u0421\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0444\u0430\u0439\u043b\u0430 web.php\r\n\u0421\u043a\u0440\u0438\u043d\u0448\u043e\u0442: Skillbox Media\r\n\r\n\u0413\u043e\u0442\u043e\u0432\u043e! \u041d\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u0435\u043c \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0444\u0430\u0439\u043b.\u0421\u043e\u0437\u0434\u0430\u0451\u043c \r\n\u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\r\n\r\n\u041a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440 \u2014 \u044d\u0442\u043e \u043f\u043e\u043d\u044f\u0442\u0438\u0435 \u0438\u0437 \u0448\u0430\u0431\u043b\u043e\u043d\u0430 \r\n\u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f MVC. \u041e \u043d\u0451\u043c \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f .\r\n\r\n\r\n\r\n\u041e \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430\u0445 \u043f\u0440\u043e\u0441\u0442\u044b\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438\r\n\r\n\u0427\u0442\u043e\u0431\u044b \u043d\u0435 \u0432\u0434\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0441\u0442\u0438, \r\n\u0441\u043a\u0430\u0436\u0435\u043c, \u0447\u0442\u043e \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440 \u2014 \u044d\u0442\u043e \u0447\u0430\u0441\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043e\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0441 \u043c\u043e\u0434\u0435\u043b\u044c\u044e (\u0434\u0430\u043d\u043d\u044b\u043c\u0438) \u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c (\u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c).\r\n\r\n\u041f\u0440\u043e\u0441\u0442\u044b\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438, \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440 \u2014 \u044d\u0442\u043e \u0441\u0432\u044f\u0437\u0443\u044e\u0449\u0435\u0435 \r\n\u0437\u0432\u0435\u043d\u043e \u043c\u0435\u0436\u0434\u0443 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u043c \u0438 \u0431\u0430\u0437\u043e\u0439 \u0434\u0430\u043d\u043d\u044b\u0445. \u041a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440, \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u044d\u0442\u043e\u0442 \u0437\u0430\u043f\u0440\u043e\u0441, \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u0435\u0433\u043e \u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0443\u0435\u0442 \u0441 \u0431\u0430\u0437\u043e\u0439 \u0434\u0430\u043d\u043d\u044b\u0445, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435. \u0417\u0430\u0442\u0435\u043c \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440 \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442 \u044d\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 \u0438\u0445 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u0434\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f.\r\n\r\n\u041a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440 \u043e\u0442\u0434\u0435\u043b\u044f\u0435\u0442 \u0431\u0438\u0437\u043d\u0435\u0441-\u043b\u043e\u0433\u0438\u043a\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \r\n\u043e\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430, \u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0431\u043e\u043b\u0435\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c \u0438 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u0431\u043e\u043b\u0435\u0435 \u0433\u0438\u0431\u043a\u0443\u044e \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0443. \u041e\u043d \u0442\u0430\u043a\u0436\u0435 \u0434\u0430\u0451\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442\u0430\u043c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c \u043f\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u0431\u0435\u0437 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0437\u043d\u0430\u0442\u044c \u043e \u0434\u0440\u0443\u0433\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.\r\n\r\n\u041d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440 \u0434\u043b\u044f \u0432\u0441\u0435\u0439 \u0438\u0433\u0440\u044b. \r\n\u041d\u0430\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043e\u043d \u0431\u0443\u0434\u0435\u0442 GameController. \u0427\u0442\u043e\u0431\u044b \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0435\u0433\u043e, \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u043a\u043e\u043c\u0430\u043d\u0434\u0443:\r\n\r\nphp artisan make:controller GameController\r\n \r\n\u0421\u043a\u0440\u0438\u043d\u0448\u043e\u0442: Skillbox Media\r\n\r\n\u042d\u0442\u0430 \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0441\u043e\u0437\u0434\u0430\u0441\u0442 \u043d\u043e\u0432\u044b\u0439 \u0444\u0430\u0439\u043b \u0441 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u043e\u043c \r\n\u0432 \u043f\u0430\u043f\u043a\u0435 app\/Http\/Controllers. \u041f\u0435\u0440\u0435\u0439\u0434\u0451\u043c \u0442\u0443\u0434\u0430, \u043e\u0442\u043a\u0440\u043e\u0435\u043c \u0444\u0430\u0439\u043b GameController.php \u0438 \u0432\u043f\u0438\u0448\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434:\r\n\r\n<?php namespace App\\Http\\Controllers; use Illuminate\\Http\\Request; use \r\nIlluminate\\Support\\Facades\\DB; class GameController extends Controller { public function index() { return view('game'); } }\r\n\r\n\u042d\u0442\u043e\u0442 \u043a\u043e\u0434 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043c\u0435\u0442\u043e\u0434 index(), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \r\n\u0431\u0443\u0434\u0435\u0442 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u0438\u0433\u0440\u043e\u0432\u043e\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435, \u0447\u0442\u043e\u0431\u044b \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0430 \u0441\u0430\u0439\u0442\u0435. \u041c\u044b \u043e\u043f\u0438\u0448\u0435\u043c \u0435\u0433\u043e \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u0448\u0430\u0433\u0435.\r\n\r\n\u0410 \u043f\u043e\u043a\u0430 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u044d\u0442\u043e\u0442 \u0436\u0435 \u0444\u0430\u0439\u043b \u0435\u0449\u0451 \r\n\u043e\u0434\u043d\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u2014 play():\r\n\r\npublic function play(Request $request) { $playerChoice = $request->input('choice'); \r\n\/\/ \u0413\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u044b\u0439 \u0445\u043e\u0434 \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0430 $computerChoice = rand(1, 3); if ($computerChoice == 1) { $computerChoice = 'rock'; } elseif ($computerChoice == 2) { $computerChoice = 'paper'; } else { $computerChoice = 'scissors'; } \/\/ \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0438\u0433\u0440\u044b if ($playerChoice == $computerChoice) { $result = 'tie'; } elseif (($playerChoice == 'rock' && $computerChoice == 'scissors') || ($playerChoice == 'paper' && $computerChoice == 'rock') || ($playerChoice == 'scissors' && $computerChoice == 'paper')) { $result = 'win'; } else { $result = 'lose'; } \/\/ \u0421\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0441\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0443 \u0432 \u0431\u0430\u0437\u0443 \u0434\u0430\u043d\u043d\u044b\u0445 DB::table('game_statistics')->insert([ 'player_name' => 'Player 1', 'computer_choice' => $computerChoice, 'player_choice' => $playerChoice, 'result' => $result, 'created_at' => now(), 'updated_at' => now(), ]); \/\/ \u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0438\u0433\u0440\u044b \u0432 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 return view('game', ['result' => $result]); }\r\n\r\n\u0417\u0434\u0435\u0441\u044c \u043c\u044b \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u043b\u0438 \u043e\u0441\u043d\u043e\u0432\u043d\u0443\u044e \u043b\u043e\u0433\u0438\u043a\u0443 \u0438\u0433\u0440\u044b. \r\n\u041d\u0430 \u0432\u0445\u043e\u0434 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 Request, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0445\u043e\u0434 \u0438\u0433\u0440\u043e\u043a\u0430. \u042d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440 \u044d\u0442\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u044c, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u043d\u0430\u0436\u043c\u0451\u043c \u043d\u0430 \u043e\u0434\u043d\u0443 \u0438\u0437 \u043a\u043d\u043e\u043f\u043e\u043a \u0432 \u0438\u0433\u0440\u0435 (\u00ab\u041a\u0430\u043c\u0435\u043d\u044c\u00bb, \u00ab\u041d\u043e\u0436\u043d\u0438\u0446\u044b\u00bb \u0438\u043b\u0438 \u00ab\u0411\u0443\u043c\u0430\u0433\u0430\u00bb), \u0430 \u043f\u043e\u0442\u043e\u043c \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u043c \u043d\u0430\u0448 \u0432\u044b\u0431\u043e\u0440 \u043c\u0435\u0442\u043e\u0434\u043e\u043c POST.\r\n\r\n\r\n\r\n\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e\u0431 HTTP-\u0437\u0430\u043f\u0440\u043e\u0441\u0430\u0445 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \r\n\u0432 \u043d\u0430\u0448\u0435\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043e \u043f\u0440\u043e\u0442\u043e\u043a\u043e\u043b\u0435 HTTP .\r\n\r\n\u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e \u043a\u0430\u043a \u043c\u044b \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 \u0437\u0430\u043f\u0440\u043e\u0441, \r\n\u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e\u0442\u0432\u0435\u0442 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0430 \u2014 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\u0430 \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u044b\u0445 \u0447\u0438\u0441\u0435\u043b. \u0418 \u0432 \u043a\u043e\u043d\u0446\u0435 \u043c\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043f\u043e\u0431\u0435\u0434\u0438\u0442\u0435\u043b\u044f \u0438 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 \u0431\u0430\u0437\u0443 \u0434\u0430\u043d\u043d\u044b\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u043c insert().\r\n\r\n\u041b\u043e\u0433\u0438\u043a\u0430 \u0438\u0433\u0440\u044b \u0433\u043e\u0442\u043e\u0432\u0430! \u041e\u043f\u044f\u0442\u044c \u0436\u0435, \u043d\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u0435\u043c \r\n\u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0444\u0430\u0439\u043b.\u0421\u043e\u0437\u0434\u0430\u0451\u043c \u043a\u043d\u043e\u043f\u043a\u0438 \u0434\u043b\u044f \u0438\u0433\u0440\u044b\r\n\r\n\u041c\u0435\u0442\u043e\u0434 index() \u0438\u0437 \u0444\u0430\u0439\u043b\u0430 GameController.php \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 \r\n\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0441 \u0438\u0433\u0440\u043e\u0439, \u043d\u043e \u043f\u043e\u043a\u0430 \u043d\u0430 \u043d\u0435\u0439 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435\u0442, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0430\u0440\u0443 \u043a\u043d\u043e\u043f\u043e\u043a.\r\n\r\n\u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u043f\u0430\u043f\u043a\u0443 resources\/views \u0438 \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u0442\u0430\u043c \r\n\u0444\u0430\u0439\u043b \u0441 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c game.blade.php. \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0442\u0443\u0434\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434, \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0438\u0433\u0440\u043e\u0432\u043e\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441:\r\n\r\n<!DOCTYPE html> <html> <head> <title>Rock Paper \r\nScissors<\/title> <\/head> <body> <h1>Rock Paper Scissors<\/h1> @if(isset($result)) <p>You {{ $result }}!<\/p> @endif <form method=\"POST\" action=\"{{ route('game.play') }}\"> @csrf <label for=\"rock\">Rock<\/label> <input type=\"radio\" name=\"choice\" id=\"rock\" value=\"rock\"> <label for=\"paper\">Paper<\/label> <input type=\"radio\" name=\"choice\" id=\"paper\" value=\"paper\"> <label for=\"scissors\">Scissors<\/label> <input type=\"radio\" name=\"choice\" id=\"scissors\" value=\"scissors\"> <button type=\"submit\">Play<\/button> <\/form> <\/body> <\/html>\r\n\r\n\u041d\u0435 \u0443\u0434\u0438\u0432\u043b\u044f\u0439\u0442\u0435\u0441\u044c, \u0447\u0442\u043e \u043c\u044b \u0432\u0441\u0442\u0430\u0432\u0438\u043b\u0438 HTML-\u043a\u043e\u0434 \r\n\u0432 PHP-\u0444\u0430\u0439\u043b, \u2014 \u044d\u0442\u043e \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e. PHP \u0443\u043c\u0435\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 HTML.\r\n\r\n\u041d\u043e \u0432\u0435\u0440\u043d\u0451\u043c\u0441\u044f \u043a \u043a\u043e\u0434\u0443: \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \r\n\u0438\u0433\u0440\u043e\u0432\u043e\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0442\u0440\u0451\u0445 \u043a\u043d\u043e\u043f\u043e\u043a \u0441 \u0432\u044b\u0431\u043e\u0440\u043e\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432. \u0422\u0430\u043a\u0436\u0435 \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u043a\u043d\u043e\u043f\u043a\u0443, \u0447\u0442\u043e\u0431\u044b \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 GameController \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0438\u0433\u0440\u044b $result, \u0435\u0441\u043b\u0438 \u043e\u043d\u0430 \u0443\u0436\u0435 \u0431\u044b\u043b\u0430 \u0441\u044b\u0433\u0440\u0430\u043d\u0430.\r\n\r\n\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0438\u0433\u0440\u044b \u043d\u0443\u0436\u0435\u043d, \u0447\u0442\u043e\u0431\u044b \u043c\u044b \u043c\u043e\u0433\u043b\u0438 \r\n\u0432\u0438\u0434\u0435\u0442\u044c, \u043a\u0442\u043e \u043f\u043e\u0431\u0435\u0434\u0438\u043b \u0432 \u043f\u0440\u043e\u0448\u043b\u043e\u0439 \u0438\u0433\u0440\u0435. \u0410 \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u043d\u0435 \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c \u044d\u0442\u043e\u0442 \u0442\u0435\u043a\u0441\u0442, \u043c\u044b \u0441\u043f\u0435\u0440\u0432\u0430 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u0431\u044b\u043b\u0430 \u043b\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f $result \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0430 \u0447\u0435\u0440\u0435\u0437 GameController.\r\n\r\n\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043d\u0430\u0448 \u0441\u0435\u0440\u0432\u0435\u0440 \r\n\u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:\r\n\r\nphp artisan serve\r\n\r\n\u0412\u0438\u0434\u0438\u043c \u0442\u043e, \u0447\u0442\u043e \u0438 \u0445\u043e\u0442\u0435\u043b\u0438 \u0443\u0432\u0438\u0434\u0435\u0442\u044c:\r\n \r\n\u0421\u043a\u0440\u0438\u043d\u0448\u043e\u0442: Skillbox Media\r\n\r\n\u0415\u0441\u043b\u0438 \u043d\u0430\u0436\u0430\u0442\u044c \u043d\u0430 \u043e\u0434\u043d\u0443 \u0438\u0437 \u043a\u043d\u043e\u043f\u043e\u043a, \u043c\u043e\u0436\u043d\u043e \r\n\u0443\u0437\u043d\u0430\u0442\u044c, \u043a\u0442\u043e \u043f\u043e\u0431\u0435\u0434\u0438\u043b:\r\n \r\n\u0421\u043a\u0440\u0438\u043d\u0448\u043e\u0442: Skillbox Media\r\n\r\n\u041d\u043e \u0441\u0440\u0430\u0437\u0443 \u043f\u0440\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0434\u043d\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430: \r\n\u043c\u044b \u043d\u0435 \u0437\u043d\u0430\u0435\u043c, \u043a\u0430\u043a\u0438\u0435 \u0445\u043e\u0434\u044b \u0441\u0434\u0435\u043b\u0430\u043b \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440, \u0430 \u043a\u0430\u043a\u0438\u0435 \u2014 \u043c\u044b. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u044d\u0442\u043e \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u043c.\r\n\r\n\u0417\u0430\u0445\u043e\u0434\u0438\u043c \u043e\u0431\u0440\u0430\u0442\u043d\u043e \u0432 \u0444\u0430\u0439\u043b GameController.php \u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u043c \r\n\u0432\u0441\u0435\u0433\u043e \u043e\u0434\u043d\u0443 \u0441\u0442\u0440\u043e\u043a\u0443:\r\n\r\nreturn view('game', ['result' => $result, 'player_choice' => $playerChoice, \r\n'computer_choice' => $computerChoice]);\r\n\r\n\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u0432 \u043d\u0430\u0448\u0435 \r\n\u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435. \u0412\u043d\u0435\u0441\u0451\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0438 \u0432 \u0444\u0430\u0439\u043b game.blade.php:\r\n\r\n@if(isset($result)) <p>You played {{ $player_choice }}<\/p> \r\n<p>Computer played {{ $computer_choice }}<\/p> <p>You {{ $result }}!<\/p> @endif\r\n\r\n\u041f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0441\u0435\u0440\u0432\u0435\u0440 \u0438 \u0432\u0438\u0434\u0438\u043c, \u0447\u0442\u043e \u0442\u0435\u043f\u0435\u0440\u044c \r\n\u0432\u0441\u0451 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e:\r\n \r\n\u0421\u043a\u0440\u0438\u043d\u0448\u043e\u0442: Skillbox Media\r\n\r\n\u041e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0432\u044b\u0432\u0435\u0441\u0442\u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0445 \r\n\u0438\u0433\u0440, \u0438 \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u0433\u043e\u0442\u043e\u0432\u043e. \u0414\u043b\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0442\u044b \u0431\u0443\u0434\u0435\u043c \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u0441\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0443 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0445 \u0434\u0435\u0441\u044f\u0442\u0438 \u0438\u0433\u0440.\r\n\r\n\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0444\u0430\u0439\u043b GameController.php, \r\n\u0430 \u0432\u0435\u0440\u043d\u0435\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 index() \u0438 play():\r\n\r\npublic function index() { $last_games = DB::table('game_statistics') ->orderBy('created_at', \r\n'desc') ->limit(10) ->get(); return view('game', ['last_games' => $last_games]); } public function play(Request $request) { $last_games = DB::table('game_statistics') ->orderBy('created_at', 'desc') ->limit(10) ->get(); $playerChoice = $request->input('choice'); ... \/\/ \u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0438\u0433\u0440\u044b \u0432 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 return view('game', ['result' => $result, 'player_choice' => $playerChoice, 'computer_choice' => $computerChoice, 'last_games' => $last_games]); }\r\n\r\n\u041c\u044b \u043e\u043f\u0443\u0441\u0442\u0438\u043b\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0440\u043e\u043a, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \r\n\u043b\u0438\u0448\u044c \u0441\u0430\u043c\u044b\u0435 \u0432\u0430\u0436\u043d\u044b\u0435 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u044b. \u041a\u0430\u043a \u0432\u0438\u0434\u0438\u0442\u0435, \u0443 \u043d\u0430\u0441 \u043f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c \u043d\u043e\u0432\u0430\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f $last_games, \u0432 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043f\u043e\u043c\u0435\u0449\u0430\u044e\u0442\u0441\u044f 10 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0445 \u0441\u0442\u0440\u043e\u043a \u0431\u0430\u0437\u044b \u0434\u0430\u043d\u043d\u044b\u0445. \u0414\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u044d\u0442\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0434\u0432\u0443\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432: orderBy(), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f, \u0447\u0442\u043e\u0431\u044b \u0434\u043e\u0441\u0442\u0430\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0430\u043c\u044b\u0435 \u0441\u0432\u0435\u0436\u0438\u0435 \u0438\u0433\u0440\u044b, \u0438 limit(10), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0442\u044c \u0438\u0445 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0434\u0435\u0441\u044f\u0442\u044c\u044e.\r\n\r\n\u0412 \u043a\u0430\u0436\u0434\u043e\u043c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u043c\u044b \u0442\u0430\u043a\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \r\n\u044d\u0442\u043e\u0442 \u0441\u043f\u0438\u0441\u043e\u043a \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f.\r\n\r\n\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0444\u0430\u0439\u043b game.blade.php \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \r\n\u044d\u0442\u0438 \u0438\u0433\u0440\u044b:\r\n\r\n<ul> @foreach ($last_games as $last_game) <li> <p>You \r\n{{ $last_game->result }}<\/p> <p>You played {{ $last_game->player_choice }}<\/p> <p>Computer played {{ $last_game->computer_choice }}<\/p> <\/li> @endforeach <\/ul>\r\n\r\n\u042d\u0442\u043e\u0442 \u043a\u043e\u0434 \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u0451\u0442 \u043d\u0435\u043d\u0443\u043c\u0435\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \r\n\u0441\u043f\u0438\u0441\u043e\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u0444\u043e\u0440\u043c\u044b. \u0412\u043d\u0443\u0442\u0440\u0438 \u0441\u043f\u0438\u0441\u043a\u0430 \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b <li> \u0447\u0435\u0440\u0435\u0437 \u0446\u0438\u043a\u043b @foreach. \u0412 \u043d\u0451\u043c \u043c\u044b \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u043c \u043f\u043e \u0432\u0441\u0435\u043c \u043d\u0430\u0448\u0438\u043c \u0438\u0433\u0440\u0430\u043c \u0438 \u0432\u044b\u0432\u043e\u0434\u0438\u043c \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u0438\u0433\u0440\u044b \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442, \u0445\u043e\u0434 \u0438\u0433\u0440\u043e\u043a\u0430 \u0438 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0430.\r\n\r\n\u0421\u043e\u0445\u0440\u0430\u043d\u0438\u043c \u0444\u0430\u0439\u043b\u044b \u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u0441\u0435\u0440\u0432\u0435\u0440:\r\n \r\n\u0421\u043a\u0440\u0438\u043d\u0448\u043e\u0442: Skillbox Media\r\n\r\n\u0423\u0440\u0430! \u0423 \u043d\u0430\u0441 \u0432\u044b\u0432\u043e\u0434\u044f\u0442\u0441\u044f \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0437\u0430\u0432\u0435\u0440\u0448\u0451\u043d\u043d\u044b\u0445 \r\n\u0438\u0433\u0440, \u0430 \u043d\u043e\u0432\u044b\u0435 \u0438\u0433\u0440\u044b \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u044e\u0442\u0441\u044f.\u0423\u043a\u0440\u0430\u0448\u0430\u0435\u043c \u0438\u0433\u0440\u0443 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e CSS\r\n\r\n\u041e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0443\u043a\u0440\u0430\u0441\u0438\u0442\u044c \u0441\u0430\u0439\u0442 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \r\nCSS, \u0430 \u0437\u0430\u0442\u0435\u043c \u043d\u0430\u0441\u043b\u0430\u0434\u0438\u0442\u044c\u0441\u044f \u0435\u0433\u043e \u043a\u0440\u0430\u0441\u043e\u0442\u043e\u0439.\r\n\r\n\r\n\r\n\u0415\u0441\u043b\u0438 \u0432\u044b \u043d\u0435 \u0437\u043d\u0430\u0435\u0442\u0435, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 CSS \u0438 \u043a\u0430\u043a \r\n\u0441 \u043d\u0438\u043c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c, \u0441\u043e\u0432\u0435\u0442\u0443\u0435\u043c \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u043d\u0430\u0448\u0443 \u0441\u0442\u0430\u0442\u044c\u044e \u043f\u0440\u043e \u043a\u0430\u0441\u043a\u0430\u0434\u043d\u044b\u0435 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0441\u0442\u0438\u043b\u0435\u0439 .\r\n\r\n\u041e\u0442\u043a\u0440\u043e\u0435\u043c \u043f\u0430\u043f\u043a\u0443 public \u0438 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u0430\u0439\u043b styles.css. \r\n\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u043d\u0435\u0433\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434:\r\n\r\nbody { font-family: Arial, sans-serif; background-color: #f5f5f5; } h1 \r\n{ text-align: center; margin-top: 50px; } form { display: flex; flex-direction: column; align-items: center; margin-top: 30px; } label { margin-right: 70px; margin-top: 20px; font-size: 20px; } input[type=\"radio\"] { margin-left: 10px; padding-bottom: 50px; } button[type=\"submit\"] { margin-top: 20px; background-color: #008CBA; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease; } button[type=\"submit\"]:hover { background-color: #006B9F; } p { text-align: center; margin-top: 20px; font-size: 24px; font-weight: bold; } ul { list-style-type: none; } li { background: #dadada; } \r\n\r\n\u0417\u0434\u0435\u0441\u044c \u043c\u044b \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u0447\u0435\u0441\u0430\u043b\u0438 \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \r\n\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u043b\u0438\u0441\u044c \u0447\u0443\u0442\u044c \u0441\u0438\u043c\u043f\u0430\u0442\u0438\u0447\u043d\u0435\u0435. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 \u0442\u0435\u0433\u0435 body \u043c\u044b \u0437\u0430\u0434\u0430\u043b\u0438 \u0448\u0440\u0438\u0444\u0442 \u0438 \u0446\u0432\u0435\u0442 \u0444\u043e\u043d\u0430, \u0430 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043f\u0430\u0440\u0430\u0433\u0440\u0430\u0444\u043e\u0432 p \u0437\u0430\u0434\u0430\u043b\u0438 \u0440\u0430\u0437\u043c\u0435\u0440 \u0448\u0440\u0438\u0444\u0442\u0430, \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u0435\u0433\u043e \u0436\u0438\u0440\u043d\u044b\u043c \u0438 \u0432\u044b\u0440\u043e\u0432\u043d\u044f\u043b\u0438 \u0442\u0435\u043a\u0441\u0442 \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443.\r\n\r\n\u0422\u0435\u043f\u0435\u0440\u044c \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u043c CSS-\u0444\u0430\u0439\u043b \u0438 \u043e\u0442\u043a\u0440\u043e\u0435\u043c \u0444\u0430\u0439\u043b \r\ngame.blade.php, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0432 \u043d\u0435\u0433\u043e \u043d\u043e\u0432\u044b\u0435 \u0441\u0442\u0438\u043b\u0438:\r\n\r\n<!DOCTYPE html> <html> <head> <title>Rock Paper \r\nScissors<\/title> <link rel=\"stylesheet\" href=\"{{ asset('styles.css') }}\"> <\/head> <body> ... <\/body> <\/html>\r\n\r\n\u041f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a:\r\n \r\n\u0421\u043a\u0440\u0438\u043d\u0448\u043e\u0442: Skillbox Media\r\n\r\n\u041d\u0435 \u043b\u0443\u0447\u0448\u0438\u0439 \u0434\u0438\u0437\u0430\u0439\u043d, \u043d\u043e \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u044e \u0432\u044b, \r\n\u043d\u0430\u0434\u0435\u044e\u0441\u044c, \u043f\u043e\u043d\u044f\u043b\u0438. \u041c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u043e\u0432\u0435\u0441\u0442\u0438 \u0441\u0442\u0438\u043b\u0438 \u0434\u043e \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u0441\u0442\u0432\u0430 \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0438\u0433\u0440\u0443 \u043d\u0430 \u043a\u0430\u043a\u0443\u044e-\u043d\u0438\u0431\u0443\u0434\u044c \u043f\u0440\u0435\u043c\u0438\u044e \u0432 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0432\u0435\u0431-\u0434\u0438\u0437\u0430\u0439\u043d\u0430.\r\n\r\n\u0410 \u0432\u043e\u0442 \u0438 \u043f\u043e\u043b\u043d\u044b\u0439 \u043a\u043e\u0434 \u0432\u0441\u0435\u0445 \u0444\u0430\u0439\u043b\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \r\n\u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u043b\u0438:\r\n\r\nweb.php:\r\n\r\n\r\n<?php namespace App\\Http\\Controllers; use Illuminate\\Support\\Facades\\Route; \r\nRoute::get('\/', [GameController::class, 'index'])->name('game.index'); Route::post('\/play', [GameController::class, 'play'])->name('game.play');\r\n\r\nGameController.php:\r\n\r\n\r\n<?php namespace App\\Http\\Controllers; use Illuminate\\Http\\Request; use \r\nIlluminate\\Support\\Facades\\DB; class GameController extends Controller { public function index() { $last_games = DB::table('game_statistics') ->orderBy('created_at', 'desc') ->limit(10) ->get(); return view('game', ['last_games' => $last_games]); } public function play(Request $request) { $last_games = DB::table('game_statistics') ->orderBy('created_at', 'desc') ->limit(10) ->get(); $playerChoice = $request->input('choice'); \/\/ \u0413\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u044b\u0439 \u0445\u043e\u0434 \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0430 $computerChoice = rand(1, 3); if ($computerChoice == 1) { $computerChoice = 'rock'; } elseif ($computerChoice == 2) { $computerChoice = 'paper'; } else { $computerChoice = 'scissors'; } \/\/ \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0438\u0433\u0440\u044b if ($playerChoice == $computerChoice) { $result = 'tie'; } elseif (($playerChoice == 'rock' && $computerChoice == 'scissors') || ($playerChoice == 'paper' && $computerChoice == 'rock') || ($playerChoice == 'scissors' && $computerChoice == 'paper')) { $result = 'win'; } else { $result = 'lose'; } \/\/ \u0421\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0441\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0443 \u0432 \u0431\u0430\u0437\u0443 \u0434\u0430\u043d\u043d\u044b\u0445 DB::table('game_statistics')->insert([ 'player_name' => 'Player 1', 'computer_choice' => $computerChoice, 'player_choice' => $playerChoice, 'result' => $result, 'created_at' => now(), 'updated_at' => now(), ]); \/\/ \u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0438\u0433\u0440\u044b \u0432 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 return view('game', ['result' => $result, 'player_choice' => $playerChoice, 'computer_choice' => $computerChoice, 'last_games' => $last_games]); } }\r\n\r\ngame.blade.php:\r\n\r\n\r\n<!DOCTYPE html> <html> <head> <title>Rock Paper \r\nScissors<\/title> <link rel=\"stylesheet\" href=\"{{ asset('styles.css') }}\"> <\/head> <body> <h1>Rock Paper Scissors<\/h1> @if(isset($result)) <p>You played {{ $player_choice }}<\/p> <p>Computer played {{ $computer_choice }}<\/p> <p>You {{ $result }}!<\/p> @endif <form method=\"POST\" action=\"{{ route('game.play') }}\"> @csrf <label for=\"rock\">Rock<\/label> <input type=\"radio\" name=\"choice\" id=\"rock\" value=\"rock\"> <label for=\"paper\">Paper<\/label> <input type=\"radio\" name=\"choice\" id=\"paper\" value=\"paper\"> <label for=\"scissors\">Scissors<\/label> <input type=\"radio\" name=\"choice\" id=\"scissors\" value=\"scissors\"> <button type=\"submit\">Play<\/button> <\/form> <ul> @foreach ($last_games as $last_game) <li> <p>You {{ $last_game->result }}<\/p> <p>You played {{ $last_game->player_choice }}<\/p> <p>Computer played {{ $last_game->computer_choice }}<\/p> <\/li> @endforeach <\/ul> <\/body> <\/html>\r\n\r\nstyles.css:\r\n\r\n\r\nbody { font-family: Arial, sans-serif; background-color: #f5f5f5; } h1 \r\n{ text-align: center; margin-top: 50px; } form { display: flex; flex-direction: column; align-items: center; margin-top: 30px; } label { margin-right: 70px; margin-top: 20px; font-size: 20px; } input[type=\"radio\"] { margin-left: 10px; padding-bottom: 50px; } button[type=\"submit\"] { margin-top: 20px; background-color: #008CBA; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease; } button[type=\"submit\"]:hover { background-color: #006B9F; } p { text-align: center; margin-top: 20px; font-size: 24px; font-weight: bold; } ul { list-style-type: none; } li { background: #dadada; }\r\n\r\n_create_game_statistics_table.php:\r\n\r\n\r\n<?php use Illuminate\\Database\\Migrations\\Migration; use Illuminate\\Database\\Schema\\Blueprint; \r\nuse Illuminate\\Support\\Facades\\Schema; return new class extends Migration { \/** * Run the migrations. *\/ public function up(): void { Schema::create('game_statistics', function (Blueprint $table) { $table->id(); $table->string('player_name'); $table->string('computer_choice'); $table->string('player_choice'); $table->string('result'); $table->timestamps(); }); } \/** * Reverse the migrations. *\/ public function down(): void { Schema::dropIfExists('game_statistics'); } };\r\n\r\n\u0427\u0442\u043e \u0437\u0430\u043f\u043e\u043c\u043d\u0438\u0442\u044c\r\n\r\n\u041c\u044b \u0443\u0437\u043d\u0430\u043b\u0438, \u0447\u0442\u043e Laravel \u2014 \u044d\u0442\u043e \u043c\u043e\u0449\u043d\u044b\u0439 \u0438 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \r\n\u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u041e\u0441\u0432\u043e\u0438\u0442\u044c \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0437\u0430 \u043f\u0430\u0440\u0443 \u043c\u0435\u0441\u044f\u0446\u0435\u0432, \u0430 \u043d\u0430\u0447\u0430\u0442\u044c \u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0430 \u043d\u0451\u043c \u2014 \u0443\u0436\u0435 \u0441\u0435\u0433\u043e\u0434\u043d\u044f.\r\n\r\n\u0427\u0442\u043e\u0431\u044b \u043b\u0443\u0447\u0448\u0435 \u043f\u043e\u043d\u044f\u0442\u044c Laravel, \u0441\u043e\u0432\u0435\u0442\u0443\u0435\u043c \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \r\n\u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438\u043b\u0438 \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0434\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043d\u0430\u0448\u0435, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:\r\n\r\n- \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u044e \r\n;\r\n- \u043f\u0440\u043e\u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \r\n;\r\n- \u0432\u0441\u0442\u0440\u043e\u0438\u0442\u044c ORM .\r\n\r\n\u0427\u0438\u0442\u0430\u0439\u0442\u0435 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e \r\n\u0438 \u043d\u0430\u0431\u0438\u0440\u0430\u0439\u0442\u0435\u0441\u044c \u043e\u043f\u044b\u0442\u0430. \u0423\u0441\u043f\u0435\u0445\u043e\u0432!\r\n\r\n \r\n\r\n \r\n\r\n\r\n\u0411\u043e\u043b\u044c\u0448\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0433\u043e \u043f\u0440\u043e \u043a\u043e\u0434 \u0432 \u043d\u0430\u0448\u0435\u043c \u0442\u0435\u043b\u0435\u0433\u0440\u0430\u043c-\u043a\u0430\u043d\u0430\u043b\u0435 \r\n . \u041f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u0439\u0442\u0435\u0441\u044c!\r\n\r\n\r\n\r\n\u0427\u0438\u0442\u0430\u0439\u0442\u0435 \u0442\u0430\u043a\u0436\u0435:\r\n\r\n- \u041a\u0430\u043a \u043d\u0430\u0447\u0430\u0442\u044c \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430 PHP \r\n \r\n- \u00ab\u0418\u0437 \u0440\u0435\u043a\u043b\u0430\u043c\u043d\u043e\u0433\u043e \u0430\u0433\u0435\u043d\u0442\u0441\u0442\u0432\u0430 \u043c\u0435\u043d\u044f \u0443\u0432\u043e\u043b\u0438\u043b\u0438 \r\n\u0437\u0430 \u0442\u043e, \u0447\u0442\u043e \u044f \u0443\u0447\u0438\u043b\u0441\u044f \u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0430\u0439\u0442\u044b \u043f\u0440\u044f\u043c\u043e \u043d\u0430 \u0440\u0430\u0431\u043e\u0442\u0435\u00bb \r\n- Frontend \u0438 backend: \u0447\u0442\u043e \u044d\u0442\u043e, \u0432 \u0447\u0451\u043c \u0440\u0430\u0437\u043b\u0438\u0447\u0438\u044f \r\n\u0438 \u0447\u0442\u043e \u0432\u044b\u0431\u0440\u0430\u0442\u044c ","author":{"@type":"Person","name":"\u0414\u043c\u0438\u0442\u0440\u0438\u0439 \u0417\u0432\u0435\u0440\u0435\u0432","url":"https:\/\/skillbox.ru\/media\/authors\/dmitriy-zverev\/"},"publisher":{"@type":"Organization","name":"Skillbox","logo":{"@type":"ImageObject","url":"https:\/\/skillbox.ru\/static\/images\/skillbox.png"}},"mainEntityOfPage":{"@type":"WebPage","url":"https:\/\/skillbox.ru\/media\/code\/freymvork-laravel-kak-rabotaet-i-zachem-nuzhen\/"},"datePublished":"2023-03-31T07:53:00Z","dateModified":"2025-03-06T21:36:29Z","image":{"@type":"ImageObject","url":["https:\/\/248006.selcdn.ru\/main\/iblock\/d4f\/d4f7f73fe42ad2b20090300b89d36e2f\/8450c6f32c4affa7b53bf49141c9d20f.png"]},"description":"\u041f\u0438\u0448\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e\u0433\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 \u0438 \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0435\u043c \u043e\u0441\u043d\u043e\u0432\u044b \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0430 PHP."}
</script><script data-skip-moving="true" id="FiMjZmipVK5U4ODg">if (window.relap) window.relap.ar('FiMjZmipVK5U4ODg');</script> </div>
<script>
window.Section_id = 10;
</script>
</div>
</main>
<footer class="without-buttons">
<div class="footer__wrapper container">
<div class="footer__firstgroup">
<section class="footer__contactbox">
<address class="footer__contacts">
<p class="footer__contacts-block">
<a class="footer__phone link" href="tel:+74951540915">8 (800) 500-05-22</a>
<span class="footer__phone-caption">Контактный центр</span>
</p>
<p class="footer__contacts-block">
<a class="footer__phone link" href="tel:+74952915987">+7(495) 291-59-87</a>
<span class="footer__phone-caption">Отдел заботы о пользователях</span>
</p>
<p class="footer__address"> Москва, Ленинский проспект, дом 6, строение 20</p>
</address>
<ul class="social-contacts footer__social">
<li>
<a class="social-contacts__item" href="https://vk.com/skillbox_education"
aria-label="Вконтакте">
<img src="/static/images/footer/soc_vk.svg"/>
</a>
</li>
<li>
<a class="social-contacts__item"
href="https://www.youtube.com/channel/UC2FJq-Rr7v4SlKAoM7x0ZhA" aria-label="YouTube">
<img src="/static/images/footer/soc_tube.svg"/>
</a>
</li>
<li>
<a class="social-contacts__item" href="tg://resolve?domain=skillboxru"
aria-label="Telegram">
<img src="/static/images/footer/soc_tg.svg"/>
</a>
</li>
</ul>
<div class="footer__age-limit">
16+
</div>
</section>
<section class="footer__rewardbox">
<ul class="rewards footer__rewards">
<li>
<span class="rewards__item">
<img src="/static/images/footer/footer_runet.svg" alt=""/>
<span>Премии Рунета</span>
<span>2018, 2019, 2020</span>
</span>
</li>
</ul>
</section>
</div>
<section class="footer__linksbox">
<ul class="links__list links__list--courses">
<li class="links__item links__item--header">Все направления</li>
<li class="links__item"><a href="/code/?utm_source=media&utm_medium=button&utm_campaign=footerlink_code&utm_term=footer">Программирование</a></li>
<li class="links__item"><a href="/design/?utm_source=media&utm_medium=button&utm_campaign=footerlink_design&utm_term=footer">Дизайн</a></li>
<li class="links__item"><a href="/marketing/?utm_source=media&utm_medium=button&utm_campaign=footerlink_marketing&utm_term=footer">Маркетинг</a></li>
<li class="links__item"><a href="/management/?utm_source=media&utm_medium=button&utm_campaign=footerlink_management&utm_term=footer">Управление</a></li>
<li class="links__item"><a href="/games/?utm_source=media&utm_medium=button&utm_campaign=footerlink_gamedev&utm_term=footer">Игры</a></li>
<li class="links__item"><a href="/multimedia/?utm_source=media&utm_medium=button&utm_campaign=footerlink_multimedia&utm_term=footer">Мультимедиа</a></li>
<li class="links__item"><a href="/psychology/?utm_source=media&utm_medium=button&utm_campaign=footerlink_psychology&utm_term=footer">Психология</a></li>
<li class="links__item"><a href="/general-development/?utm_source=media&utm_medium=button&utm_campaign=footerlink_general-development&utm_term=footer">Общее развитие</a></li>
<li class="links__item"><a href="/engineering/?utm_source=media&utm_medium=button&utm_campaign=footerlink_engineering&utm_term=footer">Инженерия</a></li>
<li class="links__item"><a href="/english/?utm_source=media&utm_medium=button&utm_campaign=footerlink_english&utm_term=footer">Английский язык</a></li>
<li class="links__item"><a href="/other/?utm_source=media&utm_medium=button&utm_campaign=footerlink_other&utm_term=footer">Другое</a></li>
</ul>
<ul class="links__list links__list--about">
<li class="links__item links__item--header">О Skillbox</li>
<li class="links__item"><a href="/company/?utm_source=media&utm_medium=button&utm_campaign=footerlink_aboutskillbox&utm_term=footer">О Платформе</a></li>
<li class="links__item"><a href="/career/?utm_source=media&utm_medium=button&utm_campaign=footerlink_careercentr&utm_term=footer"> Центр карьеры</a></li>
<li class="links__item"><a href="/otzyvy/?utm_source=media&utm_medium=button&utm_campaign=footerlink_testimonials&utm_term=footer">Отзывы</a></li>
<li class="links__item"><a href="/contacts/?utm_source=media&utm_medium=button&utm_campaign=footerlink_skillboxcontacts&utm_term=footer">Контакты</a></li>
<li class="links__item"><a href="/jobs/?utm_source=media&utm_medium=button&utm_campaign=footerlink_jobs&utm_term=footer">Вакансии</a></li>
<li class="links__item"><a href="/teachers/?utm_source=media&utm_medium=button&utm_campaign=footerlink_school&utm_term=footer">Школа кураторов</a></li>
<li class="links__item"><a href="/sale/free/?utm_source=media&utm_medium=button&utm_campaign=footerlink_free&utm_term=footer">Бесплатно</a></li>
<li class="links__item"><a href="/media/topic/tests/?utm_source=media&utm_medium=button&utm_campaign=footerlink_tests&utm_term=footer">Онлайн-тесты</a></li>
</ul>
<ul class="links__list links__list--webinar">
<li class="links__item links__item--header">Вебинары</li>
<li class="links__item"><a href="https://live.skillbox.ru/?utm_source=media&utm_medium=button&utm_campaign=footerlink_webinars&utm_term=footer" target="_blank" rel="noopener">Все вебинары</a></li>
<li class="links__item"><a href="https://live.skillbox.ru/playlists/?utm_source=media&utm_medium=button&utm_campaign=footerlink_playlists&utm_term=footer" target="_blank" rel="noopener">Плейлисты</a></li>
<li class="links__item"><a href="https://live.skillbox.ru/calendar/?utm_source=media&utm_medium=button&utm_campaign=footerlink_schedule&utm_term=footer" target="_blank" rel="noopener">Расписание</a></li>
</ul>
<ul class="links__list links__list--last">
<li class="links__item links__journal"><a href="/media/" target="_blank" rel="noopener">Медиа</a></li>
<li class="links__item"><a href="https://partners.skillbox.ru/?utm_source=media&utm_medium=button&utm_campaign=footerlink_partners&utm_term=footer" target="_blank" rel="noopener">Партнерская программа</a></li>
<li class="links__item"><a href="https://b2b.skillbox.ru/?utm_source=media&utm_medium=button&utm_campaign=footerlink_b2b&utm_term=footer" target="_blank" rel="noopener">Корпоративным клиентам</a></li>
<li class="links__item"><a href="https://career.skillbox.ru/?utm_source=media&utm_medium=button&utm_campaign=footerlink_employees&utm_term=footer" target="_blank" rel="noopener">Для работодателей</a></li>
</ul>
</section>
</div>
<div class="footer__underline container">
<span class="footer__copy">
© Skillbox, 2026 </span>
<div>
<span class="footer__oferta">
<a href="/oferta.pdf" target="_blank">Договор оферты</a>
</span>
<span class="footer__payment">
<a href="/payments/" target="_blank">Оплата</a>
</span>
<span class="footer__use-policy">
<a href="/terms_of_use.pdf" target="_blank">Правила пользования Платформой</a>
<a href="/privacy_policy.pdf" target="_blank">Политика конфиденциальности</a>
</span>
</div>
</div>
</footer>
<div class="cookies">
<p class="cookies__desc">
Пользуясь нашим сайтом, вы соглашаетесь с тем, что
<a href="https://skillbox.ru/privacy_policy.pdf" target="_blank" rel="noopener"
type="application/pdf">мы используем cookies</a> 🍪
</p>
<button type="button" class="cookies__button">
Окей
</button>
</div>
<div class="subscribe-popup subscribe">
<div class="subscribe-popup__spacer-mobile"></div>
<div class="subscribe-popup__row-content ">
<button class="subscribe__close"></button>
<div class="subscribe__content">
<div data-subscribe-popup-success class="hidden">
<h2 class="subscribe__header-success">Спасибо за подписку! Забирайте 5 бесплатных курсов:</h2>
<ul class="subscribe__list-block">
<li>Найти себя в IT за 5 дней</li>
<li>Как найти себя в дизайне в 2025 году</li>
<li>Интерьеры, мебель, ландшафт и декорирование</li>
<li>Интернет-маркетинг на практике</li>
<li>Бизнес-аналитик, продакт- и проджект-менеджер</li>
</ul>
<div class="subscribe__btns-el">
<a
target="_blank"
href="https://refer.id/?bot=skillbox_main_bot&platform=telegram&verbose_name=Skillbox&bot_avatar=https://designer.ftrcdn.com/uploads/bot_avatars/medium_54ab1ce8c393eb3df1474846ce0a0e2c.png&n=137050&c=9209&bc_number=890&?utm_source=media&utm_medium=&utm_campaign=all_all_media_banners_invite_sbornik-890_all_bot_skillbox"
class="subscribe__el-btn">Получить доступ</a>
</div>
</div>
<div data-subscribe-popup-content>
<h2 class="subscribe__header">У нас есть классные рассылки!</h2>
<form action="/media/code/freymvork-laravel-kak-rabotaet-i-zachem-nuzhen/" class="newsletter-form page-subscription__form3" data-type="popup">
<input type="hidden" name="action" value="subscribe">
<div class="subscribe__checkboxes"></div>
<div class="subscribe__email email_popup">
<input class="subscribe-form__input" type="text" name="email" placeholder="Email" >
<span class="subscribe-form__label-name">Электронная почта</span>
<button type="submit" class="popup-btn-click">Подписаться</button>
<span class="email__error">Поле необходимо заполнить</span>
</div>
<div class="subscribe-popup__checkbox-end">
<div class="subscribe-popup__checkbox-item" data-checkbox-personal-data>
<div class="subscribe__checkbox">
<input type="checkbox" name="agreements[PERS]" id="isCheckTrue" value="1" data-checkbox-personal-data-input>
<label for="isCheckTrue"><span>Я согласен на <a target="_blank" href="https://skillbox.ru/legal-docs/chou/file/privacy_policy/version-290425.pdf">обработку персональных данных</a></span></label>
</div>
<span class="email__error">Нужно ваше согласие</span>
</div>
<div class="subscribe__bottom">
<span>Нажимая на кнопку, я соглашаюсь с <a target="_blank" href="https://skillbox.ru/legal-docs/skillbox/file/terms_of_use/version-300824.pdf">правилами пользования Платформой</a></span>
</div>
<div class="subscribe-popup__checkbox-item" data-checkbox-personal-data-two>
<div class="subscribe__checkbox subscribe__checkbox--end" >
<input type="checkbox" name="agreements[ADS]" id="isAdsCalls" value="1" checked="" data-checkbox-personal-data-input-two>
<label for="isAdsCalls">Я согласен <a target="_blank" href="https://skillbox.ru/legal-docs/chou/file/soglasie-na-poluchenie-reklamy.pdf">получать рекламу и звонки</a></label>
</div>
<span class="email__error">Нужно ваше согласие</span>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- src="/static/images/articles/subscribe-popup-img.png" -->
</div>
<div class="bg-modal-overlay bg-modal-overlay--transparent"></div>
<script data-skip-moving="true" id="popup__data--formatted">
$(".popup-btn-click").on("click" , function (){
var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
let input = $(this).closest(".subscribe__email").find(".subscribe-form__input");
let inputValue = input.val();
if(emailPattern.test(inputValue)) {
(window["rrApiOnReady"] = window["rrApiOnReady"] || []).push(function() { rrApi.setEmail(inputValue);});
}
});
/*
window.popupData = {
"8": {
header: 'У нас есть классные рассылки про дизайн!!!',
category: 'Дизайн',
checkboxes: [
'Лучшие статьи про Дизайн',
'«Типографика без боли»'
]
},
"10": {
header: 'У нас есть классные рассылки про код',
category: 'Код',
checkboxes: [
'Лучшие статьи про Код и Людей кода',
'«Жизнь без багов»'
]
},
"18": {
category: 'Геймдев',
checkboxes: []
},
"21": {
header: 'У нас есть классные рассылки про бизнес',
category: 'Бизнес',
checkboxes: [
'Лучшие статьи про Бизнес',
'«Цифровая жизнь»',
'«EdTech по полочкам»'
]
},
"9": {
header: 'У нас есть классные рассылки про бизнес',
category: 'Маркетинг',
checkboxes: [
'Лучшие статьи про Бизнес',
'«Цифровая жизнь»',
'«EdTech по полочкам»'
]
},
"11": {
header: 'У нас есть классные рассылки про бизнес',
category: 'Управление',
checkboxes: [
'Лучшие статьи про Бизнес',
'«Цифровая жизнь»',
'«EdTech по полочкам»'
]
},
"17": {
category: 'Развитие',
checkboxes: []
},
"22": {
header: 'У нас есть классные рассылки про образование',
category: 'Образование',
checkboxes: [
'Лучшие статьи про Образование',
'«EdTech по полочкам»',
'«Мой успешный онлайн-курс»'
]
},
}
*/
window.popupData = {"header":"\u0418\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0435 - \u043d\u0430 \u043f\u043e\u0447\u0442\u0443!\u003Cbr\/\u003E\u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u0442\u0435\u043c\u0443 \u0440\u0430\u0441\u0441\u044b\u043b\u043a\u0438\u003Cbr\/\u003E\u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0435 5 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0445 \u043a\u0443\u0440\u0441\u043e\u0432:","category":"\u041a\u043e\u0434","checkboxes":{"23":"\u041c\u0435\u043d\u0435\u0434\u0436\u043c\u0435\u043d\u0442","24":"\u041c\u0430\u0440\u043a\u0435\u0442\u0438\u043d\u0433","26":"\u041a\u043e\u0440\u043f. \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u0435","13":"\u0414\u0438\u0437\u0430\u0439\u043d","16":"\u041f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435","15":"\u041e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0435","17":"\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0438\u0433\u0440","18":"\u041f\u0441\u0438\u0445\u043e\u043b\u043e\u0433\u0438\u044f, \u043e\u0431\u0449\u0435\u0441\u0442\u0432\u043e"},"code":"code","scroll":true};
window.subscribePopupShow = 1;
</script>
<div class="copied">
<img src="/static/images/articles/done-circle.svg" alt="" class="copied__icon">
<p class="copied__text">
Ссылка скопирована
</p>
</div>
<!-- <style>@font-face{font-display:swap;font-family:Graphik;font-weight:500;font-style:normal;src:url(https://248006.selcdn.ru/Shared/fonts/GraphikLCTT-VA-Medium.woff2) format("woff2")}@font-face{font-display:swap;font-family:Graphik;font-weight:700;font-style:normal;src:url(https://248006.selcdn.ru/Shared/fonts/GraphikLCTT-VA-Bold.woff2) format("woff2")}.universal-notice{box-sizing:border-box;text-decoration:none;display:none;min-height:48px;color:var(--banner-color);background-color:var(--banner-bg);overflow:hidden;font-family:Graphik,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-transition:opacity .25s ease-in-out;transition:opacity .25s ease-in-out}.universal-notice *{box-sizing:inherit}.universal-notice.universal-notice--active{display:block}.universal-notice--bitrix{z-index:1000}.universal-notice__wrapper{position:relative;-webkit-box-pack:start;justify-content:flex-start;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;margin-left:12px;padding:4px 0}.universal-notice__title{position:relative;flex-shrink:0;width:132px;margin-right:27px;font-size:14px;line-height:20px;text-transform:uppercase}.universal-notice__timer{display:none;margin:0;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.universal-notice__button{flex-shrink:0;min-width:120px;padding:8px 12px;border-radius:25px;font-weight:500;font-size:12px;line-height:16px;color:#3925b7;text-align:center;text-transform:uppercase;background-color:#ffa6a6}@media (min-width:768px){.universal-notice{min-height:72px}.universal-notice__wrapper{-webkit-box-pack:center;justify-content:center;height:72px;margin:0}.universal-notice__title{width:252px;margin-right:32px;margin-left:20px;font-size:24px;line-height:32px}.universal-notice__button{min-width:200px;margin-right:20px;padding:14px 36px;font-size:16px;line-height:20px}}@media (min-width:768px) and (max-width:0px){.universal-notice{min-height:72px}.universal-notice__wrapper{-webkit-box-pack:center;justify-content:center;height:72px;margin:0}.universal-notice__title{width:252px;margin-right:32px;margin-left:20px;font-size:24px;line-height:32px}.universal-notice__button{min-width:200px;margin-right:20px;padding:14px 36px;font-size:16px;line-height:20px}}@media (min-width:1280px) and (max-width:0px){.universal-notice__wrapper{padding:0}.universal-notice__title{width:unset;margin-right:76px}.universal-notice__timer{flex-shrink:0;margin-right:32px;font-weight:700;font-size:24px;line-height:32px}.universal-notice__timer.js-universal-notice-active{display:-webkit-box;display:flex}.universal-notice__days{margin-right:5px}}@media (min-width:1280px){.universal-notice__wrapper{padding:0}.universal-notice__title{width:unset;margin-right:76px}.universal-notice__timer{flex-shrink:0;margin-right:32px;font-weight:700;font-size:24px;line-height:32px}.universal-notice__timer.js-universal-notice-active{display:-webkit-box;display:flex}.universal-notice__days{margin-right:5px}}</style>-->
</body>
</html>