и будет называться header , и обязательно с расширением php !!!

и название файла будет footer.php

Теперь можно начать собирать наш сайт, как конструктор и понять все таинство создания динамического сайта. Для этого нужно к основному файлу подключить два файла, отвечающие за дизайн и содержащие левый сайдбар. Вот тут нам и нужны элементарные знания PHP, без чего ничего не получиться. И для этого нужно применить уже известную нам функцию require .

— подключение файла header.php

Наполнение сайта

— подключение файла footer.php

И вот наша страница собрана! А данный файл — title.php будет шаблоном,с которого формируются новые страницы.
И сотворим главную, название которой будет index.php . Для этого просто скопируем файл title.php и при сохранении его в той же папке, дадим название index.php. И по такому же принципу создаются все новые страницы. Отличным будет только наполнение, все остальное у них будет общим, и легко будет поддаваться мгновенным изменениям!!!

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

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

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

$title =’Пример динамического сайта на PHP. ‘;


require ‘header.php’;


?>

Наполнение сайта

Здесь можно писать что угодно и вставлять любую информацию,


предназначенную для посетителя.

Хочу обратить Ваше внимание на один очень важный момент. Это касается разработки сайта любой сложности — перед созданием нового проекта, очень внимательно и четко определитесь со всеми будущими функциями проекта. Например, если будет блог, тогда нужен блок коментариев, а для этого нужно ввести переменную, которая будет определять уникальный адрес страницы и т.д. Одним словом — общую нужно продумывать до … , потому что после — будет много недоработок, которые исправлять очень долго и мучительно, и этот совет относиться и к простым сайтам, и к сложным проектам, построенным на супер-новом движке!

Итак, друзья, если Вы дошли до этого урока, то у Вас получилось либо установить локальный сервер, либо купить хостинг, на котором можно работать с PHP. Поздравляю - это большой шаг!

О PHP скажу коротко - этот язык программирования используется по всему миру и на нём можно создавать сайты всех уровней сложности, от сайтов-визиток до крупных порталов. Думаю, уже для многих не секрет, что крупнейшие социальные сети facebook.com (с нуля на php) и vk.com (движок на php) были написаны на языке PHP. Так что делаем выводы и начинаем работу!)

Принцип работы кода

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

Как выглядит PHP код и куда его вставлять?

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

Код PHP (файл index.php )

echo "Привет, мир!";
?>

Демонстрация Скачать исходники
Результатом работы кода будет вывод обычного текста Привет, Мир! . Спросите зачем писать код php, чтобы вывести обычный текст? Оператор echo , о котором поговорим чуть позже, нужен не просто для вывода текста. Чаще echo используют для отображения результата работы какой-то функции, которая производила подсчёт или брала данные из БД (Что такое База данных?). То есть для отображения динамических данных .

Оператор echo в PHP

Как Вы уже поняли, оператор echo нужен для вывода данных. Содержимое (в нашем случае пока только текст) берём в кавычки , а в конце ставим точку с запятой ; это обозначает конец работы оператора.

В программирование при создании первой страницы принято употреблять фразу Hello, World! - то есть Привет, мир! Именно её и используем. В примере не будем использовать html, так как это не обязательно.

Код PHP

echo "Привет, Мир!";
?>
Программа выведет Привет, Мир! .
В самом первом примере мы вставляли в html небольшой код php. Теперь, наоборот, внедрим в php-код элементы html.

Код PHP

echo "";
echo "";
echo "";
echo "";
echo "";
echo "

Привет, Мир!

";
echo "";
?>
В результате получим пустую страничку с заголовком Привет, Мир!

Оператор print в PHP

В отличие от оператора echo, print выводит данные с учётом пробелов и переносов текста. Имеет некоторые ограничения - можно использовать только один аргумент, echo несколько. Отрабатывает дольше, чем echo. В дальнейшем будем прибегать к данному оператору при написании функций.

print "Привет, Мир!
Вторая строка текста"; // результат будет выведен в две строки
?>
Текст будет выведен также, как и написан.

Оператор вывода - синтаксис heredoc PHP

Как Вы уже успели заметить, выводить страницу путём постоянного использования оператора echo - это некрасиво и нечитаемо. Поэтому для вывода больших частей html кода есть другой оператор вывода, использующего синтаксис heredoc. Он тоже выводит данные в таком же виде, в каком они и были (пробелы и переносы).

echo <<

Пример

Пример вывода большого объема текста с использованием html

Второй абзац такого же объёмного текста.

HERE;
?>

Памятка к уроку

Код PHP может:

1. не содержать ни одного html-элемента. Страница и текст всё равно отобразятся. html нужен для красивой разметки содержимого.

2. быть как включен в html-код, так и содержать его внутри своих операторов вывода (echo, print и тд). Главное не забывать конструкцию

3. страницы с php-кодом должны иметь соответствующее расширение: .php .phtml

