Блог

В Drupal 7 API есть целый раздел, который посвящен темизации созданного сайта. Все без исключения элементы сайта должны пройти процесс темизации. Но для начала нужно настроить саму темизацию, а с т.з. программирования, что бы ни делал программист, почти все делается с помощью функций. Самая основная из них - это функция theme(). Существует множество функций, которые упрощают темизацию также и в Drupal 7. Мы рассмотрим только 2 из них:

  • theme_table() – функция для формирования таблицы.
  • theme_fieldset() – функция для выпадающего списка.

Наши задания будут заключаться в следующем:

Сделать таблицу со статическими данными размером 3/3 с помощью theme_table() 

  1. Организовать вывод всех статей сайта содержащих следующие поля: название статьи (в активной ссылке) и ссылка на редактирование статьи. Сделать аналогичную таблицу, только рядом должна присутствовать ссылка на удаление статьи. 
  2. Вывести 2 выпадающих списка с помощью theme_fieldset(), где в списке  1 выводиться объяснение к таблице касающиеся редактирования нод,  список 2 выводит информацию о таблице удаления нод. 
  3. Сделать еще 2 выпадающих списка, в которых должны находиться наши таблицы.

Задание 1

Начнем с theme_table(). 

Давайте создадим файл нашего модуля, у нас будет файл table_page.module: для начала нам нужно создать страничку, на которой будет размещаться наша таблица. Для того, чтобы создать страницу, мы используем hook_menu, в нашем случае это все будет выглядеть  так:

php
/** 
 * Implements hook_menu(). 
 */ 
// объявление функции 
function table_page_menu() {  
   // создаем переменную, которая указывает, что путь страницы будет «наш_сайт/ table», 
   // в странице есть следующие параметры 
  $items['table'] = array( 
     // это название страницы 
    'title' => t('Page with table'),  
     // функция, которая формирует данные для таблицы 
    'page callback' => 'main_table',  
     // и доступ, он у нас будет конечно  же открыт. 
    'access arguments' => array('TRUE'),  
  );  
  // не забываем возвратить нашу переменную 
  return $items; 
} 

/** 
 * Function main_table(). 
 */  
// создаем функцию для вывода данных на созданную страницу
function main_table() {  
  // пока что оставим страничку пустой. 
  return '';  
} 

Дальше давайте вспомним, что таблица в html начинается с тегов table, дальше в таблице формируются строки, с помощью тега tr, затем мы создадим в строке ячейки, что выполняется с помощью тега td. Именно так мы можем сформировать самую простую таблицу на веб-странице. Хотя формировать нам ничего не придется, поскольку за нас работать с тегами будет функция theme_table(), мы же займемся самой функцией.

У каждой правильной таблицы должна быть «шапка», т.н. header. $header – будет состоять из 1 строки, и 3 ячеек в этом строке.

Делается все так:

 php
// создаем переменную, которая содержит массив  
$header = array( 
// дальше создаем еще массив, где содержится данные перовой ячейки
  array('data' => t('Header cell1')),  
// второй ячейки 
  array('data' => t('Header cell2')), 
// и третей ячейки 
  array('data' => t('Header cell3')) 
); 

Шапку таблицы мы создали, теперь давайте перейдем к телу таблицы. Там мы создадим 2 строчки, по 3 ячейки в каждой.

php
// создаем первую строчку 
$row [] = array( 
  // вывод 1 ячейки в 1 строчке 
  array('data' => t('Row 1 – Cell 1')),  
  // вторая ячейка 
  array('data' => t('Row 1 – Cell 2')),  
  // третья ячейка   
  array('data' => t('Row 1 – Cell 3'))  
); 
//вывод второго ряда 
$row [] = array(  

  // ячейка 1 
  array('data' => t('Row 2 – Cell 1')),  
  // ячейка 2 
  array('data' => t('Row 2 – Cell 2')),  
  // ячейка 3 
  array('data' => t('Row 2 – Cell 3'))  
); 

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

php
// используем функция theme и задаем ей параметр table 
theme('table',  
           //создаем массив для данных 
           array( 
             // значение header будет у нас находиться в $header
             'header' => $header,  
             // значение rows будет у нас выводиться из $rows
             'rows'=> $rows  
           ) 
); 

Теперь наш код будет иметь следующий вид:

php
/** 
 * Implements hook_menu(). 
 */   
function table_page_menu() { 
  $items['table'] = array( 
    'title' => t('Page with table'), 
    'page callback' => 'main_table', 
    'access arguments' => array('TRUE'), 
  ); 
  return $items; 
} 

/** 
 * Function main_table(). 
 */  
function main_table() {  
  // создаем переменную, которая содержит массив  
  $header = array( 
    // дальше создаем еще массив, где содержится данные перовой ячейки
    array('data' => t('Header cell1')),   
    // второй ячейки 
    array('data' => t('Header cell2')),   
    // и третей ячейки 
    array('data' => t('Header cell3'))   
  ); 
  // создаем первую строчку 
  $rows[] = array( 
    // вывод 1 ячейки в 1 строчке 
    array('data' => t('Row 1 – Cell 1')),  
    // вторая ячейка 
    array('data' => t('Row 1 – Cell 2')),  
    // третья ячейка  
    array('data' => t('Row 1 – Cell 3'))   
  ); 
  //вывод второго ряда 
  $rows[] = array(  
    array('data' => t('Row 2 – Cell 1')),  
    array('data' => t('Row 2 – Cell 2')), 
    array('data' => t('Row 2 – Cell 3')) 
  ); 

  return theme('table', array('header' => $header, 'rows'=> $rows));
   
} 

Визуальный вид будет такой:

Задание 2

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

php
/** 
 * Function main_table(). 
 */  
//объявляем функцию 
function main_table() {  
  // создаем   $header, где находится массив обозначающий строку, 
  // ячейки имеют следующее содержимое 
  $header_table_edit = array(  
    // первая ячейка содержит текст 'Title'  
    array('data' => t('Title')),  
    // вторая ячейка имеет текст 'Link to edit' 
    array('data' => t('Link to edit')) 
  ); 
  // делаем запрос к БД где выбираем номера нод и их названия с таблицы node
  $query = db_select('node', 'n') 
    ->fields('n', array('nid', 'title')) 
    ->execute() 
    ->fetchAll();  
  //выводим все наши данные в конструкции foreach  
  foreach ($query as $record_edit_table) { 
    //выводим строчку которая содержит 
    $rows_table_edit[] =  
      // ячейки 
      array(  
        // а в первой ячейке находится запись  
        array(   
          // в ячейке у нас находится запись ссылки, где название ноды выводиться 
          // с помощью $record_table_edit -> title, сама сылка будет у нас иметь такой вид  
          // «'node/' . $record_table_edit -> nid» - тоесть мы будем переходить на адрес типа:  
          // «наш_сайт/node/'номер ноды'» 
          'data' => l($record_table_edit -> title, 'node/' . $record_table_edit -> nid) 
        ), 
        // вторая ячейка имеет запись ссылки  
        array(  
           // ссылка у нас будет со значением 'edit node', при нажатии на нее мы будем
           // переходить на адрес типа: «наш_сайт / node / номер_ноды / edit»
          'data' => l(t('edit node'), 'node/'  . $record_table_edit -> nid  .  '/edit') 
        ) 
    );  
  } 
  // создаем   $caption с строковым значением 'Table for edit nodes'
  $caption_table_edit = t('Table for edit nodes'); 
  // создаем функцию theme, которая имеет значение 'table' и ввыводит
  return theme('table',   
      array( 
               // шапка таблицы находиться в $header_edit_table
              'header' => $header_table_edit,   
              // тело таблицы есть у нас в $rows_edit_table
              'rows'     => $rows_table_edit,   
              // и заголовок таблицы будет у нас в $caption_edit_table
              'caption' => $caption_table_edit 
            ) 
  ); 
} 

При запуске скрипта мы увидим следующее:

На сайте есть всего 3 статьи с выведенными названиями, и справа мы видим активную ссылку для редактирования определенного контента.

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

