mercoledì 27 giugno 2012

Pagina indietro con JavaScript

Vediamo come realizzare un semplice pulsante « indietro con JavaScript

Spesso può capitare di volere inserire in una nostra pagina il pulsante « indietro. Può essere utile ad esempio in una schermata dove controlliamo i dati inseriti in un form, e qualora i dati siano errati, con il pulsante «  indietro si può rimandare il nostro utente alla pagina di provenienza, per controllare eventuali errori o dati mancanti.

Vediamo il codice

<a href="" onClick="javascript:history.back();return false">« indietro</a>

Spieghiamo

Per controllare lo storico della navigazione dell'utente, utilizziamo history.back() di JavaScript.
Possiamo ottenere lo stesso risultato anche utilizzando history.go(-1)

Vediamo come

<a href="" onClick="javascript:history.go(-1);return false">« indietro</a>

Spieghiamo

Utilizzando history.go(-1) l'utente verrà rimandato indietro di una pagina, rispetto allo storico della sua navigazione.
Volendo posso impostare un numero diverso di "passi indietro".

Vediamo come

<a href="" onClick="javascript:history.go(-3);return false">« indietro</a>

Spieghiamo


In questo caso, cliccando « indietro l'utente farà 3 passi indietro sullo storico della sua navigazione.

Nota bene

Se inseriamo il link « indietro su una pagina B che normalmente l'utente raggiunge da un'altra pagina A del nostro sito, ma per un caso fortuito la pagina B può essere raggiunta anche da un sito esterno C, chiaramente il pulsante « indietro invierà l'utente, al sito esterno C dal quale proviene.

martedì 26 giugno 2012

Trovare e gestire URL con PHP

Vediamo come trovare e gestire l'URL della pagina con PHP

La gestione dell'URL con PHP è molto semplice e sicura, essendo realizzata lato server.
PHP offre diverse soluzioni per individuare l'URL intero o una parte di esso.

Vediamo un esempio

Il tuo URL attuale è:
http://free-html-scripts.blogspot.it/2012/06/trovare-e-gestire-url-con-php.html

Vediamo il codice

<!DOCTYPE HTML>
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>URL CON PHP</title>
 </head>

<body>

 <?php 
  $url_attuale = 'http://'.$_SERVER["HTTP_HOST"].$_SERVER["REQUEST_URI"];
  echo '<p>Il tuo URL attuale è: <span style="color:red">';
  echo $url_attuale;
  echo'</span></p>'; 
 ?>

</body>
</html>

Spieghiamo

Ho impostato una variabile $url_attuale (vedi riga 11 dell'esempio riportato sopra) e grazie a $_SERVER["HTTP_HOST"] trovo il nome del dominio, poi concateno con il punto $_SERVER["REQUEST_URI"] che mi fornisce la parte di URL restante.

Il risultato è l'URL completo.
Da adesso in poi potremo utilizzare la variabile $url_attuale tutte le volte che vorremo all'interno della pagina PHP.

Nota bene

L'estensione della pagina deve essere necessariamente .php esempio: example.php.

Trovare URL pagina con JavaScript

Vediamo come conoscere e utilizzare l'URL della nostra pagina attuale con JavaScript.

Trovare l'url della pagina con JavaScript è molto semplice, basta utilizzare self.location.href.

Vediamo come

<!DOCTYPE HTML>
<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>URL con JavaScript</title>
	
		<script>
		function mio_url(){
			document.getElementById('scriviqui').innerHTML="Il tuo URL è: <span style='color:red'>" + self.location.href + "</span>";
		}
		</script>
	
	</head>
	<body>
	
		<a href="#" onClick="mio_url()">Stampa a video il mio URL</a>
		
		<p id="scriviqui"></p>
	
	</body>
</html>

Spieghiamo

In questo semplice esempio, creo la funzione mio_url(), con la quale individuo l'elemento che nella pagina ha id=scriviqui e ci stampo dentro l'url della mia pagina, trovato con self.location.href. Da notare che per stampare l'URL ho utilizzato innerHTML (vedi riga 9 dell'esempio riportato sopra).

Volendo posso utilizzare l'URL così recuperato, per stampare un alert, un piccolo messaggio a video con il risultato.

Vediamo come

