×

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вы здесь: Главная → Сборник статей → Динамический сайт → Создаем динамически формируемое меню


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

Создаем динамически формируемое меню

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

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

Однако, во всех HTML-страницах остались еще однотипные фрагменты, которые занимают довольно значительный объем кода. Имеются ввиду части, описывающие главное меню и меню футера. А, отличия в них для каждой страницы заключаются лишь только в том, что в одном определенном теге <li> списка присваивается класс "activ" или "ftr-activ", необходимый для визуального отображения активной кнопки элементов навигации.

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

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

Содержание


  • Создаем функцию вывода всех строк заданной таблицы
  • Формируем и подключаем файл 'start.php'
  • Формируем файлы главного меню и меню футера
  • Проверка работы сайта при динамически формируемом меню
  • Исходные файлы сайта

Создаем функцию вывода всех строк заданной таблицы


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

По существу, отличие между этими вариантами будет заключаться лишь только в запросе SQL. Теперь, вместо заданных условий выборки строк ("SELECT * FROM `url` WHERE `url`='poluchity-skidku' OR `url`='statistika-ugonov' OR `url`='kontakti' ORDER BY `id` DESC"), в новом запросе каких-либо условий указываться не будет, в связи с чем он примет более упрощенный вид: "SELECT * FROM `url`".

  1. <?php

  2. //----Функция вывода всех строк таблицы MySQL-------------

  3. function getAll($table) {

  4. global $mysqli;

  5. if (!$result = $mysqli->query("SELECT * FROM `$table`")) {

  6. die ('При извлечении записей возникла ошибка: '.$mysqli->errno.' - '.$mysqli->error);

  7. }

  8. $array = array();

  9. while (($row = $result->fetch_assoc()) != false) {

  10. $array[] = $row;

  11. }

  12. return $array;

  13. }

  14. ?>

Рис.1 Функция вывода всех строк таблицы MySQL

Здесь можно лишь добавить, что для того, чтобы данная функция была универсальна и могла бы использоваться для различных таблиц, вместо конкретного имени таблицы "url" в качестве параметра функции включена переменная "$table". Эта же переменная используется и в запросе SQL для обозначения нужной таблицы.

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

Формируем и подключаем файл 'start.php'


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

Ранее в статье Подключаем базу данных MySQL с использованием процедурного и объектно-ориентированного стиля MySQLi мы создали два файла - "connect.phρ" и "functions.phρ", разместив их в папке "mysql". При этом, "connect.phρ" предназначен для обеспечения соединения с БД, а "functions.phρ" для размещения различных функций для работы с таблицами базы данных (созданная в предыдущем разделе функция также, как и все остальные, относящиеся к работе с БД MySQL, должна быть добавлена в файл "functions.phρ").

И теперь, создадим отдельный файл под именем "start.ρhρ", и подключим в нем с помощью языковой инструкции "require_once" вышеупомянутые "connect.ρhρ" и "functions.ρhρ"", как изображено на рис.2.

  1. <?php

  2. require_once "mysql/connect.php";

  3. require_once "mysql/functions.php";

  4. ?>

Рис.2 Формирование файла "start.ρhρ"

А, затем подключив "start.ρhρ" в начале каждой HTML-страницы, мы обеспечим выполнение всех возможных операций с базой данных MySQL, необходимых при отработке запросов пользователей. А сделать совсем несложно, использовав ту же самую инструкцию, как показано ниже.

  1. <?php

  2. require_once "start.php";

  3. ?>

Рис.3 Подключение файла "start.ρhρ к страницам сайта"

Для нашего сайта следует добавить этот фрагмент кода во все имеющиеся на данный момент страницы, соответствующие следующим файлам: "index.ρhp", "article.ρhp", "action.ρhp", "righting.ρhp" и "contacts.ρhp".

Следует отметить, что такое решения с использованием отдельного файла "start.phρ" выгодно отличается от варианта, в котором к страницам подключались бы отдельные "connect.phρ" и "functions.phρ". А, связано это с тем, при необходимости в дальнейшем подключения других элементов не потребует править код во всех страницах, а достаточно будет это сделать только в файле "start.phρ".

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

Формируем файлы главного меню и меню футера


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

  1. <nav class="menu">

  2. <ul>

  3. <li class="activ"><a href="index.html">Главная</a></li>

  4. <li><a href="article.html">Статистика угонов</a></li>

  5. <li><a href="action.html">Способы маркировки</a></li>

  6. <li><a href="righting.html">Запись на маркировку</a></li>

  7. <li><a href="contacts.html">Контакты</a></li>

  8. </ul>

  9. </nav>

Рис.4 Фрагмент HTML-кода главного меню в файле "index.ρhp"

Здесь видно, что для отображения соответствующей активной кнопки в первом теге <li> списка присвоен класс "activ". Остальные теги <li> никаких дополнительных атрибутов не имеют.

