Lorem Ipsum

Avete presente Google quando visualizzate in HTML una pagina PDF risultato di una ricerca, che vi fa vedere evidenziate le parole chiave che avete scelto? Beh, si può fare abbastanza velocemente in PHP!

Per farlo si possono usare le funzioni ob_start() e ob_end_flush() che permettono di bufferizzare l’output generato tra di esse e di passarlo ad una funzione di callback prima di visualizzarlo. Nella funzione di callback si può usare allora eregi_replace() per sostituire le parti di testo che ci interessano con la stessa parte evidenziata.

Ecco il codice:

// funzione che sostituisce il contenuto del buffer
function callback($buffer) {
global $cerca;
// sostituisce tutto quello che non è in un tag con la stessa cosa evidenziata in CSS
if($cerca) return (eregi_replace("(>[^<]*)($cerca)([^>]*<)", "\\1<span class=\"highlighted\">\\2</span>\\3", $buffer));
return $buffer;
}

if($cerca) ob_start("callback"); // inizia il buffer
print "Il mio contenuto";
if($cerca) ob_end_flush(); // termina il buffer

Fatto! L’espressione regolare è case insensitive (eregi_replace() invece di ereg_replace()) e corrisponde a tutto quello che sta fuori di <>, non sostituendo quindi parole chiave ad esempio all’interno di url nei tag <a>.

Basterà impostare una classe nel CSS che evidenzi ad esempio in giallo:

.highlighted {
background-color: yellow;
}

Per creare un feed RSS è sufficiente avere una tabella di notizie, eventi etc con i seguenti dati:

• titolo
• descrizione
• link

Per farlo possiamo usare la comoda classe feedcreator, da scaricare qui.

Il codice della nostra pagina di creazione feed sarà questo:

<?

include("feedcreator.class.php");
$rss = new UniversalFeedCreator();
$rss->useCached();
$rss->title = "Feed di htmlblog.info"; // titolo del feed
$rss->description = "Tutto quello che vi serve sapere sui feed in PHP"; // descrizione
$rss->link = "http://www.htmlblog.info"; // link del sito
$rss->syndicationURL = "http://www.tremcards.it/".$PHP_SELF; // link del file RSS

$image = new FeedImage();
$image->title = "logo htmlblog.info"; // logo
$image->url = "http://www.htmlblog.info/images/logo.jpg"; // file del logo
$image->link = "http://www.htmlblog.info"; // link a cui vogliamo che punti
$image->description = "Feed fornito da www.tremcards.it. Clicca sull'immagine per visitare il sito.";
$rss->image = $image;

$query="SELECT * from notizie ORDER BY data DESC";

$res = mysql_query($query);
while ($data = mysql_fetch_object($res)) {
$item = new FeedItem();
$item->title = stripslashes($data->titolo); // titolo della notizia
$item->link = "http://www.htmlblog.info/news".$data->IDnotizia.".html"; // link alla
// singola notizia
$item->description = $data->notizia; // breve descrizione
$item->date = $data->data; // data di pubblicazione
$item->source = "http://www.htmlblog.info"; // url di origine della notizia
$item->author = "Staff di htmlblog.info"; // autore

$rss->addItem($item);
}

$rss->saveFeed("RSS1.0", "rss/feednews.xml");
?>

Fatto! L’unica cosa da ricordarsi è di creare la directory rss/ e dargli i permessi di lettura.

Per leggere i nomi dei file in una directory Unix si può usare il comodo comando:

$a = glob("nome_dir/*");

che restituisce un array con le path di tutti i file della directory (esclusi quelli nascosti)

Per fare il preload delle immagini rollover, evitando quello “stacco” quando si caricano i rollover per la prima volta, si possono usare i CSS:

a { background-image: url('immaginehover.gif'); }

a:link, a:visited { background-image: url('immagine.gif'); }

a:hover { background-image: url('immaginehover.gif'); }

In questo modo, per tutti i tipi di link viene caricata l’immagine “immaginehover.gif”, ma per i link normali (e per quelli visitati) viene mostrata “immagine.gif” (quella senza l’hover). A questo punto il browser avrà caricato tutte le immagini dell’hover la prima volta che avrete aperto la pagina, e quindi quando andrete sul link con il mouse non dovrà caricare alcuna immagine.

