README

Bundle for form design environment.

Requires

php: >=5.3.9
symfony/symfony: 2.8.*

Install

Composer

#!console

> composer require unitkit/uk-design-bundle

Setup

После установки Symfony подключите UkInstallBundle в файле app/AppKernel.php. Обязательно добавьте design окружение в условие подключения WebProfiler и Debug.

#!php
<?php

class AppKernel extends Kernel
{
    public function registerBundles()
    {
        $bundles = array(  
            //...
            new UnitKit\Install\UkInstallBundle()
            //...
        );
 
        if (in_array($this->getEnvironment(), array('dev', 'test', 'design'), true)) {
            //...
        }
 
        return $bundles;
    }
}

?>

Теперь можно запустить установку design окружения. Переместитесь в папку с проектом и выполните команду:

#!bash
app/console unitkit:design:environment

Установка завершена, можно открывать страницы в окружении design по адресу /app_design.php

Usage

Структура файлов и папок

Файлы публичной части должны размещаться в папке web/public, административной части - в папке web/admin. Обе директории защищены от просмотра по ссылке файлов с расширением .twig. При установке design окружения создается следующая структура файлов и папок:

admin // Файлы административной панели. Обычно используется купленный шаблон.

public // Публичные файлы сайта, шаблоны, стили и скрипты.

bower_components // Компоненты установленные через bower.

build // Готовая сборка скриптов и файлов стилей

node_modules // Модули установленные через npm

source // Файлы с исходными скриптами и таблицами стилей (до компиляции через gulp)

templates // Файлы шаблонов сайта (исходная верстка в формате twig)

include // Подключаемые шаблоны. Например, базовый шаблон с подключаемыми в шапке стилями и скриптами в конце тега body

index.html.twig // Пример файла шаблон (пустой)

.htaccess // Запрещает apache доступ к файлам gulpfile.js и всем файлам с расширением twig

bower.json // Описание пакетов для установки через bower. По умолчанию устанавливается только jquery

gulpfile.js // Файл для запуска через консоль для отслеживания изменения файлов .js и .css библиотекой gulp

package.json // Описание пакетов npm

Маршрутизация

Можно легко настроить маршруты страниц, что бы перелинковать верстку в файле app/config/routing_design.yml

#!yaml
_main:
    resource: routing_dev.yml
 
# -- Design routes --

index:
    path: /design/index
    defaults: 
        _controller: UkInstallBundle:Design:symlink
        template: @public/index.html.twig #указываем шаблон который будет открываться по данному маршруту

temp:
    path: /design/temp
    defaults: 
        _controller: UkInstallBundle:Design:symlink
        template: @public/internal/temp.html.twig #указываем шаблон который будет открываться по данному маршруту

json:
    path: /design/json
    defaults: 
        _controller: UkInstallBundle:Design:json
        data: {'some_key': 'some_data'} #передаем массив, в ответ получаем JSON строку

Рекомендую называть маршруты простыми именами, которые можно потом использовать в разработке программной части. Тогда достаточно будет прописать маршруты с такими же именами в файле app/config/routing.yml. И не придется менять вызов маршрутов в шаблонах, например:

#!html
<a href="{{path('index')}}">Homepage</a>
<a href="{{path('temp')}}">Temppage</a>

Компиляция js и css

Для сборки в один файл и минимизации файлов скриптов и стилей используется библиотека gulp. Для того что бы включить отслеживание изменений файлов нужно, находясь в папке web/public, выполнять команду в консоли:

#!bash
npm run live

Для остановки отслеживания нужно прервать процесс Ctrl+C. Файлы исходных скриптов и стилей находятся в папке web/public/source, файлы после объединения и минимизации попадают в папку web/public/build.

Рекомендации по верстке

Пользуйтесь возможностями twig такими как наследование, макросы, циклы, фильтры и функции. Это позволит сократить объем кода в шаблоне и будет работать как в design так и в prod окружении.

Создайте переменные для того что бы при разработке можно было присвоить им значения в одном месте шаблона, например:

#!twig

{# @public/templates/index.html.twig #}
{% extends base_path|default("@public/templates/include/base.html.twig") %}
{% set content = content|default('public base template') %}
 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>{% block title %}Шаблон в папке с версткой{% endblock %}</title>
        {% block stylesheets %}{% endblock %}
        <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
    </head>
    <body>
        {% block body %}
            {{content}}
        {% endblock %}
        {% block javascripts %}{% endblock %}
    </body>
</html>

Это позволит сэкономить время при разработке присваивая переменным нужные значения, не меняя верстки шаблона.

#!twig
{# app/Resources/views/index.html.twig #}
{% set base_path = 'base.html.twig' %}
{% extends "@public/templates/index.html.twig" %}
 
{%set content = 'app index template' %}
{% block title %}
   Шаблон в основной папке app
{% endblock %}

Базовый шаблон в основной папке app наследуется от базового шаблона в папке верстки

#!twig
{# app/Resources/views/base.html.twig #}
{% extends "@public/base.html.twig" %}

Закрытие от пользователей

Для того что бы обычный пользователь не мог попасть в design окружение, нужно добавить условие в файл app_design.php:

#!php
<?php

if (!isset($_SERVER['PHP_AUTH_USER']) || !isset($_SERVER['PHP_AUTH_PW']) || 
        !preg_match('/^.*vv76\.ru$/', $_SERVER['HTTP_HOST']) || 
                ($_SERVER['PHP_AUTH_PW'] != "dev" && $_SERVER['PHP_AUTH_USER'] != "dev")
) {
    header('HTTP/1.0 403 Forbidden');
    exit('You are not allowed to access this file. Check '.basename(__FILE__).' for more information.');
}

?>

Таким образом design окружение будет доступно только если пользователь авторизован под логином и паролем dev:dev или к сайту обращаются по тестовому домену на vv76.ru.

unitkit / uk-design-bundle

Maintainers

Details