diff --git a/get.html b/get.html new file mode 100644 index 0000000..5fc77d4 --- /dev/null +++ b/get.html @@ -0,0 +1,112 @@ + + + + + + + Modulo iscrizione palestra + + + + + + +
+
+
+

Iscrizione Palestra

+

Utilizzo di una pagina statica

+
+
+
+ +
+
+ Vai al metodo POST +
+
+
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+
+
+ +
+ + +
+
+ + +
+
+
+ +
+ + +
+
+ + +
+
+
+
+ +
+
+ Nota: Dopo aver premuto "Invia", i dati saranno visibili come parametri nell'URL (dopo ?) + +
+

Dati nell'URL con metodo GET

+

Nome:

+

Cognome:

+

E-mail:

+

Abbonamento:

+

Sesso:

+

Attività:

+ + Nota: Dati letti con JavaScript +
+
+ + + + + + \ No newline at end of file diff --git a/head.jpg b/head.jpg new file mode 100644 index 0000000..af0de19 Binary files /dev/null and b/head.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..20ebb2b --- /dev/null +++ b/index.html @@ -0,0 +1,45 @@ + + + + + + + Modulo iscrizione palestra + + + + + + +
+
+
+

Iscrizione Palestra

+

Metodi GET e POST

+
+
+
+ +
+ +
+
+

Pagina HTML

+

Form gestito da una pagina HTML con metodo GET. I valori inviati vengono visualizzati come parametri nell'URL.

+

Ho aggiunto la lettura dei dati dall'URL con JavaScript.

+ Vai al metodo GET +
+
+

Pagina PHP

+

Form gestito da una pagina PHP con metodo POST. I valori inviati vengono inviati all'interno della richiesta HTTP.

+

Vengono poi visualizzati con PHP all'interno della pagina.

+ Vai al metodo POST +
+
+ + Realizzato da Francesco Giuseppe Mancuso - classe 5E - www.francescomancuso.it +
+ + + + \ No newline at end of file diff --git a/index.php b/index.php deleted file mode 100644 index d27e275..0000000 --- a/index.php +++ /dev/null @@ -1,30 +0,0 @@ - - - - - - Funziona! - - - -

Funziona!

-

Se vedi questa pagina, deploy-dynamic funziona!

-
- PARTY -
-
- Pagina generata dinamicamente con PHP il -
-
-

Ospitato su vps.francescomancuso.it

- - diff --git a/post.php b/post.php new file mode 100644 index 0000000..77d1b49 --- /dev/null +++ b/post.php @@ -0,0 +1,209 @@ + + + + + + + + + Modulo iscrizione palestra + + + + + + +
+
+
+

Iscrizione Palestra

+

Utilizzo di una pagina dinamica

+
+
+
+ +
+
+ Vai al metodo GET + Leggi sorgente +
+ + + + Dati inviati e ricevuti con successo! + + +
+
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+
+
+ +
+ + +
+
+ + +
+
+
+ +
+ + +
+
+ + +
+
+
+
+ +
+
+ Nota: Dopo aver premuto "Invia", i dati saranno visibili come parametri nell'URL (dopo ?) + +
+

Dati nel body HTTP con POST

+ + +

Nome:

+ +

Nome: Dato non presente nella richiesta

+ +

Cognome:

+ +

Cognome: Dato non presente nella richiesta

+ +

E-mail:

+ +

E-mail: Dato non presente nella richiesta

+ +

Abbonamento:

+ +

Abbonamento: Dato non presente nella richiesta

+ +

Sesso:

+ +

Sesso: Dato non presente nella richiesta

+ +

Attività:

+ +

Attività:

+ +

Attività:

+ +

Attività: Dato non presente nella richiesta

