Бесплатные курсы по it-профессиям на FreeTutorials.ru.

х
Наверх

PHP include: как использовать в HTML верстке сайта?

До этого момента, рассматривая HTML и CSS, мы говорили только о статических страницах, то есть таких, которые, как бы пользователь с ними не взаимодействовал, всегда остаются неизменными, а чтобы содержимое или оформление их поменялось, хозяину страницы надо править код вручную.

Динамические страницы и что для них нужно

Помимо статических есть ещё динамические страницы. Таких сейчас в Интернете большинство. Информация в них подгружается из внешних источников, например базы данных или других файлов. Содержимое и форматирование таких страниц может меняться в зависимости от действий пользователя. Для правки динамических сайтов не обязательно вмешиваться в их код – достаточно изменить контент в специально для него предназначенном файле или базе данных, которая, к слову, представляет собой тоже файл, только определённым образом структурированный.

Для создания динамических сайтов только HTML и CSS недостаточно. Тут используются ещё и языки программирования, а также базы данных и языки запросов к ним. Чаще всего современные динамические сайты используют в своей работе HTML, CSS, PHP, JavaScript, SQL. Первые две аббревиатуры вам уже знакомы не понаслышке, SQL применяется для доступа к базам данных, JavaScript — клиентский язык, команды которого обрабатываются браузером и зачастую используются, чтобы показывать вам всякую красоту вроде шторок или плавно открывающихся фотографий, а вот PHP — это серверный язык программирования, который работает, в том числе, с содержимым сайта и делает его динамическим, с ним мы сегодня и соприкоснёмся.

Пример использования команды include

В предыдущей статье я рассказывал о блочной вёрстке сайта и приводил в пример простейшую страницу (документ index.html и привязанный к нему файл style.css).

Сейчас мы разделим документ index.html на несколько файлов, каждый из которых будет содержать свою часть страницы, что поможет ещё сильней разделить код, улучшить структуру шаблона и, по сути, сделать страницу динамической. Для этой цели мы будем использовать язык PHP, а точнее лишь одну его директиву — функцию include(), которая включает один файл в другой.

Внешний вид страницы

1. Смените разрешение созданного в статье о блочной вёрстке файла index с .html на .php, чтобы документ назывался index.php. Тип файла .PHP указывает серверу, что документ был написан или использует вставки на одноимённом языке программирования.

2. В папке со страницей создайте директорию blocks.

3. Всю вспомогательную информацию (верх, низ, навигацию и боковую панель сайта) вынесем в отдельные файлы, которые разместим в папке blocks.

Итак, создайте в каталоге blocks четыре файла: header.php, navigation.php, sidebar.php и footer.php. Заполните файлы кодом.

header.php:

	<div id="header">
	<h2>header (шапка сайта)</h2>
</div>

navigation.php

	<div id="navigation">
	<h2>Блок навигации</h2>
	</div>

sidebar.php

	<div id="sidebar">
	<h2>Левая панель</h2>
	</div>

footer.php

	<div id="clear">
		 
	</div>

	<div id="footer">
	<h2>footer (низ сайта)</h2>
	</div>

4. Проверьте структуру папки шаблона. В корне должны находиться файлы index.php, style.css и директория blocks.

Структура папки шаблона

Структура папки blocks должна быть такой.

Структура папки blocks

5. В файле index.php удалите существующий код и напишите новый:

<!DOCTYPE html>
<html>
<head>
    <title>Блочная вёрстка</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
	<?php include ("blocks/header.php");?>
	<?php include ("blocks/navigation.php");?>
	<?php include ("blocks/sidebar.php");?>
	<div id="content">
	<h2>Основной контент страницы</h2>
	</div>
		 
	<?php include ("blocks/footer.php");?>

</div>
</body>
</html>

В браузере файл index.php выглядит точно так же, как и раньше, но структура шаблона при этом полностью изменилась. О том, что получилось, поговорим потом, а сейчас ответим на вопрос о загадочных командах вида <?php include ("имя_файла");?>.

Структура папки blocks

Как и HTML-код, код PHP тоже имеет своё обозначение начала и конца. Так вот начинать PHP-вставку нужно командой <?php, а заканчивать строкой ?>. Между этими командами пишется основной код. В нашем случае это всего лишь одна команда — include.

Функция include() вставляет в файл код из другого файла, давая возможность хранить разные части страницы в разных документах, тем самым надёжно отделяя их друг от друга.

В результате выполненных действий мы получили динамическую страницу index.php, части которой подгружаются из разных файлов. Благодаря этому можно создавать другие страницы, точно так же подгружая в них вспомогательные элементы из файлов папки blocks.

