×

Дополнительные материалы бесплатно предоставляются только зарегистрированным пользователям.

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

Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.

  • Рубрики
  • Слайдер
  • Сайдбар
  • Подписка
  • Вниз
  • Вверх
×
  • Как сделать сайт с нуля своими руками (вводная часть)

    1. Причины создания пошаговой инструкции по разработке самописного сайта
    2. Тема создаваемого сайта
    3. В чем будет заключаться монетизация
    4. Функционал
    5. Этапы создания
    6. Текущее состояние создаваемого сайта

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

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

    Причем чтобы такой интернет-ресурс был создан не на каком-нибудь стандартном шаблоне бесплатной СMS (Content management system - система управления контентом) типа WordPress, Drupal, Joomla и т.п., а заточенный под себя, с возможностью обеспечить ему должную безопасность и реализовать все свои индивидуальные потребности.

    Часто такие сайты, созданные под конкретные задачи на основе языка разметки веб-страниц HTML, стилей CSS и других инструментов веб-программирования (PHP, JavaScript и т.п.), называют самописными.

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

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

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

Самописный сайт своими руками!

Текущее состояние создаваемого сайта

Здесь можно посмотреть текущее состояние тестового самописного сайта, который создается в рамках цикла статей Сделай сайт с нуля своими руками.

Где в дополнительных материалах можно бесплатно скачать исходные файлы сайта с таблицами MySQL.

Вы здесь: Главная → Сборник статей → URL для людей → Формируем из входящих ЧПУ динамические страницы


Автор: / Дата:

Формируем из входящих ЧПУ динамические страницы

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

В предыдущей статье из входящих человеко-понятных урлов (ЧПУ) мы получили обычные динамические адреса. Сегодня же, на основе полученных GET-параметров, с использованием имеющихся в БД MySQL данных, будем формировать динамические страницы.

По существу, это рассмотрение является продолжением предыдущей статьи по вопросу обработки входящих ЧПУ.

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

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

Содержание


  • Помещаем полученные GET-параметры в одномерный числовой массив
  • Получаем конечный элемент входящего ЧПУ в цикле обработки GET-параметров
  • Формируем динамические страницы из текущего URL
  • Дополняем цепочку навигации 'Хлебные крошки'
  • Исходные файлы сайта

Помещаем полученные GET-параметры в одномерный числовой массив


В одном из разделов предыдущей статьи мы проверяли наличие полученных значений GET-параметров в ассоциативном массиве $_GET.

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

В начале с помощью конструктора array() создадим в шаблоне главной страницы (файл "index.php") одномерный числовой массив и разместим в нем в качестве элементов значения GET-параметров, извлеченные из ассоциативного массива $_GET. Для таких преобразований потребуется всего лишь одна строка PHP-кода.

  1. <?php

  2. //Создание одномерного числового массива GET-параметров

  3. $get_array = array ($_GET['section'], $_GET['rubric'], $_GET['page']);

  4. print_r($get_array);

  5. ?>

Рис.1 Создание одномерного числового массива GET-параметров в файле "index.php"

Как видно, здесь в строке 3 при создании массива $get_array в списке значений конструкции array() указаны три элемента ассоциативного массива $_GET с идентификаторами, с соответствующими наименованиями GET-параметров - 'section', 'rubric' и 'page'. Причем по умолчанию первый элемент массива будет иметь индекс 0, а следующие - 1 и 2.

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

Если теперь аналогично тому, как мы это делали в предыдущей статье, открыть страницу "Статистика угонов", то в верхней ее части можно будет увидеть содержимое вновь созданного массива $get_array. Где будут отображены ключи и значения его элементов в виде: [0] => statyi, [1] => ugon-avtomobiley и [2] => statistika-ugonov-2016.

Для увеличения / уменьшения размера изображения кликните по картинке
Формируем из входящих ЧПУ динамические страницы, картинка 1

Рис.2 Вывод созданного массива с GET-параметрами

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

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

Получаем конечный элемент входящего ЧПУ в цикле обработки GET-параметров


