Фремворк Limb

Отредактируйте страницу и нажмите «Сохранить». Прочтите справочную страницу для ознакомления с синтаксисом вики. Пожалуйста, редактируйте только в том случае, если планируете улучшить содержимое. Если вы просто хотите потестировать что-либо, воспользуйтесь специальной страницей: PlayGround.

====== Шаг4. Оптимизация шаблонов. Добавление постраничного вывода ======
===== Вынесение шаблонов form_fields.phtml и form_errors.phtml из шаблонов форм =====

Поля формы и ошибки валидации в шаблонах template/news/create.phtml и template/news/edit.phtml выводятся полностью одинаково. Воспользуемся тегом [[limb3:ru:packages:macro:tags:core_tags:include_tag| {{include}}]], который является как бы аналогом функции include PHP.

Создадим шаблон template/news/form_fields.phtml следующего содержания:

<code xml>
{{label for="title"}}Title{{/label}} : {{input name='title' type='text' size='60' title='Title'/}}<br/>
{{label for="date"}}Date{{/label}} : {{input name='date' type='text' size='15' title='Date'/}}<br/>
{{label for="annotation"}}Annotation{{/label}} : {{textarea name='annotation' rows='2' cols='40' title='Annotation'/}}<br/>
{{label for="content"}}Content{{/label}} : {{textarea name='content' rows='5' cols='40'/}}<br/>
</code>

Теперь шаблон template/news/form_errors.phtml следующего содержания:
<code xml>

{{form:errors to='$fields_errors'/}}
{{list using='$fields_errors' as="$error"}}
  <div class="message_error">
    <b class='title'>This fields contained errors</b>
    <ol>
      {{list:item}}
        <li><span style="color:red;">{$error.message}</span></li>
      {{/list:item}}
    </ol>
  </div>
{{/list}}
</code>

Теперь эти шаблоны подключаем в наши template/news/create.phtml и template/news/edit.phtml:

<code xml>
<html>
<head>
  <title>Limb3 tutorial</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body bgcolor="#FFFFFF" text="#000000" >
 
<h1>Create news</h1>

</body>
</html>
</code>

и

<code xml>
<html>
<head>
  <title>Limb3 tutorial</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body bgcolor="#FFFFFF" text="#000000" >
 
<h1>Edit news</h1>

</body>
</html>
</code>

Обратите внимание на использование тега [[limb3:ru:packages:macro:tags:core_tags:include_tag| {{include}}]]. Атрибут **file** указывает на относительное имя шаблона (относительно папки template), который нужно включить в шаблон вместо тега.

Что ж, уже лучше, но можно сделать еще компактнее.
===== Выделение общего базового шаблона page.phtml =====

Код в шаблонах create.phtml и edit.phtml до формы и после нее повторяется дважды. В других шаблонных системах мы сделали бы еще 2 шаблона: header.phtml и footer.phtml, но в MACRO есть средства намного лучше. Подход header/footer имеет большой недостаток в том, что разбивает базовый шаблон на 2 составляющие, которые усложняют общее понимание шаблона в целом. При помощи MACRO этот недостаток можно обойти.

Воспользуемся тегом [[limb3:ru:packages:macro:tags:core_tags:wrap_tag| {{wrap}}]], который позволяет вставлять содержимое тега внуть другого шаблона, то есть как бы обворачивать один шаблон другим.

Но для начала выделим шаблон template/page.phtml следующего содержимого:

<code xml>
<html>
<head>
  <title>Limb3 tutorial</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body bgcolor="#FFFFFF" text="#000000" >
  {{slot id="page_placeholder"/}}
</body>
</html>
</code>

Обратите внимание на тег [[limb3:ru:packages:macro:tags:core_tags:slot_tag| {{slot}}]] - при помощи этого тега мы декларируем место, в которое может быть вставлен другой шаблон. Теперь изменим наши шаблоны create.phtml и edit.phtml следующим образом:

<code xml>
{{wrap with="page.phtml" into="page_placeholder"}}

<h1>Create news</h1>

{{/wrap}}
</code>

и

<code xml>
{{wrap with="page.phtml" into="page_placeholder"}}

<h1>Edit news</h1>
{{form id='news_form' name='news_form' method='post'}}

{{input type='submit' value='Edit'/}}
{{/form}}
{{/wrap}}
</code>

Тег [[limb3:ru:packages:macro:tags:core_tags:wrap_tag| {{wrap}}]] имеет атрибуты **with**, указывающий на относительное имя файла, в какой шаблон делать вставку, и **into**, который указывает, в какое место этого шаблона нужно её делать. Тег [[limb3:ru:packages:macro:tags:core_tags:wrap_tag| {{wrap}}]] имеет обязательный закрывающий тег, который как бы отмечает зону, которая должна быть обвернута в другой шаблон.

На самом деле тег [[limb3:ru:packages:macro:tags:core_tags:wrap_tag| {{wrap}}]] дает очень широкий простор для разбиения шаблонов, однако эти возможности и принципы их использования выходят за рамки данного примера.

Обвернуть шаблон news/display.phtml с помощью [[limb3:ru:packages:macro:tags:core_tags:wrap_tag| {{wrap}}]] мы оставляем вам возможность самостоятельно.
===== Добавление постраничного вывода =====

