Направете разгъващи се и сгъващи се менюта с PHP

Чудели ли сте как да направите разгъващи се и сгъващи се менюта в PHP? Когато натиснете на menu item, субменюто ще се разгъне, и когато натиснете menu item отново, то ще се сгъне. Ако желаете да постигнете такъв ефект, този tutorial ще Ви покаже как да го направите. Ако не сте използували session variables или всякакви други PHP predefined variables, ще трябва първо да прегледате този tutorial.


Setup

За да работи цялата система, нуждаете се да имате план на страница, който трябва да изглежда така: таблица определяща main sections на страницата. В този пример, това е logo в горния ляв ъгъл, header или banner през горния край на страницата, вдясно от logo, меню секция покрай лявата страна на страницата, точно под logo, главна display area, вдясно от menu area и footer в долния край на страницата.

Може би е най-лесно да визуализирате концепцията с начертаване на лист хартия на страницата за да помните, какво трябва да очаквате. Няма причина да не използувате хоризонтален меню bar с падащи sub menus, но ще трябва да модифицирате кодовите семпли, за да изобразите всичко коректно.

Следващите три секции ще Ви преведат през целия процес:

Set Session Variable
Describe Main Page
Menu System
Summary
__________________________________________

Set Session Variable

Първото нещо, което трябва да направите е да зададете session variable, която казва на menu page, да разгъне менютата или не. Session variables са постоянни през страниците и не могат (обикновено)да бъдат разстройвани от user, по начина, както може с кукитата. Cookies имат лошо име и ако нямате изискване юзерите да ги enable, ще имате най- щастливите users (обикновено). Кода изглежда така:


session_start();
session_register('expand');
$_SESSION['expand'] = 0;

Името на променливата е $expand и ако е настроена на 0, менюто няма да се разгърне, и ако е настроена на друга стойност (като 1), то ще се.... За име може да използувате всяко, но избрах това защото ми подсказва. session_start() enables sessions за страницата и session_register('expand') регистрира името на променливата 'expand', така че другите страници да могат да я използуват. Тези три реда трябва да са на Вашата login page. Ако имате само main page, използувайте само първите два реда.



__________________________________________

Describe Main Page

А сега на примерната page (бъдете търпеливи, ще стигнем до menu page след минути). Освен ако не използувате login page, всички от Вашите data pages, ще изглеждат подобно на:

<?

include "init.php";
?>
<HTML>
<HEAD>
<TITLE> Page title </TITLE>
</HEAD>
<BODY>
<TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0">
<TR><TD WIDTH="20%"><?php include "./logo.php" ?></TD>
<TD WIDTH="80%" ALIGN="center"><?php include "./header.php" ?></TD></TR>
<TR><TD WIDTH="20%"><?php include "./menu.php" ?></TD>
<TD WIDTH="80%">
<TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0">
<TR><TD> </TD></TR>
<TR><TD ALIGN="CENTER" COLSPAN="3"><H1>Display stuff</H1></TD></TR>
<TR><TD COLSPAN="3"> </TD></TR>
<TR><TD COLSPAN="3">This is where you put all of your content.</TD></TR>
</TABLE>
</TD></TR>
<TR><TD COLSPAN="2" ALIGN="center"><?php include "./footer.php" ?></TD></TR>
</TABLE>
</BODY>
</HTML>


Директивата
include "init.php"
казва на system да чете от файл с име init.php. Там поставихме session_start() директивата, така че няма нужда да помниме да я поставяме на всеки file in the system. Ако имате сайт изискващ login, задайте Вашата generic session variables тук. Това е важно ако желаете да имате user or group specific menus.
След първата table дефиниция ще видите:
<TR><TD WIDTH="20%"><?php include "./logo.php" ?></TD>
Реда задава logo image file and size. The header info е на следващия ред. Реда след header е мястото, където ще фокусираме остатъка от нашето внимание, защото там задаваме меню системата.

__________________________________________

Menu System

menu.php файла изглежда така:


<?php
ini_set('display_errors',0);
if ((isset($_SESSION['menu'])) && (!isset($_GET['menu']))) {
$menu = $_SESSION['menu'];
} elseif (isset($_GET['menu'])) {
if ($_SESSION['menu'] == $_GET['menu']) {
if ($_SESSION['expand'] == 0) {
$expand = 1;
} else {
$expand = 0;
}
} else {
$expand = 1;
}
$_SESSION['expand'] = $expand;
$tmenu = $_GET['menu'];
list($menu,$trash) = explode("?",$tmenu,2);
$_SESSION['menu'] = $menu;
}
$expand = $_SESSION['expand'];
list($earl,$trash) = explode("?",$_SERVER['REQUEST_URI'],2);
?>
<TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0">
<TR><TD><A CLASS="menu" HREF="<?php print($earl); ?>?menu=aaa"><IMG SRC="menu.php?text=A" ALT="A"></A></TD></TR>
<?php if (($_SESSION['menu'] == "aaa") && ($expand)) { ?>
<TR><TD>
<TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0">
<TR><TD><A HREF="a1.php"><IMG SRC="menu2.php?text=A1" ALT="A1"></A></TD></TR>
<TR><TD><A HREF="a2.php"><IMG SRC="menu2.php?text=A2" ALT="A2"></A></TD></TR>
<?php if (($loginrole == "w") || ($loginrole == "x") || ($loginrole == "y") || ($loginrole == "z")) { ?>
<TR><TD><A HREF="a3.php"><IMG SRC="menu2.php?text=A3" ALT="A3"></A></TD></TR>
<TR><TD><A HREF="a4.php"><IMG SRC="menu2.php?text=A4" ALT="A4"></A></TD></TR>
<?php } ?>
</TABLE></TD></TR><?php } ?>
<TR><TD><A HREF="main.php?menu=home"><IMG SRC="menu.php?text=Home" ALT="Home"></A></TD></TR>
</TABLE>
<?php ini_set('display_errors',1); ?>


Да преминем детайлно към кода!

__________________________________________


