Открытый вебинар «Создание Web-сайта на фреймворке Yii2»09.07.2018 21:48

На прошлой неделе наш новый преподаватель курса «Backend разработчик на PHP» провёл первый открытый урок на тему «Создание Web сайта на фреймворке Yii2». Предлагаем вашему вниманию запись и транскрипцию, собственно, вебинара.

Работа на открытом уроке проходила по принципу: «Лучше один раз сделать, чем сто раз увидеть». Все шаги выполнялись последовательно и по предварительно подготовленному плану. Для лучшего понимания работы фреймворка готовые шаблоны не загружались. Все изменения пошагово коммитились. Поддерживалась обратная связь со слушателями, поэтому преподаватель сразу отвечал на возникающие вопросы и помогал справляться со сложностями и ошибками.

На онлайн-занятии использовались следующие инструменты:

• Open Server;
• среда разработки PhpStorm;
• программное обеспечение Git;
• акетный менеджер уровня приложений Composer.

В процессе проведения мастер-класса слушателям было предложено выполнить совместно с преподавателем ряд практических задач:

1. Подготовка рабочего места. Первый этап — запуск OS-панели из папки Open Server и ее настройка (выбор специальной версии Apache-PHP-7 во вкладке «Модули», создание локального домена otus.localhost во вкладке «Домены»). Далее по адресу OpenServer/Domains была создана папка otus, а в ней — папка web. Именно этот адрес и стал корневой директорией будущего сайта, при этом путь до нее (\otus\web) прописывался вручную во вкладке «Домены». После выполнения настроек сервера сайт успешно запустился и стал доступен в браузере по адресу otus.localhost.
2. Создание первого файла проекта. Эта процедура, так же как и многие последующие, выполнялась через консоль Open Server. В ней прописывались команды входа в папку otus (> cd otus), папку domains (> cd domains) и папку web. В web вручную был создан первый файл index.php и отправлена строка с простым содержанием — Welcome.
3. Установка ядра Yii2. Процедура началась с обновления версии пакетного менеджера Composer через команду > composer self-update и подготовки его к работе путем загрузки библиотек и модулей. Также произошла инициализация Git (> git init) и подключение к нему созданного файла (> git add web\index php). Далее — установка ядра Yii2 через команду > composer require «yiisoft/yii2:*» В результате в папке web появились файлы composer.json и composer.log, плюс папка vendor (была добавлена в исключения Git). После этого необходимо было загрузить PhpStorm и прописать в index.php определенные конфигурационные настройки и команды. Также в папке otus была создана отдельная папка для настроек config, а в ней — файл web.php с соответствующим содержанием.
4. Создание точки входа разработчика для управления программой. Была создана папка Controllers с файлом SiteController.php, прописаны необходимые функции и класс с наследованием web-контроллера.
5. Создание представлений (Views). На данном этапе потребовалась директория с одноименным названием, плюс дополнительно для каждого контроллера была создана отдельная папка, а в ней — файл index.php для каждого отдельного метода. HTML-структура прописывалась в файле main.php, который поместили в предварительно созданную папку layouts (это помогло избежать возникающей ошибки).
6. Подключение и настройка модуля оформления Bootstrap. Сложный и важный этап, успешное выполнение которого открыло возможности для разработки красивых сайтов без участия дизайнера. Для установки модуля в командную строку панели была внесена команда подключения компонентов, после чего они были загружены. Также в файле main.php нужно было создать php-скрипт и подключить его к Bootstrap. Далее был вызван компонент NavBar, необходимый для работы навигации. Возникли ошибки и чтобы их избежать, была произведена перенастройка конфига Composer в файле composer.json с указанием корректного пути инсталляции. После этого стало возможным удаление папки bower-asset в папке vendor. Также были выполнены работы по настройке модуля оформления (в файл main.php добавлены триггеры, div-контейнер и пр.).
7. Создание строки меню и пунктов навигации Join и Login. Задачи реализовывались путем вставки нужного кода в main.php. Для работы навигации по страницам в папке site были созданы новые php-файлы с названиями, соответствующими пунктам навигации (join.php, login.php). Кроме того, были внесены изменения в контроллер. Для «наведения порядка» в адресной строке пришлось подключить компонент urlManager и прописать правила переадресации запросов браузера в созданном для этого файле .htaccess (папка web).
8. Подключение системы отладки проекта Debug Extension for Yii2. Для работы системы был загружен и установлен специальный софт (при его подключении выполнялись шаги, прописанные в инструкции на сайте производителя). В результате успешного прохождения этого этапа пользователь получил возможность видеть логи, запросы, конфигурацию и прочие параметры работы сайта через специальную интерфейсную панель внизу страницы.