Список новостей может быть слишком большим для отображения на одной странице. В этом случае обычно применяют разбиение списка на страницы (пейджинация). При помощи MACRO сделать разбиение на страницы проще простого.

Создадим шаблон template/pager.phtml следующего содержимого:
<code xml>

total items : {$total_items}. shown: from <b>{$begin_item_number}</b> to <b>{$end_item_number}</b>

{{pager:first}}<a href="{$href}">first</a>{{/pager:first}}
 
{{pager:list}}
  {{pager:current}}<b><a href="{$href}">{$number}</a></b>{{/pager:current}}
  {{pager:number}}<a href="{$href}">{$number}</a>{{/pager:number}}
  {{pager:separator}}-{{/pager:separator}}
{{/pager:list}}

{{pager:last}}<a href="{$href}">last</a>{{/pager:last}}

{{/pager}}
</code>

Центральный тег при постраничном разбиении - [[limb3:ru:packages:macro:tags:pager_tags:paginate_tag| {{paginate/}}]], собственно он и разбивает список на страницы. Он содержит атрибут **iterator**, который указывает на переменную, содержащую список для разбиения на страницы, а так же атрибут **pager**, указывающий на ID тега [[limb3:ru:packages:macro:tags:pager_tags:pager_tag| {{pager}}]], который будет отображать постраничную навигацию. Тег [[limb3:ru:packages:macro:tags:pager_tags:pager_tag| {{pager}}]] содержит **items**, указывающий какое количество элементов списка выводить на одной странице. Остальными тегами выводятся ссылки на первую (тег [[limb3:ru:packages:macro:tags:pager_tags:pager_frontier_tag| {{pager::first}}]]), предыдущую(тег [[limb3:ru:packages:macro:tags:pager_tags:pager_frontier_tag| {{pager:prev}}]]), текущую (тег [[limb3:ru:packages:macro:tags:pager_tags:pager_current_tag| {{pager:current}}]]), следующую(тег [[limb3:ru:packages:macro:tags:pager_tags:pager_frontier_tag| {{pager:next}}]]) и последнюю(тег [[limb3:ru:packages:macro:tags:pager_tags:pager_frontier_tag| {{pager:last}}]]) страницы, а также на некоторое количество страниц в середине (тег [[limb3:ru:packages:macro:tags:pager_tags:pager_number_tag| {{pager:number}}]]).

Также при помощи выражений {$total_items}, {$begin_item_number} и {$end_item_number}, которые по-умолчанию поддерживаются внутри тега [[limb3:ru:packages:macro:tags:pager_tags:pager_tag| {{pager}}]] мы выводим общее количество элементов в списке, а также номера элементов, с которого начинается текущая страница и которым заканчивается текущая страница.

Теперь необходимо этот шаблон подключить на странице отображения списка новостей и связать список новостей с пейджером. Вот новый вид шаблона template/news/display.phtml (вы ведь использовали здесь тег [[limb3:ru:packages:macro:tags:core_tags:wrap_tag| {{wrap}}]], как и в шаблонах форм?):

<code xml>
{{wrap with="page.phtml" into="page_placeholder"}}

<h1>Newsline</h1>
<a href='{{route_url params="action:create"/}}'>Create news</a>

<p/>

{{list using="$#news" as="$item"}}
  <table border="1">
  <tr>
    <th>ID</th>
    <th>Date</th>
    <th>Title</th>
    <th>Actions</th>
  </tr>
  {{list:item}}
  <tr>
    <td>{$item.id}</td>
    <td>{$item.date}</td>
    <td>{$item.title}</td>
    <td>
      <a href='{{route_url params="action:edit,id:{$item.id}"/}}'>Edit</a>&nbsp;&nbsp;
      <a href='{{route_url params="action:delete,id:{$item.id}"/}}'>Delete</a>
    </td>
  </tr>
  <tr>
    <td colspan='4'>
      {$item.annotation}
    </td>
  </tr>
  {{/list:item}}
  </table>
{{/list}}

{{/wrap}}
</code>

Если вы все сделали правильно, тогда у вас должно получиться нечто подобное этому:

{{{:limb3:ru:tutorials:basic:main_page.png|:limb3:ru:tutorials:basic:main_page.png}}}

===== Что дальше? =====

Далее: [[step5|Шаг5. Финальные штрихи(сортировка, отображение новости целиком, пять свежих новостей на главной странице).]]

Пожалуйста, введите код подтверждения, чтобы доказать, что вы не робот:

  _      __  _   __   _  __  _      __   ___ 
 | | /| / / | | / /  | |/_/ | | /| / /  / _ \
 | |/ |/ /  | |/ /  _>  <   | |/ |/ /  / // /
 |__/|__/   |___/  /_/|_|   |__/|__/  /____/

Пожалуйста, оставьте это поле пустым:

Сводка изменений

Примечание: редактируя эту страницу, вы соглашаетесь на использование своего вклада на условиях следующей лицензии: CC Attribution-Share Alike 4.0 International

Фремворк Limb

Инструменты пользователя

Инструменты сайта

Инструменты страницы