Красиво хоризонтално меню в php и mysql. Многостепенно меню в PHP и MySQL

Красиво хоризонтално меню в php и mysql.  Многостепенно меню в PHP и MySQL
Красиво хоризонтално меню в php и mysql. Многостепенно меню в PHP и MySQL

Ако се интересувате от отговора на въпроса как да създадете меню за уебсайт, значи сте попаднали на правилното място.

Ще разгледаме създаването на динамично меню в php, написано специално за манекени в програмирането, както и за тези, които все още са в резервоара.

Урок 3

Нека създадем бъдещото оформление на нашия сайт. За да направите това, нарисувайте супер красив уебсайт във Photoshop и го нарежете на парчета. Представете си, че заглавката, логото, менюто и долният колонтитул не са написани с думи, както в този пример, а това са изящно и цветно оформени елементи от сайта.

Например, нека създадем три страници и да ги наречем Раздел 1, Раздел 2, Раздел 3

Този текст ще бъде различен за различните страници, но ние няма да се занимаваме с него и ще го оставим такъв, какъвто е на всички страници.

Нека започнем да създаваме уебсайт на php.

1. Разделете блоковете заглавка, лого, меню, долен колонтитул в отделни файлове с разширение php или html

header.html

лого.html

меню.html

долен колонтитул.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и с командата включватзалепете върху новосъздаденото начална страницасайт.

6. Как да разгледам сайт на php?

Какво се случи - така че просто не виждам. Това вече не е шаблон с html разширение.

Но също не е проблем. Имаме нужда от собствени, т.е. локален сървърна компютъра. За да направим това, ще инсталираме Denver и ще видим резултата от нашата работа в браузъра, без да влизаме онлайн.

Ето реда. Въведох адреса на сайта и видях всичко, което току-що беше създадено в нормален вид с дизайн.

Сега нека разгледаме менюто на php сайта.

1. Отворете файла menu.html и превърнете секции 1, 2 и 3 във връзки към сайтове. Връзките в php се създават по различни начини.

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

Много харесвам тази процедура за създаване на връзка в Macromedia Dreamweaver. Имайте време да жънете Добреи пийте кафе.

2. Как да направите връзката в менюто неактивна, ако посетителят е на тази страница.

Ще бъде по-удобно за посетителя да навигира в сайта, знаейки на коя страница се намира.

Ако сте изпълнили всички стъпки стриктно точка по точка, тогава можете да видите, че всички връзки в менюто са постоянно активни при нас. Как да го оправя?

Първо, нека си припомним дефиницията на това какво е Условни твърдения

- това е когато някакво действие се извършва или не се извършва в зависимост от условията.

Нека направим следното:

  • Ще имаме нужда променливии едно условен оператор:

if ($master == "Master")// това условие. Ако се изпълни, тогава на това място на менюто, използвайки командата echo, се вмъкват обикновени HTML тагове, които показват надписа "Начало".

ехо "

У дома

";

друго//означава "в противен случай" - какво се случва, ако условието не е изпълнено. В този случай, ако условието не е изпълнено, надписът "Главна" ще бъде връзка, водеща към главната страница.

ехо "

У дома

";

  • Измислихме условие, но за да проверка на променливатрябва да го попитате.

За да направите това, поставете следните кодови блокове на всички страници:

$master = "Главен";

$master = "Секция 1";

$master = "Секция 2";

$master = "Секция 3";

Както можете да видите, всяка страница има свой собствен код.

И така, нашите практически стъпки за създаване на php меню ще бъдат както следва:

1) Отваряне на файла index.php

и поставете кода

$master = "Главен";

до точката на вмъкване на кода, който показва самото меню на сайта включват "menu.html";
?>

2) Отваряне на файла меню.htmlи вмъкнете кода с условието вместо обикновена html връзка към главната страница.

Гледаме в браузъра и се възхищаваме! Ако отидем на главната страница, връзката вече не е активна!

3) Повторете стъпки 1 и 2 със страниците 1.php, 2.php, 3.php

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

1) Отворете файла 1.php и поставете преди кода, който показва менюто, блок с дадена променлива

$master = "Секция 1";

2) Отворете файла menu.html и поставете кода с условието вместо обикновена връзка Секция 1като направите следните промени:

if ($master == "Раздел 1")// това условие. Ако се изпълни, тогава на това място на менюто, използвайки командата echo, се вмъкват обикновени HTML тагове, които показват надписа "Раздел 1".