+ + > Nessun dato inviato nella richiesta POST + + + Nota: Dati letti con PHP +
+
+ + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..83ef21a --- /dev/null +++ b/style.css @@ -0,0 +1,208 @@ +*, +*::before, +*::after { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body, +p, +i, +span, +input, +button, +select { + font-size: 17px; + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; +} + +body { + background-color: hsl(194, 97%, 95%); + color: hsl(194, 97%, 14%); + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; +} + +.hero { + text-align: center; + background-color: hsl(194, 97%, 14%); + background-image: url("./head.jpg"); + background-size: cover; + background-repeat: no-repeat; + background-blend-mode: overlay; + background-position: 50% 55%; +} + +.hero .overlay { + width: 100%; + height: 100%; + padding: 4rem 1rem; + background-color: hsla(194, 97%, 14%, 0.2); + color: #fff; +} + +.container { + width: 90%; + max-width: 1200px; + margin-left: auto; + margin-right: auto; + padding: 4rem 0; +} + +form fieldset { + border: none; + margin-bottom: 2rem; + display: flex; + flex-direction: column; + width: 100%; +} + +form .orizzontale { + display: flex; + flex-direction: row; + gap: 2rem; + width: 100%; +} + +@media only screen and (max-width: 600px) { + form .orizzontale { + flex-direction: column; + gap: 0; + } +} + +form fieldset input, +form fieldset select { + background-color: hsl(194, 97%, 98%); + border: 1px solid hsl(194, 97%, 14%); + border-radius: 0.6rem; + padding: 0.5rem 0.6rem; +} + +form fieldset input[type="text"], +form fieldset input[type="select"] { + width: 100%; +} + +form fieldset label { + margin-bottom: 0.2rem; + font-weight: bold; +} + +form fieldset input[type="submit"], +.button { + width: 100%; + max-width: max-content; + margin: 2rem auto; + background-color: hsl(194, 97%, 14%); + color: hsl(194, 97%, 94%); + cursor: pointer; + font-weight: bold; +} + +i.msg { + text-align: center; + margin: 0 auto; + width: 100%; + display: inline-block; +} + +i.msg.success { + display: block; + width: 100%; + max-width: max-content; + margin-bottom: 3rem; + background-color: hsl(143, 97%, 24%); + color: hsla(194, 97%, 98%, 1); + padding: 1.2rem 1.5rem; + border-radius: 1.2rem; +} + +.output { + width: 100%; + max-width: 400px; + margin: 0 auto; + margin-top: 4rem; + background-color: hsl(194, 97%, 14%); + color: hsla(194, 97%, 98%, 0.8); + padding: 1.2rem 1.5rem; + border-radius: 1.2rem; + box-shadow: 1px 1px 25px hsla(194, 97%, 14%, 0.4); +} + +.output h3 { + text-align: left; + font-weight: bold; + margin-bottom: 1.5rem; + color: hsla(194, 97%, 98%, 1); +} + +.output i.msg { + margin-top: 1.5rem; +} + +.output span { + color: hsla(194, 97%, 98%, 0.95); + font-weight: normal; + display: inline-block; + margin-left: 0.5rem; +} + +.output p { + margin-bottom: 0.8rem; + font-weight: bold; +} + +.button { + margin: 0; + border-radius: 0.6rem; + padding: 0.5rem 0.6rem; + display: block; + text-decoration: none; +} + +.buttons { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: flex-end; + align-items: center; + margin-bottom: 3rem; + gap: 1rem; +} + +.button.left { + margin: 0; + margin-right: auto; + margin-bottom: 3rem; +} + +.box-container { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 2rem; + margin-bottom: 4rem; +} + +.box-container .box { + width: 100%; + background-color: hsl(194, 97%, 14%); + color: hsla(194, 97%, 98%, 0.8); + padding: 1.2rem 1.5rem; + border-radius: 1.2rem; + box-shadow: 1px 1px 25px hsla(194, 97%, 14%, 0.4); +} + +.box-container .box h3 { + text-align: left; + font-weight: bold; + margin-bottom: 1.5rem; + color: hsla(194, 97%, 98%, 1); +} + +.box-container .box a { + background-color: hsla(194, 97%, 98%, 1); + color: hsl(194, 97%, 14%); + margin: 0 auto; + margin-top: 2rem; +} \ No newline at end of file