php
// у всех переменных в названии будет добавлена цифра 2 
$header_table_delete = array(  
    array('data' => t('Title')),  
    array('data' => t('Link delete'))  
  ); 
  foreach ($query as $record_table_delete) { 
    $rows_table_delete[] = 
      array( 
        array( 
          'data' => l($record_table_delete -> title,'node/' .$record_table_delete -> nid) 
        ), 
        array( 
          // путь к удалению ноды 
          'data' => l(t('delete node'),'node/' .$record_table_delete -> nid . '/delete')  
        ) 
    );  
  } 
  // название таблицы 
  $caption_table_delete = t('Table for delete nodes');  
  // здесь в переменную помещаем таблицу с редактированием нод
  $table_edit = theme('table',   
    array('header'  => $header_table_edit,  
          'rows'    => $rows_table_edit, 
          'caption' => $caption_table_edit 
          ) 
  );  
  // в этой переменной увидим функцию, которая буде  
  $table_delete = theme('table',  формировать таблицу с ссылкой на удаление ноды
    array('header'  => $header_table_delete,  
          'rows'    => $rows_table_delete, 
          'caption' => $caption_table_delete 
          ) 
  ); 
  // возвращаем сначала таблицу с ссылками редактирования($table_edit), 
  // дальше выводим таблицу с ссылками на удаление($table_delete).
  return "$table_edit" . "$table_delete"; 

Вид всей таблицы будет такой:

Задание 3

Задача которую нам предстоит выполнить сейчас это  создание 2х выпадающих списков. Выпадающий список создается при помощи таких тегов как fieldset, legend и специальных классов CSS формирует выпадающий список. Давайте посмотрим сам скрипт.

drupal_add_library('system', 'drupal.collapse');

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

 php
// создаем переменную для выпадающего списка   
// для выведение информации на счет таблицы редактирования нод
$edit_element = array( 
                      // оглавление списка 
                      '#title'          => t('Table for edit node'), 
                      // содержимое fieldset-а 
                      '#children'    => t('This is main text in fieldset! Table contains link for edit node'), 
                      // список у нас складной 
                      '#collapsible' => true,   
                      // и свернутый 
                      '#collapsed'  => true, 
                      // в атрибутах указываем, что надо использовать указанные классы
                      '#attributes'  => array(  
                                              'class' => array('collapsible', 'collapsed')
                                              ), 
                      ); 
// помещаем в $fieldset_edit функцию, которая выведет нам поле
$fieldset_edit = theme('fieldset', array('element' => $edit_element)); 

// здесь все аналогично предыдущему скрипту 
$delete_element = array( 
                      '#title'       => t('Table for delete node'),
                      '#children'    => t('This is main text in fieldset! Table contains link for delete node'),
                      '#collapsible' => true, 
                      '#collapsed'   => true, 
                      '#attributes'  => array( 
                                              'class' => array('collapsible', 'collapsed')
                                              ), 
                      ); 
 $fieldset_delete = theme('fieldset', array('element' => $delete_element));
  // возвращаем наши данные 
  return "$fieldset_edit" . "$fieldset_delete "; 

В браузере мы увидим следующею картину:

Если же мы раскроем списки, то увидим следующее:

<p;">Как видно на иллюстрации, списки мы создали - здесь нет ничего сложного. Приступим к последнему заданию.

Задание 4

Нам нужно поместить вновь созданные таблицы в fieldset-списки. Если вы успели выполнить все предыдущие задания, то осилить 4е задание для Вас не составит особого труда. Давайте сразу же посмотрим код, который стоит поменять.

 php
$edit_element = array( 
                      '#title'         => t('Table for edit node'),
                      // здесь мы добавляем нашу таблицу редактирование нод
                      '#children'    => t('This is main text in fieldset! Table contains link for edit node') . $edit_table, 
                      '#collapsible' => true, 
                      '#collapsed'   => true, 
                      '#attributes'  => array( 
                                              'class' => array('collapsible', 'collapsed')
                                              ), 
                      ); 
$fieldset_edit = theme('fieldset', array('element' => $edit_element));

$delete_element = array( 
                      '#title'           => t('Table for delete node'),
                       // здесь мы добавляем нашу таблицу удаление нод
                      '#children'    => t('This is main text in fieldset! Table contains link for delete node') . $delete_table,  
                      '#collapsible' => true, 
                      '#collapsed'   => true, 
                      '#attributes'  => array( 
                                              'class' => array('collapsible', 'collapsed')
                                              ), 
                      ); 
 $fieldset_delete = theme('fieldset', array('element' => $delete_element));
  // и выводим только 2 fieldset-а 
  return "$fieldset_edit" . "$fieldset_delete";   

Результат можно увидеть на следующем скрине:

Вот и все, все задания сделаны.

Join the conversation
0 Comments