Контакти

Побудова і показ меню. Багаторівневе меню на PHP і MySQL Черствий menu php

Оскільки вона розкриває зміст модуля menu.php. Нижче буде представлена \u200b\u200bвласна розробка меню на PHP, яка була написана з нуля в блокноті.

Цей код особливо буде корисний для динамічних сайтів, які мають самописние движки. Я запропоную два варіанти коду, які мають незначні відмінності (у чому відмінність буде пояснено після).

Для початку наведу приблизну структуру сайту, для якого підійде це меню. Структура сайту повинна мати такий вигляд (класичний вид):

/index.html / razdel_1 / /razdel_1/articles_1.html /razdel_1/articles_2.html ... / razdel_2 / /razdel_2/articles_1.html /razdel_2/articles_2.html ... ... ... / razdel_N / articles_2 .html

Сайт може містити у розділів ще й підрозділи:

/ Razdel_1 / podzaderl_1 / /razdel_1/podzaderl_1/articles_1.html /razdel_1/podzaderl_1/articles_2.html ... /razdel_1/podzaderl_2/articles_1.html /razdel_1/podzaderl_2/articles_2.html

Така структура також буде працювати для нашого меню лише з невеликими відмінностями.

Я пропоную створити окремий файл для меню на php. Наприклад, menu.php було б відмінним назвою для такого файлик. Для реалізації меню також представлений стиль меню в CSS, щоб відразу зробити його більш менш красивим. Природно цей стиль дається тільки для ознайомлення, оскільки дизайни у \u200b\u200bсайтів дуже різні.

Код для стилю меню в CSS:

