Installazione e configurazione di PHP su Apache server web

Il modo più semplice per provare i nostri script PHP, senza effettuare di continuo l'upload al server, è quello di installare un server web locale! Qualche mese fa ho già affrontato l'installazione di un server web, Apache Tomcat. Per usare il server web assieme al linguaggio di scripting PHP occorre installare e configurare il relativo modulo, vediamo come fare (installeremo da capo il server web e il client MySQL).

L'installazione di tutto l'occorrente può avvenire da riga di comando oppure per via grafica (attraverso il gestore di pacchetti). Con il comando:

sudo apt-get install apache2-mpm-prefork libapache2-mod-php5 mysql-server php5-mysql php5-gd

installiamo:

• apache2-mpm-prefork: il server web;
• libapache2-mod-php5: il modulo PHP per Apache2;
• mysql-server: il server MySQL;
• php5-mysql: interfaccia MySQL per PHP;
• php5-gd: modulo GD per PHP5, permette la gestione delle immagini con PHP;

Altre estensioni e moduli PHP hanno generalmente il nome strutturato in questo modo: php5-nome_modulo. Pertanto, con il comando sudo apt-cache search php5- riceviamo una lista di tutti i moduli PHP (quelli presenti nei nostri repository). Al termine dell'installazione ritroveremo nella cartella /etc i file di configurazione che occorre modificare per rettificare l'installazione. La directory /etc/apache2/ raccoglie i file di configurazione del server web. Il file apache2.conf è uno dei file usati dal server per la configurazione dei servizi. Nella prima parte del file è possibile leggere alcune informazione di carattere generale circa l'uso e la struttura dello stesso file. All'interno del file vengono specificate numerose proprietà del server come: la cartella del server web (riga ServerRoot), la proprietà di persistenza per le connessioni (riga KeepAlive) e il numero massimo di connessioni (persistenti) da tenere aperte (riga MaxKeepAliveRequest), la cartella per i file di log (riga ErrorLog) etc.. Vi consiglio di dare uno sguardo a questo file, provate a farlo con il comando: less /opt/apache2/apache2.conf.

Le cartelle mods-available e mods-enabled servono alla gestione dei moduli. La prima contiene i moduli a disposizione del server web, l'altra raccoglie, invece, i link ai moduli attivi. Ogni modulo ha due file: un file con estensione .load utile all'avvio del modulo e un file con estensione .conf utile alla configurazione del modulo. Pertanto, se vogliamo abilitare un modulo aggiuntivo sul server web non ci resta che fare un link simbolico al file .load (e al relativo file di configurazione) nella cartella mods-enabled.

L'esecuzione di script PHP sul server web avviene grazie al modulo php5.load (non dimenticate mai il file di configurazione). Verificate nella cartella mods-enabled la presenza dei collegamenti. Il server web viene avviato, fermato o riavviato con il comando:

sudo /etc/init.d/apache2.2 start|stop|restart

(in alternativa è possibile avviare il server web eseguendo il file binario dalla cartella bin di Apache2). Attenzione, se all'avvio riscontrate un messaggio di warning relativo all'indirizzo locale del server, editate il file apache2.conf aggiungendo la riga: ServerName localhost. In alcuni casi, durante l'avvio, può verificarsi, poi, un errore dovuto ai permessi in scrittura della cartella per i file di log. Se avete letto attentamente le cose che ho scritto finora sapete, allora, in quale file andare a modificare il path. Prestate attenzione, a volte l'errore si verifica per l'assenza della cartella dei file di log! In tal caso è sufficiente crearla laddove essa occorre.

Per testare il modulo PHP scriviamo un semplice documento per la stampa di tutte le informazioni relative al server e al modulo PHP. Aprite un documento di testo e inserite la seguente riga:

salvate il file (con estensione .php) nella DocumentRoot, la cartella con le pagine php dell'applicazione web. Il nome da me usato per la pagina è stato info.php (vi occorrerà fra poco per accedere alla pagina).

