Menu in html ed effetto con php

[samiel]

Ciao guru del php!
In attesa che Netsons chiarisca alcuni inghippi delle sue caselle,
ho un quesito a cui la compulsione dei sacri testi non ha dato risposta.
Mettiamo che devo comporre una pagina con degli elementi fissi.
Uso la funzione di inclusione e ho risolto.
Mettiamo però che un certo menu è uguale dappertutto,
tranne per il fatto che la pagina corrente è evidenziata
(ad es., in un CSS ho messo
#navbar a#activelink{background:white; color:black; font-weight:bold;}
mentre le altre voci sono in grigio chiaro.
Come posso dire a php di produrmi quella evidenziazione?

Grazie
M.

[conraid]

Mettiamo però che un certo menu è uguale dappertutto,
tranne per il fatto che la pagina corrente è evidenziata
(ad es., in un CSS ho messo
#navbar a#activelink{background:white; color:black; font-weight:bold;}
mentre le altre voci sono in grigio chiaro.
Come posso dire a php di produrmi quella evidenziazione?

tu avrai nel menù qualcosa come, per esempio

Codice: Seleziona tutto

<a href="prima.php">prima</a>
<a href="seconda.php">seconda</a>
<a href="terza.php">terza</a>
<a href="quarta.php">quarta</a>

Se quando sei in seconda.php vuoi che sia evidenziato allora devi mettere qualcosa come

Codice: Seleziona tutto

<a href="seconda.php" <?php if (ereg ("seconda.php", $_SERVER['PHP_SELF'])) echo 'id="activelink"';?>>seconda</a>

e così fai per tutti.

Esistono metodi migliori, questo è quello che mi è venuto in mente prima e controlla se non ho fatto errori di sintassi

[samiel]

Grazie, stasera mi ci dedico!

M.

[giberg]

Io avevo trovato un codice di esempio in un sito (non conoscendo tantissimo di php) che poi ho modificato per me.

In sostanza c'erano i link con descrizione contenuti in un array. Poi veniva "passata al setaccio" un elemento alla volta dell'array e se il link corrispondeva alla pagina corrente veniva stampato in una maniera, se non corrispondeva veniva stampato in un altra. Per aggiungere nuovi link bastava modificare soltanto l'array aggiungendo la pagina più la descrizione (cioè il testo che poi veniva stampato).

Ora non ho in mano il codice. Appena riesco provo a pulirlo dalle mie modifiche (magari trovo anche quello originale).

[samiel]

Se riusciamo a mettere a nanna i bambini provo la soluzione di conraid.
Se invece giberg trova il codice... Data la mia inesperienza di php (sto leggendo
e facendo prove, ma a un livello ancora del tutto elementare), non sono
in grado di arrivare dalla tua descrizione a un codice...

Grazie
M.

[giberg]

Ecco, trovato. L'originale l'avevo trovato nel sito latoserver.it se non sbaglio, però ora non è online perché leggo "in trasferimento". In origine il codice stampava il menù in orizzontale mi pare e il link attivo veniva visualizzato tra parentesi quadre in testo semplice (senza tag <a href=...>).

Io invece ho fatto in modo che visualizzasse una immagine che avevo creato (una piccola freccia) accanto al link attivo. Ecco il codice:

Codice: Seleziona tutto

<?php
$links = array( "/url/della/tua/pagina1.php" => "Pagina1",
      "/url/della/tua/pagina2.php" => "Pagina2",
      "/url/della/tua/pagina3.php" => "Pagine3"
      );

$pagina_corrente = basename($_SERVER["PHP_SELF"]);

// Visualizzazione elementi menu
while (list($url,$desc)=each($links)) {
  if (basename($url)==$pagina_corrente) {
    echo "<img src=\"/url/di/una/immagine.png\" alt=\"\">&nbsp;$desc<br>";
  } else {
    echo "<a href=\"$url\" title=\"$desc\">$desc</a><br>";
  }
}
?>


Poi ovviamente nei tag html ci puoi aggiungere i parametri che desideri. Per l'attributo title in <a href= > qui ho messo direttamente la descrizione ma eventualmente c'è modo di mettere altro.
Ovviamente chi sa programmare php saprà consigliarti anche soluzioni più complesse.

EDIT: ovviamente qui ho messo un'immagine al link attivo ma puoi benissimo metterci quello che vuoi. Come ti dicevo, nel codice originale che avevo trovato il menù appariva in questo modo (immaginando di essere alla Pagina2):

Pagina1 [ Pagina2 ] Pagina3

Nel mio invece appare (metto una emoticon tanto per rendere l'idea dell'immagine):

Pagina1
Pagina2
Pagina3

Poi aiutandoti con un foglio di stile puoi gestire tante altre cose.

[samiel]

Sulla soluzione di conraid:
Allora: ho visto bene, ma non è proprio quello che cercavo.
Io ho creato un file functions.php dove ho messo tra l'altro:

Codice: Seleziona tutto

<?php
function headers () {
    echo
<<<EOD
<div id="header">
<h1>TEATRO IN F<span class="emph">O</span>LLE</h1>
<div id="navbar_wrapper">
<div id="navbar">
<ul>
<li><a id="activelink_nb" href="index.html">Home</a></li>
<li><a href="./comenato.html">Com'&#232; nato</a></li>
<li><a href="./chisiamo.html">Chi siamo</a></li>
<li><a href="./copioni.html">Copioni</a></li>
<li><a href="./immagini.html">Immagini</a></li>
<li><a href="./spettacoli.html">Spettacoli</a></li>
<li><a href="./contattaci.php">Contattaci</a></li>
</ul>
</div><!--navbar-->
</div><!--navbar_wrapper-->
</div><!--header-->
EOD;
};
?>

e quindi nella varie pagine richiamo la funzione con

Codice: Seleziona tutto

<?php
headers ();
?>

Però in questo modo non riesco a far funzionare il tag "activelink".
Non so se mi sono spiegato con chiarezza...

M.

[samiel]

Forse ho capito (qualcosa solo, però...)
C'era un errore di sintassi credo, perché mi dava:
Parse error: syntax error, unexpected T_ENCAPSED_AND_WHITESPACE, expecting T_STRING or T_VARIABLE or T_NUM_STRING in /var/www/netsons.org/teatroinfolle/functions.php on line 10
ma ho fatto una correzione:
{$_SERVER['PHP_SELF']}
Adesso ho messo così:

Codice: Seleziona tutto

<?php
function headers () {
    echo
<<<EOD
<div id="header">
<h1>TEATRO IN F<span class="emph">O</span>LLE</h1>
<div id="navbar_wrapper">
<div id="navbar">
<ul>
<li><a href="index.php" <?php if (ereg ("index.php",{$_SERVER['PHP_SELF']}))
echo 'id="activelink_nb"';?>Home</a></li>
<li><a href="chisiamo.php" <?php if (ereg ("chisiamo.php",
{$_SERVER['PHP_SELF']})) echo 'id="activelink_nb"';?>Chi siamo</a></li>
<li><a href="comenato.php" <?php if (ereg ("comenato.php",
{$_SERVER['PHP_SELF']})) echo 'id="activelink_nb"';?>Com'&#232; nato</a></li>
<li><a href="copioni.php" <?php if (ereg ("copioni.php",
{$_SERVER['PHP_SELF']})) echo 'id="activelink_nb"';?>Copioni</a></li>
<li><a href="immagini.php" <?php if (ereg ("immagini.php",
{$_SERVER['PHP_SELF']})) echo 'id="activelink_nb"';?>Immagini</a></li>
<li><a href="spettacoli.php" <?php if (ereg ("spettacoli.php",
{$_SERVER['PHP_SELF']})) echo 'id="activelink_nb"';?>Spettacoli</a></li>
<li><a href="contattaci.php" <?php if (ereg ("contattaci.php",
{$_SERVER['PHP_SELF']})) echo 'id="activelink_nb"';?>Contattaci</a></li>
</ul>
</div>
</div>
</div>
EOD;
};
?>

Il menu è corretto, ma dell'effetto voluto nemmeno l'ombra.
Sento che simo vicini alla soluzione ma...

M.

[samiel]

Ho trovato questo articolo che suggerisce una soluzione
leggermente diversa dal punto di vista tecnico:
http://www.alistapart.com/articles/keepingcurrent/
Il mio codice risulterebbe allora così:

Codice: Seleziona tutto

<ul>
<li <?php if ($thisPage=="index") echo " id=\"activelink_nb\""; ?>
<a href="index.php">Home</a></li>
<li <?php if ($thisPage=="chisiamo")echo " id=\"activelink_nb\""; ?>
<a href="chisiamo.php">Com'&#232; nato</a></li>
<li <?php if ($thisPage=="comenato") echo " id=\"activelink_nb\""; ?>
<a href="comenato.php">Com'&#232; nato</a></li>
<li <?php if ($thisPage=="copioni") echo " id=\"activelink_nb\""; ?>
<a href="copioni.php">Copioni</a></li>
</ul>

Mi ha fatto però venire un dubbio:
siccome il mio CSS è così:

Codice: Seleziona tutto

/*stili per la navigazione menu header*/
div#navbar_wrapper {width:100%; height:60px; margin:auto; background-color:black; border-top:double #CECECE; border-bottom:double #CECECE;}
div#navbar ul{list-style:none; margin-top:20px; text-align:center;}
div#navbar ul{list-style:none; margin:0; padding:20px; text-align:center;}
div#navbar li{display:inline; margin:3px;}
div#navbar a{background:#A4A4A4; color:white; margin:0; padding:4px; text-decoration:none;}
div#navbar a:hover{background:#A4A4A4; color:black; text-decoration:underline;}
div#navbar a#activelink_nb{background:white; color:black; font-weight:bold;}

non è che questa sintassi php finisce per far ricadere il tag activelink su li
invece che su a? Questo spiegherebbe perché manca l'effetto.
e Firebug mi dà i vari a in effetti senza l'id "activelink"...

M.

[nuitari]

ahhh la bellezza dei template.
Guardate quel codice e ditemi se è anche solo lontanamente ordinato, organizzato o leggibile. Non parliamo proprio del mantenibile poi...

[samiel]

[quote]ahhh la bellezza dei template.
Guardate quel codice e ditemi se è anche solo lontanamente ordinato, organizzato o leggibile. Non parliamo proprio del mantenibile poi...[quote]
Oltre all'ironia sai produrre un consiglio utile?

M.

[aschenaz]

Questa è la mia versione (molto semplice e comprensiva di accesskey):

Codice: Seleziona tutto

isset($_REQUEST["page"]) ? $page=$_REQUEST["page"] : $page="home";
// menu
$pgs=array("home","news","chi-siamo","gallery","documenti","storia","link","contatti");
$accs=array("h","n","w","g","p","d","s","c");
foreach($pgs as $kp=>$pg) {
   echo "
   <p class=\"menu\"> &nbsp;&middot; ";
   if($page!=$pg) echo "<a href=\"index.php?page=$pg\" accesskey=\"{$accs[$kp]}\" title=\"accesskey {$accs[$kp]}\">";
   echo $pg;
   if($page!=$pg) echo "</a>";
   echo "</p>\n";
}
// al momento giusto, poi...
include_once("$page.php");


Questo è idoneo finché non hai particolari velleità per i titoli delle pagine e va bene lo stesso nome per la voce del menu e per il nome del file. Altrimenti fa' un fischio che ne ho una versione diversa.
Io non uso le liste per i menu e separo con un carattere non linkato (nel caso il &middot;) per ragioni di accessibilità.

La differenza di visualizzazione tra il link attivo e gli altri la ottengo con i css per la classe .menu e per il tag a (magari specificato per la classe .menu).

Poi, se permetti un consiglio, con la tua tecnica di css (abuso IMHO di id) rischi di fare fogli enormi. Meglio usare l'accorpamento delle classi...

[conraid]

Ho trovato questo articolo che suggerisce una soluzione
leggermente diversa dal punto di vista tecnico:
http://www.alistapart.com/articles/keepingcurrent/
Il mio codice risulterebbe allora così:

Codice: Seleziona tutto

<ul>
<li <?php if ($thisPage=="index") echo " id=\"activelink_nb\""; ?>
<a href="index.php">Home</a></li>
<li <?php if ($thisPage=="chisiamo")echo " id=\"activelink_nb\""; ?>
<a href="chisiamo.php">Com'&#232; nato</a></li>
<li <?php if ($thisPage=="comenato") echo " id=\"activelink_nb\""; ?>
<a href="comenato.php">Com'&#232; nato</a></li>
<li <?php if ($thisPage=="copioni") echo " id=\"activelink_nb\""; ?>
<a href="copioni.php">Copioni</a></li>
</ul>

alcune cose
1) Intanto come ti ha detto ninobi usa le classi per queste cose.

2) Questo esempio comporta che in ogni pagina, prima dell'inserimento del menù dai un valore alla variabile $thisPage