Аналогично и для других страниц. Отличие будет состоять лишь только в том, что класс "activ" будет присваиваться другим тегам <li>, соответствующим текущей страницы.

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

  • порядковый номер - поле "id";
  • ссылки на файл сайта - поле "file";
  • наименование пункта меню - поле "title".

Таким образом, используя базу данных MySQL можно составить PHP-код, который будет извлекать из таблицы "url" все записи и заносить в теги <li> соответствующие данные.

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

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

  1. <?php

  2. //----Формирование главного меню-------------

  3. $current_url = substr($_SERVER['REQUEST_URI'], 1);

  4. $data_bd = getAll('url');

  5. for ($i = 0; $i < count($data_bd); $i++) {

  6. $id = $data_bd[$i]['id'];

  7. $title = $data_bd[$i]['title'];

  8. $file = $data_bd[$i]['file'];

  9. if ($current_url == $file) echo '<li class="activ"><a href="/'.$file.'">'.$title.'</a></li>';

  10. else

  11. echo '<li><a href="/'.$file.'">'.$title.'</a></li>';

  12. }

  13. ?>

Рис.5 Формирование главного меню в файле "menu.php"

Как видно, здесь при вызове ранее созданной функции getAll с параметром "url" (поз.4) возвращается двумерный массив $data_bd, включающий все записи таблицы "url". Причем, одним из ключей массива будет порядковый номер строки, а второй - названия полей таблицы.

Далее, с помощью оператора цикла "for" (поз.5), поочередно, начиная с первой строки и до последней, будет извлекаться содержимое полей "id", "title" и "file" (поз. 6÷8). А затем через соответствующие переменные $id, $title и $file происходить формирование тегов <li> (поз. 9÷11).

При этом, если значение $id будет равно значению переменной $current_url, отражающей текущий URL, то в тег <li>будет добавлен класс "activ". В остальных случаях никаких атрибутов добавляться не будет.

Следует отметить, что здесь для получения текущего URL, переменной $current_url присваивается значение, полученное из элемента "$_SERVER['REQUEST_URI']" суперглобального массива "$_SERVER" (поз.3). В данном случае, это будет адрес текущей страницы, например "/index.ρhp".

А, для того, чтобы получить URL без слэша "/", с помощью строковой функции substr возвращается подстрока без первого символа. В итоге, переменная $current_url будет принимать вид типа "index.ρhp", соответствующий значениям поля "file" таблицы "url".

Таким образом, мы создали файл "menu.ρhp", который будет формировать меню во всех страницах сайта. Осталось его только подключить.

А, сделать это совсем несложно, используя ту же языковую инструкцию, что использовалась и в предыдущих случаях, "require_once". Ниже, на примере файла "index.php" показан фрагмент кода, где вместо множества тегов <li>, изображенных на рис.4, добавлена всего лишь одна инструкция PHP.

  1. <nav class="menu">

  2. <ul>

  3. <?php

  4. require_once "blocks/menu.php";

  5. ?>

  6. </ul>

  7. </nav>

Рис.6 Подключение файла "menu.ρhp" на примере файла "index.php"

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

Ниже показан PHP-код вновь созданного файла "ftr_menu.ρhp", где отличие от предыдущего варианта заключается лишь в том, что активному пункту присваивается класс не "activ", а "ftr-activ".

  1. <?php

  2. //----Формирование меню футера-------------

  3. $data_bd = getAll('url');

  4. for ($i = 0; $i < count($data_bd); $i++) {

  5. $id = $data_bd[$i]['id'];

  6. $title = $data_bd[$i]['title'];

  7. $file = $data_bd[$i]['file'];

  8. if ($current_url == $file) echo '<li class="ftr-activ"><a href="/'.$file.'">'.$title.'</a></li>';

  9. else

  10. echo '<li><a href="/'.$file.'">'.$title.'</a></li>';

  11. }

  12. ?>

Рис.7 Формирование меню футера

Аналогично выполняется и подключение этого файла к HTML-страницам.

  1. <nav class="ftr-menu">

  2. <ul>

  3. <?php

  4. require_once "blocks/ftr_menu.php";

  5. ?>

  6. </ul>

  7. </nav>

Рис.8 Подключение файла "ftr_menu.ρhp" на примере "index.ρhp"

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

Проверка работы сайта при динамически формируемом меню


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

Для увеличения / уменьшения размера изображения кликните по картинке
Проверка динамически формируемого меню, картинка 1

Рис.9 Скриншот проверки работы сайта с динамически формируемом меню

Разница заключается лишь только в том, что теперь все это формируется не из постоянных фрагментов HTML-кода страниц, а динамически, с использованием вновь созданных файлов "menu.ρhp" и "ftr_menu.ρhp".

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

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

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

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

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


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

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

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

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

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

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


Комментарии


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

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

comments powered by HyperComments