ехо "

Секция 1

";

друго//означава "в противен случай" - какво се случва, ако условието не е изпълнено. В този случай, ако условието не е изпълнено, надписът "Раздел 1" ще бъде връзка, водеща към главната страница.

ехо "

Секция 1

";

Чудото се случи отново! Сега, ако сме на страницата Секция 1, връзката в менюто не е активна.

Повторението е майката на ученето! Или за тези в резервоара! Отново

повторение 2

1) Отворете файл 2.phpи поставете кода.

$master = "Секция 2";

2) Отворете отново файла menu.html и поставете кода с условието

if ($master == "Раздел 2")// това условие. Ако се изпълни, тогава на това място на менюто, използвайки командата echo, се вмъкват обикновени HTML тагове, които показват надписа "Раздел 2".

ехо "

Раздел 2

";

друго//означава "в противен случай" - какво се случва, ако условието не е изпълнено. В този случай, ако условието не е изпълнено, надписът "Раздел 2" ще бъде връзка, водеща към главната страница.

ехо "

Раздел 2

";

Повторение 3

1) Ние отваряме файл 3.phpи задайте променливата.

$master = "Секция 3";

2) Във файла menu.html поставете кода с условието вместо връзката Раздел 3, промените са:

if ($master == "Раздел 3")// това условие. Ако се изпълни, тогава на това място на менюто, използвайки командата echo, се вмъкват обикновени HTML тагове, които показват надписа "Раздел 3".

ехо "

Раздел 3

";

друго//означава "в противен случай" - какво се случва, ако условието не е изпълнено. В този случай, ако условието не е изпълнено, надписът "Раздел 3" ще бъде връзка, водеща към главната страница.

ехо "

Раздел 3

";

Резултат: ние вместо връзки в менюто от този вид

У дома


Секция 1

Раздел 2


Раздел 3

Този урок по php е написан от популярно търсене от посетителите на сайта и е практическо ръководство за научаване как да създадете динамично меню за сайт на php.

Следният измамен лист за уеб администратори ще ви каже как да направите уникални заглавия, описания и ключови думи за всяка страница в php.

Можете да изтеглите архива с всички файлове с шаблони на сайта и php менюта. Препоръчва се за начинаещи в програмирането.

Ако сте готови за сериозно изучаване на php, тогава е трудно да се намери по-добър видео курс от Попов. Той има много опит и добър стил.

]]> ]]>

23 април 2017 г

В предишните уроци анализирахме с примери какво представляват масивите. В този урок ние използваме масиви на практика за създаване на менюта на уебсайт.

Защо са по-удобни от обикновените HTML тагове?

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

А сега да вървим.

На локален хостинг в папката „ домейнисъздайте папка, наречена " масив- меню. местен”.

В тази папка създаваме четири файла: индекс. php, относно. php, контакт. phpИ меню. php.

!!! Синтаксисът на файла трябва да бъдеPHP.

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




charset="utf-8">



У дома


включват("menu.php");
?>

Копирайте този код във файлове about.php и contact.php. Променете само заглавията на страниците в тага

.

Пишем кода за менюто.

Във файл меню.phpписане на асоциативен масив.

$меню = масив (
"индекс "=> "index.php",
относно => "about.php",
"Контакти" => "contact.php"
);
?>

По-долу, използвайки HTML тагове, пишем менюто.

В браузъра ще видим обичайното меню под формата на списък.

Щраквайки върху произволен елемент от менюто, ще отидем на съответната страница, докато менюто ще бъде на всички страници.

Сега нека усложним задачата. Премахнете всичко от файла меню.phpИ...

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




charset="utf-8">
<span>Използване на масив за показване на менюто в сайта.</span>


$меню = масив (
масив("връзка" => "Начало", "href"=> "index.php"),
масив("връзка" => "Относно", "href"=> "about.php"),
масив("връзка" => "Контакти", "href"=> "contact.php")
);
?>



И на последната стъпка...

Начертайте менюто с цикъл за всеки.

