Как сделать динамическую страницу html
Создаем динамический сайт с помощью php
Здравствуйте, уважаемый посетитель!
Сегодня из главной страницы с помощью языка программирования PHP создадим динамическую страницу, которая в дальнейшем будет формироваться на сервере при каждом запросе пользователей.
Таким образом, изменив структуру сайта и наполнив его подобными изменяющимися страницами, мы получим динамический сайт, что в дальнейшем очень значительно упростит его техническую поддержку и развитие по сравнению со статическим вариантом.
Зачем нужен динамический сайт
Также, если требуется дополнительно рассмотреть плюсы и минусы статических и динамических сайтов, можно посоветовать ознакомиться на страницах онлайн справочника «Puzzleweb.ru» с разделом Виды сайтов, где довольно лаконично, но в то же время наглядно даны пояснения по разным вариантам сайтов.
К этому можно лишь добавить, что для получения действительно полноценного интерет-ресурса невозможно пропустить этот шаг и остаться с вариантом статического сайта.
Поэтому более не будем углубляться в теоретические обсуждения необходимости создания динамического сайта, а перейдем к рассмотрению вопроса о том, как мы это будем делать.
Как преобразовать статический сайт в динамический
Как известно, принципиальное отличие динамического от статического сайта в том, в статическом готовые веб-страницы лежат на сервере и ждут своей очереди для отправки в браузер пользователя. При этом, если страницы будут иметь даже незначительные различия, скажем разница лишь в одной фразе или вообще в одном слове, то все равно это будут отдельные страницы.
В динамическом же варианте, формирование страниц происходит на сервере при каждом запросе пользователя в зависимости запрашиваемой информации.
По-простому, это можно сравнить с конструктором, где из ограниченного числа элементов можно составлять большое количество различных фигур. При этом, если внести какое-либо изменение в один из элементов, то оно будет отражаться на всей конструкции, включающей этот элемент.
Исходя из этого и сделаем из нашей созданной главной страницы подобие конструктора, состоящего из определенных элементов (в нашем случае это будут файлы), из которых в последствии будут собираться веб-страницы по запросам пользователей.
Для пояснения действий, которые для этого будем выполнять, воспользуемся HTML-кодом каркаса главной страницы, полученным на одном из этапов создания сайта в статье Создаем веб-страницу и размещаем ее на локальном веб-сервере.
Создаем динамический сайт с помощью php
Здравствуйте, уважаемый посетитель!
Сегодня из главной страницы с помощью языка программирования PHP создадим динамическую страницу, которая в дальнейшем будет формироваться на сервере при каждом запросе пользователей.
Таким образом, изменив структуру сайта и наполнив его подобными изменяющимися страницами, мы получим динамический сайт, что в дальнейшем очень значительно упростит его техническую поддержку и развитие по сравнению со статическим вариантом.
Зачем нужен динамический сайт
Также, если требуется дополнительно рассмотреть плюсы и минусы статических и динамических сайтов, можно посоветовать ознакомиться на страницах онлайн справочника «Puzzleweb.ru» с разделом Виды сайтов, где довольно лаконично, но в то же время наглядно даны пояснения по разным вариантам сайтов.
К этому можно лишь добавить, что для получения действительно полноценного интерет-ресурса невозможно пропустить этот шаг и остаться с вариантом статического сайта.
Поэтому более не будем углубляться в теоретические обсуждения необходимости создания динамического сайта, а перейдем к рассмотрению вопроса о том, как мы это будем делать.
Как преобразовать статический сайт в динамический
Как известно, принципиальное отличие динамического от статического сайта в том, в статическом готовые веб-страницы лежат на сервере и ждут своей очереди для отправки в браузер пользователя. При этом, если страницы будут иметь даже незначительные различия, скажем разница лишь в одной фразе или вообще в одном слове, то все равно это будут отдельные страницы.
В динамическом же варианте, формирование страниц происходит на сервере при каждом запросе пользователя в зависимости запрашиваемой информации.
По-простому, это можно сравнить с конструктором, где из ограниченного числа элементов можно составлять большое количество различных фигур. При этом, если внести какое-либо изменение в один из элементов, то оно будет отражаться на всей конструкции, включающей этот элемент.
Исходя из этого и сделаем из нашей созданной главной страницы подобие конструктора, состоящего из определенных элементов (в нашем случае это будут файлы), из которых в последствии будут собираться веб-страницы по запросам пользователей.
Для пояснения действий, которые для этого будем выполнять, воспользуемся HTML-кодом каркаса главной страницы, полученным на одном из этапов создания сайта в статье Создаем веб-страницу и размещаем ее на локальном веб-сервере.
Какие есть способы динамического создания html-страницы?
вам надо почитать для затравки, например, о CMS. Затем скорее всего о бэкенд части, потому как генерация страниц именно с его помощью и происходит. Никто в светлом уме не верстает 20 разных страничек для однотипных товаров.
Например, Есть у нас интернет магазин смартфонов. Есть модели самсунга, сони, айфона и тд и тп. Верстка у них одинаковая, меняются только данные. Для того чтобы получить страничку с конкретным товаром клиент, то есть юзер, кликает по ссылке с товаром, в этот момент происходит запрос к серверу, в запросе к серверу передается уникальный идентификатор нужной нам странички. На сервере этот запрос обрабатывается, на основании этого уникального идентификатора генерируется запрос к базе данных, который выберет только нужные нам данные (текст, ссылки и прочее) для конкретной страницы. Запрос возвращает бэкенду данные. А бэкенд вставляет их в нужные места на странице. Вуаля. У нас есть одна и та же верстка, но в соответствии с запросом она выдает нам разные данные. Надеюсь понятно объяснил.
Так что без бэкенда в этом деле каши особо не сваришь)
Max Rudik вы, к сожалению, неправильно предполагали. Вообще все эти фреймворки крутятся вокруг методологии MVC и с нее надо начинать изучение подоьных фреймворков. А нужна эта методолгия грубо говоря для упрощения разработки, развбиение проекта на части: Модель(Model), Представление(View), Контроллер(Controller).
Для примера приведу как я загадил проект(не ошибается лишь тот, кто гичегомне делает) и чего не получилось бы, используй я фреймворк. На старте у меня был сайт, с небольшим каталогом мобильных приложений, связанных с музыкой, натянутый на корпоративную цмс, ничего особенного. Потом мне сказали что туда нужно поставить аудио плеер, затем сказали что музыкал в плеере не должна останавливаться при переходах между страницами, потом еще что-то и т.д. и т.п. И вроде бы все эти задачи по отдельности можно решить не используя фреймворк и жить спокойно. Но оглянувшись назад чепез полгода работы над проектом я понял насколько все плачевно. Код, хоть и разделенный по отдельным файлам превратился в кучу спагетти-кода, стостоящего из множества jquery селекторов, безумных условий и всего прочего. Разобраться во всем этом было почти нереально и при первом же редактирлвании кода становилось понятно, что к коду вообще лучше не прикасаться чтобы он не сломался. Сейчас я понимаю, что множество проблем в поддержке можно было бы решить путем разделения котроллера и представления. Ангуляр представляет вам возможность разделения контроллера и представления, связывая их через модель. Делая там образом контроллер независимым от представления, а представление от контроллера. К тому же он накладывает рамки, благодаря которым удается создавать независимые друг от друга компоненты, что впоследствии позволяет безболезненно выдрать один компонент из проекта или так же безболезненно вставить новый.
Реакт же это не полноценный MVC-фреймворк, это слой представления в MVC.
В любом случае, для более менее серьезных проектов, без бэкенд части вам не обойтись.
Преобразуем динамический сайт на основе шаблона главной страницы
Здравствуйте, уважаемый посетитель!
В предыдущих статьях, касающихся создания динамического сайта мы использовали несколько динамических страниц, шаблоны которых размещались в отдельных файлах, а формирование их при запросах пользователей выполнялось с использованием разных элементов (PHP-файлов). Такая структура обуславливалась тем, что на том этапе нами еще не были рассмотрены вопросы взаимодействия с базой данных.
Но, после того, как в разделе Работа с БД MySQL были показаны основные операции, обеспечивающие запись и вывод данных БД, используя этот инструмент, мы можем теперь еще более упростить наш сайт. В данном случае речь идет о формировании всех динамических страниц на основе всего лишь одного шаблона, размещенного в файле «index.ρhp».
Этими преобразованиями мы не только существенно сократим общий объем кода, но и значительно упростим в дальнейшем работу с сайтом.
Суть выполняемых преобразований
Если посмотреть на HTML-код существующих шаблонов динамических страниц, то можно обратить внимание, что после проведенных преобразований в предыдущей статье они теперь стали содержать еще большую часть одинаковых элементов, которые в основном состоят из одних и тех же инструкций по подключению PHP-файлов. И лишь совсем незначительные части кода остались отличными для каждого шаблона, а именно:
Исходя из этого, если мы создадим механизм, который позволит в одной физической странице в зависимости от запроса пользователей вносить соответствующие изменения в перечисленные фрагменты кода, то получим шаблон, с помощью которого можно будет без ограничений генерировать все динамические страницы сайта.
В этом и заключается суть необходимых преобразований, которые мы и будем сегодня выполнять. При этом, в качестве создаваемого шаблона будем использовать главную страницу, которая физически размещается в файле «index.ρhρ».
Дополняем таблицу MySQL дополнительными данными
Для того, чтобы при обработке запросов иметь возможность получать нужные данные, необходимо заблаговременно их ввести в БД MySQL. В нашем случае логично будет это сделать в существующую таблицу «url», так как в ней уже имеется некоторая информация, относящаяся ко всем существующим на данный момент страницам сайта.
Для этого, создадим в этой таблице следующие дополнительные поля:
Ниже показан скриншот структуры таблицы после внесенных дополнений.
Рис.1 Скриншот таблицы «url» после добавления полей
Здесь видно, что при создании полей применен следующий тип:
На рис.2 показан скриншот таблицы после заполнения дополнительных полей.
Рис.2 Скриншот таблицы «url» с дополнительными данными
Преобразуем URL используя GET-параметры
Для того, чтобы все запросы пользователей могли попадать на шаблон, размещенный в файле «index.ρhρ», необходимо сделать некоторые преобразования в адресации сайта.
Ниже показан пример варианта адресной строки с уровнем вложенности равным 3, который можно было бы применить к нашему сайту:
Исходя из этого, преобразуем адреса страниц сайта в URL главной странице «index.ρhρ» с использованием GET-параметров согласно следующей таблицы:
| № пп | Заголовок страницы | Существующий адрес | Адрес с использованием GET-параметров |
| 1 | Главная | index.ρhρ | index.ρhρ |
| 2 | Статистика угонов | article.ρhρ | index.ρhρ?section=article |
| 3 | Способы маркировки | action.ρhρ | index.ρhρ?section=action |
| 4 | Получить скидку | righting.ρhρ | index.ρhρ?section=righting |
| 5 | Контакты | contacts.ρhρ | index.ρhρ?section=contacts |
Рис.3 Таблица соответствия существующих адресов к адресам с использованием GET-параметров
А, теперь заменим значения в поле «file» таблицы MySQL на адреса с GET-параметрами, как показано на следующем скриншоте.
Рис.4 Скриншот таблицы «url» с новыми данными адресов страниц
Таким образом мы подготовили все данные, необходимые для формирования динамических страниц и теперь можем заняться получением их из базы данных.
Составляем скрипт получения данных из БД MySQL
Для данного случая составить PHP-код получения записей из БД MySQL довольно просто используя пример вывода одиночной строки, который ранее рассматривалс в разделе Вывод одиночной строки (использование одномерного массива) в статье, посвященной выводу данных из БД MySQL в PHP.
А, PHP-код, который позволил бы получить в зависимости от текущего URL нужные данные в виде PHP-переменных, мало чем будет отличаться от кода, примененного для проверки вывода одиночной строки в указанной статье.
Таким образом, вариант получения нужных данных можно составить следующим образом.
//Получение данных для динамических страниц
$current_url = substr ($_SERVER[ ‘REQUEST_URI’ ], 1 );
Рис.5 PHP-код получения данных для динамических страниц
В начале создается переменная $current_url (поз.5), которой с помощью суперглобального массива «$_SERVER» и с использованием строковой функции substr присваивается текущий URL-адрес. В данном случае эта строковая функция применена для удаления из полученного адреса ненужного для дальнейшей обработки знака слэш (/).
Примененные здесь преобразования полностью аналогичны тому, как это делалось в предыдущей статье при формировании главного меню в файле «menu.php» (рис.5). И теперь, после получения в этой части сайта значения переменной $current_url, аналогичный фрагмент кода можно будет из файла «menu.php» удалить.
Далее, в позициях 4÷6 присваиваются необходимые значения переменным $table, $column и $value, которые будут использоваться в качестве параметров функций «checkLine()» и «getLine()».
Преобразуем шаблон главной страницы
Для того, чтобы преобразовать существующий шаблон главной страницы в универсальный, способный формировать любые динамические страницы сайта, следует внести полученные на предыдущем этапе данные в определенные фрагменты кода файла «index.php», перечисленные в первом разделе данной статьи.
Ниже показан скриншот файла «index.php» в редакторе Nodepad++ после выполненных преобразований с отмеченными фрагментами изменения шаблона.
Рис.6 Скриншот файла «index.php» после преобразований
Как видно, теперь шаблон главной страницы, практически, полностью стал состоять из подключенных к нему отдельных ресурсов с помощью языковых инструкций PHP «require_once». А, код его вполне компактен и хорошо структурирован.
Но самое главное, что теперь с помощью этого шаблона в зависимости от текущего URL можно формировать без ограничения любые динамические страницы сайта. Для этого достаточно лишь в таблицу «url» добавлять соответствующие данные. Не правда ли, довольно удобно и рационально.
Удаляем все освободившиеся файлы
Как было ранее сказано, проводимые преобразования позволят существенно сократить объем кода сайта. И в этом мы сможем убедиться, удалив из него все файлы, которые больше не будут нужны для формирования страниц.
Так, открыв корневой каталог «www», мы можем смело удалить прежние ненужные шаблоны: «article.php», «action.php», «righting.php» и «contacts.php». В итоге, содержимое папки «www» значительно сократиться и примет вид, изображенный на рис.8.
Рис.7 Содержимое корневого каталога «www»
А, в папке «blocks» можно удалить файлы, которые ранее предназначались для основного содержания страниц, такие как: «block_glavnaya.php», «block_article.php», «block_action.php», «block_righting.php» и «block_contacts.php». После чего эта папка тоже значительно уменьшится в своих размерах, как видно на следующем скриншоте.
Рис.8 Содержимое папки «blocks»
Проверяем результаты преобразования
Ниже, на скриншоте видно, как по-новому стал выглядеть URL-адрес с GET-параметрами одной из страниц.
Рис.9 Скриншот таблицы после преобразований
Ну, вот и все. На этом мы закончили все намеченные преобразования.
Конечно, в реальной жизни, в случае разработки динамического сайта, делается это сразу с максимальной оптимизацией его структуры и кода.
Здесь же я сознательно разбил это на несколько этапов в целях лучшего понимания всех процессов, которые нужно было выполнить. И надеюсь, что такой подход оказался достаточно уместным для понимания принципа построения динамического сайта.
А, в следующей статье мы заменим адресацию страниц с GET-параметрами на человеко-понятные урлы (ЧПУ), что не составит большого труда сделать после всех уже выполненных нами преобразований.
Исходные файлы сайта
Исходные файлы сайта с обновлениями, которые были сделаны в данной статье, можно скачать из прилагаемых дополнительных материалов:
Дополнительные материалы бесплатно предоставляются только зарегистрированным пользователям.
Для скачивания исходных файлов необходимо авторизоваться под своим аккаунтом через соответствующую форму.
Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.
Добавляем новые страницы динамического сайта
Здравствуйте, уважаемый посетитель!
Сегодня после добавления новых страниц мы завершим важный этап в работе над сайтом, а именно, закончим создание основы динамического сайта со своей файловой структурой и изменяемыми динамическими страницами.
Таким образом, для того, чтобы получить полноценный работающий сайт, мы подготовим его к дальнейшей работе по размещению его в интернете, наполнению контентом и необходимым функционалом.
Создаем файлы новых динамических веб-страниц
Как их создать более подробно рассмотрим на примере «article.php» для страницы «О маркировке стекол». Для всех остальных процедура будет аналогична.
В начале откроем «index.php» и сделаем необходимые изменения в его содержимое. Так как мы формируем динамические страницы, то эти изменения будут незначительными. Они коснутся только следующих фрагментов HTML-кода:
Более наглядно эти изменения показаны на приведенном ниже скриншоте.
После этого, указав при сохранении «Сохранить как» соответствующее название, мы получим файл для новой страницы сайта.
То же самое проделаем и с другими файлами. Теперь содержимое папки «www» сайта должно принять следующий вид.
Таким образом мы создали файлы для новых страниц в соответствии со всеми пунктами меню, и теперь перейдем к созданию файлов основного содержания.
Создаем файлы основного содержания
Отличие только состоит в том, что в данном случае, при сохранении мы должны указывать те имена, которые были внесены в HTML-код файлов, созданных в предыдущем разделе.
Выше, на рис.1 для «article.php» показан такой фрагмент, где обозначением «Новое наименование файла основного содержания страницы» выделен соответствующий путь и имя файла. Исходя из этого мы должны создать следующие элементы:
При этом разместить их нужно в папку «blocks» корневого каталога.
После выполнения этих действий содержимое папки «blocks» примет следующий вид.
На этом этап создания элементов основного содержания закончим и перейдем к их наполнению.
Создаем информационное сообщение о не завершенном оформлении новых страниц
После выполнения предыдущих действий мы получили четыре новые веб-страницы. Однако, если мы откроем какую-нибудь из них, то блок ее основного содержания окажется ничем не заполненным. Это потому, что сейчас вновь созданные файлы пустые.
Ниже, на скриншоте такое состояние показано на примере страницы «О маркировке стекол».
Конечно, в дальнейшем, при дополнении сайта контентом эти файлы постепенно будут наполняться нужным содержанием. Но для того, чтобы уже сейчас можно было видеть на каждой странице какой-нибудь текст, то временно в них разместим небольшое информационное сообщение о том, что открытая страница пока находится в оформлении.
Вообще, это обычная практика, когда на созданных, но еще не до конца оформленных страницах размещается соответствующая информация. Ниже приведен HTML-код файла основного содержания для страницы «О маркировке стекол» с тестом о временной ее неготовности.
Здесь, для возможности оформления текста стилями CSS для блока
Теперь, если откроем эту же страницу, то появиться добавленное сообщение.
Ну, а теперь, для того, чтобы придать тексту более приглядный вид добавим в таблицу стилей соответствующий CSS-код, в котором текст отцентруем, сделаем дополнительные отступы, добавим абзацы, несколько увеличим и отформатируем шрифт и изменим цвет.
margin :50px auto 50px auto;
Если обновить браузер, то можно увидеть, что текст приобрел более привлекательный вид.
То же самое проделаем и с оставшимися файлами основного содержания, только в этих случаях будем указывать другие наименования страниц. Таким образом при открытии каждой из них будет отображаться соответствующей ей текст.
Мы довольно подробно рассмотрели внесение текста в содержания страниц для того, чтобы в дальнейшем ни у кого не возникло затруднений при наполнении страниц своим контентом. Думаю, что дальше каждый сможет дополнять этот сайт под себя.
На этом мы завершили этап создания динамического сайта, что позволяет на его основе в дальнейшем сделать, как было сказано в самом начале статьи, полноценный работающий сайт. Для этого мы в ближайших статьях разместим его в сети интернет, а затем будем его дополнять необходимым для этого функционалом.
Что касается наполнения контента, то это должен делать каждый для себя сам, так как контент должен быть уникальным, включая текст и изображения. Дальше мы посмотрим, как можно будет проверять контент на уникальность для того, чтобы быть уверенным в качестве содержания своего сайта.
На этом, на сегодня все. Как обычно, последнюю версию полученных исходных файлов можно скачать по ссылке внизу статьи.
Исходные файлы сайта
Дополнительные материалы бесплатно предоставляются только зарегистрированным пользователям.
Для скачивания исходных файлов необходимо авторизоваться под своим аккаунтом через соответствующую форму.
Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.