Для того, чтобы получить конечный элемент входящего ЧПУ, что соответствует значению последнего элемента числового массива $get_array, воспользуемся конструкцией цикла for, как показано на рис.3 (добавленные строки выделены более светлым фоном).

  1. <?php

  2. //Создание одномерного числового массива GET-параметров

  3. $get_array = array ($_GET['section'], $_GET['rubric'], $_GET['page']);

  4. //print_r($get_array);

  5. //----Получение текущего URL страницы в цикле обработки GET-параметров-------------

  6. for ($i = 0; $i < count($get_array); $i++) {

  7. $current_url = $get_array[$i];

  8. echo nl2br($i."-".$current_url."\n");

  9. }

  10. ?>

Рис.3 Получение текущего URL страницы в цикле обработки GET-параметров

В этом фрагменте кода в цикле for (поз.6÷9) в зависимости от индекса, переменной $current_url присваиваются значения выбранных элементов (поз.7).

При этом, условием повторения цикла будет являться значение индекса от 0 и до величины, соответствующей размеру массива $get_array, полученного функцией count(). В нашем случае, при трех элементах массива, индекс может принимать значения от 0 до 2.

Для того, чтобы убедиться в корректном выполнении цикла, в поз.8 временно добавлена языковая конструкция echo с функцией обработки строк nl2br. С помощью чего, при каждой итерации цикла на экране можно будет увидеть полученные значения переменной $current_url.

Если теперь обновить открытую ранее страницу "Статистика угонов", то можно увидеть результат перебора всех значений GET-параметров, содержащихся в массиве $get_array.

Для увеличения / уменьшения размера изображения кликните по картинке
Формируем из входящих ЧПУ динамические страницы, картинка 2

Рис.4 Получение текущего URL страницы в цикле обработки GET-параметров

Как видно, конечный элемент входящего URL со значением "statistika-ugonov-2016" находится в элементе массива $get_array с индексом 2. Что соответствует для этого случая GET-параметру "page".

Формируем динамические страницы из текущего URL


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

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

  1. <?php

  2. //Создание одномерного числового массива GET-параметров

  3. $get_array = array ($_GET['section'], $_GET['rubric'], $_GET['page']);

  4. //print_r($get_array);

  5. //----Получение данных для формирования динамических страниц----

  6. for ($i = 0; $i < count($get_array); $i++) {

  7. $current_url = $get_array[$i];

  8. // echo nl2br($i."-".$current_url."\n");

  9. $table = 'url';

  10. $column = 'page';

  11. $value = $current_url;

  12. $data_bd = checkLine($table, $column, $value);

  13. if ($data_bd == true) {

  14. $data_bd = getLine($table, $column, $value);

  15. $title_add = $data_bd['title'];

  16. $titlepage_add = $data_bd['title-page'];

  17. $description_add = $data_bd['description'];

  18. $content_add = $data_bd['content'];

  19. break;

  20. }

  21. }

  22. ?>

Рис.5 Получение данных для формирования динамических страниц в цикле обработки GET-параметров

Назначение данного скрипта заключается в том, что при обработке запроса в цикле происходит проверка всех значений параметров, полученных из входящего ЧПУ. И в случае обнаружения в поле "page" таблице MySQL "url" значения, совпадающего с конечным элементом URL, произойдет извлечения всех необходимых данных из соответствующей записи (поз.14÷18) с последующим прекращением цикла. Где в строке 19 для прерывания цикла применен оператор break.

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

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

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

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

Для увеличения / уменьшения размера изображения кликните по картинке
Формируем из входящих ЧПУ динамические страницы, картинка 3

Рис.6 Проверка работы сайта с ЧПУ

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

На этом, основные преобразования мы выполнили. Осталось только сделать некоторые дополнения в части навигации "Хлебные крошки".

Дополняем цепочку навигации 'Хлебные крошки'


Для отображения пути к адресу страницы воспользуемся русскоязычными словообразованиями, которые ранее были занесены в поля "section-rus", "rubric-rus" и "page-rus" таблицы "url". На рис.7 показана таблица с этими данными, где красным цветом отмечены соответствующие поля.

id
(№
пп)
Заголовок страницы (title) section section-rus rubric rubric-rus page page-rus
1 Главная Главная
2 Статистика угонов statyi Статьи ugon-avtomobiley Угон автомобилей statistika-ugonov Статистика угонов за 2016 год
3 Способы маркировки sposobi-markirovki Способы маркировки
4 Получить скидку poluchity-skidku Получить скидку
5 Контакты kontakti Контакты

