среда, 17 февраля 2021 г.

Интеграция php-кода и html-верстки

Сегодня у нас урок для начинающих. Допустим, вы - начинающий программист, или верстальщик, или вообще пытались мимо проходить, но жизнь заставила соединить верстку (она же 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-тега и без этого.

Комментариев нет:

Отправить комментарий