ini_set('display_errors',0);
реда казва на PHP да превключи на off error reporting to the browser. Юзера няма да види PHP да се оплаква, ако променливата не е настроена.
Следващия ред
if ((isset($_SESSION['menu'])) && (!isset($_GET['menu']))) {
настройва първоначалния conditional test, който казва на кода да направи някои проверки, дали SESSION variable е настроена и GET variable не е настроена. Така ще знаеме кое menu да държим разгънато, ако user натисне на някое от sub menu items.

$menu = $_SESSION['menu'];
настройва $menu променливата със стойност в SESSION масива на menu. Когато user натисне на menu item, SESSION variable запазва the menu name във адрес от масива наименуван 'menu'.
Следва, да видиме
} elseif (isset($_GET['menu'])) {
which handles the case where the GET variable is set. Ако GET променливата is set, това означава, че юзера е натиснал върху menu item последния път когато е правил нещо. Забележете, че проверяваме в menu полето на GET масива, а не на друг. Ако юзерът натисне върху линк във content section от страницата, който има параметър, това няма да въздейства на нашето меню.
Следващите няколко реда контролират разгъване/сгъване логиката:

if ($_SESSION['menu'] == $_GET['menu']) {
if ($_SESSION['expand'] == 0) {
$expand = 1;
} else {
$expand = 0;
}
} else {
$expand = 1;
}
Първото if твърдение проверява дали това е вторият път, който user-а натиска върху същата main menu item, което означава, че желаем менюто да извърши сгъване (с установяване на $expand на 0). Ако това е трети път, ние желаеме да разгънем отново (с установяване на $expand на 1), и така нататъка. Второто if твърдение просто прехвърля expand променливата между 0 и 1. else частта на блока, казва на менюто да извърши разгъване, защото това е първият път, в който юзерът е натиснал върху menu item.
След като юзерът е приключил с натискане на main menu item, ние съхраняваме expand променливата в SESSION променливата, за да може да е достъпна по-късно.
$_SESSION['expand'] = $expand;
'expand' променливата се нуждае да е persistent, така че юзерът да може да натиска върху кое да е от subitems и да си играе с информацията в main display area. Не желаеме менюто да изчезне, когато преминаваме към нова страница чрез subitem.

--------------------------------------------------------------------------------
Трябва да извършим малко предварителна работа.
list($menu,$trash) = explode("?",$_GET['menu'],2);
$_SESSION['menu'] = $menu;
Ако юзерът се заиграе в натискане на main menu item, предизвиквайки разгъване и сгъване на subitems, ще се получава все по-дълъг string със a?menu=aaa..... В момента в който желаеме само menu name, ние ще strip off всичко след първия въпросителен знак. След това записваме menu name, като SESSION променлива.
Следва, да пренастроим expand променливата от нейният persistent (SESSION) setting, така че да имаме подходящо зададена променлива за използуване по-късно.
$expand = $_SESSION['expand'];
Това е важно, ако юзерът е натискал из subitems.
Трябва да извършиме малко работа върху request_uri променливата поради същите причини, поради които действахме така и с GET променливата.
list($earl,$trash) = explode("?",$_SERVER['REQUEST_URI'],2);
Желаеме само pass the script name to the server, когато разгъваме менютата. request_uri променливата е името на page, която сега е извикана. Защо е важно това? Желаете юзерът да остане на същата страница, на която е сега и само да разгъне менюто.

--------------------------------------------------------------------------------

Да хвърлиме един поглед върху HTML stuff, който всъщност изобразява менютата (или не). Използувахме gd2 модула за да изобразиме графики зад текста на менюто. Примерен код, ще откриете на PHP.net , който показва как да създадете menu.php файл. Създайте png файл със нещо подобно на PaintShop Pro и го използувайте, като background. Друг tutorial има на PHP Developer, който разкрива още детайли.

Променливата $earl е страницата на която сме били преди да натиснем върху main menu item и това е страницата, която ще продължаваме да виждаме след като менюто е било разгънато.
<TR><TD><A HREF="<?php print($earl); ?>?menu=aaa"><IMG SRC="menu.php?text=A" ALT="A"></A></TD></TR>
?menu=aaa частта, казва на PHP да разположи key named menu със стойност aaa във GET променлива. IMG SRC изобразява menu bar с текст 'A'.
Следващите няколко реда контролират изобразяването на разгъваните меню items.

<?php if (($_SESSION['menu'] == "aaa") && ($expand)) { ?>
<TR><TD>
<TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0">
На първият ред, проверяваме дали стойността на променливата 'menu' е установена на aaa и предположението menu да е разгънато(expanded). Ако променливата е установена на някой друг валиден избор, друго menu ще бъде разгънато. Ако expand променливата е 0, никое от менютата няма да е разгънато.
Това са примерни sub menu items

<TR><TD><A HREF="a1.php"><IMG SRC="menu2.php?text=A1" ALT="A1"></A></TD></TR>
<TR><TD><A HREF="a2.php"><IMG SRC="menu2.php?text=A2" ALT="A2"></A></TD></TR>
Поставяте редове, колкото желаете. На Вашето внимание: опитайте да държите броят на sub menu items на 7 +/- 2, така че юзерът да може бързо да открие информацията, която желае. Ако имате 10 или повече items, може би ще пожелаете да ги организирате в логически групи.

__________________________________________

Ако имате users с различни права в системата, може да използувате този тип схема, за да контролирате цялата или част от структурата на менюто. Ако не знаете как да настроите страница, която приема user logins, ето един як tutorial Creating a Membership System

<?php if (($loginrole == "w") || ($loginrole == "x") || ($loginrole == "y") || ($loginrole == "z")) { ?>
<TR><TD><A HREF="a3.php"><IMG SRC="menu2.php?text=A3" ALT="A3"></A></TD></TR>
<TR><TD><A HREF="a4.php"><IMG SRC="menu2.php?text=A4" ALT="A4"></A></TD></TR>
<?php } ?>
</TABLE></TD></TR><?php } ?>
<TR><TD><A HREF="main.php?menu=home"><IMG SRC="menu.php?text=Home" ALT="Home"></A></TD></TR>
Променливата $loginrole ще бъде set във init.php файла, който бе дискутиран по-горе. Ако loginrole ( users възможности на системата) допуска достъп до particular menu, ще бъде поставена вътре в този if блок. Хора без такъв достъп, няма да могат да видят menu choices. В този случай, user със роля w, x, y or z би могъл да види these menus, но не и някой със роля a through v. Двата HREF реда сочат към pages, до които user-а ще има достъп (content information).

Тази секция от кода, която сега дискутирахме, може да бъде повторена толкова пъти, колкото е необходимо, давайки Ви толкова main menu items, колкото желаете. Помнете да направите menu names уникални, така че PHP да знае какво да изобрази. Можете така също да повторите sub menu items, толкова колкото искате, но помнете добрата практика.


<TR><TD><A CLASS="menu" HREF="<?php print($earl); ?>?menu=aaa"><IMG SRC="menu.php?text=A" ALT="A"></A></TD></TR>
<?php if (($_SESSION['menu'] == "aaa") && ($expand)) { ?>
<TR><TD>
<TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0">
<TR><TD><A HREF="a1.php"><IMG SRC="menu2.php?text=A1" ALT="A1"></A></TD></TR>
<TR><TD><A HREF="a2.php"><IMG SRC="menu2.php?text=A2" ALT="A2"></A></TD></TR>
<?php if (($loginrole == "w") || ($loginrole == "x") || ($loginrole == "y") || ($loginrole == "z")) { ?>
<TR><TD><A HREF="a3.php"><IMG SRC="menu2.php?text=A3" ALT="A3"></A></TD></TR>
<TR><TD><A HREF="a4.php"><IMG SRC="menu2.php?text=A4" ALT="A4"></A></TD></TR>
<?php } ?>
</TABLE></TD></TR><?php } ?>


__________________________________________

Summary

Научихте да установявате подходяща SESSION променлива, така че да можете да съхранявате информацията persistent през различните pages. Научихте как да настроите main page на web site-а, за да използувате меню структура. Накрая, научихте как да направите menu, което да добавяте и модифицирате, за да прави всичко което пожелаете (Полегнала е Тодора, за всички, които я пожелаха:)). И последно, надзърнахте как да контролирате секциите на менюто, базирано на user login. Веселба с Вашата нова меню система:)!

Урока е изготвен от www.transcode.org

/ Трябва да сте регистриран за да напишете коментар /