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

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

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

Для создания динамических сайтов только 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 . Заполните файлы кодом.

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

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

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

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

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

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

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

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

Из предыдущих уроков мы узнали, что с помощью метода GET можно передавать некоторые параметры прямо в URL. Однако ничто не мешает нам делать это без форм, просто перечисляя их в URL.

Мы можем передавать параметры через URL. И мы можем получить эти параметры прямо в скрипте. Так что нам мешает показывать пользователю разные страницы в зависимости от параметров в URL?

Создание динамической страницы

Чтобы показывать пользователю разные страницы, нужно подготовить контент. Пусть он лежит в многомерном массиве:

"Создание динамических страниц", "content" => "Текст статьи про динамические страницы." ], [ "title" => "Как поймать котёнка", "content" => "Текст статьи про котят." ] ]; ?>

Динамический параметр в URL будет называться id, а ловить его будем в $_GET["id"] . Мы могли бы добавить поле id каждому элементу массива, но тогда пришлось бы перебирать все элементы и искать подмассив с нужным id. Поэтому гораздо проще в качестве id использовать ключи главного массива.

Проще говоря, мы берём id и пытаемся найти статью с таким ключом в массиве $articles. Выглядит это следующим образом:

Осталось только набросать вывод меню и проверку id на корректность. Получается настоящий php-роутер!

"Главная страница", "content" => "Текст статьи про наш сайт" ], [ "title" => "Создание динамических страниц", "content" => "Текст статьи про динамические страницы." ], [ "title" => "Как поймать котёнка", "content" => "Текст статьи про котят." ] ]; # Если id передан - записываем в $article статью или null, если статьи с таким id нет if(isset($_GET["id"])) $current_article = $articles[$_GET["id"]] ?? null; # Если id не передан - значит это главная страница, можем показать страницу с id = 0 else $current_article = $articles; ?> $article): ?> ">

Ошибка 404: страница не найдена

Теперь вы можете создавать динамические сайты, на которых количество страниц зависит от количества элементов массива, а не PHP файлов. :) Если на сайте должны быть разные типы страниц, например статья и товар, можно вторым параметром передавать тип страницы: site.ru?type=article&id=5 .

Конечно, эта система не идеальна. Через некоторое время вы узнаете, как сделать нормальное ЧПУ (более удобные URL, например site.ru/articles/5/) и хранить статьи в файле или базе данных.

Для решения третьей проблемы хорошо подойдет программа Denwer, которую можно бесплатно установить на Ваш компьютер. Если Вы не в курсе, что это за программа, то советую ознакомиться: как установить Denwer , в этой статье пошагово (для новичков) объяснено как его установить и как пользоваться.

Конечно, есть и другие средства, которые позволяют интерпретировать PHP. Например, Apatch, но он довольно сложен в настройках, а если вы новичок, то начинать с него не советую.

Для того, чтобы приступать к разработке сайта на PHP, Вам нужны начальные знания в HTML. Я уже писал о том, как создать простую страницу HTML . Там описаны все html-теги, без которых создать сайт невозможно. Поэтому настоятельно рекомендую начать изучать сайтостроение с той статьи.

Чем отличается сайт на PHP от голого сайта на HTML?

Сайт на PHP почти ничем не отличается от голого сайта на HTML. Единственное отличие - более гибкая настройка и управление сайта, а также есть возможность автоматизировать множество функций. Приведу простой пример.

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

Структура типичного сайта на PHP:

Теперь приведу код шаблона сайта на PHP. Обратите внимание на то, что страницы сделанные с использованием php рекомендуется делать с расширением .php , хотя это не является обязательным условием. При определенных настройках хостинга файлы с обычным расширением .html также могут обрабатывать PHP-код.

Код файла index.php :

... $_SERVER["DOCUMENT_ROOT"]."/head.php" ; ?> ... ...

$_SERVER["DOCUMENT_ROOT"]."/top.php" ; ?>

...

$_SERVER["DOCUMENT_ROOT"]."/sidebar1.php" ; ?>

...

... Основная часть сайта...

...

$_SERVER["DOCUMENT_ROOT"]."/sidebar2.php" ; ?>

...

$_SERVER["DOCUMENT_ROOT"]."/footer.php" ; ?>

...

Теперь отдельно рассмотрим каждый из подключаемых элементов:

• head.php
• top.php
• sidebar1.php
• sidebar2.php
• footer.php

Обратите внимание, что подключается они через специальную команду PHP:

require_once <полный путь/имя файла>

Каждый файл соответственно отвечает за отдельную часть сайта. Я постарался назвать их максимально информативно и понятно. Сайт может состоять из большего множество таких подключаемых файлов. Рассмотрим по порядку каждый элемент сверху вниз.

Последнее обновление: 1.11.2015

Сейчас мы создадим небольшой сайтик, который призван дать начальное понимание работы с PHP.

Для создания программ на PHP нам потребуется текстовый редактор. Наиболее популярным на сегодняшний день является программа Notepad++

Перейдем к ранее созданному каталогу C:\localhost , который будет хранить все документы сайта. Создадим текстовый файл и назовем его index.html . Откроем его в текстовом редакторе и добавим в него следующий код:

Введи свои данные:

Введите имя:

Введите фамилию:

Код html содержит форму с двумя текстовыми полями. При нажатии на кнопку данные этой формы отсылаются скрипту display.php , так как он указан в атрибуте action .

Теперь создадим этот скрипт, который будет обрабатывать данные. Добавим в папку C:\localhost новый текстовый файл. Переименуем его в display.php. По умолчанию файлы программ на php имеют расширение .php . Итак, добавим в файл display.php следующий код:

".$name . " " . $surname . ""; ?>

Здесь уже в разметке html идут вкрапления кода PHP. Для добавления выражений PHP на страницу используются теги , между которыми идут инструкции на языке PHP. В коде php мы получаем данные формы и выводим их на страницу.

Каждое отдельное выражение PHP должно завершаться точкой с запятой. В данном случае у нас три выражения. Два из них получают переданные данные формы, например, $name = $_POST["firstname"]; .

$name - это переменная, которая будет хранить некоторое значение. Все переменные в PHP предваряются знаком $. И так как форма на странице index.html использует для отправки метод POST, то с помощью выражения $_POST["firstname"] мы можем получить значение, которое было введено в текстовое поле с атрибутом name="firstname" . И это значение попадает в переменную $name.

С помощью оператора echo можно вывести на страницу любое значение или текст, которые идут после оператора. В данном случае (echo "Ваше имя: ".$name . " " . $surname . "") с помощью знака точки текст в кавычках соединяется со значениями переменных $name и $surname и выводится на страницу.

Теперь обратимся к форме ввода, перейдя по адресу http://localhost:8080 :

Введем какие-нибудь данные и нажмем на кнопку отправить:

Итак, у нас сработал скрипт display.php , который получил и вывел отправленные данные на страницу.

На прошлом уроке мы разобрались из каких блоков будет состоять шаблон trip , поэтому можно приступать к работе. Для начала создадим две папки:

images - эта папка будет содержать любые графические файлы, используемые для оформления шаблона. Т.к. у нас нет еще никаких дизайнерских наработок, то киньте в эту папку один любой графический файл, иначе Joomla не установит шаблон и будет выдавать ошибку в том случае если папка будет пустой.

ВНИМАНИЕ: В папке images шаблона не размещается графика контента!

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

Далее можно приступать к созданию самого главного файла index.php , который будет определять визуальное расположение элементов сайта и сообщать CMS Joomla в какой блок поместить различные компоненты и модули. Файл является комбинацией PHP и HTML.

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

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

Позиционирование элементов (блоков) страницы производится при помощи кода HTML, конкретно мы будем использовать теги DIV. Но так, как сайт наш будет работать на движке Joomla, т.е. он будет динамическим, то придется использовать еще и язык PHP. С его помощью мы определим в каких блоках будут находится позиции для вывода модулей, и как эти позиции будут называться, будут ли сворачиваться блоки или нет. Подключим таблицы стилей из внешних файлов, язык контента, установим, как будет меняться размер сайта и пр.

index.php

Заголовок файла

Заголовок файла состоит из нескольких частей. Первая часть кода PHP заголовка предназначена для того, чтобы убедиться, что к файлу не обращаются напрямую, из соображений безопасности.

< ?php
defined ("_JEXEC" ) or die ;
JHtml::_("behavior.framework" , true ) ;
$app = JFactory::getApplication() ;
?>
< ?php echo "< ?" ; ?> xml version= "1.0" encoding= "< ?php echo $this - > _charset ?> " ?>

DOCTYPE – это очень важный параметр, на основании которого браузер решает, как ему отображать эту страницу и как интерпретировать CSS.

< ! DOCTYPE html PUBLIC "- / / W3C/ / DTD XHTML 1.0 Strict/ / EN" "http:/ / www.w3.org/ TR/ xhtml1/ DTD/ xhtml1- strict.dtd" >

Следующий фрагмент извлекает установленный язык из глобальной конфигурации.

< html xmlns= "http:/ / www.w3.org/ 1999/ xhtml" xml:lang= "< ?php echo $this - > language; ?> " lang= "< ?php echo $this - > language; ?> " dir = "< ?php echo $this - > direction; ?> " >

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

< head>
< jdoc:include type= "head" / >

Следующие строки в заголовке содержат ссылки на основные CSS стили Joomla.

< link rel= "stylesheet" href= "< ?php echo $this - > baseurl ?> / templates/ system / css/ system .css" type= "text/ css" / >
< link rel= "stylesheet" href= "< ?php echo $this - > baseurl ?> / templates/ system / css/ general.css" type= "text/ css" / >

Чтобы задействовать стили оформления шаблона, делаем ссылку на файл, содержащий каскадные таблицы стилей template.css, который лежит в папке CSS . Не важно, что этот файл пока пустой, главное его подключить, оформлением займемся потом, когда инсталлируем шаблон на Joomla. Так будет проще наблюдать за результатом.

< link rel= "stylesheet" href= "< ?php echo $this - > baseurl ?> / templates/ < ?php echo $this - > template ?> / css/ template.css" type= "text/ css" / >

