Основы 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; ?>
Но, так как мы используем несколько столбцов - блоки разной высоты могут выглядеть не так красиво, как могли бы, будь они одинаковой высоты.