Встречайте третью часть цикла статей по разработке с Kohana PHP V3 (KO3). Предыдущие части можно найти по метке "знакомство с kohana 3.0". В этот раз речь пойдет о создании шаблонов.
Во второй статье мы рассмотрели виды, а теперь будем наследовать классы Controller'а, что позволит создать шаблон. Шаблон представляет собой вид, который состоит по большей части из (X)HTML кода.
Прежде чем начать заполнять файлы кодом, создадим новую папку в “/application/views/” и назовем ее “templates”. Теперь в любимом редакторе создайте чистый документ и вставьте туда следующее:
Сохраните это как “default.php” в “/application/views/templates/”.
Как видите, этот код по сути выглядит как те виды, которые мы создавали во второй части, только в более расширенной и универсальной, а потому подходящей к использованию во всем проекте, версии. На “foreach” я остановлюсь позже.
На данный момент у нас есть шаблон, но нет указаний системе что-либо с ним делать. Поэтому давайте создадим новый файл со следующим содержимым:
Сохраните его как “defaulttemplate.php” в папке “/application/classes/controller/”.
В этом скрипте мы наследуем класс “Controller_Template” и делаем три базовые операции: делаем некоторые свойства (переменные) доступными нашим методам (экшенам), присваиваем им значения по умолчанию, а затем связываем их с переменными из шаблона перед его визуализацией. Здесь и начинает работать цикл foreach() из шаблона. Он использует статические методы класса-помощника “HTML”: один для загрузки стилей CSS, другой для файлов JavaScript. Эти методы, выполнившись в цикле, создадут корректный HTML-код для подключения файлов. Они принимают как URL, так и относительный путь.
Если вы не знаете, что такое класс-помощник, то вот краткое определение из документации Kohana 2.x:
Итак, вернемся к коду. Как вы могли заметить, в нем присутствует упоминание “assets/css/reset.css”, так что давайте с этим разберемся. В корневой папке создайте директорию “assets”, а в ней — “css”. Стили я скопировал из статьи “Create The Perfect CSS Reset” и засунул в файл “reset.css”, который поместил в “assets/css/.” Можете внутри папки “/assets/” также создать директории “images”, “js” и “files”. Эта папка будет использоваться для хранения статических файлов.
Пока еще наше приложение не знает, что со всем этим делать, поэтому давайте изменим наш контроллер. Откройте “/application/classes/controller/ko3.php” и замените строку:
на:
Также нужно привести экшен “index” (метод action_index()) к следующему виду:
Сохраните файл. Возможно вы заметили, что добавилась строка “$this->template->title = ‘Kohana 3.0′;”, которая присвоит значение переменной “title” в наших шаблонах. Также мы избавились от метода “render()” в конце. В его вызове теперь нет необходимости, поскольку метод “factory()” автоматически отвизуализирует вид в переменную “content” шаблона. Довольно просто, правда?
Перед загрузкой страницы в браузере, пожалуй, стоит удалить некоторый уже не нужный код. Откройте “ko3.php”, который находится в “application/views/pages/”, и приведите его к такому виду:
Теперь, обновив в браузере страничку, вы должны увидеть, что внешне она практически не изменилась, не считая появления заголовка “Kohana 3.0″, но исходный код стал совсем другим.
Вам может быть непонятно назначение остальных переменных в шаблоне, поэтому давайте вернемся к экшену “index” и заменим его на следующий код:
Довольно просто. Возможно вы заметили, что я не заполнил хэдер и футер страницы. Но, уверен, вы догадаетесь, что тут нужно сделать. Подсказка: визуализировать вид в ту переменную (смайлик).
Еще вы можете заметить, что я подключил “assets/css/red.css” и “assets/css/jqtest.js”. Давайте теперь их заполним, начиная с “/assets/css/red.css”:
Теперь “/assets/js/jqtest.js”:
Сохраните их и обновите сайт. Должно появиться всплывающее окно и первая строка должна стать красной.
Поздравляю, в этой части вы на базе встроенного контроллера «Template» создали свой контроллер, использующий созданный вами же файл шаблона.
Во второй статье мы рассмотрели виды, а теперь будем наследовать классы Controller'а, что позволит создать шаблон. Шаблон представляет собой вид, который состоит по большей части из (X)HTML кода.
Прежде чем начать заполнять файлы кодом, создадим новую папку в “/application/views/” и назовем ее “templates”. Теперь в любимом редакторе создайте чистый документ и вставьте туда следующее:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Language" content="en-us" /> <title><?php echo $title;?></title> <meta name="keywords" content="<?php echo $meta_keywords;?>" /> <meta name="description" content="<?php echo $meta_description;?>" /> <meta name="copyright" content="<?php echo $meta_copywrite;?>" /> <?php foreach($styles as $file => $type) { echo HTML::style($file, array('media' => $type)), "\n"; }?> <?php foreach($scripts as $file) { echo HTML::script($file, NULL, TRUE), "\n"; }?> </head> <body> <div id="container"> <?php echo $header;?> <?php echo $content;?> <?php echo $footer;?> </div> </body> </html>
Сохраните это как “default.php” в “/application/views/templates/”.
Как видите, этот код по сути выглядит как те виды, которые мы создавали во второй части, только в более расширенной и универсальной, а потому подходящей к использованию во всем проекте, версии. На “foreach” я остановлюсь позже.
На данный момент у нас есть шаблон, но нет указаний системе что-либо с ним делать. Поэтому давайте создадим новый файл со следующим содержимым:
<?php defined('SYSPATH') or die('No direct script access.'); class Controller_DefaultTemplate extends Controller_Template { public $template = 'templates/default'; /** * Initialize properties before running the controller methods (actions), * so they are available to our action. */ public function before() { // Run anything that need ot run before this. parent::before(); if($this->auto_render) { // Initialize empty values $this->template->title = ''; $this->template->meta_keywords = ''; $this->template->meta_description = ''; $this->template->meta_copywrite = ''; $this->template->header = ''; $this->template->content = ''; $this->template->footer = ''; $this->template->styles = array(); $this->template->scripts = array(); } } /** * Fill in default values for our properties before rendering the output. */ public function after() { if($this->auto_render) { // Define defaults $styles = array('assets/css/reset.css' => 'screen'); $scripts = array('http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'); // Add defaults to template variables. $this->template->styles = array_reverse(array_merge($this->template->styles, $styles)); $this->template->scripts = array_reverse(array_merge($this->template->scripts, $scripts)); } // Run anything that needs to run after this. parent::after(); } }
Сохраните его как “defaulttemplate.php” в папке “/application/classes/controller/”.
В этом скрипте мы наследуем класс “Controller_Template” и делаем три базовые операции: делаем некоторые свойства (переменные) доступными нашим методам (экшенам), присваиваем им значения по умолчанию, а затем связываем их с переменными из шаблона перед его визуализацией. Здесь и начинает работать цикл foreach() из шаблона. Он использует статические методы класса-помощника “HTML”: один для загрузки стилей CSS, другой для файлов JavaScript. Эти методы, выполнившись в цикле, создадут корректный HTML-код для подключения файлов. Они принимают как URL, так и относительный путь.
Если вы не знаете, что такое класс-помощник, то вот краткое определение из документации Kohana 2.x:
Помощники — это удобные функции, которые призваны помочь вам с разработкой.
Они похожи на библиотечные функции, но есть небольшое различие. В случае с библиотеками необходимо создавать экземпляр библиотечного класса, чтобы использовать его методы. Помощники же являются статическими методами класса, который автоматически загружается фреймворком, так что нет нужды производить дополнительные действия.
Итак, вернемся к коду. Как вы могли заметить, в нем присутствует упоминание “assets/css/reset.css”, так что давайте с этим разберемся. В корневой папке создайте директорию “assets”, а в ней — “css”. Стили я скопировал из статьи “Create The Perfect CSS Reset” и засунул в файл “reset.css”, который поместил в “assets/css/.” Можете внутри папки “/assets/” также создать директории “images”, “js” и “files”. Эта папка будет использоваться для хранения статических файлов.
Пока еще наше приложение не знает, что со всем этим делать, поэтому давайте изменим наш контроллер. Откройте “/application/classes/controller/ko3.php” и замените строку:
class Controller_Ko3 extends Controller
на:
class Controller_Ko3 extends Controller_DefaultTemplate
Также нужно привести экшен “index” (метод action_index()) к следующему виду:
public function action_index() { $ko3_inner = array(); $ko3 = array(); $this->template->title = 'Kohana 3.0'; View::set_global('x', 'This is a global variable'); $ko3_inner['content'] = 'We have more data'; $ko3['content'] = 'We have data'; $ko3['ko3_inner'] = View::factory('blocks/ko3_inner', $ko3_inner) ->render(); $this->template->content = View::factory('pages/ko3', $ko3); }
Сохраните файл. Возможно вы заметили, что добавилась строка “$this->template->title = ‘Kohana 3.0′;”, которая присвоит значение переменной “title” в наших шаблонах. Также мы избавились от метода “render()” в конце. В его вызове теперь нет необходимости, поскольку метод “factory()” автоматически отвизуализирует вид в переменную “content” шаблона. Довольно просто, правда?
Перед загрузкой страницы в браузере, пожалуй, стоит удалить некоторый уже не нужный код. Откройте “ko3.php”, который находится в “application/views/pages/”, и приведите его к такому виду:
<h1>This is my first view</h1> <?php echo $content;?> <?php echo $ko3_inner; ?> <br/><?php echo $x;?>
Теперь, обновив в браузере страничку, вы должны увидеть, что внешне она практически не изменилась, не считая появления заголовка “Kohana 3.0″, но исходный код стал совсем другим.
Вам может быть непонятно назначение остальных переменных в шаблоне, поэтому давайте вернемся к экшену “index” и заменим его на следующий код:
public function action_index() { $ko3_inner = array(); $ko3 = array(); $this->template->title = 'Kohana 3.0'; $this->template->meta_keywords = 'PHP, Kohana, KO3, Framework'; $this->template->meta_description = 'A test of of the KO3 framework'; $this->template->styles = array('assets/css/red.css' => 'screen'); $this->template->scripts = array('assets/js/jqtest.js'); View::set_global('x', 'This is a global variable'); $ko3_inner['content'] = 'We have more data'; $ko3['content'] = 'We have data'; $ko3['ko3_inner'] = View::factory('blocks/ko3_inner', $ko3_inner) ->render(); $this->template->content = View::factory('pages/ko3', $ko3); }
Довольно просто. Возможно вы заметили, что я не заполнил хэдер и футер страницы. Но, уверен, вы догадаетесь, что тут нужно сделать. Подсказка: визуализировать вид в ту переменную (смайлик).
Еще вы можете заметить, что я подключил “assets/css/red.css” и “assets/css/jqtest.js”. Давайте теперь их заполним, начиная с “/assets/css/red.css”:
h1 { color: #FF0000; }
Теперь “/assets/js/jqtest.js”:
$("document").ready(function() { alert('Hello Kohana!'); });
Сохраните их и обновите сайт. Должно появиться всплывающее окно и первая строка должна стать красной.
Поздравляю, в этой части вы на базе встроенного контроллера «Template» создали свой контроллер, использующий созданный вами же файл шаблона.
