В прошлом уроке мы сверстали макет нашей страницы, сделали фон и добавили тени отбрасываемые контент областью. Сегодня мы займемся шапкой нашего шаблона.

Первое чем мы займемся – это разметим шапку под основные элементы:

1) Логотип сайта

2) Поиск

3) Горизонтальное меню.

Для этого в файл index.html в теге:

Добавим следующий код:

 <!--      Лого        -->

<div id="logo">
            Логотип</div>

    <!--      Поиск        -->

<div id="search">
            Поиск</div>

    <!--      Горизонтальное меню       -->

<div id="top_menu";
            Меню</div>

И в файле style.css добавим необходимые стили:

#logo
    {
        float: left;
        width: 63%;
    }
#search
    {
        float: left;
        width: 37%;
        height: 111px;
    }
    /* Только для IE */
    * html #search
    {
        width: 35%;
    }    #top_menu
    {
        clear: left;
    }

Теперь перейдем к логотипу. Вырезаем лого без текста.

В файле index.html добавил ссылку и описание блога:

 <a class="logo_link" href="/"> </a>
            <label class="logo">Блог 2-х веб разработчиков. Web - Дизайн, Web - Программирование, Seo</label>

И конечно добавим стили:

 #logo
    {
        float: left;
        width: 67%;
        height: 111px;

        background: url('images/logo.gif') no-repeat top left;
    }
        a.logo_link
        {
            display: block;
            width: 627px;
            height: 90px;
            text-decoration: none;
        }
        label.logo
        {
            padding-left:20px;
            font-weight:bold;
            font-size: 12px;
            font-family: Verdana;
        }

На данный момент шапка выглядит следующим образом:

С поиском пришлось повозиться, вот мой вариант его реализации. Для начала добавляем простое input поле, убираем границы и на фон ставим нашу картинку:

После слева и справа добавляем картинки с краями формы поиска:

В коде это выглядит следующим образом. В файл index.html добавляем следующие:

    <img class="search" src="images/input_l.gif" alt="" />
<input class="search" name="search" type="text" />
                <img class="search_btn" src="images/spacer.gif" alt="" />

Стили:

 input.search
        {
            float: left;
            background: url('images/input.gif') repeat-x;
            border: 0;
            padding-top: 3px;
            height: 19px;
            width: 85%;
        }
/* Только для IE */
         * html input.search
        {
            width: 80%;
        }
        img.search
        {
            float: left;
            height: 22px;
            width: 6px;
            border: 0px;
        }
        img.search_btn
        {
            float: left;
            height: 22px;
            width: 31px;
            border: 0px;

            background: url('images/search_btn.gif');
        }
        img.search_btn:hover
        {
            background: url('images/search_btn_hover.gif');
            cursor: pointer;
        }

Осталось сделать обрамления для формы, но тут проще, для этого код поля поиска заключаем в теги:

<div id="search_form_l">

<div id="search_form_r">

<div id="search_form">
                <img class="search" src="images/input_l.gif" alt="" />
<input class="search" name="search" type="text" />
                <img class="search_btn" src="images/spacer.gif" alt="" /></div>
</div>
</div>

И добавляем стили:

 #search_form_l
        {
            background: url('images/search_form_l.gif') left no-repeat;
            height: 29px;
            padding-left: 62px;
            margin-top: 10px;
        }
        #search_form
        {
            background: url('images/search_form.gif') repeat-x;
            height: 29px;
        }
        #search_form_r
        {
            background: url('images/search_form_r.gif') right no-repeat;
            height: 29px;
            padding-right: 37px;
        }

На этом форма поиска готова. Добавим кнопку rss ленты. В index.html ниже формы поиска добавим:

<div id="rss">

<div id="rss_text">
                    <a class="rss" href="#">Подписаться на

RSS ленту</a></div>

<div id="rss_icon">
                    <a class="rss" href="#"><img class="rss" src="images/spacer.gif" alt="" /></a></div>
