Створіть вашу першу сторінку в Symfony

Дата оновлення перекладу 2024-06-10

Створіть вашу першу сторінку в Symfony

Створення нової сторинки - не важливо, чи буде це сторінка HTML, чи JSON – це простий процес, який складається з 2 кроків:

  1. Створіть маршрут: Маршрут – це URL (наприкад, /about) вашої сторінки та вказівка на контролер;
  2. Створіть контролер: Контролер – це РНР-функція, написана вами, яка створює сторінку. Ви берете вхідну інформацію запиту, та використовуєте її для створення об'єкта Symfony Response, який може містити HTML зміст, рядок JSON або навіть бінарний файл на кшталт зображення чи PDF.

Screencast

Віддаєте перевагу відео-урокам? Подивість серіал Чудова розробка з Symfony.

See also

Symfony охоплює життєвий цикл HTTP запит-відповідь. Щоб дізнатися більше, див. Symfony та основи HTTP.

Створення сторінки: маршрут та контролер

Tip

Перед тим, як продовжувати, переконайтеся в тому, що ви прочитали главу про установку, і можете викликати застосунок Symfony зі свого браузера.

Припустимо, ви хочете створити сторінку /lucky/number, яка буде генерувати щаслие (добре, випадкове) число, та відображати його. Для цього створіть "клас контролера" та всередині нього - метод "контролера":

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
// src/Controller/LuckyController.php
namespace App\Controller;

use Symfony\Component\HttpFoundation\Response;

class LuckyController
{
    public function number(): Response
    {
        $number = random_int(0, 100);

        return new Response(
            '<html><body>Lucky number: '.$number.'</body></html>'
        );
    }
}

Тепер вам потрібно асоціювати цю функцію контролера з публічним URL (наприклад, /lucky/number) щоб метод number() викликався, коли користувач переходить за ним. Ця асоціація визначається за допомогою атрибута #[Route] (у PHP атрибути використовуються для додавання метаданих до коду):

1
2
3
4
5
6
7
8
9
10
11
12
13
// src/Controller/LuckyController.php

  // ...
+ use Symfony\Component\Routing\Attribute\Route;

  class LuckyController
  {
+     #[Route('/lucky/number')]
      public function number(): Response
      {
          // this looks exactly the same
      }
  }

Ось і все! Якщо ви використовуєте веб-сервер Symfony, спробуйте його, перейшовши за посиланням: http://localhost:8000/lucky/number

Tip

Symfony рекомендує визначати маршрути як атрибути, щоб мати код контролера та конфігурацію його маршруту в одному місці. Однак, якщо ви бажаєте, ви можете визначати маршрути в окремих файлах, використовуючи формати YAML, XML та PHP.

Якщо ви побачите відображене щасливе число - вітаємо! Однак перед тим, як бігти грати в лотерею, подвіться, як це працює. Пам'ятаєте два кроки для створення сторінки?

  1. Створіть контролер і метод: Це функція, в якій ви будуєте сторінку та повертаєте об'єкт Response. Ви дізнаєтеся більше про контролери у розділі про них, включно з тим, як повертати відповіді JSON.
  2. Створіть маршрут: У config/routes.yaml, маршрут визначає URL до вашої сторінки (path), та який controller викликати. Ви дізнаєтеся більше про маршрутизацію у розділі про неї, включно з тим, як створювати змінні URL;

Команда bin/console

Ваш проект вже містить в собі потужний інструмент налагодження: команду bin/console. Спробуйте виконати її:

1
$ php bin/console

Ви маєте побачити список команд, які можуть надати вам інформацію про налагодження, допомогти згенерувати код, згенерувати міграції бази даних та багато іншого. Коли ви будете встановлювати більше пакетів, ви будете бачити більше команд.

Щоб отримати список усіх маршрутів у вашій системі, використайте команду debug:router:

1
$ php bin/console debug:router

Зараз ви маєте побачити ваш маршрут app_lucky_number зверху:

Ви також побачите маршрути налагодження під app_lucky_number -- більше про маршрути налагодження буде у наступному розділі.

Ви дізнаєтеся ще про багато команд далі!

Tip

Якщо ваша оболонка підтримується, ви також можете налаштувати підтримку завершення консолі. Це автоматично заповнює команди та інше введення при використанні bin/console. Див. документ Console , щоб дізнатися більше про те, як налаштувати заповнення.

