- PVSM.RU - https://www.pvsm.ru -

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

Всем привет!

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


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

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

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

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

Весь необходимый софт был установлен на ПК еще до начала работы.

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

  1. Подготовка рабочего места. Первый этап — запуск OS-панели из папки Open Server и ее настройка (выбор специальной версии Apache-PHP-7 во вкладке «Модули», создание локального домена otus.localhost во вкладке «Домены»). Далее по адресу OpenServer/Domains была создана папка otus, а в ней — папка web. Именно этот адрес и стал корневой директорией будущего сайта, при этом путь до нее (otusweb) прописывался вручную во вкладке «Домены». После выполнения настроек сервера сайт успешно запустился и стал доступен в браузере по адресу 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 webindex 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. Для работы системы был загружен и установлен специальный софт (при его подключении выполнялись шаги, прописанные в инструкции на сайте производителя). В результате успешного прохождения этого этапа пользователь получил возможность видеть логи, запросы, конфигурацию и прочие параметры работы сайта через специальную интерфейсную панель внизу страницы.

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

Автор: MaxRokatansky

Источник [4]


Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/programmirovanie/285546

Ссылки в тексте:

[1] новый преподаватель: https://otus.pw/NQcF/

[2] «Backend разработчик на PHP»: https://otus.pw/DFjO/

[3] открытый урок: https://otus.pw/gTHp/

[4] Источник: https://habr.com/post/416619/?utm_campaign=416619