</div>

И стили:

 #rss
        {
            width: 50%;
            float: right;
        }
            #rss_text
            {
                float: left;
                font-size: 10px;
                font-family: Verdana;
                color: #ada8a2;
                text-align: right;

                padding-top: 28px;
            }
            a.rss
            {
                font-size: 10px;
                font-family: Verdana;
                color: #ada8a2;
                text-decoration: none;
            }
            a.rss:hover
            {
                text-decoration:underline;
            }
            #rss_icon
            {
                float: left;
            }
            img.rss
            {
                background: url('images/rss.gif');
                width: 59px;
                height: 62px;
            }
            img.rss:hover
            {
                background: url('images/rss_hover.gif');
                width: 59px;
                height: 62px;
            }

Вот что имеем на данный момент:

Осталось совсем не много – это горизонтальное меню.

Вырезаем необходимые кусочки:

И правим стили:

 #top_menu
    {
        clear: left;
        width: 100%;
        height: 25px;
        background: #4277ad url('images/top_menu.gif') repeat-x;
    }

В теге:

Добавляем:

<div style="float:left;">
            <a class="top_menu" href="#">Главная</a>
            <a class="top_menu_c" href="#">О нас</a></div>

<div id="flower_top"></div>

И конечно же стили, куда без них:

 #flower_top
        {
            float: right;
            background: url('images/top_menu_flower.gif') no-repeat;
            margin-right: 30px;
            width:178px;
            height:25px;
        }
        a.top_menu
        {
            float: left;
            display: block;
            height: 25px;
            width: 100px;
            text-align: center;
            text-decoration: none;
            font-size: 12px;
            font-family: Verdana;
            color: #fff;
            text-align: center;
        }
        a.top_menu:hover
        {
            text-decoration:underline;
        }
        a.top_menu_c
        {
            float: left;
            display: block;
            height: 25px;
            width: 100px;
            text-align: center;
            text-decoration: none;
            font-size: 12px;
            font-family: Verdana;
            color: #fff;
            text-align: center;
            background: url('images/top_menu_button.gif') repeat-x;
        }
        a.top_menu_c:hover
        {
            text-decoration:underline;
        }

Ну вот и все.

Файлы проекта.

В декабре 2008, наконец появилась релизная версия нового PHP фреймворка Yii. В 2008 году было выпущено много PHP фреймворков, но Yii наиболее интересный из них, потому что:

• Его автор Qiang Xue, также разработчик фреймворка PRADO.
• Это простой в использовании, хорошо организованный, полностью PHP5 совместимый фреймворк, построенный на архитектуре MVC.
• И утверждаю, что это лучший по производительности PHP фреймворк.

Перейдем непосредственно к сравнению.

Версии фреймворков использованных в тесте:

Codeigniter 1.7.1

Kohana 2.3.1

Yii 1.0.3

Лицензия

CodeIgniter (отлично)

CI использует модифицированную BSD/Apache-style license.

Kohana (отлично)

Kohana использует новую BSD license.

Yii (отлично)

Yii использует новую BSD license.

Совместимость с различными версиями PHP

CodeIgniter

PHP >= 4.3.2 (Включая все версии PHP5).

На первый взгляд хорошо, что CI поддерживает PHP4 и PHP5. Однако если вы знакомы с ООП то знаете, что авторы пошли на компромиссы для поддержки PHP4. Это одна из главных причин по которой разработчики стали переходить на другие фреймворки.

Если вы решили использовать CI в своих проектах, рекомендую настроить ваше приложение на использование только PHP5 с нормальным ООП.

Kohana

PHP >= 5.2.3

Yii

PHP >= 5.1.0

Поддерживаемые базы данных

CodeIgniter (отлично)

MySQL

MySQLi

PostgreSQL

MSSQL

Oracle

SQLite

ODBC

Kohana (хорошо)

MySQL

MySQLi