Панель інструментів веб-налагодження: налагодження мрії

Однією з неймовірних функцій Symfony є Web Debug Toolbar (панель інструментов веб-налагодження): панелі, яка відображає величезну кількість інформації налагодження знизу вашої сторінки при розробці. Це все включено при установці з використанням пакету Symfony під назвою symfony/profiler-pack.

Ви побачите темну панель знизу сторінки. Ви дізнаєтеся більше про всю інформацію, яку вона містить, далі, але не бійтеся експериментувати: наведіть курсор та натискайте на різні іконки, щоб отримати інформацію про маршрутизацію, продуктивність, ведення логів та іншу.

Відображення шаблону

Якщо вашому контролеру необхідно повертати HTML, то ви, скоріш за все, захочете використовувати шаблон. На щастя, в Symfony є шаблонізатор Twig – простий, багатофункціональний та насправді класний.

Спочатку встановіть Twig:

1
$ composer require twig

Далі, переконайтеся в тому, що LuckyController розширює базовий клас Symfony Controller:

1
2
3
4
5
6
7
8
9
10
// src/Controller/LuckyController.php

  // ...
+ use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;

- class LuckyController
+ class LuckyController extends AbstractController
  {
      // ...
  }

Тепер використайте зручну функцію render(), щоб відобразити шаблон. Предайте їй змінну number, щоб ви могли використовувати її в Twig:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// src/Controller/LuckyController.php
namespace App\Controller;

use Symfony\Component\HttpFoundation\Response;
// ...

class LuckyController extends AbstractController
{
    #[Route('/lucky/number')]
    public function number(): Response
    {
        $number = random_int(0, 100);

        return $this->render('lucky/number.html.twig', [
            'number' => $number,
        ]);
    }
}

Файли шаблонів живуть в каталозі templates/, який було створено для вас автоматично при установці Twig. Створіть новий каталог templates/lucky з новим файлом number.html.twig всередині:

1
2
{# templates/lucky/number.html.twig #}
<h1>Ваше щасливе число - {{ number }}</h1>

Синтаксіс {{ number }} використовується для відображення змінних у Twig. Оновіть ваш браузер, щоб отримати ваше нове щасливе число!

http://localhost:8000/lucky/number

Тепер вам може бути цікаво, куди поділася Панель інструментів веб-налагодження: вона пропала, так як в поточному шаблоні немає тегу </body>. Ви можете додати елемент тіла самостійно, або розширити base.html.twig, який містить всі елементи HTML за замовчуванням.

У статті шаблони, ви дізнаєтеся все про Twig: як проходити цикл, відображати інші шаблони та на повну використовувати його потужну систему наслідування шаблонів.

Перевірка структури проекту

Чудові новини! Ви вже працювали всередині найважливіших каталогів вашого проекту:

config/
Містить... конфігурацію, звичайно! Ви будете конфігурувати маршрут, сервіси та пакети.
src/
Тут живе весь ваш PHP-код.
templates/
Всі ваші шаблони Twig живуть тут.

Більшість часу ви працюватимете в src/, templates/ або config/. По мірі читання книги, ви дізнаєтеся, що можна робити в кожному з цих місць.

А що щодо інших каталогів у проекті?

bin/
Відомий файл bin/console живе тут (і інші, менш важливі виконувані файли).
var/
Тут зберігаються автоматично створені файли, такі як файли кешу (var/cache/) та логи (var/log/).
vendor/
Тут знаходяться сторонні бібліотеки (наприклад, «постачальник»)! Вони зазвичай завантажуються за допомогою менеджеру пакетів Composer.
public/
Це кореневий документ вашого проекту: тут ви розміщуєте будь-які ваші файли, доступні публічно.

І коли ви встановлюватимете нові пакети, за необхідності нові каталоги будуть створені автоматично.

Що далі?

Вітаємо! Ви вже починаєте опановувати Symfony та вивчаєте новий спосіб побудови чудових, функціональних, швидких та підтримуваних додатків.

Добре, час закінчити опанування базових знань, прочитавши наступні статті:

Після цього, дізнайтеся про інші важливі аспекти на кшталт сервіс-контейнера, системи форм, використання Doctrine (якщо вам потрібно використовувати базу даних) та інших!

Повеселіться!