Non avete ancora impostato la DocumentRoot? Nessun problema, editate il file /etc/apache2/sites-available/defaul e aggiungere o modificare la riga DocumentRoot facendola puntare alla cartella con le pagine PHP. Fatto?

Riavviamo il server, la pagina precedentemente salvata è adesso accessibile all'indirizzo http://localhost/info.php.

JavaScript: script.aculo.us, effetti derivati

Dopo aver visto gli effetti principali implementati dalla libreria aculous ci occuperemo adesso degli effetti derivati. Per ciascun effetto fornirò il nome della funzione, una breve descrizione, alcune possibili opzioni e un link che punta a un documento web con un esempio.

Effect.Appear

Fa comparire un elemento, la cui visibilità, attraverso un foglio di stile in linea o comunque presente nel documento stesso (quindi non esterno), è stata impostata su display: none. La sintassi è la seguente:

Effect.Appear('id_of_element');

Alcune possibili opzioni:

• duration: durata (in secondi) dell'effetto;
• from: imposta, in un intervallo che va da 0.0 ad 1.0 la proprietà di opacità iniziale;
• to: imposta, in un intervallo che va da 0.0 ad 1.0 la proprietà di opacità finale;

Qui trovate un esempio;

Effect.BlindDown

Questo effetto simula la discesa di una finestra, o meglio box dell'elemento, tenuta nascosta con la proprietà display: none. Anche in questo caso il foglio di stile che descrive l'elemento non deve essere esterno. La sintassi è la seguente:

Effect.BlindDown('id_of_element');

Alcune possibili opzioni:

• scaleX: valore logico che indica se scalare l'elemento orizzontalmente. Il valore passato di default alla funzione è false;
• scaleY: valore logico che indica se scalare l'elemento verticalmente. Il valore passato di default alla funzione è true;
• scaleContent: valore logico che indica se scalare o meno il contenuto. Il valore passato di default alla funzione è true;
• scaleMode: indica se scalare il box contenitore (valore box) oppure il contenuto (valore contents);
• scaleFrom: indica, in un intervallo che va da 0.0 a 100.0, con che percentuale iniziale deve essere scalato l'elemento coinvolto nella transizione;
• scaleTo: indica, in un intervallo che va da 0.0 a 100.0, con che percentuale finale deve essere scalato l'elemento coinvolto nella transizione;
• duration: come per altri effetti, indica la durata (in secondi) della transizione;

Qui trovate un esempio.

Effect.BlindUp

Questo effetto viene solitamente usato con quello precedente poiché realizza la salita di un box. E' ideale per realizzare menu a comparsa. La sintassi è la seguente:

Effect.BlindUp('id_of_element');

Le opzioni viste in precedenza, quindi, valgono anche per questa funzione. Qui trovate un esempio.

Effect.DropOut

Questo effetto realizza la transazione del box e una scomparsa graduale dello stesso. La sintassi è la seguente:

Effect.DropOut('id_of_element');

Qui trovate una pagina di esempio.

Effect.Fade

Applica all'elemento l'effetto fade, una dissolvenza lenta e graduale dello stesso. La sintassi è la seguente:

Effect.Fade('id_of_element');

Alcune possibili opzioni:

• from: valore (variabile da 0.0 a 1.0) per indicare il grado di opacità iniziale;
• to: valore (variabile da 0.0 a 1.0) per indicare il grado di opacità finale;

Qui trovate una pagina di esempio.

Effect.Fold

Riduce l'elemento diminuendone prima l'altezza poi la larghezza, fino a farlo scomparire. La sintassi è la seguente:

Effect.Fold('id_of_element');

Qui trovate una pagina di esempio.

Effect.Grow

Ottimo per l'ingresso di nuovi elementi, questo effetto aumenta le dimensioni di un elemento fino alla dimensione specificata. La sintassi è la seguente:

Effect.Grow('id_of_element');