PostgreSQL

MSSQL

PDOSqlite

Yii (отлично)

Поддерживаются все БД поддерживаемые PDO (PHP Data Object).

Сообщество

CodeIgniter (отлично)

Отличное, сильное и активное комьюнити. CI имеет хороший форум, bug tracker и wiki.

Kohana (хорошо)

Комьюнити поменьше чем у Codeigniter. Kohana может предложить нам форум, Trac и IRC.

Yii (хорошо)

Самый молодой фреймворк и по этому имеет самое маленькое комьюнити пользователей, но оно активно развивается по мере увеличения интереса к фреймворку.

Yii предлагает нам форум, проект хостящийся на Google Code и раздел докоментации с возможностью комментирования.

Документация

CodeIgniter (отлично)

Лучшая документация из всех представленных в данном обзоре фреймворокв. Просто всеобъемлющая, простая для понимания и актуальная документация.

Kohana (хорошо)

Документация явно слабее чем у CI. В настоящее время она охватывает большую часть аспектов разработки, однако некоторые части документации являются устаревшими, а иногда и неправильными.

Yii (плохо)

Документация Yii, выглядит довольно хорошо. Все функции и изменения хорошо задокументированы, видно, что происходит с каждой версией Yii. Api документация так же на высоком уровне. Тем не менее, многие особенности на данном этапе не описаны в руководстве. Что бы разобраться в некоторых вещах приходится полазить по API документации.

Tutorial / Примеры

CodeIgniter (хорошо)

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

Kohana (хорошо)

Kohana имеет специальную страницу руководства, но оно немного устаревшее. Также организован учебный центр, который правда не обновлялся с сентября 2008 года.

Yii (хорошо)

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

MVC

Все три фреймворка используют архитектуру MVC (Model-View-Controller).

CodeIgniter

Помимо стандартной архитектуры MVC предлагает: библиотеки, плагины, хелперы и хуки.

Kohana

Помимо стандартной архитектуры MVC предлагает: модули, события, библиотеки, хелперы, хуки.

Yii

Помимо стандартной архитектуры MVC предлагает: компоненты, модули, расширения, виджеты, хелперы.

Модульность

CodeIgniter (с помощью сторонних библиотек)

CI в стандартной поставке не поддерживает модульность, однако вы можете добавить ее сами с помощью сторонних библиотек, таких как: HMVC или Matchbox.

Kohana (отлично)

Kohana предлагает не только модули, но и имеет каскадную файловую систему выводящую модульность на новый уровень.

Yii (хорошо)

Yii с версии 1.0.3 поддерживает модульность.

Конфигурация

(хорошо)

CodeIgniter имеет довольно хорошую конфигурационную систему.

Kohana (отлично)

Kohana имеет отличную конфигурационную систему.

Yii (хорошо)

Yii имеет довольно хорошую конфигурационную систему.

Класс абстракции БД и ORM

CodeIgniter (хорошо)

CodeIgniter обладает очень мощным классом для работы с БД, который поддерживает как традиционные структуры, так и шаблоны Active Record. Но не имеет встроенной поддержки ORM.

Kohana (отлично)

Одним из важнейших средством для уменьшения времени разработки проектов для меня является ORM. Kohana предлагает легкую, но достаточно функциональную реализацию ORM. Она не столь сложная как Rails Active Record, но работать с ней достаточно удобно. Особенно люблю простоту обновления many-to-many записей.

Yii (хорошо)

В Yii более сложный синтаксис объявления модели отношений, чем в Kohana. Тем не менее, она так же предлагает более мощный функционал.

Авторизация и ACL

CodeIgniter (с помощью сторонних библиотек)

CI имеет несколько сторонних библиотек реализующих функционал ACL. Подробней можно почитать на форуме.

Kohana (хорошо)

Kohana имеет встроенный модуль авторизации, а также есть несколько сторонних разработок.

Yii (отлично)