Со следующих уроков мы разберём основы создания сайтов на php, в которых увидите все плюсы использования данного языка!

Спасибо за внимание!

Нужно предпринять меры предосторожности. Потому что ресурс может получиться крайне динамичным. Того и гляди, укусит!

PHP и HTML

Сейчас эти две дисциплины связаны почти воедино. Их тандем является основой, на которой построена «жизнь » большей части интернета. Конечно, в связке с html применяются и другие серверные языки (Perl, ASP.NET ). Но их распространенность во всемирной паутине по сравнению с PHP , носит чисто эпизодический характер.

Согласно статистике, архитектура большинства ресурсов в интернете построена на основе php и html.

Для многих начинающих взаимосвязь между этими технологиями выглядит непонятной. С одной стороны статический html , который интерпретируется браузерами на стороне клиента. А с другой — программный язык, обрабатывающийся на сервере. Поэтому, перед написанием сайта на php с нуля, приведем простой пример взаимодействия этих двух технологий:

• Создадим новый файл с расширением php ;
• Поместим туда следующий код:

Сколько сейчас времени?

• Сохраним файл на локальном сервере и откроем его в браузере. Затем нажмем на правую клавишу мыши и в контекстном меню выберем пункт «Просмотр html страницы ».

Как видно на скриншоте, строка не отображается в html коде страницы. И в браузере, и в коде видны лишь возвращенные дата и время. А это значит, что скрипт был обработан на серверной стороне. Поэтому создание сайта на php кардинально отличается от написания простых html страниц.

Динамический сайт

Современные сайты бывают двух основных типов:

• Статические – созданные лишь на основе html . Такие сайты не меняют свое содержимое в ответ на действия пользователей. Конечно, статический ресурс может реагировать на события и пользовательские действия. Но реализация динамичности страниц на стороне клиента имеет узкий диапазон применения, ограниченный возможностями Java Script .

Код Java Script выполняется в браузере на стороне клиента.

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

Динамический сайт на php состоит из следующих файлов:

• index.php – является основным файлом проекта;
• Шаблоны – включают в себя структуру той или иной части страницы (шапки, подвала, основной части );
• Файлы CSS – хранят в себе все стилевые описания ресурса.

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

В большинстве CMS источником контента для наполнения страниц, динамически сгенерированных на стороне сервера, служит база данных. Чаще всего применяется СУБД MySQL.

Как пишется сайт на PHP

Чтобы разобраться, как создается сайт на php , рассмотрим практический пример. Конечно, многое в нем упрощено, но весь механизм работы и этапы создания сохранены.

Имеется html сайт со следующей структурой и дизайном:

Его код:

Код файла style.css :

