Преобразование представлений CodeIgniter в соответствии с макетом

Последний этап в создании нашего учебного сайта после проделанного ранее — преобразование представлений CodeIgniter в соотвествии с макетом, т.е. изменений представлений так, чтобы они генерировали html-код, соответствующий макету.

Приступая к этому этапу буду исходить из предположения, что у вас есть разработанный сайт, и html макет дизайна (вёрстка в слоях и оформление в css). Пойти можно двумя путями:

внедрение php-кода в макет;
изменение представления для соответствия макету;

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

Напомню снова про кодировку. Кодировка содержимого сайта, а значит и макетов UTF-8, если где-то что-то напутается, будут проблемы с корректным отображением.

Чтобы превратить html-макет в наше представление, скопируйте код представления куда-либо (он нам будет нужен), и замените его кодом нашего макета. Теперь заменяйте нужные места кода php-вставками и остальными кусками кода из старого кода представления. Периодически проверяйте работоспособность.

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

В качестве примера выложу то, что вышло у меня. css-файл выкладывать не буду, он тут совершенно ни к чему, в нём нет php-кода и в данной переделке не меняется.

ВНИМАНИЕ!!! Почитайте этот комментарий. Подобно тому. как меняется генерация ссылки на главную страницу, изменяется и привязка css-файла. Теперь ссылку на css-файл прописываем так:
<link type="text/css" rel="stylesheet" media="all" href="<?php echo base_url();?>style.css"/>
Сам style.css должен находится в корневой папке нашего сайта, то есть там же где .htaccess

Теперь код представления main_view.php до изменения:

<html>

<head>

<title>Сайт на CodeIgniter.</title>

</head>

<body>

<?php

foreach ($query->result() as $row)

{

echo '<h2>' . $row->header . '</h2>';

echo '<p>'. $row->content . '...</p>';

echo anchor('page/view/'.$row->id, 'Читать далее');

}

echo '<p>'.anchor('page/add', 'Добавить страницу').'</p>';

</body>

</html>

После совмещения с макетом код main_view.php сильно увеличился в объёме, таков мой макет, у Вас может получится сильно короче. Смотрим, читаем:

<html>

<head>

<title>Сайт на CodeIgniter.</title>

</head>

<body>

<?php

echo '<a href="'. base_url() .'">';

echo '<div id="mission">';

echo '</div>';

echo '</a>';

<?php

echo '<a href="'. base_url() .'">';

echo '<div id="mud">';

echo '</div>';

echo '</a>';

</div>

<li><a href="<?=base_url();?>">Главная</a></li>

</ul>

</div>

<div class="block block-even">Ссылки</div>

<li><a href="http://ubuntucom">Ubuntu</a></li>

<li><a href="http://codeignitercom">CodeIgniter</a></li>

<li><a href="http://drupalcom">Drupal</a></li>

</ul>

</div>

<?php

foreach ($query->result() as $row)

{

echo '<h2>' . $row->header . '</h2>';

echo '<div class="node content">';

echo '<p>'. $row->content . '...</p>';

echo anchor('page/view/'.$row->id, 'читать далее');

echo '</div>';

}

</div>

</div>

<p>Защитим свои права, Товарищи!!</p>

</div>

</body>

</html>

Вот так.. есть мысль выложить сайт на обозрение и покликивание, но опасаюсь ботов.. Мы ведь и так обойдемся правильно? До недавнего времени у меня была отключена капча на регистрацию, так я случайно обнаружил около 200 зарегистрированных пользователей... хоть бы один живой человек:)

Надеюсь всё у Вас получится. Удачи!!

CodeIgniter

Добавить комментарий
1953 просмотров

вернуться назад