Премахване на списък от файла menu.php

    и вместо това напишете следния код.

    ехо"

      " ;
      за всеки($меню като$артикул )(
      ехо "
    • ($ елемент)
    • " ;
      }

      В браузъра ще видим същия резултат.

      За да промените елементите от менюто, просто ги променете във файла меню.phpсамо веднъж.

      Това е, което сега ще анализираме. И така, задачата е да направите вертикално меню под формата на падащ списък.

      Как може това да се приложи в PHP? Много просто! Например, имаме файл index.php,който в зависимост от избраната секция в падащия списък трябва да показва съответното съдържание на страницата. Това се изпълнява по следния начин:

      1. Създаваме файлове във формат .html, които ще съдържат необходимото съдържание за извеждане.

      2. Създаваме (записваме) необходимите условия в скрипта index.php за показване на съответната информация.

      3. Разглеждаме създадения скрипт от гледна точка на сигурността на изпълнявания скрипт.

      Е, изглежда, като приключих с теорията, нека да преминем към практиката. Първо създаваме статични страници във формат .html, които ще съдържат необходимата информация. Можете да пишете там каквото сърце желае :) В резултат на това трябва да получим поне два файла съответно first.html и second.html , след което те могат да бъдат направени колкото искате, след като сте разбрали основния алгоритъм на кода .

      За показване на падащ списък във файл index.phpсъздаваме html форма, а по-долу пишем PHP скрипт със следното съдържание:



      Меню PHP


      Падащо меню в PHP












      if (isset ($_GET ["къде" ]))
      {
      ако ($_GET ["къде" ]==1)
      $file = "first.html" ;
      if ($_GET ["къде" ]==2 )
      $file = "втори.html" ;
      включват ($ файл);
      }
      ?>


      Така че кодът на падащото меню е готов и най-интересното е, че ще функционира нормално, но от гледна точка на сигурността е уязвим.

      Уязвимостта на този скрипт е, че променливата $файлостава неинициализирана, в който случай стойността на автоматично създадената променлива отива директно във функцията включват, а той от своя страна успешно я свързва (променливата) и я показва на екрана. И може да бъде повече от просто конфигурационния файл .htaccess. За да хакнете този скрипт, достатъчно е да прехвърлите към параметъра where стойност, която не е предоставена от кода, например 3. И тъй като тази стойност не е предоставена от скрипта, тогава просто променлива $файлняма да се инициализира. Следователно ще бъде възможно да зададете произволна стойност за него чрез URL низа.

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

      Но това е така, леко отклонение от темата. 😀

      Решението на този проблем е доста просто, $файлпросто трябва да се инициализира преди употреба, т.е. да му се даде стойност по подразбиране.

      Тук, ако параметърът where се предаде на скрипта, тогава променливата ще бъде инициализирана правилно, в противен случай просто ще бъде празна. Ето [безопасно] падащо меню в PHP.

      P.S. При създаването на сценарии е необходимо да се вземат предвид и съответно да се изключат всички възможни вектори на атака. Това е единственият начин да създадете проект, който да отговаря на правилата за безопасност и да бъде търсен от клиента. Ще се видим скоро!

      Тъй като излага съдържанието на модула menu.php. По-долу е моята собствена разработка на менюто в PHP, която беше написана от нулата в бележник.

      Този код ще бъде особено полезен за динамични сайтове, които имат самостоятелно написани машини. Ще предложа две версии на кода, които имат малки разлики (коя разлика ще бъде обяснена по-късно).

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

      /index.html /section_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

      Сайтът може да съдържа и подраздели за раздели:

      /section_1/podzaderl_1/ /section_1/podzaderl_1/articles_1.html /section_1/podzaderl_1/articles_2.html ... /section_1/podzaderl_2/articles_1.html /section_1/podzaderl_2/articles_2.html

      Тази структура ще работи и за нашето меню само с малки разлики.

      Предлагам да създадете отделен файл за менюто в php. Например menu.php би било чудесно име за такъв файл. За да се реализира менюто, се въвежда и CSS стил на менюто, за да стане повече или по-малко красиво веднага. Естествено, този стил е даден само за справка, тъй като дизайнът на сайтовете е много различен.

      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"; за ($i=0;$i ": "
    • "; ехо " ".$array_menu[$i]["име"]."
    • \n"; ) ехо "
    "; ?>

    Менюто може да бъде разделено на две части. Първият съдържа информационен масив $array_menu, който съдържа имената на нашите секции с връзки към секции. Има опция за поставяне на тези данни в базата данни mySQL, но няма много смисъл от това, тъй като извадката е много малка, така че това няма да повлияе на скоростта на работа.

    Втората част съдържа изхода на менюто чрез for цикъла. Цикълът сравнява адреса на уебсайта с адреса от масива $array_menu. Ако има съвпадение, показваме следващия раздел от менюто с активен специален клас:

  • , иначе просто
  • . Това ни позволява да подчертаем с някакъв цвят тази част от менюто, в която се намира потребителят. Според мен това е необходимо нещо за всеки сайт, за да може потребителят да разбере в кой раздел се намира.

    Редът в масива ще се запази при показване на менюто в сайта. Тоест масивът трябва да се попълни в реда, в който искате да се покаже менюто.

    Забележка:
    В случай, че URL адресите (адресите) на заглавието на секциите изглеждат така:
    /секция 1
    или такива
    /секция_1/име_раздела.html
    тогава в array_menu трябва да напишете точното съвпадение:
    $array_menu[$i]["url"]="/section_1"
    или за втория случай:
    $array_menu[$i]["url"]="/section_1/nazvanie_razdela.html";

    Как работи първата опция от менюто?
    Той подчертава менюто само ако сте на адреса на заглавието на раздела. Например, ако адресът на страницата е /section_1/articles_1.html, тогава менюто няма да бъде маркирано по никакъв начин.

    Втората версия на кода е модифицирана версия на първата и дава възможност за маркиране на менюто дори в статии, които са в секции.

    Втората версия на кода на менюто в PHP

    "; за ($i=0;$i ": "
  • "; echo "".$array_menu[$i]["title"]."
  • "; ) else ( echo ($URL) == ($array_menu[$i]["url"]) ? "
  • ": "
  • "; echo "".$array_menu[$i]["title"]."
  • "; ) ) ехо "