Header { margin-left:auto; margin-right:auto; margin-bottom:10px; width:1000px; height:100px; border:1px solid #000000; background: #009966; background-image: url(img/1.gif); } .pages { margin-left:auto; margin-right:auto; width:1000px; } .content { margin-right:10px; width:806px; height:450px; border:1px solid #000000; background: #999999; float:left; } .sidebar { width:180px; height:450px; border:1px solid #000000; background: #FF9900; float:left; } .foot { clear:both; } .footer { margin-top:10px; margin-left:auto; margin-right:auto; width:1000px; height:50px; border:1px solid #000000; background: #333399; }

Перед тем, как написать сайт на php до конца, весь html код нужно раскинуть по нескольким файлам:

• В header.php войдет весь код с начала и до конца слоя «header »;
• В footer.php – слой «foot » и «footer »;
• В content.php – весь код, оставшийся посредине.

Теперь создаем основную страницу index.php , в которой будут размещены вызовы файлов, содержащие в себе код нужных элементов дизайна. Итого в основном файле оказалось всего 3 строчки скрипта:

А если просмотреть в браузере html код страницы, то вы увидите код первоначального исходника:

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

Путь в обход

Но такая разработка сайта требует затраты сил, наличия специализированного программного обеспечения и знаний. Поэтому хотелось бы найти более легкий вариант. Тогда следует воспользоваться конструктором php сайтов.

Они представляют собой определенный набор шаблонов с расширенным диапазоном настроек. Из-за чего они сильно схожи с обычными CMS . Конечно, высокой уникальности дизайна будущего сайта никто не гарантирует, и в дальнейшем могут возникнуть проблемы с переносом и адаптацией ресурса на другой хостинговой площадке или платформе. Вот несколько проверенных вариантов таких онлайн-сервисов.

2017-01-10

Создаем динамический сайт с помощью php

Здравствуйте уважаемый посетитель!

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

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

• Зачем нужен динамический сайт
• Как преобразовать статический сайт в динамический
• Формируем блоки динамического сайта
• Преобразуем веб-страницу из статической в динамическую
• Исходные файлы сайта

Зачем нужен динамический сайт

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

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

скриншот 12

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

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

Как преобразовать статический сайт в динамический

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

В динамическом же варианте, формирование страниц происходит на сервере при каждом запросе пользователя в зависимости запрашиваемой информации.

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

Исходя из этого и сделаем из нашей созданной главной страницы подобие конструктора, состоящего из определенных элементов (в нашем случае это будут файлы), из которых в последствии будут собираться веб-страницы по запросам пользователей.

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

2. "utf-8" >

   "Description" content ="Краткое описание содержания страницы" >

4. "wrapper" >

   Шапка

   Ротатор

   Основное содержание

   Сайдбар

Как видно из HTML-кода, контейнер , предназначенный для размещения видимой части веб-страницы содержит следующие основные блоки:

• Шапка;
• Ротатор;
• Основное содержимое;
• Сайдбар;
• Подвал.

При этом нужно обратить внимание на то, что четыре из пяти блоков являются общими, и только один блок "Основное содержание" будет отличным для каждый страницы.

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

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

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

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

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

Как вариант, неоднократно уже упомянутый справочник "Puzzleweb.ru", в котором одна из его частей уделена теме PHP. Для более углубленного изучения PHP можно также воспользоваться специализированным справочником, заточенным именно под этот язык, размещенный на сайте "php.ru". По ссылке "https://php.ru/manual/control-structures.intro.html" можно попасть на его страницу "Введение", откуда легко выбрать любой интересующийся раздел справочника.

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

• include;
• require;
• include_once;
• require_once.

Расписывать здесь их особенности нет смысла, так как это подробно пояснено в справочниках, например по ссылке "http://www.puzzleweb.ru/php/26_inc_files.php" можно хорошо с этим разобраться.

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

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

Формируем блоки динамического сайта

Для того, чтобы сформировать блоки, которые затем будут участвовать в сборке веб-старниц, в первую очередь необходимо их создать. Делается это в текстовом редакторе Notepad++ аналогично тому, как мы создавали первый файл сайта "index.html" в статье Создаем веб-страницу и размещаем ее на локальном веб-сервере . Только расширение в этом случае нужно указывать не "html", а "php". При этом нужно обязательно обратить внимание на кодировку, чтобы в дальнейшем избежать появления на страницах разного рода непонятных знаков.

Файлы будем создавать в отдельной, вновь созданной папке "blocks". Для файлов, которые являются общими для всех страниц, присвоим названия с учетом названий соответствующих блоков. А для блока "main" укажем определенное название для каждой страницы сайта.

Таким образом, для главной страницы к блоку "main" будем подключать файл под названием "block_glavnaya". Для остальных: "header", "section", "aside" и "footer".

При создании файлов также можно учесть, что для упрощения этой процедуры возможно воспользоваться их копированием с помощью меню "Файл", указав при сохранении "Сохранить как" новое название файла.

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

Затем скопируем содержание каждого блока и перенесем его в соответствующий файл. На примере "header.php" рассмотрим это более подробно.

1. Открываем в редакторе Notepad++ файл "index.html", выделяем нужную область блока "header" и поочередным нажатием правой и левой кнопки мышки копируем ее в буфер обмена.

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

необходимо для каждой страницы классу class присваивать значение "activ" . То же самое относится и к аналогичному фрагменту в блоке "footer".

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

Как выделить и скопировать в буфер обмена фрагмент блока "header" показано ниже на скриншоте.

3. И в завершении, для того, чтобы сдвинуть содержимое файла в Notepad++ в левую сторону нужно при нажатой кнопке "Shift" несколько раз нажать на "Tab". В итоге получим сформированный файл "header.php" в следующем виде.

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

Рис.6 Файл "section.php"

Рис.7 Файл "block_glavnaya.php"

Рис.8 Файл "aside.php"

Рис.9 Файл "footer.php"

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

Преобразуем веб-страницу из статической в динамическую

Для того, чтобы обеспечить для нашей главной страницы загрузку файлов, которые были созданы в предыдущем разделе, необходимо сначала изменить расширение файла "index" с "html" на "php", а затем в редакторе Notepad++ вновь его открыть и внести следующие изменения:

• Удалить содержимое блоков, которое ранее было перенесено во вновь созданные файлы.
• На освободившееся место записать на языке PHP инструкции "require_once" с указанием пути к соответствующим файлам.
• В тегах меню
• , в которых указывается путь к страницам, для главной страницы заменить расширение с "html" на "php", а для других указать наименования вновь создаваемых страниц.
• Указать в заголовке "Главная".

После выполнения этих операций наша главная страница должна приобрести следующий вид.

Из приведенного скриншота можно заметить, что все инструкции PHP выделены открывающим тегом . Такое обозначение принято для указания когда начинать и заканчивать обработку кода, написанного на языке PHP. Поэтому в дальнейшем все коды PHP будут выделяться этим обозначением.

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

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

Обновим сейчас браузер и попробуем открыть главную страницу.

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

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

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

Исходные файлы сайта

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

Из предыдущих уроков мы узнали, что с помощью метода 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/) и хранить статьи в файле или базе данных.