Главная > Блог > Web-разработка > Yii2 и Laravel >

Магазин на Yii2, часть 1. Установка фрейморка и внедрение верстки

02.05.2019

Теги: Web-разработка • Yii2 • ИнтернетМагазин • Практика • Установка • Фреймворк • ЧПУ

Установка фреймворка

Устанавливать Yii2 будем через Composer, переходим в корневую директорию проекта и выполняем команду:

> composer create-project yiisoft/yii2-app-basic ./

Эта команда установит последнюю версию Yii2 в текущую директорию. Наш сайт теперь доступен по адресу server.com/web, поскольку именно в директории web находится публичная часть приложения.

Изменяем DocumentRoot

Следующий шаг — изменить корневую директорию в настройках веб-сервера так, чтобы та указывала на директорию web. Или насторить перенаправление из директории проекта в директорию web с помощью .htaccess:

RewriteEngine on
RewriteRule ^(.+)?$ /web/$1

Человекопонятные URL

Создаем файл файл .htaccess в директории web и добавляем в него четыре строчка кода:

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . index.php

Добавляем в файл конфигурации config/web.php настройку baseUrl и раскомментируем настройки компонента UrlManager. Заодно включаем поддержку русского языка:

$config = [
    /*.....*/
    'language' => 'ru-RU',
    /*.....*/
    'components' => [
        /*.....*/
        'request' => [
            'baseUrl' => '',
            'cookieValidationKey' => '.....',
        ],
        'urlManager' => [
            // включаем поддержку SEF URL
            'enablePrettyUrl' => true,
            // не добавлять в URL index.php
            'showScriptName' => false,
            // правила преобразования адресов
            'rules' => [],
        ],
        /*.....*/
    ],
    'params' => $params,
];

Внедрение верстки

Смотрим верстку на предмет того, какие css и js файлы нужно подключить:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Home | E-Shopper</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">
    <!--[if lte IE 9]>
    <script src="js/html5shiv.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <!-- ..... -->
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/main.js"></script>
</body>
</html>

Скопируем директории css, js, fonts и images из верстки в директорию web. Файлы bootstrap.min.css, jquery.js и bootstrap.min.js удаляем — они уже есть в Yii2. Теперь редактируем файл assets/AppAsset.php:

<?php
namespace app\assets;

use yii\web\AssetBundle;

/**
 * Main application asset bundle
 */
class AppAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
        'css/font-awesome.min.css',
        'css/main.css'
    ];
    public $js = [
        'js/main.js'
    ];
    public $depends = [
        'yii\web\YiiAsset',
        'yii\bootstrap\BootstrapPluginAsset',
    ];
}

Обратите внимание, что в качестве зависимости указан класс BootstrapPluginAsset (вместо BootstrapAsset) — он включает в себя bootstrap.css и bootstrap.js. В этом нетрудно убедиться, если заглянуть в исходники:

<?php
namespace yii\bootstrap;
use yii\web\AssetBundle;

class BootstrapAsset extends AssetBundle {
    public $sourcePath = '@bower/bootstrap/dist';
    public $css = [
        'css/bootstrap.css',
    ];
}

<?php
namespace yii\bootstrap;
use yii\web\AssetBundle;

class BootstrapPluginAsset extends AssetBundle {
    public $sourcePath = '@bower/bootstrap/dist';
    public $js = [
        'js/bootstrap.js',
    ];
    public $depends = [
        'yii\web\JqueryAsset',
        'yii\bootstrap\BootstrapAsset',
    ];
}

Хорошо, теперь копируем html-код верстки в файл views/layout/main.php и добавляем php-код:

<?php
use yii\helpers\Html;
use app\assets\AppAsset;

AppAsset::register($this);
?>
<?php $this->beginPage() ?>
<!DOCTYPE html>
<html lang="<?= Yii::$app->language ?>">
<head>
    <meta charset="<?= Yii::$app->charset ?>">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <?php $this->registerCsrfMetaTags() ?>
    <title><?= Html::encode($this->title) ?></title>
    <?php $this->head() ?>
</head>
<body>
<?php $this->beginBody() ?>
<!-- ..... -->
<?php $this->endBody() ?>
</body>
</html>
<?php $this->endPage() ?>