Следующий фрагмент кода позволяет нам сворачивать левую или правую колонки, если в позициях «left» и « right» не расположено ни одного модуля. В случае если свернуты обе колонки, то контент занимает 100% ширины страницы. Если включена только одна колонка, то контент занимает 80%. При двух включенных колонках на контент приходится 60% ширины страницы.

< ?php
if ($this - > countModules("left and right" ) = = 0) $contentwidth = "100" ;
if ($this - > countModules("left or right" ) = = 1) $contentwidth = "80" ;
if ($this - > countModules("left and right" ) = = 1) $contentwidth = "60" ;
?>

Заголовок закрывается

< / head>

< body>

Блок «page» содержит оформление только страницы сайта, именно она и будет шириной 950рх.

< div id= "page" >

Блок "top" находится в самом верху страницы и содержит в себе два блока "logo " и "user1".

< div id= "top" >

В боке «logo» мы разместим графический файл логотипа, это будет прописано в таблицах стилей. А вот автоматический вывод названия сайта прописываем в файле index.php, причем название помещаем в тег H1, что очень важно для поисковой оптимизации.

< div id= "logo" >
< h1> < ?php echo $app - > getCfg("sitename" ) ; ?> < / h1>
< / div>

Определим позицию «user1» в одноименном блоке для вывода модуля поиска по сайту.

< div id= "user1" >
< jdoc:include type= "modules" name= "user1" style= "xhtml" / >
< / div>
< / div> < ! - - конец блока top - - >

Вывод модуля горизонтального меню в блоке «user2» в позиции «user2» . Блок будет сворачиваться, если в этой позиции не будет модуля.

< ?php if ($this - > countModules("user2" ) ) : ?>
< div id= "user2 " >
< jdoc:include type= "modules" name= "user2" style= "xhtml" / >
< / div>
< ?php endif ; ?>

Дальше идет блок шапки сайта «header» . В нем мы определим позицию «header» для вывода модулей. Блок будет сворачиваться, если в этой позиции не будет модуля. Я намеренно расширила возможности этого блока, чтобы иметь возможность разместить в нем не только картинку шапки, но и ротаторы изображений.

< ?php if ($this - > countModules("header " ) ) : ?>
< div id= "header " >
< jdoc:include type= "modules" name= "header " style= "xhtml" / >
< / div>
< ?php endif ; ?>

В блоке «user3» определим позицию «user3» для вывода модулей.

Блок будет сворачиваться, если в этой позиции «user3» не будет выводится модуль.

< ?php if ($this - > countModules("user3" ) ) : ?>
< div id= "user3" >
< jdoc:include type= "modules" name= "user3" style= "xhtml" / >
< / div>
< ?php endif ; ?>

Открывается блок левой колонки, которая будет сворачиваться, если в позиции «left» не будет ни одного модуля.

< ?php if ($this - > countModules("left" ) ) : ?>
< div id= "left" >
< jdoc:include type= "modules" name= "left" style= "xhtml" / >
< / div>
< ?php endif ; ?>

Открывается самый важный блок контента, который может занимать 100% ширины страницы, 80% и 60%, в зависимости от количества включенных колонок.

< div id= "content< ?php echo $contentwidth ; ?> " >

Вывод сообщений в компонентах

< jdoc:include type= "message" / >

Вывод содержимого контента.

< jdoc:include type= "component" style= "xhtml" / >
< / div> < ! - - конец блока контента- - >

Открывается блок правой колонки, которая будет сворачиваться, если в позиции «rigth» не будет ни одного модуля.

< ?php if ($this - > countModules("right" ) ) : ?>
< div id= "rigth" >
< jdoc:include type= "modules" name= "right" style= "xhtml" / >
< / div>
< ?php endif ; ?>

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

< ?php if ($this - > countModules("footer" ) ) : ?>
< div id= "footer" >
< jdoc:include type= "modules" name= "footer" style= "xhtml" / >
< / div>
< ?php endif ; ?>

Закрываются блок страницы сайта «page», body и весь код.

< / div> < ! - - конец блока page- - >
< / body> < ! - - конец блока body - - >
< / html> < ! - - конец кода- - >

Мы создали полноценный файл index.php . Теперь вы знаете, при помощи каких команд, и в какой последовательности выводятся блоки шаблона.

ВНИМАНИЕ: Для того, чтобы код шаблона читался из админпанели joomla, то файл index.php необходимо открыть в редакторе AkelPad и сохранить в кодировке UTF-8, при этом снять галочку BOM. Если вы использовали для работы с файлом программу Macromedia Dreamweaver , то необходимо в вернем меню выбрать пункт "Изменить" > "Свойства страницы" и выбрать кодировку документа Юникод (utf-8), при этом снять галочку "включить сигнатуры юникода (ВОМ)". Однако настоятельно не советую вам редактировать код из админки Joomla, если, что-то накосячите - обратной дороги нет, в отличии от программы Macromedia Dreamweaver , где всегда можно отменить сделанные изменения.

Само оформление блоков будет описано в template.css. Но настраивать таблицы стилей мы будем после инсталляции шаблона на Joomla 3 (joomla 2.5), а для этого необходимо создать