Веб-мастерская Ларисы ВоронинойИспользование массива для вывода меню на сайте
WEB-мастерская Ларисы Ворониной logo

Использование массива для вывода меню на сайте Апр 23 2017

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

Чем они удобнее обычных HTML-тегов?

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

А теперь поехали.

На локальном хостинге в папке “domains  создаём папку под названием “array-menu.local”.

В этой папке создаём четыре файла: index.php, about.php, contact.php и menu.php.

!!! Синтаксис файлов должен быть PHP.

В файле index.php  пишем простой HTML каркас.

Далее между тегами body пишем заголовок страницы и подключаем наше меню.

<!DOCTYPE html>
<html>
     <head>
          <meta charset="utf-8">
          <title>Использование массива для вывода меню на сайте.</title>
     </head>
     <body>
          <h1>Главная</h1>
<?php
include ("menu.php");
?>
     </body>
</html>

Копируем этот код в файлы about.php и contact.php. Меняем только названия страниц в теге <h1>.

Пишем код для меню.

В файле menu.php  пишем  ассоциативный массив.

<?php
$menu = array (
     "index"=>"index.php",
     "about"=> "about.php",
     "contacts"=>"contact.php"
);
?>

Ниже с помощью тегов HTML пишем меню.

<ul>
     <li><a href='#'>Главная</a></li>
     <li><a href='#'>О нас</a></li>
     <li><a href='#'>Контакты</a></li>
</ul>

Далее вместо заглушки (#)в значениях атрибута href тэгов <a> водим значения элементов массива.

<ul>
     <li><a href='<?=$menu ["index"]?>'>Главная</a></li>
     <li><a href='<?=$menu ["about"]?>'>О нас</a></li>
     <li><a href='<?=$menu ["contacts"]?>'>Контакты</a></li>
</ul>

В браузере мы увидим обычное меню в виде списка.

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

Теперь усложним задачу. Всё удаляем из файла menu.php и...

Пишем многомерный массив.

<!DOCTYPE html>
<html>
     <head>
          <meta charset="utf-8">
          <title>Использование массива для вывода меню на сайте.</title>
     </head>
     <body>
<?php
$menu = array (
     array ("link"=>"Главная", "href"=>"index.php"),
     array ("link"=>"О нас", "href"=>"about.php"),
     array ("link"=>"Контакты", "href"=>"contact.php")
);
?>
          <ul>
               <li><a href='<?=$menu [0] ["href"]?>'><?=$menu [0] ["link"]?></a></li>
               <li><a href='<?=$menu [1] ["href"]?>'><?=$menu [1] ["link"]?></a></li>
               <li><a href='<?=$menu [2] ["href"]?>'><?=$menu [2] ["link"]?></a></li>
          </ul>
     </body>
</html>

 

И на последнем этапе...

Отрисовываем меню с помощью цикла foreach.

Удаляем из файла menu.php список <ul> и вместо него пишем следующий код.

echo "<ul>";
foreach ($menu as $item){
echo "<li><a href='{$item[href]}'> {$item [link]}</a></li>";
}

В браузере увидим тот же результат.

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


Рейтинг@Mail.ru