Quindi avrai qualcosa come

Codice: Seleziona tutto

<?php
$thisPage = 'copioni';
include 'menu.php'; //o come si chiama il file
?>

3) A LIST APART è uno dei siti di riferimento per tecniche di CSS e XHTML, ma con il PHP meglio lasciar perdere

se non hai variabili da "valorizzare" (scusate non mi veniva il termine esatto) quando fai echo usa l'apice e non le virgolette. Più chiaro e consuma meno risorse. Nel tuo caso non lo noti, ma quando hai migliaia di righe di codice...
quindi

Codice: Seleziona tutto

echo ' id="activelink" '

4) il mio codice funziona senza metterlo in {} solo che all'interno di un codice php non devi richiamare <?php e quando fai quei costrutti devi stare attento, inizializza le variabili prima e dopo dai {$nome_variabile}
Per fare contento nuitari devi trattare la porzione di codice tra

Codice: Seleziona tutto

echo <<<EOD

e

Codice: Seleziona tutto

EOD;

come se fosse un template

Il mio esempio era messo in una porzione di codice html con un richiamo al php
Come ti ho detto le soluzioni sono molte, ed anche la scrittura della stessa soluzione ha molti modi di essere fatta

5) anche il codice di A list Apart è fatto in modo da essere messo in una porzione di codice html e non direttamente in un porzione di codice PHP, stai attento