Qui trovate una pagina di esempio.

Effect.Puff

Dissolve man mano un elemento, ingrandendolo fino a farlo scomparire (come in una nuvola di fumo). La sintassi è la seguente:

Effect.Puff('id_of_element');

Alcune possibili opzioni:

• duration: la durata (in secondi) della transizione;
• from: valore (compreso fra 0.0 ed 1.0) per la trasparenza iniziale;
• to: valore (compreso fra 0.0 ed 1.0) per trasparenza finale;

Qui trovate una pagina di esempio.

Effect.Pulsate

Fa pulsare l'elemento per un numero definito di volte (di default, 5 volte). La sintassi è la seguente:

Effect.Pulsate('id_of_element');

Alcune possibili opzioni:

• duration: la durata (in secondi) dell'effetto;
• from: valore compreso fra 0.0 ed 1.0 per specificare la proprietà di trasparenza da usare durante l'esecuzione dell'effetto;
• pulses: numero di pulsazioni da eseguire per tutta la durata dell'effetto;

Qui trovate una pagina di esempio.

Effect.Shake

Scuote rapidamente l'elemento, prima a sinistra poi a destra. La sintassi è la seguente:

Effect.Shake('id_of_element');

Qui trovate una pagina di esempio.

Effect.Shrink

Riduce l'elemento a partire dall'angolo in ato a sinistra, fino a farlo scomparire. La sintassi è la seguente:

Effect.Shrink('id_of_element');

Qui trovate una pagina di esempio.

Effect.SlideDown

Simula la discesa dell'elemento, come una finestra che scorre. La sintassi è la seguente:

Effect.SlideDown('id_of_element);

Alcune possibili opzioni:

• scaleX: scala orizzontalmente, durante l'effetto, l'elemento. Il valore passato di default alla funzione è false;
• scaleY: scala verticalmente, durante l'effetto, l'elemento;
• scaleContent: scala il contenuto del box, il valore passato di default alla funzione è true;
• scaleFromCenter: inizia a scalare l'elemento a partire dal centro, il valore passato di default alla funzione è false;
• scaleMode: può essere box (valore usato di default) o contents;
• scaleFrom: indica (con un valore che va da 0.0 a 100.0) la percentuale di ingrandimento iniziale dell'elemento;
• scaleTo: indica (con un valore che va da 0.0 a 100.0) la percentuale di ingrandimento finale dell'elemento;
• duration: indica la durata (in secondi) dell'elemento;

Qui trovate una pagina di esempio.

Effect.SlideUp

E' l'effetto complementare a SlideDown e simula, pertanto, la salita dell'elemento. E' ideale per realizzare menu a comparsa. La sintassi è la seguente:

Effect.SlideUp('id_of_element');

Le opzioni viste per SlideDown sono valide anche per questa funzione. Qui trovate una pagina di esempio.

Effect.Squish

Realizza la scomparsa dell'elemento comprimendolo nell'angolo in alto a sinistra, fino a farlo scomparire. La sintassi è la seguente:

Effect.Squish('id_of_elemenet');

Qui trovate una pagina di esempio.

Effect.SwitchOff

Realizza la scomparsa dell'elemento simulando lo spegnimento di un televisore (vecchio). La sintassi è la seguente:

Effect.SwitchOff('id_of_element');

Qui trovate una pagina di esempio.

Effect.toggle

Consente di alternare con facilità gli elementi con animazione. La sintassi da usare è la seguente:

Effect.toggle('id_of_element',['appear'|'slide'|'blind'],[options])

JavaScript: script.aculo.us, effetti principali

Gli effetti Effect.Morph, Effect.Move, Effect.Opacity, Effect.Parallel, Effect.Scale e Effect.Highlight costituiscono il cuore della libreria aculous, per il modulo effects.js. Di seguito propongo la sintassi prevista da ciascuno degli effetti indicati.

Effect.Morph

Questo effetto permette di modificare le proprietà CSS di un elemento, generando quindi una transizione che porta l'elemento dallo stato iniziale (con precise proprietà CSS) a quello finale (con nuove proprietà CSS). La funzione può essere invocata seguendo la tipica sintassi di Prototype:

$('id_elemento').morph('background: white; color: gray');

oppure con:

new Effect.Morph('id_elemento',{style});

dove style è la stringa con le nuove proprietà CSS. Qui trovate un esempio. L'effetto funziona a patto di non avere le proprietà di stile in un foglio esterno!

Effect.Move

Questo effetto muove un elemento spostandone le coordinate dell'angolo superiore sinistro. Le coordinate possono essere assolute (mode: 'absolute') oppure relative (mode: 'relative') all'oggetto contenitore. La sintassi della funzione prevede come parametri le coordinate verso cui muovere l'elemento e l'opzione che specifica come esse vanno interpretate. L'opzione relative è usata di default.

new Effect.Move('warning',{x: 100, y:0, mode:'relative'})

Qui trovate un esempio.

Effect.Opacity

Questo effetto modifica la trasparenza dell'elemento (va indicato l'id dell'elemento alla funzione, come primo parametro). La proprietà viene specificata attraverso un parametro variabile nell'intervallo [0.0;1.0]. Il valore iniziale da applicare all'elemento è specificato con l'opzione from. Il valore finale, invece, con l'opzione to. L'effetto realizza, dunque, la transizione della proprietà di trasparenza dal valore from al valore to. Con l'opzione duration può essere specificata, eventualmente, la durata (in secondi) dell'effetto:

new Effect.Opacity('warning',{duration: 1, from:1.0, to: 0.5})

Qui trovate un esempio.

Effect.Scale

Questo effetto modifica le proprietà width ed height dell'elemento. Il primo parametro della funzione è come sempre l'id dell'elemento, il secondo parametro corrisponde al valore percentuale da usare come incremento per le proprietà dette all'inizio. La funzione accetta altre opzioni, fornite alla stessa attraverso un unica stringa: scaleX indica (con true, valore di default) che l'effetto va applicato alla proprietà width; scaleY indica (con true, valore di default) che l'effetto va applicato alla proprietà height; scaleContent è il valore usato di default (quindi true) dalla funzione per applicare il valore percentuale (il secondo parametro della funzione) a entrambe le proprietà; scaleFromCenter, se abilitato con true, dice di ingrandire l'elemento mantenendone la posizione nel documento; scaleMode permette di specificare con le stringhe originalHeight e originalWidth i nuovi valori dell'elemento.

new Effect.Scale('warning',150,{scaleY: false})

Qui trovate un esempio.

Effect.Highlight

Questo effetto applica un colore di background all'elemento effettuando la transizione da un valore iniziale (opzione startcolor) a un valore finale (opzione endcolor). Con l'opzione duration, come già visto per altri effetti, può essere specificata la durata in secondi dell'effetto. L'opzione restorecolor imposta un nuovo colore all'elemento, dopo la transizione dell'effetto. Il colore da assegnare all'elemento dopo la transizione viene solitamente cercato dalla funzione nell'omonima proprietà dell'elemento contenitore. Tale ricerca va a buon fine solo se il colore è stato descritto attraverso una terna di valori rgb!

new Effect.Highlight('warning',{startcolor:'#64c6eb', endcolor:'#ddffee', duration:0.3})

Qui trovate un esempio.

Effect.Parallel

Questa funzione permette di applicare più effetti in contemporanea, anche a più elementi! Il primo argomento della funzione è infatti un array di effetti, come quelli visti finora. Gli effetti vanno elencati nell'array e separati fra di loro con un virgola:

new Effect.Parallel( [ new Effect.Move('warning',{x: 200, y:0, mode: 'relative'}), new Effect.Opacity('warning',{duration: 1.0, from:1.0, to: 0.5}) ] )

Qui trovate un esempio.