<!DOCTYPE HTML>
<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>URL con JavaScript</title>
	
		<script>
		function mio_url(){
			alert("Il tuo URL è:\n" + self.location.href);
		}
		</script>
	
	</head>
	<body>
	
		<a href="#" onClick="mio_url()">Visualizza alert con il mio URL</a>
	
	</body>
</html>

Spieghiamo

In questo caso stamperemo l'URL della nostra pagina attuale in un messaggio alert (vedi riga 9 dell'esempio riportato sopra).

domenica 24 giugno 2012

Overlay Banner con chiusura a tempo

Vediamo come realizzare un overlay, ovvero un livello sopra i contenuti, con chiusura a tempo.

Esempio


Con un Overlay possiamo facilmente e con poche righe di codice, visualizzare un div contenente testo e foto, o solitamente un banner pubblicitario, che scompare dopo un tempo prestabilito.

Vediamo il codice Java Script

<script type="text/javascript">
function timeout(){
 setTimeout(function(){
  document.getElementById('banner').style.display="none"
 }, 5000);
}
</script>

Un po' di CSS

<style type="text/css">
body {
 margin:0 auto;
}
#content {
 position: absolute;
 height: 70%;
 width: 70%;
 left:15%;
 top:15%;
 text-align:center;
 background: #EAEAEA;
}
#banner {
 position: absolute;
 z-index: 1;
 height: 100%;
 width: 100%;
 background-color: rgba(0, 0, 0, 0.8);
 left:0;
 top:0;
}
#banner img{
 position: absolute;
 left: -234px;
 margin: 50% 0 0 50%;
 top: -30px;
}
</style>

E in fine i contenuti

<body onLoad="timeout()">

<div id="content"><p>Contenuto</p></div>

 <div id="banner">
        <img name="banner" src="" width="468" height="60" alt="Il banner si chiuderà in 5 sec..." style="background-color: #FFCC00">
    </div>
Niente paura a fine guida ho riportato il codice completo dell'esempio.

Spieghiamo

Sfruttiamo SetTimeout del JavaScript, indicando il nome del <div> che contiene il nostro banner, (vedi riga 4 del codice JavaScript).
Il valore che ho preimpostato, 5000, (vedi riga 5 del codice JavaScript) corrisponde a 5 secondi e può essere modificato a piacimento.
A seguire, c'è un po' di CSS che serve a impostare una velina semitrasparente sopra i contenuti, così da far capire all'utente che "sotto c'è qualcosa".
Molto probabilmente il codice CSS andrà ottimizzato in base al sito esistente.

E in fine, un paio di <div>, uno per i contenuti della pagina (vedi riga 3 del codice HTML), l'altro per contenere il banner o quello che vogliamo (vedi riga 5 del codice HTML).

Nota bene

È importante non sottovalutare la riga 1 del codice HTML, dove ho richiamato la funzione JavaScript timeout().
Quella riga richiama e avvia la funzione JavaScript, ed è fondamentale per il funzionamento dell' Overlay.

Tutto il codice dell'Overlay

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>OVERLAY</title>

<script type="text/javascript">
function timeout(){
 setTimeout(function(){
  document.getElementById('banner').style.display="none"
 }, 5000);
}
</script>

<style type="text/css">
body {
 margin:0 auto;
}
#content {
 position: absolute;
 height: 70%;
 width: 70%;
 left:15%;
 top:15%;
 text-align:center;
 background: #EAEAEA;
}
#banner {
 position: absolute;
 z-index: 1;
 height: 100%;
 width: 100%;
 background-color: rgba(0, 0, 0, 0.8);
 left:0;
 top:0;
}
#banner img{
 position: absolute;
 left: -234px;
 margin: 50% 0 0 50%;
 top: -30px;
}
</style>
</head>

<body onLoad="timeout()">

<div id="content"><p>Contenuto</p></div>

 <div id="banner">
        <img name="banner" src="" width="468" height="60" alt="Il banner si chiuderà in 5 sec..." style="background-color: #FFCC00">
    </div>


</body>
</html>

venerdì 22 giugno 2012

Aprire link in una finestra personalizzata


Vediamo come fare per aprire il nostro link in un pop up con caratteristiche personalizzate.

Premetto che personalmente non amo molto le finestre personalizzate, perché ho l'impressione di forzare la volontà dell'utente, nell'aprire una finestra "come dico io".