[puzuma]

Premetto che le soluzioni proposte sono tutte valide e sicuramente troverai tra di esse quella che fa al caso tuo. Scrivo solamente per segnalarti una tecnica semplice e molto usata che potrebbe aiutarti a risolvere problemi come il tuo: quella di usare un unico file php che fa da smistatore per tutte le richieste al sito, chiamiamolo index.php:

Codice: Seleziona tutto

<?php
/* array che elenca le pagine possibili */
$pages = array('home', 'page1', 'page2');

/* setta la pagina di default */
$page = 'home';

/* se la pagina richiesta è valida settala */
if(in_array($_GET['page'], $pages)){
   $page = $_GET['page'];
}

include 'html_index.php';

/ *funzione che produce il menu */
function menu()
{
  global $pages, $page;
  $html_menu = '';
  $html_menu +='<ul>';
  foreach($pages as $p){
    if ($page == $p){
      $html_menu += '<li class="activelink">';
     } else {
      $html_menu += '<li class="link">';
     }
     $html_menu += "<a href="index.php?page=$p">$p</a></li>";
  }
  $html_menu +='</ul>';

  return  $html_menu;
}

/* qui aggiungi altre funzioni di utilita', o meglio le metti tutte in un file che includi */

?>


il file html_index.php che includi sara' quasi tutto html:

Codice: Seleziona tutto

<html>
<head>
<title><?php echo $page %></title>
</head>
<body>

<div id="menu">
<?php echo menu(); ?>
</div>

<div id="content">
<?php include "html_$page.php" ?>
</div>

</body>
</html>


infine metti il blocco centrale della pagina tutto nei vari file "html_home.php", "html_page1.php", ...

i link alle varie pagine risulteranno index.php?page=home, index.php?page=page1, ...

vantaggi:

- pulizia del codice
- coerenza stilistica delle varie pagine
- sicurezza: nessuno esegue script php che non siano quelli che hai deciso tu

svantaggi:

- per fare la stessa cosa hai tre file invece di uno

spero di essere stato abbastanza chiaro (e soprattutto bug free )

[conraid]

spero di essere stato abbastanza chiaro (e soprattutto bug free )

IMHO mai includere un file con un nome preso da una variabile non controllata.

Codice: Seleziona tutto

<html>
<head>
<title><?php echo $page %></title>
</head>
<body>

<div id="menu">
<?php echo menu(); ?>
</div>

<div id="content">
<?php include "html_$page.php" ?>
</div>

</body>
</html>

A parte il %> non c'è nessun controllo su $page

Io metterei almeno di non poter essere eseguita questa pagina se non tramite include o require