.menu (height: 42px; padding: 0 0 0 16px; background: url (images / spacer.png) repeat;) .menu li (display: block; float: left;) .menu li.active (background: # 000011 ;) .menu a (color: #FFF; display: block; line-height: 42px; text-decoration: none; padding: 0 14px;) .menu a: hover (background: url (images / spacer.png) repeat ;)

Тепер, давайте розглянемо перший варіант реалізації меню на PHP, який є трохи спрощеним.

Перший варіант коду меню на PHP

\\ N "; for ($ i \u003d 0; $ i ": "
  • "; Echo" ". $ Array_menu [$ i] [" name "]."
  • \\ N ";) echo""; ?>

    Меню можна розділити на дві частини. Перша містить інформаційний масив $ array_menu, в який заносяться назви наших розділів з посиланнями на розділи. Є варіант забити ці дані в базу даних mySQL, але особливо сенсу в цьому немає, оскільки вибірка зовсім невелика, тому на швидкість роботи це ніяк не вплине.

    Друга частина містить висновок меню через цикл for. У циклі відбувається порівняння адреси сайту з адресою з масиву $ array_menu. Якщо є збіг, то виводимо черговий розділ меню зі спеціальним класом active:

  • , Інакше просто
  • . Це дозволяє нам виділити якимось кольором ту частину меню, в якому знаходиться користувач. На мій погляд, це необхідна річ для будь-якого сайту, щоб користувач міг розуміти в якому розділі він знаходиться.

    Порядок проходження в масиві буде збережуться і при виведенні меню на сайті. Тобто масив треба заповнювати в порядку, в якому потрібно виводити меню.

    Примітка:
    У разі, якщо URL (адреси) заголовком розділів мають вигляд:
    / razdel_1
    або такий
    /razdel_1/nazvanie_razdela.html
    то в array_menu потрібно записувати точний збіг:
    $ Array_menu [$ i] [ "url"] \u003d "/ razdel_1"
    або для другого випадку:
    $ Array_menu [$ i] [ "url"] \u003d "/ razdel_1 / nazvanie_razdela.html";

    Як працює перший варіант меню?
    Він підсвічує меню тільки, якщо Ви перебуваєте за адресою заголовка розділу. Наприклад, якщо адреса сторінки буде /razdel_1/articles_1.html, то меню ніяк не підсвічуватиметься.

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

    Другий варіант коду меню на PHP

    "; For ($ i \u003d 0; $ i ": "
  • "; Echo" ". $ Array_menu [$ i] [" title "]."
  • ";) Else (echo ($ URL) \u003d\u003d ($ array_menu [$ i] [" url "])?"
  • ": "
  • "; Echo" ". $ Array_menu [$ i] [" title "]."
  • ";)) Echo""; ?>

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

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

    Урок 3. Меню на php для сайту робимо динамічним - чайникам

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

    Створимо для прикладу три сторінки і назвемо їх Розділ 1, Розділ 2, Розділ 3

    Цей текст для різних сторінок буде різний, але ми не будемо на ньому морочитися і залишимо його як є на всіх сторінках.

    Приступимо до створення сайту на php.

    1. Виділимо блоки header, logo, menu, footer в окремі файли c розширенням php або html

    header.html

    logo.html

    menu.html

    footer.html

    Додамо файл з цим текстом, щоб бачити його на всіх сторінках. назвемо його text.html

    Примітка. З цього моменту подальші записи буду вести безпосередньо в файлі text.html

    2. Створимо шаблон для нашого сайту на php.

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

    3. Тепер файл template.html нам не потрібен.

    Завдяки йому ми маємо уявлення про те, як буде виглядати наш сайт.

    4. Нашим шаблоном є файл template.php

    У нього ми зараз вставимо за допомогою команди include всі елементи сайту.

    5. Створимо три сторінки, як збиралися спочатку.

    Розділ 1, назвемо 1.php

    розділ 2, назвемо 2.php

    розділ 3, назвемо 3.php

    Для цього можна скористатися найпростішої командою зберегти як...

    Для самих маленьких поясню: відкриваємо файл template.php, Потім натискаємо зберегти як... і зберігаємо під назвою 1.php, Повторюємо процедуру і послідовно збережемо сторінки сайту 2.php, 3.php

    У нас вийшло 3 сторінки з однаковим дизайном. Досить вставляти замість файлу text.html інший, доповнювати різними картинками або будь-якими html кодами, скриптами і вміст кожної сторінки буде унікальним.

    Увага!

    Якщо не буде створено файл index.php для головної сторінки, то в браузері, набравши адресу сайту ми не побачимо сам сайт, а всього лише структуру директорії (перелік папок).

    Можете подивитися в Денвері і переконатися. Виправимо ситуацію - створимо файл index.php і назвемо довго не мудруючи Головна. Заодно створимо файл text-home.html і за допомогою команди include вставимо на тільки що створену головну сторінку сайту.

    6. Як переглянути сайт на php?

    Що вийшло - так просто не побачимо. Це вже не шаблон з розширенням html.

    Але і не проблема. Нам потрібен власний, тобто локальний сервер на комп'ютері. Для цього встановимо Денвер і результат своєї роботи будемо дивитися в браузері, не виходячи в інтернет.

    Ось тепер порядок. Набрала адреса сайту і побачила все тільки що створене в нормальному вигляді з дизайном.

    Тепер візьмемося за php меню сайту.

    1. Відкриємо файл menu.html і перетворимо раздел1, 2 і 3 в посилання по сайту. Посилання в php створюються по-різному.

    Наше завдання - навчитися відчувати сайт, створений на php. Тому посилання будемо робити, як на звичайному статичному сайті Розділ 1 і т.д.

    Мені ця процедура створення посилань шалено подобається в Macromedia Dreamweaver. встигай жати ОК і пити каву.

    2. Як зробити посилання в меню неактивній, якщо відвідувач знаходиться на даній сторінці.

    Відвідувачу буде зручніше орієнтуватися по сайту знаючи, на який саме страініце він знаходиться.

    Якщо ви виконали всі кроки строго по пунктам, то бачите, що у нас все посилання в меню активні постійно. Як це виправити?

    Для початку згадаємо визначення що таке умовні оператори

    - це коли якась агресивна дія виконується або не виконується в залежності від умов.

    Виконаємо такі дії:

    • нам знадобляться змінні і один умовний оператор:

    if ($ master \u003d\u003d "Головна")// це умова. Якщо воно виконується - то в даному місці меню за допомогою команди echo вставляються звичайні HTML-теги виводять напис «Головна».

    echo "

    Головна

    ";

    else // означає «інакше» - що відбудеться, якщо умова не виконується. В даному випадку при невиконанні умови напис «Головна» буде посиланням, що веде на головну сторінку.

    echo "

    Головна

    ";

    • Умова ми придумали, але щоб перевірити зміннупотрібно її задати.

    Для цього на всіх сторінках розмістимо такі блоки коду:

    $ Master \u003d "Головна";

    $ Master \u003d "Розділ 1";

    $ Master \u003d "Розділ 2";

    $ Master \u003d "Розділ 3";

    Як видно для кожної сторінки свій код.

    Отже, наші практичні кроки зі створення php меню будуть наступні:

    1) відкриваємо файл index.php

    і вставляємо код

    $ Master \u003d "Головна";

    до місця вставки коду, що виводить саме меню сайту include "menu.html";
    ?>

    2) відкриваємо файл menu.html і вставляємо код з умовою замість простої html посилання на головну сторінку.

    Дивимося в браузері і милуємося! Якщо зайдемо на головну сторінку, то посилання перестала бути активною!

    3) Повторюємо пункт 1 і 2 зі сторінками 1.php, 2.php, 3.php

    Повторення 1:

    1) Відкриваємо файл 1.php і вставляємо до коду, що виводить меню блок із заданою змінною

    $ Master \u003d "Розділ 1";

    2) Відкриваємо файл menu.html і вставляємо код з умовою замість простого посилання Розділ 1, Внісши такі зміни:

    if ($ master \u003d\u003d "Розділ 1")// це умова. Якщо воно виконується - то в даному місці меню за допомогою команди echo вставляються звичайні HTML-теги виводять напис «Розділ 1».

    echo "

    Розділ 1

    ";

    else // означає «інакше» - що відбудеться, якщо умова не виконується. В даному випадку при невиконанні умови напис «Розділ 1» буде посиланням, що веде на головну сторінку.

    echo "

    Розділ 1

    ";

    Чудо повторилося! Тепер, якщо ми знаходимося на сторінці Розділ 1, Посилання в меню не активна.

    Повторення - мати навчання! Або для тих, хто в танку! Ще раз

    Повторення 2

    1) Відкриваємо файл 2.php і вставляємо код.

    $ Master \u003d "Розділ 2";

    2) Знову відкриємо файл menu.html і вставляємо код з умовою

    if ($ master \u003d\u003d "Розділ 2") // це умова. Якщо воно виконується - то в даному місці меню за допомогою команди echo вставляються звичайні HTML-теги виводять напис «Розділ 2».

    echo "

    розділ 2

    ";

    else // означає «інакше» - що відбудеться, якщо умова не виконується. В даному випадку при невиконанні умови напис «Розділ 2» буде посиланням, що веде на головну сторінку.

    echo "

    розділ 2

    ";

    Повторення 3

    1) відкриваємо файл 3.php і задаємо змінну.

    $ Master \u003d "Розділ 3";

    2) У файл menu.html вставляємо код з умовою замість посилання розділ 3, Зміни такі:

    if ($ master \u003d\u003d "Розділ 3") // це умова. Якщо воно виконується - то в даному місці меню за допомогою команди echo вставляються звичайні HTML-теги виводять напис «Розділ 3».

    echo "

    розділ 3

    ";

    else // означає «інакше» - що відбудеться, якщо умова не виконується. В даному випадку при невиконанні умови напис «Розділ 3» буде посиланням, що веде на головну сторінку.

    echo "

    розділ 3

    ";

    підсумок: Ми замість посилань в меню такого виду

    Головна


    Розділ 1

    розділ 2


    розділ 3

    Цей урок про php був написаний на численні прохання відвідувачів сайту і є практичним посібником з вивчення створення динамічного меню для сайту на php.

    Наступна шпрагалка вебмастера розповість про те, як зробити на php унікальні заголовки, описи і ключові слова для кожної сторінки.

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

    Якщо ж ви готові до серйозного вивчення php, то краще відео курсу від Попова знайти складно. У нього величезний досвід і хороший склад.

    ]]> ]]>

    Саме це ми зараз і розберемо. І так, стоїть завдання, зробити вертикальне меню, у вигляді списку.

    Як це можна реалізувати на PHP? Дуже просто! Наприклад, у нас є файл index.php, який в залежності від обраного розділу в випадаючому списку, повинен відображати відповідний контент на сторінці. Реалізується це таким чином:

    1. Створюємо файли в формате.html, які і будуть містити в собі необхідний для виведення контент.

    2. Створюємо (пишемо) в скрипті index.php необхідні умови, для виведення відповідної інформації.

    3. Розглядаємо створений скрипт з позиції безпеки виконуваного сценарію.

    Ну, начебто, як з теорією закінчив, переходимо до практики. Спочатку створюємо статичні сторінки в форматі .html, які і будуть містити необхідну інформацію. Там можна написати все, що душа забажає :) В результаті у нас повинно вийти, як мінімум два файли first.html і second.html, відповідно потім їх можна буде зробити скільки завгодно, зрозумівши основний алгоритм роботи коду.

    Для виведення списку в файлі index.php створюємо html форму, і нижче пишемо PHP скрипт такого змісту:



    Menu PHP


    Меню, що випадає на PHP












    if (isset ($ _GET [ "where"]))
    {
    if ($ _GET [ "where"] \u003d\u003d 1)
    $ File \u003d "first.html";
    if ($ _GET [ "where"] \u003d\u003d 2)
    $ File \u003d "second.html";
    include ($ file);
    }
    ?>


    Ось і готовий код меню, що випадає, і що найцікавіше він буде нормально функціонувати, але з точки зору безпеки, він вразливий.

    Уразливість даного скрипта полягає в тому, що змінна $ file залишається инициализирована, і в цьому випадку значення автоматично створеної змінної потрапляє відразу в функцію include, А вона в свою чергу успішно її (змінну) підключає і відображає на екрані. І це може бути не тільки файл конфігурації .htaccess. Для того, що-б зламати цей сценарій, досить параметру where передати не передбачену кодом значення, ну наприклад 3. А так, як це значення не передбачено сценарієм, то просто змінна $ file не пройде ініціалізацію. Тому, їй можна буде задати довільне значення через рядок URL.

    http: //localhost/index.php? where \u003d 3 & file \u003d .htaccess

    Але це так, невеличкий відступ від теми. 😀

    Варіант вирішення даної проблеми досить простий, змінну $ file просто необхідно ініціалізувати до початку використання, т. е. привласнити їй значення за замовчуванням.

    Тут, якщо параметр where переданий скрипту, то змінна буде инициализирована коректно, інакше просто виявиться порожньою. Ось таке вийшло [безпечне] меню, що випадає на PHP.

    P.S. Створюючи сценарії необхідно враховувати і відповідно виключати всі можливі вектори атак. Тільки так можна створити проект, який буде відповідати правилам безпеки і затребуваний замовником. До нової зустрічі!

    У загальному випадку задача формування меню включає:

    • виділення HTML елементів для побудови меню;
    • створення шаблону меню (створення шаблону компонента Меню);
    • увімкнути функцію показу меню (виклик компонента Меню) В загальному шаблоні ( "пролозі" і "епілозі");
    • заповнення меню відповідно до структури сайту.

    структура меню

    Будь-яке меню на сайті будується на основі двох складових:

    • масиву даних $ aMenuLinks, що визначає склад меню, задає назви і посилання для всіх пунктів меню. Управління масивом даних здійснюється через адміністративний інтерфейс;
    • шаблону зовнішнього подання меню. Шаблон меню - це PHP код, який визначає зовнішній вигляд меню (шаблон компонента Меню). Шаблон меню обробляє масив даних, видаючи на виході HTML-код.

    Масив даних меню

    Дані для кожного типу меню зберігаються в окремому файлі, ім'я якого має такий вигляд: .<тип меню>.menu.php. Наприклад, для зберігання даних меню типу left буде використовуватися файл .left.menu.php, А для зберігання даних меню типу top - файл .top.menu.php.

    Меню є ієрархічно спадкоємною. Файли меню розміщуються в папках тих розділів сайту, де потрібно показ відповідних типів меню. Якщо для даного розділу не створений відповідний файл меню, система здійснює пошук файлу в каталозі рівнем вище.

    Наприклад, тому що основне меню (в демо-версії продукту, це меню типу top) Має виводитися у всіх розділах, то файл даного меню поміщається тільки в кореневий каталог сайту.

    Відповідно меню другого рівня (в демо-версії продукту, це меню left) Виводиться окремо для кожного розділу сайту. Тому в папці кожного розділу створюється свій файл для даного типу меню.

    ще приклад: Відвідувач знаходиться в розділі / ru / company / about /. Для показу меню типу left файл меню шукається системою в наступній послідовності:

    1. /ru/company/about/.left.menu.php
    2. /ru/company/.left.menu.php
    3. /ru/.left.menu.php
    4. /.left.menu.php

    Якщо в одному з каталогів знайдено меню, то пошук зупиняється і в наступних каталогах вже не шукається.

    Система Bitrix Framework дозволяє також створювати меню динамічного типу Для цього потрібно в компоненті Меню включити опцію Підключати файли з іменами віда.тіп_меню.menu_ext.php ( "USE_EXT" \u003d\u003e "Y"), яка за замовчуванням вимкнена. . Тобто масив даних таких меню генерується автоматично на підставі деяких даних, одержуваних за допомогою програмного коду. Даний код повинен зберігатися в папці відповідного розділу сайту в файлі з ім'ям .<тип меню>.menu_ext.php.

    Основне завдання подібних файлів - це маніпуляція масивом $ aMenuLinks. Дані файли не редагуються візуально в модулі управління структурою, Тому вони не зможуть бути випадково відредаговані при візуальному редагуванні меню. При створенні цього файлу використовуйте компонент Пункти меню (bitrix: menu.sections).

    Примітка: У абзаці вище мова йде тільки про доповнення створеного меню назвами розділів Інфоблоки. Наприклад, для доповнення меню назвами форумів цей варіант не годиться.

    Увага! Якщо в якості пунктів меню використовуються розділи каталогу без ЧПУ, необхідно вказувати змінні в значущих змінних запиту.

    Прикладом такого меню може служити ліве меню розділу Каталог книг, Представлене в демо-версії продукту. Тут перші два пункти меню автори і рецензії створені звичайним способом, а решта ( Бізнес-література, Дитяча література і т.д.) формуються динамічно.

    В даному випадку в якості пунктів меню використовуються назви груп каталогу книги, Створеного на основі інформаційних блоків. Програмний код, на основі якого генерується меню, зберігається в файлі .left.menu_ext.php в папці / e-store / books /.


    У файлах .<тип меню>.menu.php можуть використовуватися такі стандартні змінні:

    • $ SMenuTemplate - абсолютний шлях до шаблону меню (дана змінна використовується вкрай рідко);
    • $ AMenuLinks - масив, кожен елемент якого описує черговий пункт меню.

      Структура даного масиву:

      Array (\u003d\u003e пункт меню 1 Array (\u003d\u003e заголовок пункту меню \u003d\u003e посилання на пункті меню \u003d\u003e масив додаткових посилань для підсвічування пункту меню: Array (\u003d\u003e посилання 1 \u003d\u003e посилання 2 ...) \u003d\u003e масив додаткових змінних переданих в шаблон меню: Array ([ім'я змінної 1] \u003d\u003e значення змінної 1 [ім'я змінної 2] \u003d\u003e значення змінної 2 ...) \u003d\u003e умова, при якому пункт меню з'являється це PHP вираз, яке має повернути "true") \u003d\u003e пункт меню 2 \u003d\u003e пункт меню 3 ...)

    Приклади файлів меню

    IsAuthorized () "), Array (" Журнал навчання "," gradebook.php ", Array (), Array ()," \\ $ GLOBALS [ "USER"] -\u003e IsAuthorized () "), Array (" Анкета спеціаліста " , "profile.php", Array (), Array (), "\\ $ GLOBALS [" USER "] -\u003e IsAuthorized ()"),);?\u003eIncludeComponent ( "bitrix: menu.sections", "", Array ( "ID" \u003d\u003e $ _REQUEST [ "ELEMENT_ID"], "IBLOCK_TYPE" \u003d\u003e "books", "IBLOCK_ID" \u003d\u003e "30", "SECTION_URL" \u003d \u003e "/e-store/books/index.php?SECTION_ID\u003d#ID#", "CACHE_TIME" \u003d\u003e "3600")); $ AMenuLinks \u003d array_merge ($ aMenuLinks, $ aMenuLinksExt); ?\u003e

    Організація показу меню

    Показ меню на сторінках сайту виконується за допомогою компонента Меню (bitrix: menu). Наприклад, виклик верхнього меню на демо-сайті має такий вигляд.

    У цій статті я покажу, як можна створювати багаторівневе меню на PHP і MySQL. Безумовно, варіантів його створення можна придумати багато, але, судячи з кількості Ваших питань на цю тему, Вам потрібен приклад. І його я приведу в цій статті. Відразу зазначу, що дана стаття має сенс тільки для тих, хто знає PHP і вміє працювати з MySQL. Всім іншим спочатку треба пройти цей, або прочитати якісь книги по PHP і MySQL.

    Для початку створимо таблицю в базі даних з наступними полями:

    • id - унікальний ідентифікатор.
    • title - анкор посилання в меню.
    • link - адреса, на який буде вести пункт меню.
    • parent_id - батьківський ID. Якщо батьківського пункту немає, то тут буде NULL (або можна ще 0 поставити).

    З таблицею розібралися, тепер прийшов час PHP-коду. повний PHP-код наведено нижче:

    $ Mysqli \u003d new mysqli ( "localhost", "root", "", "db"); // Підключаємося до БД
    $ Result_set \u003d $ mysqli-\u003e query ( "SELECT * FROM` menu` "); // Робимо вибірку всіх записів з таблиці з меню
    $ Items \u003d array (); // Масив для пунктів меню
    while (($ row \u003d $ result_set-\u003e fetch_assoc ())! \u003d false) $ items [$ row [ "id"]] \u003d $ row; // Заповнюємо масив вибіркою з БД
    $ Childrens \u003d array (); // Масив для відповідностей дочірніх елементів їх батьківським
    foreach ($ items as $ item) (
    if ($ item [ "parent_id"]) $ childrens [$ item [ "id"]] \u003d $ item [ "parent_id"]; // Заповнюємо масив
    }
    function printItem ($ item, $ items, $ childrens) (
    / * Виводимо пункт меню * /
    echo "

  • ";
    echo "". $ item [ "title"]. "";
    $ Ul \u003d false; // Виводилися чи дочірні елементи?
    while (true) (
    / * Нескінченний цикл, в якому ми шукаємо всі дочірні елементи * /
    $ Key \u003d array_search ($ item [ "id"], $ childrens); // Шукаємо дочірній елемент
    if (! $ key) (
    / * Дочірніх елементів не знайдено * /
    if ($ ul) echo ""; // Якщо виводилися дочірні елементи, то закриваємо список
    break; // Виходимо з циклу
    }
    unset ($ childrens [$ key]); // Видаляємо знайдений елемент (щоб він не виводився ще раз)
    if (! $ ul) (
    echo "
      "; // Починаємо внутрішній список, якщо дочірніх елементів ще не було
      $ Ul \u003d true; // Встановлюємо прапор
      }
      echo printItem ($ items [$ key], $ items, $ childrens); // Рекурсивно виводимо всі дочірні елементи
      }
      echo "";
      }
      ?>

      Цей код повністю робочий, проте, Ви повинні розуміти, що так ніхто не пише (зокрема, висновок через echo HTML-тегів). І Ваше завдання взяти алгоритм з цього коду, але не сам код. А далі цей алгоритм підключити до свого движку. Я постарався ретельно прокоментувати код виведення багаторівневого меню на PHP і MySQL, Але, безумовно, він не надто прозорий і вимагає вже непоганих початкових знань. Якщо Ви ще погано знаєте PHP і MySQL, То спочатку настійно рекомендую пройти цей



  • Сподобалася стаття? поділіться їй