Ma effettivamente, in alcuni casi, può risultare interessante offrire all'utente un pop up che, per la tipologia di informazione fornita, può risultare comodo se visualizzato estemporaneamente alla pagina. Vediamo perciò come fare per aprire con un link, una piccola finestra di dimensioni personalizzate.

Per aprire la nostra finestra personalizzata chiediamo aiuto a JavaScript che grazie a window.open e a pochi parametri, ci permette di personalizzare ogni aspetto della nuova finestra.

Esempio

Il codice di base è semplice

<a href="#" onClick"javascript:window.open('http://www.example.com', '', 'width=600,height=400,menubar,toolbar,resizable');">Example.com</a>

Struttura

window.open(url,nome,specifiche,replace)

Spieghiamo

  • Con window.open chiediamo al JavaScript di aprire una nuova finestra;
  • Con url, specifichiamo l'url della pagina da raggiungere;
  • Sarebbe possibile aprire una nuova finestra vuota, semplicemente omettendo l'url;
  • Con nome possiamo specificare l'attributo di destinazione o il nome della finestra.
    I valori possibili sono: 
    • _blank (l'url viene aperto in una nuova finestra, impostazione predefinita);
    • _parent  (l'url viene aperto nel frame principale);
    • _self  (l'url sostituisce  la pagina corrente);
    • _top  (l'url sostituisce ogni set di frame presente);
    • nome (si può impostare il nome della finestra);
  • Con specifiche possiamo impostare una serie di valori separati da virgola.
    I valori possibili sono:
    • channelmode=yes/no  oppure 1/0  predefinito no
    • directories=yes/no  oppure 1/0   predefinito yes
    • fullscreen= yes/no  oppure 1/0  predefinito no
    • height=valore in pixels  predefinito minimo 100
    • left=valore in pixels  predefinito 0
    • location= yes/no  oppure 1/0  predefinito yes
    • menubar= yes/no  oppure 1/0  predefinito yes
    • resizable=yes/no  oppure 1/0  predefinito yes
    • scrollbars= yes/no  oppure 1/0  predefinito yes
    • status= yes/no  oppure 1/0  predefinito yes
    • titlebar= yes/no  oppure 1/0  predefinito yes
    • toolbar= yes/no  oppure 1/0  predefinito yes
    • top=valore in pixels  predefinito 0
    • width=valore in pixels  predefinito minimo 100
  • Con replace si gestisce l'elemento nella cronologia.
    I valori possibili sono:
    • true  (l'url si inserisce in cronologia);
    • false (l'url crea una nuova storia cronologica);

Spieghiamo

In questo esempio linchiamo la pagina http://www.example.com, lasciando vuoto il secondo parametro obbligatorio che quindi di default sarà _blank, poi impostiamo la larghezza della pagina a 600px, l'altezza a 400px, impostiamo il menù della pagina, che senza un valore settato risulta yes di default, lo stesso per la toolbar e per resizabile che hanno sempre yes di default.

Volendo si può scorporare la funzione, se ad esempio si deve utilizzare più volte nella pagina lo stesso link, questa soluzione può essere sicuramente più versatile.

Vediamo un esempio con JavaScript in head


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Nuova Finestra Example.com</title>
<script type="text/javascript">
 function nuova_finestra()
 {
  window.open('http://www.example.com', '', 'left=100,top=100,width=600,height=400,menubar,toolbar,resizable')
 }
</script>
</head>

 <body>
  <a href="#" onclick="nuova_finestra()">Example.com</a>
  <input type="button" value="Button Nuova Finestra" onclick="nuova_finestra()" />
   
 </body>
 
</html>

Spieghiamo

Ho scorportato la funzione JavaScript e l'ho posta in <head> tra i tag <script>.
Tutte le volte che dalla pagina vorrò richiamare la funzione nuova_finestra(), righe nell'esempio da 6 a 11, basterà inserire nel link o nell'onclick nuova_finestra() come riportato nell'esempio alle righe 15 e 16, rispettivamente un link e un button.
Sia il link che il button producono lo stesso risultato.

mercoledì 20 giugno 2012

Tabella che scrolla con intestazione fissa

Vediamo come realizzare una tabella che scrolla in verticale, con la testatina che rimane fissa

Esempio

test co1 1 col 2 col 3 col4
aaa 124 23555 346 4575
bbb 51 984 98456 984
ccc 651 651 65 5
ddd 51 23434 5456 1651
eee 18 835 51 651
fff 1 6513535 833 289
ggg 19 8135 854 81
hhh 51 651 33456 21
iii 15 1535 1456456 55
lll 651 650651 06501 560
mmm 51 984 984 984
nnn 651 6513 65 5
ooo 51 651 54545 1651
ppp 18 84545 51 651
qqq 1 651 8545
rrr 19 81 8 81
sss 51 651 3 21
ttt 15 15 1 55
uuu 651 650651 06501 560
vvv 51 984 984 984
zzz 651 651 65 5

Può capitare di dover pubblicare i dati impaginati in una tabella, e a causa delle molte righe, o a causa della impaginazione del sito, si voglia lasciare fissa la testatina della tabella e scrollare i dati. Con questo esempio, realizzato utilizzando poche righe di codice CSS, vediamo come fare.

Vediamo il codice CSS

<style type="text/css">
/*il div che contiene lo scroll*/
.article {
 height: 355px;
 width: 462px;
 overflow-y:auto;
 overflow-x:hidden;
}
/*la tabella*/
.article table {
 border-collapse:collapse;
}
/*tutte le righe*/
.article table tr {
 height:30px;
}
/*tutte le celle*/
.article table tr td {
 border:1px solid #EBD13F;
 color: #C60;
 background: #F3F4D0;
 text-align:center;
}
/*la colonna di sinistra*/
.article table tr th {
 border: 1px solid #039;
 color:#069;
 background: #D7EBEE;
}
/*la testata riga fissa*/
.article table .testata {
 position: fixed;
}
/*le celle della riga fissa*/
.article table .colonna {
 background-color: green;
 color: white;
 border:1px solid #0C0;
}
/*correggo la prima riga della tabella*/
.article table .primariga {
 padding-top:30px;
}
</style>

E il codice HTML della tabella

<div class="article">
 <table cellspacing="0" cellpadding="0">
  <tr class="testata">
   <th width="52" class="colonna" scope="col">test</th>
   <th width="62" class="colonna" scope="col">co1 1</th>
   <th width="122" class="colonna" scope="col">col 2</th>
   <th width="102" class="colonna" scope="col">col 3</th>
   <th width="102" class="colonna" scope="col">col4</th>
  </tr>
  <tr class="primariga">
   <th width="52" class="primariga" scope="row">aaa
   <td width="62" class="primariga">124</td>
   <td width="122" class="primariga">23555</td>
   <td width="102" class="primariga">346</td>
   <td width="102" class="primariga">4575</td>
  </tr>
  <tr>
   <th scope="row">bbb</th>
   <td>51</td>
   <td>984</td>
   <td>98456</td>
   <td>984</td>
  </tr>
  <tr>
   <th scope="row">ccc</th>
   <td>651</td>
   <td>651</td>
   <td>65</td>
   <td>5</td>
  </tr>
  <tr>
   <th scope="row">ddd</th>
   <td>51</td>
   <td>23434</td>
   <td>5456</td>
   <td>1651</td>
  </tr>
  <tr>
   <th scope="row">eee</th>
   <td>18</td>
   <td>835</td>
   <td>51</td>
   <td>651</td>
  </tr>
  <tr>
   <th scope="row">fff</th>
   <td>1</td>
   <td>6513535</td>
   <td>833</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <th scope="row">ggg</th>
   <td>19</td>
   <td>8135</td>
   <td>854</td>
   <td>81</td>
  </tr>
  <tr>
   <th scope="row">hhh</th>
   <td>51</td>
   <td>651</td>
   <td>33456</td>
   <td>21</td>
  </tr>
  <tr>
   <th scope="row">iii</th>
   <td>15</td>
   <td>1535</td>
   <td>1456456</td>
   <td>55</td>
  </tr>
  <tr>
   <th scope="row">lll</th>
   <td>651</td>
   <td>650651</td>
   <td>06501</td>
   <td>560</td>
  </tr>
  <tr>
   <th scope="row">mmm</th>
   <td>51</td>
   <td>984</td>
   <td>984</td>
   <td>984</td>
  </tr>
  <tr>
   <th scope="row">nnn</th>
   <td>651</td>
   <td>6513</td>
   <td>65</td>
   <td>5</td>
  </tr>
  <tr>
   <th scope="row">ooo</th>
   <td>51</td>
   <td>651</td>
   <td>54545</td>
   <td>1651</td>
  </tr>
  <tr>
   <th scope="row">ppp</th>
   <td>18</td>
   <td>84545</td>
   <td>51</td>
   <td>651</td>
  </tr>
  <tr>
   <th scope="row">qqq</th>
   <td>1</td>
   <td>651</td>
   <td>8545</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <th scope="row">rrr</th>
   <td>19</td>
   <td>81</td>
   <td>8</td>
   <td>81</td>
  </tr>
  <tr>
   <th scope="row">sss</th>
   <td>51</td>
   <td>651</td>
   <td>3</td>
   <td>21</td>
  </tr>
  <tr>
   <th scope="row">ttt</th>
   <td>15</td>
   <td>15</td>
   <td>1</td>
   <td>55</td>
  </tr>
  <tr>
   <th scope="row">uuu</th>
   <td>651</td>
   <td>650651</td>
   <td>06501</td>
   <td>560</td>
  </tr>
  <tr>
   <th scope="row">vvv</th>
   <td>51</td>
   <td>984</td>
   <td>984</td>
   <td>984</td>
  </tr>
  <tr>
   <th scope="row">zzz</th>
   <td>651</td>
   <td>651</td>
   <td>65</td>
   <td>5</td>
  </tr>
 </table>
</div>

Spieghiamo

Come prima cosa notiamo nel codice HTML della tabella, la presenza di un div con class article.
Ho utilizzato questo div per realizzare lo scroll della tabella, vedi riga n. 6 del codice CSS.

Alla riga n. 31 del CSS imposto la riga che rimarrà fissa anche scrollando. Quella che nel codice HTML si trova alla riga di codice n. 3.

Ho dovuto impostare una correzione sulla prima riga di dati della tabella, per evitare che finisca sotto la riga di intestazione fissa. Per fare questo ho utilizzato una classe primariga, che nel CSS si trova alla riga di codice n. 41.

Nota bene

Questa soluzione non è particolarmente adatta, se i dati della tabella provengono da un database e possono variari di molto in larghezza, in modo incontrollato. Potrebbe succedere che il contenuto di una cella sia più lungo del valore width da noi impostato inizialmente, e quindi si verifichi un disallineamento delle celle.

giovedì 7 giugno 2012

Download file con password

Vediamo come realizzare un elenco di link per il download, protetti da password

Esempio


Download file tramite password

Inserisci la password e avvia il download del tuo file

Capita spesso di avere documenti più o meno riservati, che si desidera condividere solo con una cerchia ristretta di persone e non con tutti gli utenti del nostro sito.
In questa guida vediamo come fare per visualizzare un elenco di documenti pronti al download, ma che possono essere scaricati solo dopo avere inserito una password (che avremo comunicato solo a chi deve scaricare il nostro file).

Vedremo anche come creare e proteggere con password una serie di link interni o esterni al nostro sito.

Come sempre anticipo il link dello script completo (si tratta di uno ZIP con tutti i file dell'esempio) per i frettolosi che non vogliono leggere tutta la guida. Il link è ripetuto anche in fondo, per chi invece vuole seguire la guida passo passo.

Per spiegare meglio lo script PHP ho suddiviso il codice in varie sezioni, così da poterle individuare più semplicemente.

Vediamo prima di tutto se il nostro server supporta PHP

Se siamo sicuri che il nostro server supporti PHP possiamo saltare questo passaggio e andare avanti al punto successivo.
Altrimenti è molto semplice verificare la presenza di PHP sul nostro server, basta seguire questi semplici passi.

Analizziamo lo script

Lo script è composto da 6 sezioni di codice:
  1. nel primo blocco di codice definiamo le nostre preferenze (url del sito), messaggi ecc...;
  2. nel secondo blocco di codice definiamo dove si trova il file da scaricare, la password da inserire e come si chiama il file;
  3. il blocco successivo si occupa di verificare la password e avviare il download;
  4. poi come sempre ho inserito un po di CSS per rendere il tutto gradevole (anche l'occhio vuole la sua parte) questo codice può essere modificato o cancellato completamente;
  5. due righe di codice per visualizzare i messaggi che lo script rende;
  6. finalmente i link che visualizzerà l'utente finale;

Prima sezione di codice le preferenze

//imposto messaggio di password corretta
$ok = '<p class="green">Ok password corretta inizio il download tra 5 secondi...</p>';

// imposto messaggio di errore
$errore = '<p class="red">Attenzione password errata, prova nuovamente!</p>
<p><a href="mailto:info@example.com?subject=Richiesta nuova password">Richiedi nuova password</a></p>';

// imposto messaggio di benvenuto
$plain = '<p class="plain">Inserisci la password e avvia il download del tuo file</p>';

// imposto l'url dove si trova questo file
// se ad esempio si vuole installare lo script nella cartella download
// $site sarà: http://www.example.com/download
$site = 'http://www.example.com';

Seconda sezione di codice i file e le password

// inserisco il nome, la password e la cartella del file 1
if(isset($_POST["submit1"])){
 $dir  = "dir-dwnload-1234";     /*nome cartella dove si trova il file da scaricare*/
 $file = "file1.zip";            /*nome file da scaricare*/
 $pswd = "pippo";                /*password per questo file*/
}

// inserisco il nome, la password e la cartella del file 2
else if(isset($_POST["submit2"])){
 $dir  = "dir-dwnload-1234";     /*nome cartella dove si trova il file da scaricare*/
 $file = "file2.pdf";            /*nome file da scaricare*/
 $pswd = "pluto";                /*password per questo file*/
}

// inserisco il nome, la password e la cartella del file 3
else if(isset($_POST["submit3"])){
 $dir  = "";                     /*nome cartella dove si trova il file da scaricare*/
 $file = "";                     /*nome file da scaricare*/
 $pswd = "paperino";             /*password per questo file*/
 $site = 'http://www.google.it'; /*l'url del link da raggiungere con la password*/
}

Tersa sezione di codice controllo e download

// controllo 
if($_POST["_pswd"] != $pswd){
 $msg = $errore;
}
if(($_POST["_pswd"] == $pswd)&&($pswd != "nopsw")){
 $msg = $ok;
 // avvio il download
 header("Refresh: 5; URL=".$site."/".$dir."/".$file."");
}

Quarta sezione il codice CSS

<style type="text/css">
* {
 padding:3px;
 margin:3px;
}
body {
 font: 1em "Trebuchet MS", Arial, Helvetica, sans-serif;
 color: #333;
 width:500px;
}
ul, li, p {
 -webkit-border-radius: 5px;
 border-radius: 5px;
}
ul {
 background: #039;
}
li {
 background: #D7F2F4;
 list-style:none;
}
label {
 font-size: 0.8em;
 color: #009;
}
.red {
 color: #FFF;
 background: #F00;
}
.green {
 color: #FFF;
 background: #0C0;
}
.plain {
 color: #FFF;
 background: #CCC;
}
</style>

Quinta sezione di codice stampa dei messaggi

// gestiamo i messaggi proventienti da controllo 
if((isset($msg))&&($pswd != "nopsw")){
 echo $msg; 
}else{
 echo $plain;
}

Sesta sezione di codice i link ai file

<ul>
  <li>
    <form name="form" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
      <label>Download <strong class="re">file1.zip</strong></label>
      <input type="password" name="_pswd">
      <input type="submit" name="submit1" value="download">
    </form>
  </li>
  <li>
    <form name="form" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
      <label>Download <strong>file2.pdf</strong></label>
      <input type="password" name="_pswd">
      <input type="submit" name="submit2" value="download">
    </form>
  </li>
  <li>
    <form name="form" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
      <label>Apri la <strong>Home Page di Google</strong></label>
      <input type="password" name="_pswd">
      <input type="submit" name="submit3" value="download">
    </form>
  </li>
</ul>

Spieghiamo

Nella prima parte è fondamentale impostare la variabile $site con l'url della cartella contenente tutti i file (sia PHP che le cartelle contenenti i file da scaricare). Se ad esempio si vuole installare lo script e i file da scaricare, nella cartella download-file (quella che si trova nel file ZIP dell'esempio) l'url sarà: http://www.example.com/download-file;

Nel secondo blocco di codice si impostano: il nome della cartella dove si trova il file da scaricare, il nome del file e la password. Da notare che per inserire un link protetto da password basta inserire la password e aggiungere la riga di codice con l'url del link esempio: $site = 'http://www.google.it'; (vedi riga 20 del secondo esempio di codice). Gli altri valori vanno lasciati vuoti;

Il terzo blocco di codice controlla la password. Qui non va modificato nulla;

Quarto blocco è composto da codice CSS per rendere più gradevole la parte visiva. Questo codice si può modificare a proprio piacimento o direttamente cancellare, senza compromettere il funzionamento dello script;

Anche il quinto blocco di codice non va modificato. Serve a visualizzare i messaggi dello script.

Nel sesto blocco di codice c'è l'HTML per visualizzare i vari link.

Se dobbiamo aggiungere altri link, basta duplicare le righe contrassegnate nel secondo esempio (dalla 8 alla 13) e le righe del sesto esempio (dalla 9 alla 15). Nei due blocchi di codice va impostato lo stesso valore submitX che dovrà essere corrispondente e univoco, per collegare il link dell'HTML con l'if del PHP.

Nota bene

Questo script è utile per celare l'effettivo link del tuo download. Tuttavia per file molto importanti, potrebbe essere interessante aumentare la sicurezza dei download, proteggendo la cartella in altro modo, con sistemi che utilizzano protezioni lato server direttamente sulle cartelle e sui file stessi.

Per questo motivo ti consiglio di utilizzarlo con cautela, a tuo rischio e pericolo, e soprattutto su file di relativa importanza.

Download

Da questo link è possibile scaricare l'intero script

mercoledì 6 giugno 2012

Inviare messaggi dal sito

Vediamo come realizzare un form per inviare messaggi dal sito

Esempio


Scrivi un messaggio

Tutti i campi sono obbligatori

Con questo Script in PHP sarà possibile inviare messaggi dal sito, direttamente sulla nostra casella di posta. Lo Script controlla che tutti i campi siano compilati, prepara la mail e la spedisce su una casella di posta predefinita. Unico requisito richiesto, è che il nostro Server supporti PHP.
Se vuoi scaricare subito il file completo senza leggere tutta la guida puoi trovarlo qui.

Vediamo se il nostro server supporta PHP

Se siamo sicuri che il nostro Server supporti PHP possiamo saltare questo passaggio e andare avanti al punto successivo.
Altrimenti è molto semplice verificare la presenza di PHP sul nostro server, basta seguire questi semplici passi.

Analizziamo lo script per inviare mail dal sito:

Lo script che ho preparato appositamente per questa guida, è suddiviso in 4 parti:
  1. una sezione per impostare le preferenze del nostro FORM MAIL: la casella email che riceverà i messaggi dal sito, l'oggetto del messaggio, il testo dei vari messaggi resi dal form ecc...;
  2. lo script che invia fisicamente la mail alla nostra casella di posta;
  3. un po' di codice CSS per dare un aspetto gradevole al form e ai messaggi di errore o consenso che il form rende;
  4. il codice HTML del form che servirà all'utente per compilare il messaggio da inviare tramite il sito;

Impostiamo le preferenze dello Script

/** MODIFICA CON I TUOI DATI ******************************************/

//imposta il tuo indirizzo email
 $miamail = "miaemail@example.com";
// imposta l'oggetto della mail che riceverai 
 $oggettomail = "Messaggio dal sito";
// imposta un messaggio per email inviata correttamente
 $inviato = '<p class="green">Ok e-mail inviata correttamente.</p>';
// imposta un messaggio per errore invio
 $errore = '<p class="red">Attenzione: non &egrave; stato possibile inviare l&acute;email...</p>';
// imposta un messaggio per tutti i campi obbligatori
 $tutticampi = '<p class="red">Attenzione: tutti i campi sono obbligatori...</p>';
// etichetta per input Nome e Cognome
 $_nomecognome = "Nome e Cognome";
// etichetta per input email
 $_email = "Email";
// etichetta per textarea messaggio
 $_messaggio = "Messaggio";
 
/* FINE MODIFICA CON I TUOI DATI **************************************/ 

Vediamo lo script che prepara e invia la mail

//recupero i dati dal form per l'invio
 $nome      = $_POST['nome'];
 $email     = $_POST['email'];
 $messaggio = $_POST['messaggio'];

//vediamo se l'utente sta componendo il form o ha cliccato su scrivi
if($_POST['submit'] == 'scrivi'){
 
//controllo tutti i dati 
//se aggiungi altri campi obbligatori al form devi aggiungerli anche qui nell'if
  if(($nome != $_nomecognome) && ($email != $_email) && !empty($messaggio)){ 
      
//imposto il mittente della mail  
  $headers .= 'From: "'.$nome.'" <'.$email.'>';
//spedisco la mail
  $mail = mail($miamail, $oggettomail, $messaggio, $headers);
      
//controllo il corretto invio dei dati
  if($mail){
       
//stampo un messaggio dopo l'invio dei dati
  $msg = $inviato;

  }else{
//stampo un messaggio in caso di errore
  $msg = $errore;
      
//fine se tutti i campi sono compilati
  }
 }else{
//stampo un messaggio se mancano i campi obbligatori
  $msg = $tutticampi;
 }
}

Un po' di CSS per rendere gradevole il Form

<style type="text/css">
body {
 font: 1em "Trebuchet MS", Arial, Helvetica, sans-serif;
}
input, textarea {
 font: 1em "Trebuchet MS", Arial, Helvetica, sans-serif;
 color: #900;
 border: 1px solid #CCC;
 background-color: #FFFEF0;
 display:block;
}
input[type="submit"]:hover {
 background-color: #0C0;
 color:#FFF;
}
label {
 font-size: 0.7em;
 color: #CCC;
}
.red {
 color:#FFF;
 background-color: #C00;
 width:375px;
 padding:2px;
}
.green {
 color:#FFF;
 background-color: #0C0;
 width:375px;
 padding:2px;
}
</style>

Vediamo l'HTML del form per compilare il messaggio

<h2>Scrivi un messaggio</h2>
<p><em>Tutti i campi sono obbligatori</em></p>
<form name="form-mail" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
 <input type="text" name="nome" value="<?php echo $_nomecognome; ?>" onblur="if(this.value=='') this.value='<?php echo $_nomecognome; ?>';" onfocus="if(this.value=='<?php echo $_nomecognome; ?>') this.value='';" />
 <input type="text" name="email"  value="<?php echo $_email; ?>" onblur="if(this.value=='') this.value='<?php echo $_email; ?>';" onfocus="if(this.value=='<?php echo $_email; ?>') this.value='';"/>
 <label><?php echo $_messaggio; ?></label>
 <textarea name="messaggio" cols="50" rows="7"></textarea>
 <input type="submit" name="submit" value="scrivi" />
</form>

Spieghiamo

Nelle prime righe del codice trovo le variabili che una volta impostate fanno funzionare lo script secondo le nostre impostazioni.
Nel personalizzare le variabili, è importante rispettare la sintassi, senza cancellare gli apici che aprono e chiudono i valori impostati. Nell'esempio che segue, la parte in rosso è il contenuto della variabile che va modificato a proprio piacimento, la parte in grigio non va modificata:
$miamail = "miaemail@example.com";

Nella seconda parte del codice c'è il motore dello script, la parte cioè che confeziona il messaggio e lo spedisce alla nostra casella di posta. In questa sezione di codice non c'è nulla da modificare. Il codice va lasciato così com'è.

La terza parte di codice è  composta da un po' di CSS che ho inserito per rendere gradevole la visualizzazione del form. Questo codice può essere modificato, ampliato o anche cancellato completamente.

La quarta e ultima parte di codice è l'HTML che serve per marcare il FORM.

Download

Seguendo questo link puoi scaricare il file completo e funzionante.

Verificare se il server supporta PHP

Spesso ci capita di volere installare piccoli script per il nostro sito internet, ma la prima condizione che ci viene richiesta per installare lo script, è che il nostro server supporti PHP...

Vediamo come verificare se il nostro server supporta PHP

Normalmente se il nostro server è su piattaforma UNIX / LINUX il supporto a PHP è nativo. A volte è anche possibile usufruire di PHP su alcuni server in ambiente WINDOWS che lo hanno installato.

Per verificare la presenza di PHP sul nostro server, basta seguire questi semplici passi:
  1. creiamo un file vuoto
  2. lo chiamiamo phpinfo.php
  3. nel file scriviamo questa semplice riga: <?php phpinfo(); ?>
  4. carichiamo il file sul nostro server via FTP
  5. navighiamo il file con un browser esempio: http://www.example.com/phpinfo.php
  6. se compaiono le specifiche del nostro server OK altrimenti non abbiamo PHP

Downlaod

Se vuoi, da questo link puoi scaricare il file phpinfo.php già pronto per l'upload sul tuo server.