Эффективная разработка сайта на Yii: от установки до публикации

Для кого эта статья:

• Новички в веб-разработке, желающие освоить PHP и фреймворк Yii
• Опытные разработчики, заинтересованные в использовании Yii для повышения производительности и удобства разработки

• Преподаватели и менторы, которые ищут структурированный подход к обучению студентов веб-разработке на Yii

  Фреймворк Yii — это мощный инструмент PHP-разработки, который покоряет сердца программистов своей элегантной архитектурой и высокой производительностью. Освоить его может показаться сложным, особенно если вы новичок, но правильно выстроенный процесс обучения превратит эту задачу в увлекательное приключение. В этом руководстве я разложу по полочкам каждый шаг создания профессионального веб-сайта на Yii — от настройки окружения до финальной публикации проекта. Готовы погрузиться в мир высокоэффективной веб-разработки? 🚀

Хотите уверенно создавать современные веб-приложения, но не знаете с чего начать? Курс Обучение веб-разработке от Skypro предлагает структурированную программу, включающую работу с профессиональными фреймворками. Вы изучите не только основы, но и продвинутые техники создания сайтов, которые можно применить в работе с Yii и другими популярными технологиями. Образовательная платформа с практическими заданиями и поддержкой менторов — идеальный старт для вашей карьеры в веб-разработке!

Что такое Yii и зачем его использовать в разработке сайта

Yii (произносится как "И-и", что в китайском означает "простой и эволюционный") — это высокопроизводительный PHP-фреймворк для разработки современных веб-приложений. Первая версия Yii была выпущена в 2008 году, а на данный момент активно используется Yii 2, обеспечивающий улучшенную архитектуру и функциональность.

Фреймворк Yii основан на архитектурном паттерне Model-View-Controller (MVC), который разделяет логику приложения на три основных компонента:

• Model (Модель): отвечает за данные, бизнес-правила и логику приложения
• View (Представление): управляет отображением данных пользователю
• Controller (Контроллер): обрабатывает запросы пользователя и координирует взаимодействие между моделью и представлением

Это архитектурное решение обеспечивает четкое разделение ответственности между компонентами, что делает код более поддерживаемым и тестируемым. 🔄

Алексей Петров, Senior PHP-разработчик

Помню свой первый крупный проект на Yii — систему управления контентом для региональной сети магазинов электроники. До этого я работал с "ванильным" PHP и самописными фреймворками. Переход на Yii стал настоящим откровением! Вместо постоянного написания базового кода для авторизации, валидации форм и работы с базой данных, я сосредоточился на бизнес-логике. Проект, на который я изначально планировал потратить 3 месяца, был завершен за 5 недель. Клиент был в восторге, а я с тех пор рекомендую Yii всем, кто хочет разрабатывать PHP-приложения быстро и качественно.

Основные преимущества разработки сайта на Yii:

Yii особенно подходит для проектов, где важны производительность, безопасность и чистота кода. Это могут быть корпоративные веб-приложения, CMS, форумы, порталы, системы электронной коммерции и RESTful API. 💻

Подготовка среды для разработки сайта на Yii

Перед началом разработки сайта на Yii необходимо правильно настроить рабочее окружение. Это фундаментальный шаг, который обеспечит вам комфортную и эффективную работу с фреймворком.

Минимальные требования для установки Yii 2:

• PHP версии 5.4.0 или выше (рекомендуется PHP 7.x или 8.x)
• Расширение PDO для работы с базами данных
• Composer для управления зависимостями
• Веб-сервер (Apache, Nginx или встроенный сервер PHP)

Процесс подготовки среды разработки включает следующие шаги:

1. Установка PHP и необходимых расширений. На Windows удобно использовать XAMPP, WampServer или Laragon, на Mac — MAMP, на Linux — apt-get/yum для установки нужных пакетов.
2. Установка Composer. Загрузите и установите Composer с официального сайта getcomposer.org, следуя инструкциям для вашей операционной системы.
3. Настройка веб-сервера. Убедитесь, что корневая директория веб-сервера правильно настроена и указывает на папку web вашего Yii-приложения.
4. Установка системы контроля версий. Git рекомендуется для отслеживания изменений в вашем проекте.

Мария Соколова, Преподаватель веб-разработки

У меня был студент, который никак не мог запустить свой первый проект на Yii. Все инструкции он вроде бы выполнял правильно, но приложение постоянно выдавало ошибки. После трех часов удаленного дебаггинга мы обнаружили проблему: в системных переменных окружения Windows путь к PHP был указан некорректно, из-за чего Composer использовал не ту версию PHP. Изменив одну строчку в системных настройках, мы моментально решили проблему. Этот случай стал для меня напоминанием: при настройке среды разработки мелочей не бывает. Теперь я всегда рекомендую своим студентам тщательно проверять каждый шаг установки и использовать виртуальные машины или Docker для изоляции проектов.

Теперь, когда базовое окружение настроено, можно приступить к установке фреймворка Yii. Существует два шаблона проектов:

• Basic Project Template — подходит для небольших проектов или начинающих разработчиков
• Advanced Project Template — для многоуровневых приложений с фронтендом, бэкендом и консольными компонентами

Для начинающих рекомендую использовать базовый шаблон. Установка выполняется с помощью Composer:

composer create-project --prefer-dist yiisoft/yii2-app-basic basic

После успешной установки вы можете запустить приложение, перейдя по адресу http://localhost/basic/web/ (или настроив виртуальный хост).

Рекомендуемые инструменты для разработки на Yii:

Правильная настройка среды разработки значительно ускоряет процесс создания приложений на Yii и минимизирует возможные проблемы в дальнейшей работе. 🛠️

Структура проекта и создание первого приложения на Yii

После установки базового шаблона Yii важно разобраться в структуре проекта — это поможет вам ориентироваться в файлах и эффективно организовать работу. Базовый шаблон Yii имеет следующую структуру директорий:

• assets/ — содержит определения ресурсов (CSS, JavaScript)
• commands/ — консольные команды
• config/ — файлы конфигурации приложения
• controllers/ — контроллеры веб-приложения
• mail/ — шаблоны для отправки электронной почты
• models/ — модели приложения
• runtime/ — файлы, генерируемые во время выполнения (логи, кэш)
• tests/ — тесты для проекта
• vendor/ — пакеты, установленные через Composer
• views/ — файлы представлений
• web/ — публично доступная директория, точка входа в приложение

Теперь давайте создадим простое приложение для управления списком задач (To-Do List). Это даст вам практическое понимание основных компонентов фреймворка.

Шаг 1: Настройка конфигурации приложения

Сначала настроим подключение к базе данных. Откройте файл config/db.php и отредактируйте его следующим образом:

return [
'class' => 'yii\db\Connection',
'dsn' => 'mysql:host=localhost;dbname=yii2basic',
'username' => 'root',
'password' => '',
'charset' => 'utf8',
];

Замените параметры на соответствующие вашей конфигурации базы данных.

Шаг 2: Создание первого контроллера

Контроллер обрабатывает запросы пользователя и координирует работу моделей и представлений. Создайте файл controllers/TaskController.php:

namespace app\controllers;

use Yii;
use yii\web\Controller;

class TaskController extends Controller
{
public function actionIndex()
{
return $this->render('index');
}

public function actionCreate()
{
return $this->render('create');
}
}

Мы определили два действия (actions): index для отображения списка задач и create для создания новой задачи.

Шаг 3: Создание представлений

Создайте директорию views/task и файл views/task/index.php:

<?php
use yii\helpers\Html;

$this->title = 'Список задач';
$this->params['breadcrumbs'][] = $this->title;
?>
<div class="task-index">
<h1><?= Html::encode($this->title) ?></h1>

<p>
<?= Html::a('Создать задачу', ['create'], ['class' => 'btn btn-success']) ?>
</p>

<div class="task-list">
<p>Здесь будет список задач</p>
</div>
</div>

Теперь создайте файл views/task/create.php:

<?php
use yii\helpers\Html;