Такой подход хорош тем, что если вы захотите на сайте в 20-30 страниц изменить, скажем, название пункта меню, то в шаблоне с только что созданной структурой понадобится внести правки только в один файл — blocks/navigation.php, и меню изменится сразу на всех страницах, в которые он включен. Если же сайт был бы статическим, то для смены названия одного пункта меню вам пришлось бы вносить изменения в каждую из 20-30 страниц. Разница очевидна.

Чтобы редактировать HTML online воспользуйтесь визуальным редактором по ссылке.

Полезные ссылки:


Дата размещения/обновления информации: 29.04.2021 г.
Сообщить об ошибке
Смотрите также
Оставить свой комментарий
Комментарии 15
  • Яхья Ахмедов 07 Декабря 2016 в 00:41

    Все сделал в точности, как вы написали. Но при попытке открыть в браузере(Internet Explorer) он предлагает мне загрузить мой же файл(index.php). Скажите пожалуйста, что я делаю не так?

    ответить
  • Булат Ахметшин 07 Декабря 2016 в 11:15

    Попробуйте выложить на хостинг (можно бесплатный https://www.seostop.ru/sozdanie-saita/besplatnyj-hosting.html ), посмотрите там работать будет или нет? Или установите локальный сервер на домашний компьютер, как это сказано тут https://www.seostop.ru/sozdanie-saita/wordpress/ustanovka-na-localhost.html

    ответить
  • Александр 07 Июля 2017 в 12:02

    совсем не получается ((
    сделал все в точности. не могу понять что не так.
    помогите, очень нужно.

    ответить
  • Александр 07 Июля 2017 в 12:43

    к чему относится <div id="container">
    и
    <div id="content">
    ?

    ответить
  • Александр 07 Июля 2017 в 13:31

    Сижу разбираюсь, пытаюсь понять как это работает, а вы комменты удаляете, вместо ответов...
    ладно, ближе к сути:
    этот метод можно проверить только на хостинге? с компа из папок не виден результат?

    ответить
  • Булат Ахметшин 11 Июля 2017 в 18:03

    Александр, тебе сначала нужно научиться с людьми разговаривать, прежде чем просить о помощи.

    ответить
  • Сёмыч 08 Сентября 2017 в 01:12

    для работы .php файлов нужен интерпретатор php, он есть на любом реальном сервере или можно скачать себе виртуальный сервер на компуктер. Гуглим например простой и понятный OpenServer

    ответить
  • Роман 11 Марта 2018 в 20:26

    Сижу читаю комменты.. Вы рофлите?!? Вот что у вас не получилось?
    Значит, качаем хороший редактор вроде PhpStorm, качаем Open Server basic, работаем с Google Chrome и готово. Повнимательнее. Все же не так сложно.

    ответить
  • Мартин 26 Марта 2018 в 23:22

    <div id="clear"> подскажите пожалуйста, этот кусочек кода, для чего? Вроде все ясно и понятно, за что Вам спасибо, а вот эта часть ни как не сображу где находится и для чего

    ответить
  • Булат Ахметшин 27 Марта 2018 в 16:15

    https://www.seostop.ru/sozdanie-saita/html-css/blochnaya-verstka.html посмотрите тут есть пояснение

    ответить
  • Context 20 Апреля 2018 в 00:10

    Прочитал комменты и чуть от смеха не лопнул - зачем заводить HTML сайт без знаний PHP, если есть готовые решения, типа WordPress, Joomla и Blogger? Когда вы узнаете, что такое паттерн, шаблонизатор, как пользоваться БД и что такое таблицы, как их заполнять и после верстать страницы, то у вас пропадет желание создавать сайт, который не имеет своей системы управления контентом.

    ответить
  • Роман Вихрев 08 Ноября 2018 в 20:55

    Все отлично работает.. Респект автору...

    ответить
  • Ник 28 Декабря 2018 в 17:42

    Действительно include работает. Однако все данные он выводит отцентрированными. Как это можно исправить?

    ответить
  • Тимур 23 Апреля 2019 в 02:29

    Отличная статья!

    ответить
  • Ничегонезнайка 15 Ноября 2020 в 05:56

    Ну ок, разкроили мы все это дело. Я создал новую страницу в папке blocks, и хочу чтобы после перехода по этой ссылке у меня она была вместо "Основного контента страницы", логично же, динамика, но при переходе я получаю только текст, а где моя шапка с меню, где футер? Подозреваю, что я что-то упустил.

    ответить