Yii имеет встроенный модуль авторизации и аутентификации, достаточно гибкий и простой в использовании.

Валидация

CodeIgniter (отлично)

CodeIgniter form validation library.

Kohana (отлично)

Kohana validation library.

Yii (отлично)

Yii’s использвание валидаторов. Все системные валидаторы хранятся в директории «validators» в главной директории фреймворка.

Кеширование

Codeigniter (частично)

Позволяет кешировать только страницы полностью.

Kohana (хорошо)

Kohana обладает чуть более продвинутой системой кеширования, которая поддерживает файлы, SQLite, APC, eAccelerator, memcache и XCache based caching.

Yii (хорошо)

Как и Kohana, Yii поддерживает memcache, APC, Xcache и основанное на БД кеширование страниц целиком и по частям.

Сессии

Codeigniter (хорошо)

Класс сессий в CI достаточно хорош, он поддерживает хранение и обработку данных.

Kohana (хорошо)

Аналогично CI, Kohana предлагает хорошую библиотеку по работе с сессиями.

Yii (отлично)

Yii предоставляет более мощный и гибкий класс по работе с сессиями. К сожалению он в данный момент плохо задокументирован.

Logging \ Debugging

Codeigniter (хорошо)

CI имеет простой класс обработки ошибок, а так же profiler класс.

Kohana (отлично)

Имеет хороший logging класс, а так же более гибкий профайлер.

Yii (отлично)

Yii так же имеет классы обработки ошибок и профайлер, такие же мошные и гибкие как в Kohana.

Шаблоны

Все три фреймворка используют nativе’ный PHP в шаблонах.

Codeigniter (поддерживает альтернативный синтаксис)

CI также предоставляет альтернативный парсер шаблонов, template parser class.

Kohana (поддерживает альтернативный синтаксис с помощью сторонних библиотек)

Kohana не имеет встроенной поддержки альтернативного синтаксиса шаблонов. Но ее можно добавить с помощью сторонних библиотек, например Temper.

Yii (поддерживает альтернативный синтаксис)

Yii также поддерживает альтернативный синтаксис шаблонов, заимствованный из PRADO.

Хелперы

Набор функций, для решения определенных задач.

Codeigniter (отлично)

Имеет 21 встроенный хелпер.

Kohana (отлично)

В Kohana включено 19 хелперов.

Yii (частично)

Встроено 6 хелперов.

Встроенные JavaScript библиотеки

Codeigniter (нет)

Нет встроенных библиотек.

Kohana (нет)

Нет встроенных библиотек.

Yii (Да)

Yii поставляется с библиотекой jQuery. А также с рядом полезных классов таких как авто-дополнение.

Web сервисы

Рекомендую интегрировать Zend Framework для работы с веб сервисами.

Codeigniter (ограничено)

Есть XML-RPC класс.

Kohana (нет)

Нет поддержки веб сервисов.

Yii (ограничено)

Поддерживается SOAP.

Многоязычность

Codeigniter (ограничено)

В CI встроен простой класс для поддержки многоязычности.

Kohana (плохо)

Kohana предоставляет базовый класс по работе с локалями и многоязычностью.

Yii (хорошо)

Yii содержит более полный класс поддержки многоязычности.

Unit Testing

Я рекомендую использовать SimpleTest или PHPUnit для тестирования.

Codeigniter (ограничено)

CI имеет очень простой класс для тестирования.

Kohana (нет)

Нет встроенной поддержки Unit тестирования.

Yii (нет)

Так же как и в Kohana отсутствует встроенная поддержка Unit тестирования.

Вердикт

На мой взгляд нет лучшего фреймворка, да и целью статьи не было его определение, а скорее анализ плюсов и минусов каждого. А каким пользоваться решать вам. В данный момент я использую CI и присматриваюсь к Kohana, планирую переносить разработки на него.

Так же можете почитать мой обзор фреймворка CodeIgniter.