Осталось еще подключить js-файлы для старых версий MS IE. Для этого создаем еще один комплект ресурсов:

<?php
namespace app\assets;

use yii\web\AssetBundle;
use yii\web\View;

/**
 * Комплект ресурсов для старых версий MS IE
 */
class OldIeAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $js = [
        'js/html5shiv.js',
        'js/respond.min.js',
    ];
    public $jsOptions = [
        // скрипты будут подключены по условию [if lte IE 9]...[endif]
        'condition' => 'lte IE 9',
        // скрипты будут подключены в <head>-секции документа
        'position' => View::POS_HEAD,
    ];
}

И подключаем его в layout-шаблоне main.php:

<?php
use yii\helpers\Html;
use app\assets\AppAsset;

AppAsset::register($this);
OldIeAsset::register($this);
?>
<?php $this->beginPage() ?>
<!DOCTYPE html>
<!-- ..... -->

Подключить js-файлы для старых версий MS IE можно иначе. Для этого изменяем класс AppAsset:

<?php
namespace app\assets;

use yii\web\AssetBundle;
use yii\web\View;

/**
 * Main application asset bundle
 */
class AppAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
        'css/font-awesome.min.css',
        'css/main.css'
    ];
    public $js = [
        'js/main.js'
    ];
    public $depends = [
        'yii\web\YiiAsset',
        'yii\bootstrap\BootstrapPluginAsset',
    ];

    public function registerAssetFiles($view) {

        parent::registerAssetFiles($view);

        $manager = $view->getAssetManager();
        $view->registerJsFile(
            $manager->getAssetUrl(
                $this,
                'js/html5shiv.min.js'
            ),
            [
                'condition' => 'lte IE9',
                'position'=>View::POS_HEAD
            ]
        );
        $view->registerJsFile(
            $manager->getAssetUrl(
                $this,
                'js/respond.min.js'
            ),
            [
                'condition' => 'lte IE9',
                'position'=>View::POS_HEAD
            ]
        );
    }
}

И последенее, что нужно сделать — перенести основной контент страницы из layout-шаблона views/layout/main.php в view-шаблон views/site/index.php:

<?php
use yii\helpers\Html;
use app\assets\AppAsset;

AppAsset::register($this);
?>
<?php $this->beginPage() ?>
<!DOCTYPE html>
<html lang="<?= Yii::$app->language ?>">
<head>.....</head>
<body>
<?php $this->beginBody() ?>
<header>.....</header>

<?= $content; ?>

<footer>.....</footer>
<?php $this->endBody() ?>
</body>
</html>
<?php $this->endPage() ?>

<?php
/* @var $this yii\web\View */
$this->title = 'Интернет-магазин';
?>

<section>
    <div class="container">
        <!-- Слайдер из трех элементов -->
        <div id="slider" class="carousel slide" data-ride="carousel">
        ..........
        </div>
    </div>
</section>

<section>
    <div class="container">
        <div class="row">
            <div class="col-sm-3">
                <h2>Каталог</h2>
                <div class="category-products">
                    <!-- Меню каталога -->
                </div>

                <h2>Бренды</h2>
                <div class="brand-products">
                    <!-- Популярные бренды -->
                </div>
            </div>

            <div class="col-sm-9">
                <h2>Лидеры продаж</h2>
                <div class="row">
                    <div class="col-sm-4">
                    ..........
                    </div>
                    <div class="col-sm-4">
                    ..........
                    </div>
                    <div class="col-sm-4">
                    ..........
                    </div>
                </div>
                <h2>Новинки</h2>
                <div class="row">
                    <div class="col-sm-4">
                    ..........
                    </div>
                    <div class="col-sm-4">
                    ..........
                    </div>
                    <div class="col-sm-4">
                    ..........
                    </div>
                </div>
                <h2>Распродажа</h2>
                <div class="row">
                    <div class="col-sm-4">
                    ..........
                    </div>
                    <div class="col-sm-4">
                    ..........
                    </div>
                    <div class="col-sm-4">
                    ..........
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Поиск: Web-разработка • Yii2 • Интернет магазин • Установка • Фреймворк • ЧПУ