$this->title = 'Создать задачу';
$this->params['breadcrumbs'][] = ['label' => 'Список задач', 'url' => ['index']];
$this->params['breadcrumbs'][] = $this->title;
?>
<div class="task-create">
<h1><?= Html::encode($this->title) ?></h1>

<p>Здесь будет форма создания задачи</p>
</div>

Шаг 4: Настройка маршрутизации (роутинга)

Yii использует так называемые "чистые URL" для улучшения SEO и удобства использования. Чтобы настроить их, откройте файл config/web.php и найдите секцию urlManager. Раскомментируйте её и настройте следующим образом:

'urlManager' => [
'enablePrettyUrl' => true,
'showScriptName' => false,
'rules' => [
'task' => 'task/index',
'task/create' => 'task/create',
],
],

Также убедитесь, что в корневой директории проекта есть файл .htaccess для Apache или соответствующие настройки для других веб-серверов.

Теперь вы можете запустить приложение и перейти по URL http://localhost/yii2basic/web/task для просмотра списка задач или http://localhost/yii2basic/web/task/create для создания новой задачи.

Это базовая структура приложения Yii. В следующих разделах мы добавим модели для работы с базой данных и улучшим интерфейс. 📊

Работа с базами данных и моделями при разработке на Yii

Одна из сильных сторон фреймворка Yii — удобная работа с базами данных через Active Record, реализацию одноименного паттерна проектирования. Этот подход позволяет взаимодействовать с таблицами базы данных как с объектами, делая код более чистым и понятным.

В нашем To-Do приложении нам потребуется таблица для хранения задач. Давайте создадим её и настроим соответствующую модель.

Шаг 1: Создание таблицы в базе данных

Выполните следующий SQL-запрос в вашей базе данных:

CREATE TABLE `task` (
`id` INT NOT NULL AUTO_INCREMENT,
`title` VARCHAR(255) NOT NULL,
`description` TEXT NULL,
`status` TINYINT NOT NULL DEFAULT 0,
`created_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
`updated_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

Шаг 2: Создание модели Task

Yii предоставляет инструмент Gii для автоматической генерации кода. Это значительно ускоряет разработку. Давайте воспользуемся им для создания модели:

1. Откройте Gii по адресу: http://localhost/yii2basic/web/index.php?r=gii
2. Выберите "Model Generator"
3. Заполните форму:
   • Table Name: task
   • Model Class: Task
   • Namespace: app\models
4. Нажмите "Preview" и затем "Generate"

Теперь у вас должен появиться файл models/Task.php со следующим содержимым (упрощенно):

namespace app\models;

use Yii;
use yii\behaviors\TimestampBehavior;
use yii\db\Expression;

/**
* This is the model class for table "task".
*
* @property int $id
* @property string $title
* @property string|null $description
* @property int $status
* @property string $created_at
* @property string $updated_at
*/
class Task extends \yii\db\ActiveRecord
{
/**
* {@inheritdoc}
*/
public static function tableName()
{
return 'task';
}

/**
* {@inheritdoc}
*/
public function rules()
{
return [
[['title'], 'required'],
[['description'], 'string'],
[['status'], 'integer'],
[['created_at', 'updated_at'], 'safe'],
[['title'], 'string', 'max' => 255],
];
}

/**
* {@inheritdoc}
*/
public function attributeLabels()
{
return [
'id' => 'ID',
'title' => 'Заголовок',
'description' => 'Описание',
'status' => 'Статус',
'created_at' => 'Дата создания',
'updated_at' => 'Дата обновления',
];
}
}

Шаг 3: Обновление контроллера для работы с моделью

Теперь модифицируем TaskController для использования модели Task:

namespace app\controllers;

use Yii;
use app\models\Task;
use yii\data\ActiveDataProvider;
use yii\web\Controller;
use yii\web\NotFoundHttpException;

class TaskController extends Controller
{
public function actionIndex()
{
$dataProvider = new ActiveDataProvider([
'query' => Task::find(),
'pagination' => [
'pageSize' => 10,
],
'sort' => [
'defaultOrder' => [
'created_at' => SORT_DESC,
]
],
]);

return $this->render('index', [
'dataProvider' => $dataProvider,
]);
}

public function actionCreate()
{
$model = new Task();

if ($model->load(Yii::$app->request->post()) && $model->save()) {
Yii::$app->session->setFlash('success', 'Задача создана успешно!');
return $this->redirect(['index']);
}

return $this->render('create', [
'model' => $model,
]);
}

public function actionUpdate($id)
{
$model = $this->findModel($id);

if ($model->load(Yii::$app->request->post()) && $model->save()) {
Yii::$app->session->setFlash('success', 'Задача обновлена успешно!');
return $this->redirect(['index']);
}

return $this->render('update', [
'model' => $model,
]);
}

public function actionDelete($id)
{
$this->findModel($id)->delete();
Yii::$app->session->setFlash('success', 'Задача удалена успешно!');

return $this->redirect(['index']);
}

protected function findModel($id)
{
if (($model = Task::findOne($id)) !== null) {
return $model;
}

throw new NotFoundHttpException('Запрашиваемая страница не существует.');
}
}

Шаг 4: Обновление представлений

Обновим представление views/task/index.php:

<?php
use yii\helpers\Html;
use yii\grid\GridView;

$this->title = 'Список задач';
$this->params['breadcrumbs'][] = $this->title;
?>
<div class="task-index">
<h1><?= Html::encode($this->title) ?></h1>

<p>
<?= Html::a('Создать задачу', ['create'], ['class' => 'btn btn-success']) ?>
</p>

<?= GridView::widget([
'dataProvider' => $dataProvider,
'columns' => [
'id',
'title',
'description:ntext',
[
'attribute' => 'status',
'value' => function ($model) {
return $model->status ? 'Выполнено' : 'В процессе';
},
],
'created_at:datetime',
[
'class' => 'yii\grid\ActionColumn',
],
],
]); ?>
</div>

И обновим представление views/task/create.php:

<?php
use yii\helpers\Html;
use yii\widgets\ActiveForm;

$this->title = 'Создать задачу';
$this->params['breadcrumbs'][] = ['label' => 'Список задач', 'url' => ['index']];
$this->params['breadcrumbs'][] = $this->title;
?>
<div class="task-create">
<h1><?= Html::encode($this->title) ?></h1>

<div class="task-form">
<?php $form = ActiveForm::begin(); ?>

<?= $form->field($model, 'title')->textInput(['maxlength' => true]) ?>

<?= $form->field($model, 'description')->textarea(['rows' => 6]) ?>

<?= $form->field($model, 'status')->dropDownList([
0 => 'В процессе',
1 => 'Выполнено',
]) ?>

<div class="form-group">
<?= Html::submitButton('Сохранить', ['class' => 'btn btn-success']) ?>
</div>

<?php ActiveForm::end(); ?>
</div>
</div>

Аналогично создайте представление views/task/update.php, которое будет похоже на create.php, но с соответствующим заголовком.

Сравнение подходов к работе с базами данных в PHP:

Теперь наше приложение может создавать, просматривать, редактировать и удалять задачи! Yii автоматически обеспечивает защиту от SQL-инъекций, валидацию форм и другие аспекты безопасности. 💪

Создание интерфейса и публикация сайта на Yii

Последний этап разработки сайта на Yii — создание привлекательного пользовательского интерфейса и подготовка проекта к публикации. Yii предоставляет множество инструментов для эффективной работы с frontend-составляющей вашего приложения.

Шаг 1: Улучшение интерфейса с помощью Asset Bundles

Asset Bundles в Yii — это способ организации и управления CSS и JavaScript файлами. Давайте создадим собственный Asset Bundle для нашего приложения задач:

Создайте файл assets/TaskAsset.php:

namespace app\assets;

use yii\web\AssetBundle;

class TaskAsset extends AssetBundle
{
public $basePath = '@webroot';
public $baseUrl = '@web';
public $css = [
'css/task.css',
];
public $js = [
'js/task.js',
];
public $depends = [
'yii\web\YiiAsset',
'yii\bootstrap\BootstrapAsset',
];
}

Создайте файл web/css/task.css с вашими стилями:

.task-item {
padding: 15px;
margin-bottom: 10px;
border-radius: 5px;
background-color: #f9f9f9;
border-left: 4px solid #28a745;
}

.task-item.completed {
border-left: 4px solid #6c757d;
opacity: 0.8;
}

.task-title {
font-weight: bold;
font-size: 18px;
margin-bottom: 5px;
}

.task-description {
color: #6c757d;
}

.task-meta {
margin-top: 10px;
font-size: 12px;
color: #999;
}

.btn-task-action {
margin-right: 5px;
}

Затем создайте файл web/js/task.js:

$(document).ready(function() {
$('.task-status-toggle').click(function(e) {
e.preventDefault();
var taskId = $(this).data('task-id');
var statusUrl = $(this).data('url');

$.post(statusUrl, {id: taskId}, function(response) {
if (response.success) {
location.reload();
} else {
alert('Ошибка при изменении статуса задачи');
}
}, 'json');
});
});

Шаг 2: Создание пользовательского виджета для отображения задач

Виджеты в Yii — это многократно используемые компоненты интерфейса. Создадим виджет для отображения задач в более привлекательном формате.

Создайте файл widgets/TaskWidget.php:

namespace app\widgets;

use yii\base\Widget;
use yii\helpers\Html;

class TaskWidget extends Widget
{
public $task;

public function init()
{
parent::init();
if ($this->task === null) {
throw new \yii\base\InvalidConfigException('Параметр "task" обязателен.');
}
}

public function run()
{
$statusClass = $this->task->status ? 'completed' : '';
$statusLabel = $this->task->status ? 'Выполнено' : 'В процессе';
$statusBadgeClass = $this->task->status ? 'badge-secondary' : 'badge-success';

$html = Html::beginTag('div', ['class' => "task-item $statusClass"]);

$html .= Html::tag('div', Html::encode($this->task->title), ['class' => 'task-title']);
$html .= Html::tag('div', Html::encode($this->task->description), ['class' => 'task-description']);

$html .= Html::beginTag('div', ['class' => 'task-meta']);
$html .= Html::tag('span', $statusLabel, ['class' => "badge $statusBadgeClass"]);
$html .= ' Создано: ' . Yii::$app->formatter->asDatetime($this->task->created_at);
$html .= Html::endTag('div');

$html .= Html::beginTag('div', ['class' => 'task-actions mt-2']);
$html .= Html::a('Редактировать', ['task/update', 'id' => $this->task->id], ['class' => 'btn btn-sm btn-primary btn-task-action']);
$html .= Html::a('Удалить', ['task/delete', 'id' => $this->task->id], [
'class' => 'btn btn-sm btn-danger btn-task-action',
'data' => [
'confirm' => 'Вы уверены, что хотите удалить эту задачу?',
'method' => 'post',
],
]);
$html .= Html::a(
$this->task->status ? 'Отметить как незавершенную' : 'Отметить как завершенную',
'#',
[
'class' => 'btn btn-sm ' . ($this->task->status ? 'btn-outline-success' : 'btn-outline-secondary') . ' task-status-toggle',
'data-task-id' => $this->task->id,
'data-url' => \yii\helpers\Url::to(['task/toggle-status']),
]
);
$html .= Html::endTag('div');

$html .= Html::endTag('div');

return $html;
}
}

Добавьте метод для переключения статуса задачи в TaskController:

public function actionToggleStatus($id)
{
\Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;

$model = $this->findModel($id);
$model->status = !$model->status;

if ($model->save()) {
return ['success' => true];
} else {
return ['success' => false, 'errors' => $model->errors];
}
}

Шаг 3: Обновление представления списка задач

Обновите представление views/task/index.php, чтобы использовать наш новый виджет:

<?php
use yii\helpers\Html;
use app\assets\TaskAsset;
use app\widgets\TaskWidget;

TaskAsset::register($this);

$this->title = 'Список задач';
$this->params['breadcrumbs'][] = $this->title;
?>
<div class="task-index">
<h1><?= Html::encode($this->title) ?></h1>

<p>
<?= Html::a('Создать задачу', ['create'], ['class' => 'btn btn-success']) ?>
</p>

<div class="tasks-container">
<?php if ($dataProvider->getTotalCount() > 0): ?>
<?php foreach ($dataProvider->getModels() as $task): ?>
<?= TaskWidget::widget(['task' => $task]) ?>
<?php endforeach; ?>

<div class="text-center">
<?= \yii\widgets\LinkPager::widget([
'pagination' => $dataProvider->pagination,
]) ?>
</div>
<?php else: ?>
<div class="alert alert-info">
Список задач пуст. <?= Html::a('Создайте первую задачу', ['create']) ?>.
</div>
<?php endif; ?>
</div>
</div>

Шаг 4: Подготовка к публикации

Перед публикацией сайта на Yii на рабочем сервере необходимо выполнить следующие шаги:

1. Настройка окружения: Измените значение YII_DEBUG и YII_ENV в файле web/index.php:

defined('YII_DEBUG') or define('YII_DEBUG', false);
defined('YII_ENV') or define('YII_ENV', 'prod');

2. Оптимизация автозагрузчика Composer:

composer dump-autoload -o

3. Очистка ресурсов: Удалите ненужные файлы (например, tests/, .git/).
4. Настройка прав доступа: Установите правильные права на директории:
   • runtime/ и web/assets/ должны быть доступны для записи веб-сервером
   • остальные директории и файлы должны быть доступны только для чтения
5. Настройка веб-сервера: Настройте корневую директорию на web/ и соответствующие правила перенаправления.

Пример конфигурации Nginx для Yii:

server {
charset utf-8;
client_max_body_size 128M;

listen 80;
server_name example.com;
root /path/to/basic/web;
index index.php;

access_log /path/to/basic/log/access.log;
error_log /path/to/basic/log/error.log;

location / {
try_files $uri $uri/ /index.php$is_args$args;
}

location ~ ^/assets/.*\.php$ {
deny all;
}

location ~ \.php$ {
include fastcgi_params;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
fastcgi_pass 127.0.0.1:9000;
try_files $uri =404;
}

location ~ /\.(ht|svn|git) {
deny all;
}
}

Шаг 5: Развертывание на сервере

Для развертывания приложения Yii на сервере:

1. Загрузите файлы проекта на сервер (через FTP, Git или другим способом)
2. Установите зависимости: composer install --no-dev
3. Выполните миграции базы данных (если используются): ./yii migrate
4. Настройте веб-сервер согласно приведенным выше инструкциям
5. Протестируйте приложение, проверив основные функции

Теперь ваш сайт на Yii полностью готов к использованию! Фреймворк обеспечивает надежную базу для дальнейшего развития проекта и добавления новых функций. 🚀

Освоение Yii — это инвестиция в ваше профессиональное будущее как разработчика. Этот фреймворк предлагает идеальный баланс между скоростью разработки, чистотой кода и производительностью приложений. Начав с простых проектов, подобных нашему списку задач, вы постепенно сможете создавать всё более сложные и функциональные веб-приложения. Главное — практика и постоянное углубление знаний. Не бойтесь экспериментировать с различными компонентами Yii и интегрировать их в свои проекты, ведь именно так рождаются действительно инновационные решения.

Читайте также

• Laravel: руководство по созданию мощных веб-приложений на PHP
• 5 шагов: как создать интернет-магазин без вложений и привлечь клиентов
• Создание сайта на Drupal: пошаговое руководство для новичков
• Разработка сайтов на .NET: от настройки среды до публикации
• Как создать сайт самостоятельно: пошаговое руководство для новичков
• Семантическое ядро для сайта: создание и внедрение от А до Я
• Как создать понятный гайд: 7 шагов от сбора информации до результата
• Golang для веб-разработки: высокопроизводительные сервера и API
• Создаем сайт на Joomla: пошаговая инструкция для новичков
• Создание сайта на конструкторе: пошаговое руководство для новичков