Avrete notato che, da qualche tempo, in cima ai risultati di Google ci sono alcune voci con accanto una mappa. E’ possibile inserire la propria attività su questa mappa gratuitamente, seguendo alcune semplici istruzioni:

• andare su https://www.google.com/local/add/ e registrarsi o fare login con un account Google.
• inserire i dati richiesti
• aspettare una lettera di conferma via posta cartacea
• inserire il codice di attivazione ricevuto nella richiesta

I dati richiesti sono, oltre a quelli ovvi relativi all’indirizzo, al telefono ed all’email, anche informazioni sulle modalità di pagamento accettate, gli orari di apertura e la tipologia di attività. Preparatevi a delle domande abbastanza dettagliate; è infatti possibile inserire anche delle parole chiave relative all’attività specifica: ad esempio, per un ristorante si richiedono informazioni sulla cucina, sui menu, sui prezzi etc. Infine, è possibile inserire anche fino a 10 immagini (di massimo 1MB) per descrivere visivamente la propria attività.

Il codice di conferma cartaceo permette di assicurarsi che le informazioni indicate siano corrette, ma dal punto di vista dei gestori richiede un po’ di tempo per poter attivare il servizio (la lettera viene garantita entro 28 giorni dalla richiesta).

Le favicon sono quelle icone che appaiono accanto all’URL del sito sul browser, come icona dei preferiti in Explorer o nelle schede di Firefox e Safari.

