Главная

? Тестовое задание на должность программиста — Результаты выполнения

Демонстрационная страница: https://cwteam.ru/test4/news

---

✅ Задача 1: Создание новостного раздела на MODx Revo

Обязательный стек:

  • ✓ MODx Revo 2.8.*
  • ✓ Шаблонизатор Fenom
  • ✓ PHP
  • ✓ HTML
  • ⚠ SASS/SCSS — не использовал, чтобы не усложнять, но имею опыт работы с ними

Примечание: С шаблонизатором Fenom познакомился впервые, но успешно разобрался с синтаксисом и применил на практике.

---

1. Структура сайта

Создана структура ресурсов:

-- Новости (54) ---- Новость 1 (55) ---- Новость 2 (56) ... ---- Новость 10 (64)

Создано 10 новостей с тестовой информацией. Структура полностью соответствует ТЗ.

---

2. Шаблоны и поля новостей

Созданы два шаблона:

  • News List Template — для списка новостей
  • News Detail Template — для детальной страницы

Поля новости:

  • TV pagetitle — заголовок
  • TV publishedon — дата публикации
  • TV preview_image — превью изображения
  • TV content — полный текст
  • TV author — автор (дополнительно)
  • TV tags — теги (дополнительно)

Созданы чанки:

  • newsListItem — вывод карточки новости
  • tags — вывод тегов
  • widgetDateAndAuthor — вывод даты и автора

Применён принцип DRY — чанки используются как в списке, так и в детальной странице.

---

3. Стилизация и функционал

Список новостей:

  • Карточки новостей в виде каталога
  • Превью изображения (с обрезкой через pThumb)
  • Заголовок
  • Дата публикации в читаемом формате
  • Укороченный текст (до 200 символов)
  • Ссылка на детальную страницу

Детальная страница:

  • Полный текст новости
  • Изображение (также обрезано через pThumb)
  • Ссылка "Вернуться в список новостей"

Важно: Использован сниппет pThumb вместо pThumbOf, так как последний требует расширения MagicImage, которого нет на хостинге. pThumb работает на GD, которое доступно.

Дополнительный функционал: Для новостей без изображения реализован аватар с первой буквой заголовка и случайным цветом (аналогично подходу Google).

---

4. Сниппеты

Основной вывод списка:

  • Использован PDOPage для вывода списка с пагинацией

Собственный сниппет getNews.php:

  • Выводит случайные новости (не кешируемый)
  • Работает напрямую с базой данных через MODx API
  • Использует тот же чанк newsListItem для вывода
  • Запрос с ORDER BY RAND() для получения случайных записей

Сниппет демонстрирует умение работать с MODx API и выполнять прямые запросы к базе данных.

---

✅ Задача 2: Интерактивное мобильное меню

Обязательный стек:

  • ✓ MODx Revo 2.8.*
  • ✓ Шаблонизатор Fenom
  • ✓ HTML
  • ⚠ CSS (SASS/SCSS) — не использовал
  • ✓ JavaScript (Vanilla JS)

Примечание: Использован чистый JavaScript (Vanilla) без фреймворков. Опыт с React имеется, с Vue — планируется изучить.

Примечание: Сделано меню таким образом, что при клике на ссылку - идет переход на страницу, при клике на стрелочку - идет переход на следующий уровень ссылок.

---

1. API маршрут /api/getMenu

Создан плагин MobileMenuAPI, который:

  • Перехватывает запросы к /api/getMenu
  • Формирует JSON-структуру меню с неограниченной вложенностью
  • Возвращает данные в формате:
[ { "title": "Заголовок пункта меню", "url": "https://test.site/item1", "children": [ { "title": "Подпункт меню", "url": "https://test.site/item2" } ] } ]

CORS: Защита от кросс-доменных запросов не реализована, так как не указана в ТЗ.

---

2. JavaScript реализация

Создан файл menu.js с двумя классами:

  • MobileMenu — мобильное меню с анимацией
  • DesktopMenu — десктопная версия (дополнительно)

Функционал:

  • Запрос меню с сервера при загрузке страницы
  • Динамическое построение многоуровневого меню
  • Анимация переходов между уровнями
  • Кнопка "Назад" для возврата на предыдущий уровень
  • Ссылки для пунктов с полем url

Меню полностью соответствует ТЗ: многоуровневое, с анимацией, динамически загружается с сервера.

---

3. Дополнительные улучшения

  • Созданы чанки: head, header, footer, mobileMenu
  • Настроены ЧПУ (красивые URL) через .htaccess
  • Сгенерировано ~100 тестовых ресурсов для демонстрации вложенности меню
  • Реализована десктопная версия меню из тех же данных
---

? Итоги

Структура сайта — создана иерархия новостей
Шаблоны — реализованы оба шаблона с использованием Fenom
Стилизация — карточки новостей, обрезка изображений, аватары
Сниппеты — PDOPage + собственный не кешируемый сниппет
API меню — плагин с динамической генерацией JSON
JavaScript — мобильное меню с анимацией на Vanilla JS

Сайт размещён на хостинге: https://cwteam.ru/test4/news

Пример детальной страницы: Ссылка на новость с изображением

Заключение: Задание выполнено полностью. Был получен ценный опыт работы с MODx Revo и шаблонизатором Fenom. Готов внести любые правки при необходимости!

Другие Тестовые задания выполненные мной, для ознакомления с моим текущим уровнем кода:

https://github.com/gust3/task-management-api
https://github.com/gust3/symfony-test
https://github.com/gust3/astra-child

Важно: В этих репозиториях есть полное описание и тестового задания и проведенных работ, что позволит оценить мои возможности!