Рис.7 Таблица соответствия полей с русскоязычными словообразованиями

Исходя из этого, добавим в ранее созданный цикл код по извлечению этих данных из БД MySQL и на основе полученных значений подготовим отдельные переменные для вывода русскоязычных словообразований в навигацию "Хлебные крошки".

Вариант кода с такими дополнениям показан на рис.8.

  1. <?php

  2. //Создание одномерного числового массива GET-параметров

  3. $get_array = array ($_GET['section'], $_GET['rubric'], $_GET['page']);

  4. //print_r($get_array);

  5. //----Получение данных для формирования динамических страниц----

  6. for ($i = 0; $i < count($get_array); $i++) {

  7. $current_url = $get_array[$i];

  8. // echo nl2br($i."-".$current_url."\n");

  9. $table = 'url';

  10. $column = 'page';

  11. $value = $current_url;

  12. $data_bd = checkLine($table, $column, $value);

  13. if ($data_bd == true) {

  14. $data_bd = getLine($table, $column, $value);

  15. $title_add = $data_bd['title'];

  16. $titlepage_add = $data_bd['title-page'];

  17. $description_add = $data_bd['description'];

  18. $content_add = $data_bd['content'];

  19. $section_rus = $data_bd['section-rus'];

  20. $rubric_rus = $data_bd['rubric-rus'];

  21. $page_rus = $data_bd['page-rus'];

  22. if (!empty($section_rus)) $section_breadcrumbs = '&nbsp;&rarr;&nbsp;<a href="'.$section.'.html">'.$section_rus.'.</a>';

  23. else

  24. $section_breadcrumbs = "";

  25. if (!empty($rubric_rus)) $rubric_breadcrumbs = '&nbsp;&rarr;&nbsp;<a href="'.$rubric.'.html">'.$rubric_rus.'.</a>';

  26. else

  27. $rubric_breadcrumbs = "";

  28. $page_breadcrumbs = '&nbsp;&rarr;&nbsp;'.$page_rus;

  29. break;

  30. }

  31. }

  32. ?>

Рис.8 Получение данных для формирования навигации "Хлебные крошки"

Как видно, здесь в строках 19÷21 извлекаются русскоязычные словообразования соответствующих параметров.

Далее, в случае непустых значений $section_rus, $rubric_rus формируются переменные $section_breadcrumbs и $rubric_breadcrumbs, значения которых будут принимать вид тега <a> с соответствующими атрибутами (поз.22,25). При пустых же параметрах, этим переменным будут присваиваться значения пустой строки "" (поз.24,27).

Следует обратить внимание на то, что кроме тега <a> к значениям этих переменных будут добавляться знак стрелки с пробелами в виде спецсимволов &nbsp;&rarr;&nbsp;. Это сделано для того, чтобы изобразить подобие цепочки элементов навигации.

А для $page_rus (поз.28) переменной $section_breadcrumbs будет также присваиваться значение русскоязычного словообразования вместе с аналогичными спецсимволами, но без тега <a>. Так как для конечного элемента URL текущей страницы не требуется его отображать в виде ссылки.

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

На следующем скриншоте показан фрагмент HTML-кода шаблона главной страницы с добавлением этих переменных в файл "index.php".

Для увеличения / уменьшения размера изображения кликните по картинке
Формируем из входящих ЧПУ динамические страницы, картинка 4

Рис.9 Фрагмент кода для формирования навигации "Хлебные крошки"

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

На скриншоте показан вид страницы для варианта мобильного устройства, так как при создании цепочки "Хлебные крошки" этот элемент был предусмотрен для разрешения экранов менее 600px.

В случе необходимости использования навигации при большем разрешении, следует элементу <div> с классом class="band" назначить свойство display:block. О том, как это сделать можно посмотреть здесь.

Для увеличения / уменьшения размера изображения кликните по картинке
Формируем из входящих ЧПУ динамические страницы, картинка 5

Рис.10 Проверка навигации "Хлебные крошки"

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

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

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

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


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

  • Файлы каталога www
  • Таблицы базы данных MySQL

Дополнительные материалы бесплатно предоставляются только зарегистрированным пользователям.

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

Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.

С уважением, Николай Гришин


Комментарии


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

Буду Вам за это очень признателен!

comments powered by HyperComments