ErrorPages
Categoria: Temi e templates
Autore: Defkon1
Data: 11/4/2006
Sommario: Stanchi delle scarne pagine d'errore fornite dal vostro web server?
E' giunto il momento di integrarle nel vostro Xoops utilizzando il tema da voi scelto!
Nel mio caso il dominio corrisponde a ermes, ovvero il nome del mio sistema locale utilizzato, per cui i miei link saranno qualcosa del tipo http://ermes/errorpages/400.php.
E' giunto il momento di integrarle nel vostro Xoops utilizzando il tema da voi scelto!
0. Introduzione
Nel presente tutorial vedremo come personalizzare le pagine d'errore del nostro server inserendo la grafica del nostro portale e integrando il tutto in maniera trasparente.
Per gli esempi ho utilizzato una installazione di test di Xoops 2.0.13.2 con tema blue_lagoon.
E' inoltre necessario ricordare che la tecnica di personalizzazione che useremo si basa sulle funzionalità offerte dal server Apache, e non potrà essere usata su NT (a meno di diverse modifiche).
Cos'è una pagina d'errore?
E' semplicemente una pagina (spesso HTML) su cui venite indirizzati dal server web qualora si verifichi una richiesta errata o una generica situazione d'errore, come ad esempio la richiesta di una pagina inesistente o un crash del server.
Se provate a digitare sul vostro portale l'indirizzo http://www.tuosito.com/paginainesistente.php, verrete indirizzati sulla relativa pagina d'errore (codice errore: 404).
Cos'è una pagina d'errore?
E' semplicemente una pagina (spesso HTML) su cui venite indirizzati dal server web qualora si verifichi una richiesta errata o una generica situazione d'errore, come ad esempio la richiesta di una pagina inesistente o un crash del server.
Se provate a digitare sul vostro portale l'indirizzo http://www.tuosito.com/paginainesistente.php, verrete indirizzati sulla relativa pagina d'errore (codice errore: 404).
Normalmente, le pagine d'errore fornite di base dai server web sono veramente scarne:
Da qui l'esigenza per un portale serio di personalizzare le ErrorPages.
1. Il file .htaccess
Se nel vostro sito avete installato il modulo Protector o se avete un minimo di dimestichezza con le tematiche di Sicurezza, avrete già incontrato questo utilissimo file di configurazione di Apache; in questo caso lo utilizzeremo per sovrascrivere le informazioni relative al redirect del server web in caso di errore.
Aprite pertanto il file .htaccess della vostra root, è inserite il seguente codice:
ErrorDocument 400 http://www.tuosito.com/errorpages/400.php
ErrorDocument 401 http://www.tuosito.com/errorpages/401.php
ErrorDocument 403 http://www.tuosito.com/errorpages/403.php
ErrorDocument 404 http://www.tuosito.com/errorpages/404.php
ErrorDocument 500 http://www.tuosito.com/errorpages/500.php
ErrorDocument 401 http://www.tuosito.com/errorpages/401.php
ErrorDocument 403 http://www.tuosito.com/errorpages/403.php
ErrorDocument 404 http://www.tuosito.com/errorpages/404.php
ErrorDocument 500 http://www.tuosito.com/errorpages/500.php
Nel mio caso il dominio corrisponde a ermes, ovvero il nome del mio sistema locale utilizzato, per cui i miei link saranno qualcosa del tipo http://ermes/errorpages/400.php.
2. Le pagine d'errore
Le pagine di errore che andremo a creare coprono le seguenti casistiche:
Errore 400 – Richiesta errata (Bad Request)
Errore 401 – Necessaria autorizzazione (Authorization required)
Errore 403 – Accesso negato (Forbidden)
Errore 404 – Pagina non trovata (Not found)
Errore 500 – Errore interno del server (Internal server error)
Errore 400 – Richiesta errata (Bad Request)
Errore 401 – Necessaria autorizzazione (Authorization required)
Errore 403 – Accesso negato (Forbidden)
Errore 404 – Pagina non trovata (Not found)
Errore 500 – Errore interno del server (Internal server error)
Create la cartella /errorpages e create uno dei file php visti sopra, ad esempio il file 404.php.
Apritelo nel vostro editor e aggiungete il codice standard Xoops:
<?php
include("../mainfile.php");
include(XOOPS_ROOT_PATH."/header.php");
include("../mainfile.php");
include(XOOPS_ROOT_PATH."/header.php");
include(XOOPS_ROOT_PATH."/footer.php");
?>
A questo punto vi si aprono due strade davanti: la via dell'HTML, semplice e rozza, e la via del CSS, leggermente più complicata ma indubbiamente più pulita gratificante.
Se avete optato per la prima, basterà racchiudere il codice per l'header e il codice per il footer in due blocchi e inserirvi nel mezzo il codice HTML della vostra pagina d'errore, ad esempio:
<?php
include("../mainfile.php");
include(XOOPS_ROOT_PATH."/header.php");
?>
404: pagina non trovata
Siamo spiacenti, ma la pagina cercata è insesistente o è stata rimossa.
include("../mainfile.php");
include(XOOPS_ROOT_PATH."/header.php");
?>
404: pagina non trovata
Siamo spiacenti, ma la pagina cercata è insesistente o è stata rimossa.
include(XOOPS_ROOT_PATH."/footer.php");
?>
Salvate e avete concluso.
Se invece volete intraprendere la via del CSS, rendendo il tutto graficamente migliore e più semplice da gestire, la vostra pagina d'errore dovrà contenere qualcosa del genere:
Se invece volete intraprendere la via del CSS, rendendo il tutto graficamente migliore e più semplice da gestire, la vostra pagina d'errore dovrà contenere qualcosa del genere:
<?php
include("../mainfile.php");
include(XOOPS_ROOT_PATH."/header.php");
echo "<div class="blockErrorTitle">404: Pagina non trovata</div>";
echo "<br style="clear:both">";
echo "<div class="blockErrorContent">Siamo spiacenti, ma la pagina cercata è inesistente o è stata rimossa.</div>";
echo "<a href="history.go(-1)">Torna indietro</a></div>";
include(XOOPS_ROOT_PATH."/footer.php");
?>
include("../mainfile.php");
include(XOOPS_ROOT_PATH."/header.php");
echo "<div class="blockErrorTitle">404: Pagina non trovata</div>";
echo "<br style="clear:both">";
echo "<div class="blockErrorContent">Siamo spiacenti, ma la pagina cercata è inesistente o è stata rimossa.</div>";
echo "<a href="history.go(-1)">Torna indietro</a></div>";
include(XOOPS_ROOT_PATH."/footer.php");
?>
ATTENZIONE: per problemi di parsing automatico del testo ho dovuto eliminare la \ davanti ai doppi apici all'interno delle stringhe echo. Voi ricordatevi di metterle, altrimenti l'editor impazzirà.
Inoltre ho dovuto eliminare il tag javascript : davanti a history.go(-1) per lo stesso motivo.
Stavolta il lavoro non è già finito. Come potete vedere abbiamo deciso di utilizzare due classi div personalizzate, blockErrorTitle e blockErrorContent che dobbiamo definire all'interno del file style.css del nostro tema.
Aprite tale file e in coda inserite le due classi personalizzate:
Inoltre ho dovuto eliminare il tag javascript : davanti a history.go(-1) per lo stesso motivo.
Stavolta il lavoro non è già finito. Come potete vedere abbiamo deciso di utilizzare due classi div personalizzate, blockErrorTitle e blockErrorContent che dobbiamo definire all'interno del file style.css del nostro tema.
Aprite tale file e in coda inserite le due classi personalizzate:
div .blockErrorTitle{
background-color: #ffcccc;
text-align:center;
border: 1px dashed #ff0000;
margin: 10px;
font-family: Verdana, Courier New, Courier, Monospace;
padding: 10px;
font-weight: bold;
font-size: x-large;
float: left;
}
div .blockErrorContent{
text-align: justify;
margin: 10px;
font-family: Verdana, Courier New, Courier, Monospace;
padding: 10px;
}
background-color: #ffcccc;
text-align:center;
border: 1px dashed #ff0000;
margin: 10px;
font-family: Verdana, Courier New, Courier, Monospace;
padding: 10px;
font-weight: bold;
font-size: x-large;
float: left;
}
div .blockErrorContent{
text-align: justify;
margin: 10px;
font-family: Verdana, Courier New, Courier, Monospace;
padding: 10px;
}
Salvate tutto e il gioco è fatto.
Uno dei vantaggi dell'utilizzo della tecnica dei CSS è quella di poter modificare completamente l'aspetto della pagina, semplicemente giocando con le varie proprietà specificate nelle due classi personalizzate. In questo tutorial ad esempio abbiamo optato per un titolo ben visibile con sfondo rosso chiaro e bordo tratteggiato e un testo semplice, ma le possibili variazioni sul tema sono infite.
Uno dei vantaggi dell'utilizzo della tecnica dei CSS è quella di poter modificare completamente l'aspetto della pagina, semplicemente giocando con le varie proprietà specificate nelle due classi personalizzate. In questo tutorial ad esempio abbiamo optato per un titolo ben visibile con sfondo rosso chiaro e bordo tratteggiato e un testo semplice, ma le possibili variazioni sul tema sono infite.
Vista la prima, fare tutte le altre pagine è semplice, basterà cambiare il titolo e il testo della pagina. Ad esempio il file 403.php sarà:
include("../mainfile.php");
include(XOOPS_ROOT_PATH."/header.php");
echo "echo "<div class="blockErrorTitle">403: Accesso negato</div>";
echo "<br style="clear:both">";
echo "echo "<div class="blockErrorContent">Siamo spiacenti, ma l'accesso alla pagina richiesta è proibito.</div>";
echo "<a href="history.go(-1)">Torna indietro</a></div>";
include(XOOPS_ROOT_PATH."/footer.php");
?>
include(XOOPS_ROOT_PATH."/header.php");
echo "echo "<div class="blockErrorTitle">403: Accesso negato</div>";
echo "<br style="clear:both">";
echo "echo "<div class="blockErrorContent">Siamo spiacenti, ma l'accesso alla pagina richiesta è proibito.</div>";
echo "<a href="history.go(-1)">Torna indietro</a></div>";
include(XOOPS_ROOT_PATH."/footer.php");
?>
Una volta terminate le vostre pagine, vediamo il risultato. Digitate nuovamente http://www.tuosito.com/paginainesistente.php, e, se avete fatto tutto correttamente, dovreste vedere la pagina d'errore 404 correttamente integrata nella grafica del vostro portale.
Tutorial Avanzati V1
URL: http://www.xoopsitalia.org/modules/article/view.article.php/c8/37