"; ?>

Нито един сайт не е пълен без навигация или както още се нарича "менюто на сайта". Така че менюто на сайта може да бъде едностепенно и многостепенно под формата на дърво. Ако няма особени трудности по отношение на изпълнението с меню на едно ниво, тогава когато създавате меню на много нива, трябва да помислите внимателно.

Най-важното в тази задача е да проектираме база данни за нашето многостепенно меню. Нека създадем таблица Категории с три полета документ за самоличност, заглавие, родителКъдето:

  • документ за самоличност- идентификатор
  • Заглавие- Име на менюто
  • родител- Родител на категорията по подразбиране 0

Полето отговаря за разклоняването на менюто родителАко родител = 0, тогава тази категория е родителската категория. За да добавите деца към категорията родител, трябва да посочите в полето родител документ за самоличностжеланият родител. Например:

Таблици с категории

Както се вижда от таблицата, родителската категория автомобилиима двама потомци МаздаИ Хондасвързани по поле родител. И категорията Мотоциклетидве потомци са КавазакиИ Харли. В същото време категорията Лодки няма наследници. Надявам се, че разбирате как се свързват категории.

След това преминаваме от думи към практика. Нека създадем таблицата Категории.

СЪЗДАВАНЕ НА ТАБЛИЦА, АКО НЕ СЪЩЕСТВУВА `categories` (`id` int(10) unsigned NOT NULL AUTO_INCREMENT, `title` varchar(255) NOT NULL, `parent` int(10) unsigned NOT NULL, PRIMARY KEY (`id`)) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=20 ; -- -- Изхвърляне на данни от таблицата на `categories` -- ВМЪКВАНЕ В `categories` (`id`, `title`, `parent`) СТОЙНОСТИ (1, "Cars", 0), (2, "Motorcycles", 0) , (3, Mazda, 1), (4, Honda, 1), (5, Kawasaki, 2), (6, Harley, 2), (7, Mazda 3, 3 ), (8, "Mazda 6", 3), (9, "Седан", 7), (10, "Хечбек", 7), (11, "Лодки", 0), (12, "Лифтбек", 8), (13, "Кросоувър", 8), (14, "Бял", 13), (15, "Червен", 13), (16, "Черен", 13), (17, "Зелен", 13), (18, Mazda CX, 3 ), (19, Mazda MX, 3);

Алгоритъмът на работа се състои от следното:

Създаване на връзка с база данни

query("ЗАДАДЕНИ ИМЕНА "utf8""); /* * Това е "официалният" обектно-ориентиран начин за това * но $connect_error не работеше до PHP 5.2.9 и 5.3.0. */ if ($mysqli->connect_error) ( die("Връзката е неуспешна (" . $mysqli->connect_errno . ") " . $mysqli->connect_error); ) /* * Ако искате да сте сигурни в съвместимостта с версии преди 5.2 .9, * по-добър код като този */ if (mysqli_connect_error()) ( die("Връзката е неуспешна (" . mysqli_connect_errno() . ") " . mysqli_connect_error()); )