Si tratta semplicemente di immagini con un massimo di 16×16 pixel salvate in formato .ico di Windows. Questo formato permette di includere in un singolo file più versioni della stessa immagine; se insieme all’immagine 16×16 se ne fornisce una 32×32, quest’ultima potrà essere usata come icona per il desktop. Gimp (http://www.gimp.org) , il più completo programma di elaborazione di immagino libero, permette di salvare in formato .ico, e può quindi essere usato per creare le favicon.

Per poter usare la favicon all’interno di una pagina Web è sufficiente chiamare i file favicon.ico e metterlo nella directory principale del sito. Se si vogliono usare icone diverse per diverse parti del sito, si può richiamare il nome dell’icona nell’<head> del documento, con questo codice:

<link rel="shortcut icon" href="http://www.sito.it/percorso/favicon.ico" type="image/x-icon" />
<link rel="icon" href="http://www.sito.it/percorso/favicon.ico" type="image/x-icon" />

Anche per quanto riguarda le immagini è bene utilizzare codice CSS per modificarne l’aspetto. In particolare, ecco le direttive CSS che corrispondono ai vari attributi, deprecati e ancora validi, del tag <img />:

width e height

Per indicare l’altezza e la larghezza dell’immagine, che in HTML venivano indicate con <img height="50" width="50" />, si usano le istruzioni CSS width: 50px; e height: 50px;

allineamento verticale (valign)

Per l’allineamento verticale si usa la proprietà vertical-align, che indica l’allineamento dell’immagine relativamente alla linea che essa occupa. I valori possibili per questa proprietà sono: top, text-top, bottom, text-bottom, middle, sub, super, baseline (il default), oltre ad un valore numerico o ad una percentuale.
In particolare vediamo l’allineamento della seconda immagine (quella piccola) rispetto alla prima, che ha allineamento verticale “middle”:

vertical-align: top:

vertical-align: text-top:

vertical-align: bottom:

vertical-align: text-bottom:

vertical-align: middle:

vertical-align: sub:

vertical-align: super:

vertical-align: baseline:

allineamento orizzontale (align)

Di default le immagini in HTML sono elementi inline, cioè fanno parte del normale flusso del testo. Ecco come si replicano con i CSS i valori dell’attributo deprecato align usati per l’allineamento orizzontale:

align=left diventa float: left;

align=right diventa float: right;

spazio orizzontale e verticale

Gli attributi vspace e hspace venivano usati per lasciare dello spazio tra l’immagine e il testo che la circondava. In CSS lo stesso effetto può essere creato usando un margine per l’immagine; cosa che non era possibile con hspace e vspace, in questo modo si possono inserire anche dei margini asimmetrici (es. a destra ma non a sinistra)

border

I bordi delle immagini compaiono inaspettatamente quando queste vengono usate come link. Per evitare di visualizzarli, invece di usare l’attributo HTML border, si può usare la proprietà CSS border, impostandola a 0 (border: 0;)

In PHP è possibile includere il codice da interpretare con i tag

<?php  ... ?>

o, se in php.ini è configurata la direttiva short_open_tags, anche con

<? ... ?>

Il problema diventa a questo punto che nello standard XHTML è possibile inserire in testa ad una pagina XHTML una dichiarazione XML di questo tipo:

<?xml version="1.0" encoding="UTF-8"?>

Se infatti sono attivi gli short_tags, questa istruzione viene interpretata come codice PHP e provoca un errore.

Se sul vostro server Web ancora sono presenti pagine scritte con gli short tags, può essere sufficiente ad evitare questo problema indicare nel file di configurazione del dominio virtuale la direttiva

php_admin_flag short_open_tag Off

In questo modo per il dominio virtuale in esame non sarà attiva la possibilità di usare gli short tags, e l’errore viene evitato.

Attenzione, però: proprio a causa del comportamento sopra descritto, gli short tags sono deprecati in PHP e non dovrebbero essere più usati.

Nel codice HTML è possibile inserire dei collegamenti a file esterni che contengano delle immagini. Per farlo si usa il tag <img />, che visualizza un’immagine all’interno del flusso degli elementi.

La sintassi minimale del tag <img /> è:

<img src="URL" alt="testo alternativo" />

URL è l’indirizzo del file dell’immagine, mentre il testo alternativo descrive il contenuto dell’immagine per i browser che non possono visualizzarla. Attenzione, l’indicazione di un attributo alt è obbligatoria, ma non lo è il suo contenuto! Anzi, se l’immagine è puramente di abbellimento (es. una riga divisoria, …) non si dovrebbe inserire un testo nell’attributo, per non confondere chi legge la pagina con un browser non visuale.

Le immagini dovrebbero essere in uno dei tre formati compatibili con il web: GIF, JPEG e PNG, e per i file dovrebbero essere usate le estensioni corrette .gif, .jpg o .jpeg e .png, in minuscolo, per essere sicuri che il server web invii il Content-type corretto (image/gif, image/jpeg e image/png).

Di default, le immagini vengono visualizzate come elementi inline e quindi non introducono spazi o interruzioni di linea. L’immagine viene allineata con la sua linea di fondo alla linea di base del testo, ma l’allineamento può essere modificato usando i fogli di stile. Esistono molti attributi del tag <img /> (align, border, hspace, vspace) che venivano usati per modificarne l’aspetto, ma che sono deprecati.

Non sono invece deprecati gli attributi width e height: indicarli velocizza la visualizzazione della pagina. E’ sempre preferito, però, usare i corrispondenti attributi CSS. Se si utilizzano dei valori di larghezza ed altezza diversi da quelli originali dell’immagine, è il browser che si occupa di ridimensionarla per farla entrare nelle dimensioni indicate. Questo però porta a una diminuzione della qualità dell’immagine, e dovrebbe essere evitato.

Vediamo ora un esempio di script per inserire dei dati in un database. Dividiamo lo script in quattro file:

• header.php contiene il codice PHP che sarà comune anche a tutte le altre pagine del sito (dovremo farne altre, per visualizzare quali sono i dati già inseriti!). Nel nostro caso conterrà la connessione al database
• header.inc contiene l’header HTML comune a tutte le pagine
• footer.inc contiene il footer HTML comune a tutte le pagine
• inserisci_zona.php è il codice della nostra pagina

Inseriremo, per semplicità, un campo in una tabella fatta così:

CREATE TABLE `zona` (
`ID` int(10) unsigned NOT NULL auto_increment,
`Nome` text,
KEY `ID` (`ID`)
);

header.php

<?php
// connessione persistente al database; argomenti sono host utente e password
$connessione = mysql_pconnect("localhost", "root", "");

?>

L’header e il footer HTML sono il minimo indispensabile:

header.inc

<html>
<head>
<title>Inserimento zona</title>
</head>
<body>

footer.inc

</body>
</html>

Ed ecco il “vero” script, inserisci_zona.php. Viene usato un metodo comune, che include in uno stesso file la parte di codice che stampa il form e quella che lo elabora. In questo caso, le sezioni da visualizzare o meno dipendono dalla variabile $action, che viene impostata inviando i dati di un form.

<?php

include "header.php"; // include il file per la connessione al db

include "header.inc"; // include il file con l'intestazione HTML// Viene eseguito solo se deve inserire i dati nel database (cliccando "Conferma")

if($_POST[action]=="submit") {

    // inseriamo qui eventuali modifiche da fare ai dati prima di inserirli

$_POST[Nome] = strtolower($_POST[Nome]);     // rende Nome tutto minuscolo

    $_POST[Nome] = ucfirst($_POST[Nome]);         // mette in maiuscolo la prima lettera

    $query="INSERT INTO zona (Nome) VALUES (\"$_POST[Nome]\");";

    $ris_mysql = mysql_query($query);

    // $ris_mysql è zero se c'è un errore

    if($ris_mysql) {

         ?>

        <p>Dati inseriti correttamente nel database.<br/>

        Vuoi inserire un'altra zona?</p><!--'-->

        <p><a href="inserisci_zona.php">Sì</a> <a href="/">No</a></p>

        <?php

        include "footer.inc";

        exit;

        }

    else print "<p>Errore di inserimento nel database!<br/>Contattare l'amministratore

    di sistema.<br/>

    Query: $query</p>"; // MySQL non ha eseguito correttamente la query

}

// Viene eseguito se si è inviata la form (cliccando "Invia")

if($_POST[action]=="check") {

    // Controlli sintattici dei dati inseriti: se c'è un errore $err = 1 e viene

    // stampato il messaggio di errore nel form accanto al campo relativo

    if(!$_POST[Nome]) { $Nome_msg = "Campo obbligatorio"; $err = "1"; }

    else if(is_numeric($_POST[Nome])) { $Nome_msg = "Formato campo errato"; $err = "1"; }

    else $err = 0;

// Se ci sono errori viene stampato il titolo ERRORE e riproposta la form

    // con i dati precompilati

    if($err==1) print "<h2>ERRORE: controllare i campi indicati</h2>";

// altrimenti fa il riepilogo e chiede conferma. Sono due form perché uno ha

    // come azione submit, uno ha azione nulla e quindi riporta alla form precompilata

    else {

        ?>

        <h2>Riepilogo:</h2>

        <p>Nome: <?php print $_POST[Nome];?></p>

        <form method="POST" action="inserisci_zona.php">

        <input type="hidden" name="Nome" value="<?php print $_POST[Nome];?>"/>

        <input type="hidden" name="action" value="submit"/>

        <input type="submit" value="Conferma"/>

        </form>

        <form method="POST" action="inserisci_zona.php">

        <input type="hidden" name="Nome" value="<?php print $_POST[Nome];?>"/>

        <input type="hidden" name="action" value=""/>

        <input type="submit" value="Modifica"/>

        </form>

        <?php

        include "footer.inc";

        exit;

        }

    }

    ?>

<!-- stampa il form, con lo script stesso come action -->

    <form method="POST" action="inserisci_zona.php">

    <!-- il valore della variabile $Nome, che proviene da eventuali precedenti invii del form,

    viene assegnato all''attributo value del tag input e quindi preimposta il valore del campo

    -->

    <p>Nome: <input type="text" size="30" maxlength="30" name="Nome" value="<?php print $_POST[Nome];?>"/> <?php print $Nome_msg;?></p>

    <input type="hidden" name="action" value="check"/>

    <p><input type="submit" value="Invia"/> <input type="reset" value="Svuota"/></p>

    </form>

<?php

    include "footer.inc";    // include il file con il footer HTML

    ?>