Php e html
Html è anche esso un linguaggio di programmazione adatto a visualizzare le pagine mediante Internet Explorer, che è il programma di navigazione in grado di visualizzare le pagine su Internet. I due linguaggi possono coesistere sulla stessa pagina ed essere eseguiti indipendentemente l'uno dall'altro. Solo che per rendere chiaro ad Internet Explorer in che ordine vanno eseguiti i comandi di ciascun linguaggio occorre mettere sia all'inizio del programma sia alla fine del programma un segno o riferimento, detto anche tag, per indicare il punto preciso in cui inizia il programma e il punto in cui finisce.
Ricordiamo che il segno di inizio per il php è:
<?php
Mentre il segno di fine programma è:
?>
Per l'html il segno di inizio è:
<html>
Mentre il segno di fine programma è:
</html>
L'html è importante in quanto ci consente di abbellire la nostra pagina, cioè ci consente di mettere uno sfondo, di usare i diversi colori per scrivere il testo, di cambiare le dimensioni dei caratteri, ecc.
Proviamo ora a mettere uno sfondo al nostro primo programma. Per fare questo mettiamo due segni; dapprima un:
<body>
per indicare l'inizio del corpo della nostra pagina a cui applicare sia lo sfondo sia successivamente gli altri comandi della pagina html; alla fine mettiamo il segno di termine del corpo della pagina e cioè:
</body>
Per cui la nostra pagina in html diventa:
<html> inizio linguaggio html
<body> inizio corpo della pagina
.....
</body> fine corpo della pagina
</html> fine linguaggio html
Questi quattro comandi dell'html li mettiamo, per abitudine, sempre; due all'inizio del nostro programma e due alla fine. Per disegnare lo sfondo della pagina ci serve una immagine da usare come sfondo, per esempio: file di sfondo di nome: sfondo2.jpg. Questa immagine va salvata nella stessa cartella in cui stiamo scrivendo il programma, cioè la cartella test.
Se ora modifichiamo la riga del programma in cui vi era <body> e la scriviamo:
<body background="sfondo2.jpg">
otteniamo che la nostra pagina appare con uno sfondo colorato e non con uno sfondo bianco. Il programma diventa:
<html> inizio linguaggio html;
<body background="sfondo2.jpg"> inizio corpo della pagina e metto lo sfondo;
.....
</body> fine corpo della pagina;
</html> fine linguaggio html;
E il nostro programma in php?
Il nostro programma che faceva la somma di due numeri lo mettiamo all'interno delle istruzioni in html e quindi otteniamo:
<html> inizio linguaggio html;
<body background="sfondo2.jpg"> inizio corpo della pagina e metto lo sfondo;
<?php
print ("Programma per fare la somma di due numeri. ");
$numero1=8;
$numero2=2;
$somma=$numero1+$numero2;
$frase1="Se sommo due numeri, di cui il primo è: ";
$frase2=" ed il secondo è: ";
$frase3=", ottengo che la loro somma è:";
print("$frase1 $numero1 $frase2 $numero2 $frase3 $somma .");
?>
</body> fine corpo della pagina;
</html> fine linguaggio html;
Salviamo il programma col nome programma3.php ed eseguiamolo; otteniamo:
cioè la nostra pagina ha uno sfondo colorato.
Comando <br>
un altro comando html che ci serve è quello che consente di andare a capo alla riga successiva, cioè il comando di Invio.
E' il comando:
<br>
che vuol dire appunto salta una riga e vai a inizio della riga successiva; noi lo usiamo per rendere la pagina meglio leggibile all'utente. Se modifichiamo la nostra prima print nella seguente:
print ("Programma per fare la somma di due numeri. <br>");
otteniamo il salto di riga.
Cosa abbiamo fatto? Abbiamo inserito nel programma php una istruzione che ci consente non solo di stampare le parole:
Programma per fare la somma di due numeri.
Ma anche di scrivere la parola <br>, in quanto essa si trova tra le virgolette della istruzione print;per cui la istruzione che arriva ad Internet Explorer è la seguente:
Programma per fare la somma di due numeri. <br>
Tuttavia il comando <br> non viene visto dall'utente, in quanto esso viene interpretato da Internet Explorer come un salto di riga e non come testo da scrivere; e l'utente, quindi, vede il salto di riga e non scritto: <br>.
Ingresso e memorizzazione dati nelle variabili.
Il nostro programma per la somma di due numeri ha altri difetti, ma noi man mano li correggeremo fino a farne un programma professionale. Il difetto a cui ci riferiamo è quello che i numeri da sommare sono solo quei due cioè 80 e 20, e l'utente non ha la possibilità di cambiare i due numeri da sommare; dobbiamo, quindi vedere un modo per poter usare qualsiasi numero.
Vediamo ora come una casella di testo sia in grado di memorizzare dei numeri. La casella di testo è:
cioè uno spazio in cui l'utente può scrivere qualcosa o lettere o numeri; successivamente il numero scritto noi lo memorizziamo nella nostra variabile, che abbiamo chiamato $numero1; mettiamo una seconda casella di testo per il secondo numero da memorizzare nella variabile $numero2; e poi faremo la somma dei due numeri come al solito.
I moduli in html
Per ottenere questo ci serviamo dell'html. In html per poter memorizzare dei numeri forniti dall'utente occorre inserire dapprima nella nostra pagina un modulo, cioè uno spazio in cui l'utente può scrivere delle cose; poi nel modulo inseriamo le due caselle di testo che ci servono. Il programma che stiamo facendo ora lo chiamiamo programma4.php e mettiamo le seguenti istruzioni che servono per la preparazione di un modulo:
<form> indica che qui inizia il modulo
</form> indica che qui finisce il modulo
Al modulo occorre dare un nome; noi lo chiameremo modulo1; per cui scriviamo:
<form name="modulo1"> indica che qui inizia il modulo il cui nome è: modulo1.
</form> indica che qui finisce il modulo
il nome del modulo va messo nelle virgolette e il comando che indica il nome è: name, che non possiamo modificare in quanto è un comando html. Non basta; occorre anche indicare l'azione da compiere quando l'utente ha finito di scrivere nel modulo; poiché noi vogliamo che esegua un nuovo programma in cui facciamo la somma dei due numeri e poiché questo programma, quando lo faremo, lo chiameremo: programma5.php modifichiamo la istruzione form nella seguente:
<form name="modulo1" action="programma5.php"> indica che qui inizia il modulo il cui nome è: modulo1 ed la azione da fare quando l'utente finisce è quella di eseguire il programma che abbiamo chiamato: programma5.php;
</form> indica che qui finisce il modulo.
La casella di testo
La casella di testo la inseriamo con la istruzione input; scriviamo:
<input type="test" name="numero1">
dove input sta a significare che si tratta di prendere un valore scritto dall'utente; type indica il tipo di ingresso che vogliamo, nel nostro caso è di tipo text, cioè una casella di testo in cui scrivere o lettere o numeri; name indica il nome che abbiamo dato a questa casella; il numero scritto dall'utente verrà memorizzato in una variabile che ha appunto nome: numero1, come da noi scelto.
Da notare che nel nome della variabile manca il segno del dollaro $, infatti ci troviamo in html. Quando questa variabile sarà passata in php sarà come se fosse $numero1.
Questa istruzione va messa all'interno del modulo, cioè dopo l'inizio con <form>:
<form name="modulo1" action="programma5.php">
<input type="text" name="numero1"> faccio una casella di testo avente il nome di numero1;
</form>
Analogamente faremo per il secondo numero:
<form name="modulo1" action="programma5.php">
<input type="text" name="numero1"> faccio una casella di testo avente il nome di numero1;
<input type="text" name="numero2"> faccio una casella di testo avente il nome di numero2;
</form>
Per completare scriviamo anche delle parole di spiegazione in modo da far capire all'utente dove deve scrivere i due numeri. Scriviamo, ora, tutto il programma, salviamolo col nome di programma4.php ed eseguiamolo:
<html>
<body background="sfondo2.jpg">
Programma per la somma di due numeri.<br>
<form action="programma5.php" name="modulo1">
Scrivi qui il primo numero:<input type="text" name="numero1"><br><br>
Scrivi qui il secondo numero:<input type="text" name="numero2"><br>
</form>
</body>
</html>
otterremo:
A questo punto quando l'utente scriverà i due numeri nelle rispettive caselle di testo, essi verranno memorizzati nelle variabili numero1 e numero2 in html.
Passaggio delle variabili
Dobbiamo ora trovare un modo per passare le due variabili al programma php, che chiameremo programma5.php, in modo che faccia la somma dei due numeri. Per ottenere questo occorre fare una ultima modifica al nostro programma4.php, inserendo un'altra istruzione input in questo modo:
<input type="submit" value="INVIA I DATI">
dove input sta a significare che è una istruzione si ingresso; il tipo submit sta a significare che l'utente ha finito di scrivere e vuole inviare i dati del modulo; questa volta viene creato un tasto su cui scriviamo: INVIA I DATI.
Quando l'utente premerà con il mouse questo tasto i dati memorizzati nelle variabili verranno passati al programma programma5.php, infatti l'azione che avevamo previsto all'inizio del modulo era:
<form action="programma5.php" name="modulo1">
cioè far eseguire il programma5.php; è compito di internet esplorer passare tutti i dati del modulo al programma indicato.
Per cui, in definitiva, il nostro programma4.php diventa:
<html>
<body background="sfondo2.jpg">
Programma per la somma di due numeri.<br>
<form action="programma5.php" name="modulo1">
Scrivi qui il primo numero:<input type="text" name="numero1"><br><br>
Scrivi qui il secondo numero:<input type="text" name="numero2"><br><br>
<input type="submit" value="INVIA I DATI">
</form>
</body>
</html>
Vediamo che la istruzione input sta all'interno del modulo, cioè prima della fine modulo </form>.
Se ora eseguiamo programma4.php, scriviamo due numeri all'interno delle caselle di testo, per esempio 80 e 20, e premiamo sul tasto che invia i dati, otteniamo:
cioè viene eseguito programma5.php che ancora non abbiamo scritto, infatti il navigatore ci dice: Impossibile trovare la pagina. Ma intanto il programma viene cercato e le variabili gli sono state passate; infatti nella barra dell'indirizzo abbiamo:
dove il punto interrogativo dopo programma5.php sta a significare che vogliamo passare le variabili; le variabili sono due; la prima ha nome numero1 ed ha valore 80; la seconda ha nome numero 2 ed ha valore 20. Quando verrà eseguito programma5.php questi due dati verranno passati nelle due variabili php: $numero1 e $numero2. Essendo le variabili più di una esse vengono unite con segno &.
Html è anche esso un linguaggio di programmazione adatto a visualizzare le pagine mediante Internet Explorer, che è il programma di navigazione in grado di visualizzare le pagine su Internet. I due linguaggi possono coesistere sulla stessa pagina ed essere eseguiti indipendentemente l'uno dall'altro. Solo che per rendere chiaro ad Internet Explorer in che ordine vanno eseguiti i comandi di ciascun linguaggio occorre mettere sia all'inizio del programma sia alla fine del programma un segno o riferimento, detto anche tag, per indicare il punto preciso in cui inizia il programma e il punto in cui finisce.
Ricordiamo che il segno di inizio per il php è:
<?php
Mentre il segno di fine programma è:
?>
Per l'html il segno di inizio è:
<html>
Mentre il segno di fine programma è:
</html>
L'html è importante in quanto ci consente di abbellire la nostra pagina, cioè ci consente di mettere uno sfondo, di usare i diversi colori per scrivere il testo, di cambiare le dimensioni dei caratteri, ecc.
Proviamo ora a mettere uno sfondo al nostro primo programma. Per fare questo mettiamo due segni; dapprima un:
<body>
per indicare l'inizio del corpo della nostra pagina a cui applicare sia lo sfondo sia successivamente gli altri comandi della pagina html; alla fine mettiamo il segno di termine del corpo della pagina e cioè:
</body>
Per cui la nostra pagina in html diventa:
<html> inizio linguaggio html
<body> inizio corpo della pagina
.....
</body> fine corpo della pagina
</html> fine linguaggio html
Questi quattro comandi dell'html li mettiamo, per abitudine, sempre; due all'inizio del nostro programma e due alla fine. Per disegnare lo sfondo della pagina ci serve una immagine da usare come sfondo, per esempio: file di sfondo di nome: sfondo2.jpg. Questa immagine va salvata nella stessa cartella in cui stiamo scrivendo il programma, cioè la cartella test.
Se ora modifichiamo la riga del programma in cui vi era <body> e la scriviamo:
<body background="sfondo2.jpg">
otteniamo che la nostra pagina appare con uno sfondo colorato e non con uno sfondo bianco. Il programma diventa:
<html> inizio linguaggio html;
<body background="sfondo2.jpg"> inizio corpo della pagina e metto lo sfondo;
.....
</body> fine corpo della pagina;
</html> fine linguaggio html;
E il nostro programma in php?
Il nostro programma che faceva la somma di due numeri lo mettiamo all'interno delle istruzioni in html e quindi otteniamo:
<html> inizio linguaggio html;
<body background="sfondo2.jpg"> inizio corpo della pagina e metto lo sfondo;
<?php
print ("Programma per fare la somma di due numeri. ");
$numero1=8;
$numero2=2;
$somma=$numero1+$numero2;
$frase1="Se sommo due numeri, di cui il primo è: ";
$frase2=" ed il secondo è: ";
$frase3=", ottengo che la loro somma è:";
print("$frase1 $numero1 $frase2 $numero2 $frase3 $somma .");
?>
</body> fine corpo della pagina;
</html> fine linguaggio html;
Salviamo il programma col nome programma3.php ed eseguiamolo; otteniamo:
cioè la nostra pagina ha uno sfondo colorato.
Comando <br>
un altro comando html che ci serve è quello che consente di andare a capo alla riga successiva, cioè il comando di Invio.
E' il comando:
<br>
che vuol dire appunto salta una riga e vai a inizio della riga successiva; noi lo usiamo per rendere la pagina meglio leggibile all'utente. Se modifichiamo la nostra prima print nella seguente:
print ("Programma per fare la somma di due numeri. <br>");
otteniamo il salto di riga.
Cosa abbiamo fatto? Abbiamo inserito nel programma php una istruzione che ci consente non solo di stampare le parole:
Programma per fare la somma di due numeri.
Ma anche di scrivere la parola <br>, in quanto essa si trova tra le virgolette della istruzione print;per cui la istruzione che arriva ad Internet Explorer è la seguente:
Programma per fare la somma di due numeri. <br>
Tuttavia il comando <br> non viene visto dall'utente, in quanto esso viene interpretato da Internet Explorer come un salto di riga e non come testo da scrivere; e l'utente, quindi, vede il salto di riga e non scritto: <br>.
Ingresso e memorizzazione dati nelle variabili.
Il nostro programma per la somma di due numeri ha altri difetti, ma noi man mano li correggeremo fino a farne un programma professionale. Il difetto a cui ci riferiamo è quello che i numeri da sommare sono solo quei due cioè 80 e 20, e l'utente non ha la possibilità di cambiare i due numeri da sommare; dobbiamo, quindi vedere un modo per poter usare qualsiasi numero.
Vediamo ora come una casella di testo sia in grado di memorizzare dei numeri. La casella di testo è:
cioè uno spazio in cui l'utente può scrivere qualcosa o lettere o numeri; successivamente il numero scritto noi lo memorizziamo nella nostra variabile, che abbiamo chiamato $numero1; mettiamo una seconda casella di testo per il secondo numero da memorizzare nella variabile $numero2; e poi faremo la somma dei due numeri come al solito.
I moduli in html
Per ottenere questo ci serviamo dell'html. In html per poter memorizzare dei numeri forniti dall'utente occorre inserire dapprima nella nostra pagina un modulo, cioè uno spazio in cui l'utente può scrivere delle cose; poi nel modulo inseriamo le due caselle di testo che ci servono. Il programma che stiamo facendo ora lo chiamiamo programma4.php e mettiamo le seguenti istruzioni che servono per la preparazione di un modulo:
<form> indica che qui inizia il modulo
</form> indica che qui finisce il modulo
Al modulo occorre dare un nome; noi lo chiameremo modulo1; per cui scriviamo:
<form name="modulo1"> indica che qui inizia il modulo il cui nome è: modulo1.
</form> indica che qui finisce il modulo
il nome del modulo va messo nelle virgolette e il comando che indica il nome è: name, che non possiamo modificare in quanto è un comando html. Non basta; occorre anche indicare l'azione da compiere quando l'utente ha finito di scrivere nel modulo; poiché noi vogliamo che esegua un nuovo programma in cui facciamo la somma dei due numeri e poiché questo programma, quando lo faremo, lo chiameremo: programma5.php modifichiamo la istruzione form nella seguente:
<form name="modulo1" action="programma5.php"> indica che qui inizia il modulo il cui nome è: modulo1 ed la azione da fare quando l'utente finisce è quella di eseguire il programma che abbiamo chiamato: programma5.php;
</form> indica che qui finisce il modulo.
La casella di testo
La casella di testo la inseriamo con la istruzione input; scriviamo:
<input type="test" name="numero1">
dove input sta a significare che si tratta di prendere un valore scritto dall'utente; type indica il tipo di ingresso che vogliamo, nel nostro caso è di tipo text, cioè una casella di testo in cui scrivere o lettere o numeri; name indica il nome che abbiamo dato a questa casella; il numero scritto dall'utente verrà memorizzato in una variabile che ha appunto nome: numero1, come da noi scelto.
Da notare che nel nome della variabile manca il segno del dollaro $, infatti ci troviamo in html. Quando questa variabile sarà passata in php sarà come se fosse $numero1.
Questa istruzione va messa all'interno del modulo, cioè dopo l'inizio con <form>:
<form name="modulo1" action="programma5.php">
<input type="text" name="numero1"> faccio una casella di testo avente il nome di numero1;
</form>
Analogamente faremo per il secondo numero:
<form name="modulo1" action="programma5.php">
<input type="text" name="numero1"> faccio una casella di testo avente il nome di numero1;
<input type="text" name="numero2"> faccio una casella di testo avente il nome di numero2;
</form>
Per completare scriviamo anche delle parole di spiegazione in modo da far capire all'utente dove deve scrivere i due numeri. Scriviamo, ora, tutto il programma, salviamolo col nome di programma4.php ed eseguiamolo:
<html>
<body background="sfondo2.jpg">
Programma per la somma di due numeri.<br>
<form action="programma5.php" name="modulo1">
Scrivi qui il primo numero:<input type="text" name="numero1"><br><br>
Scrivi qui il secondo numero:<input type="text" name="numero2"><br>
</form>
</body>
</html>
otterremo:
A questo punto quando l'utente scriverà i due numeri nelle rispettive caselle di testo, essi verranno memorizzati nelle variabili numero1 e numero2 in html.
Passaggio delle variabili
Dobbiamo ora trovare un modo per passare le due variabili al programma php, che chiameremo programma5.php, in modo che faccia la somma dei due numeri. Per ottenere questo occorre fare una ultima modifica al nostro programma4.php, inserendo un'altra istruzione input in questo modo:
<input type="submit" value="INVIA I DATI">
dove input sta a significare che è una istruzione si ingresso; il tipo submit sta a significare che l'utente ha finito di scrivere e vuole inviare i dati del modulo; questa volta viene creato un tasto su cui scriviamo: INVIA I DATI.
Quando l'utente premerà con il mouse questo tasto i dati memorizzati nelle variabili verranno passati al programma programma5.php, infatti l'azione che avevamo previsto all'inizio del modulo era:
<form action="programma5.php" name="modulo1">
cioè far eseguire il programma5.php; è compito di internet esplorer passare tutti i dati del modulo al programma indicato.
Per cui, in definitiva, il nostro programma4.php diventa:
<html>
<body background="sfondo2.jpg">
Programma per la somma di due numeri.<br>
<form action="programma5.php" name="modulo1">
Scrivi qui il primo numero:<input type="text" name="numero1"><br><br>
Scrivi qui il secondo numero:<input type="text" name="numero2"><br><br>
<input type="submit" value="INVIA I DATI">
</form>
</body>
</html>
Vediamo che la istruzione input sta all'interno del modulo, cioè prima della fine modulo </form>.
Se ora eseguiamo programma4.php, scriviamo due numeri all'interno delle caselle di testo, per esempio 80 e 20, e premiamo sul tasto che invia i dati, otteniamo:
cioè viene eseguito programma5.php che ancora non abbiamo scritto, infatti il navigatore ci dice: Impossibile trovare la pagina. Ma intanto il programma viene cercato e le variabili gli sono state passate; infatti nella barra dell'indirizzo abbiamo:
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
dove il punto interrogativo dopo programma5.php sta a significare che vogliamo passare le variabili; le variabili sono due; la prima ha nome numero1 ed ha valore 80; la seconda ha nome numero 2 ed ha valore 20. Quando verrà eseguito programma5.php questi due dati verranno passati nelle due variabili php: $numero1 e $numero2. Essendo le variabili più di una esse vengono unite con segno &.
