Сегодня у нас урок для начинающих. Допустим, вы - начинающий программист, или верстальщик, или вообще пытались мимо проходить, но жизнь заставила соединить верстку (она же html-разметка) и php-код. Как это сделать с минимальными усилиями?
Итак, допустим у вас есть верстка для списка новостей:
<div>
<h1>Это заголовок списка новостей</h1>
<div class="some-class">
<h2>Заголовок новости 1</h2>
<p>Небольшой блок текста для ознакомления</p>
<a href="/detail.php?id=1">Читать текст целиком</a>
<span class="author">Автор новости: И. Иванов</span>
</div>
<div class="some-class">
<h2>Заголовок новости 2</h2>
<p>Небольшой блок текста для ознакомления</p>
<a href="/detail.php?id=2">Читать текст целиком</a>
<span class="author">Автор новости: И. Иванов</span>
</div>
<div class="some-class">
<h2>Заголовок новости 3</h2>
<p>Небольшой блок текста для ознакомления</p>
<a href="/detail.php?id=3">Читать текст целиком</a>
<span class="author">Автор новости: И. Иванов</span>
</div>
</div>
И есть массив новостей $newsArray, полученный из БД/API/откуда-то ещё. Мы не будем рассматривать, как вы получили этот массив, будем считать, что он у вас есть.
Для лучшего понимания, что и как нужно сделать, разобьем нашу задачу на несколько шагов.
- Шаг первый - обойдем массив (проитерируемся по массиву) и выведем некий блок-заглушку на каждой итерации. Перейти
- Шаг второй - заменим блок-заглушку на статические данные из разметки выше. Перейти
- Шаг третий - заменим статические данные на реальные данные из массива. Перейти
Итак, поехали - обходим массив поэлементно.
Первое правило - в большинстве случаев любой массив можно обойти с помощью foreach.
Да, в php есть цикл for и другие варианты обхода массива, но для простого обхода любых массивов используйте foreach.
На каждой итерации выведите что вам угодно, пусть даже пресловутый Hello, world!. Главное на этом шаге - убедиться, что массив обойден и выводимая строка повторена столько раз, сколько элементов в массиве $newsArray.
На этом шаге получаем такой код:
foreach ($newsArray as $news) {
echo 'Hello, world! <br />';
}
Заглядываем в полученный html, считаем число "хеллоуворлдов" и убеждаемся, что все в порядке.
Затем переходим к шагу два - выводим заглушку-разметку. В качестве разметки возьмем разметку одного блока <div class="some-class">, и заменим ею вывод "Hello world".
Получим такой код:
foreach ($newsArray as $news) {?>
<div class="some-class">
<h2>Заголовок новости 1</h2>
<p>Небольшой блок текста для ознакомления</p>
<a href="/detail.php?id=1">Читать текст целиком</a>
<span class="author">Автор новости: И. Иванов</span>
</div>
<?php
}
Правило номер два - для вывода разметки закрывайте php-тег и выводите разметку как есть.
Другой вариант вывода может выглядеть так:
foreach ($newsArray as $news) {
echo '<div class="some-class">';
echo ' <h2>Заголовок новости 1</h2>';
echo ' <p>Небольшой блок текста для ознакомления</p>';
echo ' <a href="/detail.php?id=1">Читать текст целиком</a>';
echo ' <span class="author">Автор новости: И. Иванов</span>';
echo '</div>';
}
Нельзя сказать, что он неправилен, ведь он также работает. Но, во-первых - этот код читается хуже, чем первый вариант. А во-вторых - когда мы начнем выводить вместо шаблонного текста какие-то данные из массива, мы замучаемся с конкатенацией строк и слежением за кавычками. Поэтому: выключаем режим php и выводим html как есть, производительность от этого не пострадает.
Также на этом шаге мы сделаем следующее - выведем статические данные с помощью конструкции echo. Обычно вывод можно записать так <?php echo 'String here'; ?>, но мы воспользуемся сокращенной записью <?='String here'?>, это здорово сократит и сам код и время его написания.
В итоге на этом шаге получаем такой код:
foreach ($newsArray as $news) {?>
<div class="some-class">
<h2><?='Заголовок новости 1'?></h2>
<p><?='Небольшой блок текста для ознакомления'?></p>
<a href="<?='/detail.php?id=1'?>">Читать текст целиком</a>
<span class="author">Автор новости: <?='И. Иванов'?></span>
</div>
<?php
}
Снова смотрим на результат работы скрипта и переходим к последнему шагу.
Осталась самая малость - заменить статические данные на реальные данные из массива $newsArray. Здесь все совсем просто - в каждое <?= просто подставляем обращение к нужному ключу текущего массива $news:
foreach ($newsArray as $news) {?>
<div class="some-class">
<h2><?=$news['title']?></h2>
<p><?=$news['preview']?></p>
<a href="<?=$news['detail_url']?>">Читать текст целиком</a>
<span class="author">Автор новости: <?=$news['author']?></span>
</div>
<?php
}
Обновляем страницу и смотрим, что получилось. Если все в порядке, то работа успешно закончена - вы соединили верстку и html-код. Следующий шаг в развитии - использование шаблонизаторов. Но это тема для другого поста.
Финальный код в виде гиста, там же пример с обсуждаемыми выше вариантами вывода данных: с закрытием php-тега и без этого.
Комментариев нет:
Отправить комментарий