Лаб. работа "Работа с медиа контентом в Symfony"
В этой лабораторной работе мы изучим, как работать с медиа контентом в Symfony. Для этого мы создадим простое приложение, которое будет позволять пользователям загружать изображения и отображать их на странице.
Шаг 1: Установка необходимых пакетов
Для работы с медиа контентом в Symfony нам понадобятся следующие пакеты:
- Symfony Form
- Symfony Validator
- Symfony FileLoader
- Doctrine ORM
Установите эти пакеты, используя Composer:
1composer require symfony/form
2composer require symfony/validator
3composer require symfony/file-loader
4composer require doctrine/orm
Шаг 2: Создание сущности Image
Создайте новую сущность Image, используя команду Doctrine:
1php bin/console make:entity Image
Задайте поля для сущности Image:
- id (integer, primary key, auto-increment)
- name (string, length 255)
- path (string, length 255)
- createdAt (datetime)
- updatedAt (datetime)
Создайте миграцию и обновите базу данных:
1php bin/console make:migration
2php bin/console doctrine:migrations:migrate
Шаг 3: Создание формы загрузки изображений
Создайте новую форму загрузки изображений, используя команду Symfony:
1php bin/console make:form ImageType
Задайте поля для формы ImageType:
- image (FileType, required)
Измените конфигурацию формы, чтобы она использовала сущность Image:
1public function buildForm(FormBuilderInterface $builder, array $options): void
2{
3 $builder
4 ->add('image', FileType::class, [
5 'required' => true,
6 'label' => 'Select an image',
7 ])
8 ;
9}
10
11public function configureOptions(OptionsResolver $resolver): void
12{
13 $resolver->setDefaults([
14 'data_class' => Image::class,
15 ]);
16}
Шаг 4: Создание контроллера для работы с изображениями
Создайте новый контроллер, используя команду Symfony:
1php bin/console make:controller ImageController
Добавьте действие для загрузки изображений:
1/**
2 * @Route("/images/upload", name="image_upload")
3 */
4public function upload(Request $request, EntityManagerInterface $entityManager): Response
5{
6 $image = new Image();
7 $form = $this->createForm(ImageType::class, $image);
8 $form->handleRequest($request);
9
10 if ($form->isSubmitted() && $form->isValid()) {
11 $file = $form['image']->getData();
12 $fileName = md5(uniqid()).'.'.$file->guessExtension();
13 $file->move($this->getParameter('images_directory'), $fileName);
14 $image->setName($fileName);
15 $image->setPath($this->getParameter('images_directory'));
16 $entityManager->persist($image);
17 $entityManager->flush();
18
19 return $this->redirectToRoute('image_index');
20 }
21
22 return $this->render('image/upload.html.twig', [
23 'form' => $form->createView(),
24 ]);
25}
Добавьте действие для отображения списка изображений:
1/**
2 * @Route("/images", name="image_index")
3 */
4public function index(EntityManagerInterface $entityManager): Response
5{
6 $images = $entityManager->getRepository(Image::class)->findAll();
7
8 return $this->render('image/index.html.twig', [
9 'images' => $images,
10 ]);
11}
Шаг 5: Создание шаблонов
Создайте шаблон для формы загрузки изображений:
1{% extends 'base.html.twig' %}
2
3{% block body %}
4 <h1>Upload an image</h1>
5
6 {{ form_start(form) }}
7 {{ form_row(form.image) }}
8 <button type="submit">Upload</button>
9 {{ form_end(form) }}
10{% endblock %}
Создайте шаблон для отображения списка изображений:
1{% extends 'base.html.twig' %}
2
3{% block body %}
4 <h1>Images</h1>
5
6 <ul>
7 {% for image in images %}
8 <li>
9 <img src="{{ asset('uploads/' ~ image.name) }}" alt="{{ image.name }}" width="200">
10 </li>
11 {% endfor %}
12 </ul>
13{% endblock %}
Шаг 6: Тестирование приложения
Запустите приложение и перейдите по адресу /images/upload. Загрузите несколько изображений и убедитесь, что они отображаются на странице /images.
Дополнительные материалы: