Основы PHP/Bootstrap и шаблоны

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

На PHP шаблоны делаются достаточно просто: мы подставляем в нужные места переменные, которые перед включением файла-шаблона будем определять нужными значениями.

Если шаблонов на сайте несколько - для них лучше создать отдельную папку, но мы пока обойдемся без этого.

Для примера мы создадим простенький модуль со списком автомобилей и открытием подробной информации в модальном окне.

Шаблон

Сперва создадим файл template_car.php - это будет блок, в котором будет отображаться основная информация об одном автомобиле:

<div class="container-fluid">
  <div class="row">
    <img src="<?php echo $image_url; ?>" />
  </div>
  <h3><?php echo $name; ?><small><?php echo $year; ?></small></h3>
  <div class="row">
    <div class="col-xs-4">
      Год выпуска:
    </div>
    <div class="col-xs-8">
      <?php echo $year; ?>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-4">
      Лошадиные силы:
    </div>
    <div class="col-xs-8">
      <?php echo $horses; ?>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-4">
      Цвет:
    </div>
    <div class="col-xs-8">
      <?php echo $color; ?>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-4">
      КПП:
    </div>
    <div class="col-xs-8">
      <?php echo $gearbox; ?>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-4">
      Пробег:
    </div>
    <div class="col-xs-8">
      <?php echo $mileage; ?>
    </div>
  </div>
  <div class="row">
    <div class="btn btn-warning btn-lg btn-block" car-id="<?php echo $id; ?>">
      Узнать больше
    </div>
  </div>
</div>

Использование шаблона

Чтобы использовать шаблон, сначала требуется определить все переменные, затем включить сам файл-шаблон. Создадим файл cars.php и запишем в него следующее:

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<?php
  $id = 1;
  $image_url = "/images/cars/1/1.jpg";
  $name = "Honda Civic";
  $year = 2015;
  $horses = 150;
  $color = red;
  $gearbox = "Автомат";
  $mileage = "70 000 км";
  include("template_car.php");
?>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<?php
  $id = 2;
  $image_url = "/images/cars/2/1.jpg";
  $name = "Bugatti Veyron";
  $year = 2016;
  $horses = 1200;
  $color = black;
  $gearbox = "Автомат 7 ступеней";
  $mileage = "0 км";
  include("template_car.php");
?>
    </div>
  </div>
</div>

Это модуль. Он вызывается один раз, например в файле index.php:

<?php include("cars.php"); ?>

Улучшение шаблона

Не всегда возможно указать все требуемые параметры, поэтому логично некоторые опциональные вещи прятать под проверку переменной, например:

  <?php if (isset($gearbox)): ?>
    <div class="row">
      <div class="col-xs-4">
        КПП:
      </div>
      <div class="col-xs-8">
        <?php echo $gearbox; ?>
      </div>
    </div>
  <?php endif; ?>

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