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

Всем привет!

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

Объектно-ориентированный компонентный фреймворк Yii2 — очень популярный и полезный инструмент, который пригодится вам при создании веб-сайтов. Именно этой теме и был посвящен открытый урок Евгения Волосатова, прошедший 2 июля 2018 года. В рамках интерактивного мастер-класса преподаватель не только подобно рассказал об особенностях фреймворка, но и показал его применение на практике.

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

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

• 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. Для работы системы был загружен и установлен специальный софт (при его подключении выполнялись шаги, прописанные в инструкции на сайте производителя). В результате успешного прохождения этого этапа пользователь получил возможность видеть логи, запросы, конфигурацию и прочие параметры работы сайта через специальную интерфейсную панель внизу страницы.

Как всегда ждём вопросы, предложения, комментарии тут или заглядывайте на второй открытый урок.