Писане на функция за получаване на данни от таблицата Категории

//Вземете нашия масив от менюта от базата данни като функция за масив getCat($mysqli)( $sql = "SELECT * FROM `categories`"; $res = $mysqli->query($sql); //Създайте масив, където ключът на масива е ID на менюто $cat = array(); while($row = $res->fetch_assoc())( $cat[$row["id"]] = $row; ) return $cat; )

Получаваме масив като този, където ключът на масива е ID на категорията.

Дървовидна функция на масив от Томи Лакроа

//Функцията за изграждане на дърво от масив от функцията на Tommy Lacroix getTree($dataset) ( $tree = array(); foreach ($dataset as $id => &$node) ( //Ако няма прикачени файлове, ако (!$node[" parent"])( $tree[$id] = &$node; )else( //Ако има деца, след това преминете през масива $dataset[$node["parent"]][" деца"][$id] = &$ възел; ) ) върне $дърво; )

Получаване на масив под формата на дърво

Цял сценарий

query("ЗАДАДЕНИ ИМЕНА "utf8""); /* * Това е "официалният" обектно-ориентиран начин за това * но $connect_error не работеше до PHP 5.2.9 и 5.3.0. */ if ($mysqli->connect_error) ( die("Връзката е неуспешна (" . $mysqli->connect_errno . ") " . $mysqli->connect_error); ) /* * Ако искате да сте сигурни за съвместимостта с версии преди 5.2 .9, * по-добре е да използвате този код */ if (mysqli_connect_error()) ( die("Грешка при свързване (" . mysqli_connect_errno() . ") " . mysqli_connect_error()); ) //Вземете нашия масив от менюта от базата данни като функция за масив getCat($mysqli)( $sql = "SELECT * FROM `categories`"; $res = $mysqli->query($sql); //Създаване на масив, където ключът на масива е менюто ID $cat = array(); while ($row = $res->fetch_assoc())( $cat[$row["id"]] = $row; ) return $cat; ) //Функция за изграждане на дърво от масив от Tommy Lacroix функция getTree($dataset) ( $tree = array(); foreach ($dataset as $id => &$node) ( //Ако няма прикачени файлове if (!$node["parent" ])( $tree[$id] = &$node; )else( //Ако има деца, след това повторете масива $dataset[$node["parent"]]["childs"][$id] = &$node; ) ) return $tree; ) //Получаване на подготвен масив с данни $cat = getCat($mysqli); //Създаване на дървовидно меню $tree = getTree($cat); //Шаблон за показване на менюто под формата на дървовидна функция tplMenu($category)( $menu = "
  • ".$category["title"].""; if(isset($category["childs"]))( $menu .= "
      ".showCat($category["children"]) ."
    "; ) $меню .= "
  • "; return $menu; ) /** * Прочетете нашия шаблон рекурсивно **/ function showCat($data)( $string = ""; foreach($data as $item)( $string .= tplMenu($item); ) return $string; ) //Получаване на HTML маркиране $cat_menu = showCat($tree); //Показване на ехо "
      ". $cat_menu."
    "; ?>

    Резултатът от работата

    Многостепенно меню в PHP + MySQL за админ

    Ако искате да използвате това меню в административния панел на вашия сайт, тогава трябва да пренапишете няколко функции tplMenu(), showCat().

    ".$category["title"].""; )else( $menu = " "; ) if(isset($category["childs"]))( $i = 1; for($j = 0; $j< $i; $j++){ $str .= "→"; } $i++; $menu .= showCat($category["childs"], $str); } return $menu; } /** * Рекурсивно считываем наш шаблон **/ function showCat($data, $str){ $string = ""; $str = $str; foreach($data as $item){ $string .= tplMenu($item, $str); } return $string; } //Получаем HTML разметку $cat_menu = showCat($tree, ""); //Выводим на экран echo ""; ?>

    Резултатът от работата

    Изберете Автомобили → Mazda →→ Mazda 3 →→→ Седан →→→ Хечбек →→ Mazda 6 →→→ Liftback →→→ Кросоувър →→→→ Бял →→→→ Червен →→→→ Черен →→→→ Зелен →→ Mazda CX →→ Mazda MX → Honda Motorcycles → Kawasaki → Harley Boats