generated from francesco/deploy-dinamico
Deploy tramite custom CI/CD Action
All checks were successful
Deploy / trigger (push) Successful in 1s
All checks were successful
Deploy / trigger (push) Successful in 1s
This commit is contained in:
112
get.html
Normal file
112
get.html
Normal file
@@ -0,0 +1,112 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="it">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Modulo iscrizione palestra</title>
|
||||
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="hero">
|
||||
<div class="overlay">
|
||||
<div class="container">
|
||||
<h1>Iscrizione Palestra</h1>
|
||||
<p>Utilizzo di una pagina statica</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="buttons">
|
||||
<a href="post.php" class="button">Vai al metodo POST</a>
|
||||
</div>
|
||||
<form method="get" target="_self">
|
||||
<div class="orizzontale">
|
||||
<fieldset>
|
||||
<label for="nome">Nome</label>
|
||||
<input type="text" name="nome" id="nome" autocomplete="given-name" required>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label for="cognome">Cognome</label>
|
||||
<input type="text" name="cognome" id="cognome" autocomplete="family-name" required>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="orizzontale">
|
||||
<fieldset>
|
||||
<label for="email">E-mail</label>
|
||||
<input type="email" name="email" id="email" autocomplete="email" required>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label for="abbonamento">Abbonamento</label>
|
||||
<select id="abbonamento" name="abbonamento" required>
|
||||
<option value="" disabled selected> -- Seleziona</option>
|
||||
<option value="mensile">Mensile</option>
|
||||
<option value="trimestrale">Trimestrale</option>
|
||||
<option value="semestrale">Semestrale</option>
|
||||
<option value="annuale">Annuale</option>
|
||||
</select>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="orizzontale">
|
||||
<fieldset>
|
||||
<label>Sesso</label>
|
||||
<div class="box">
|
||||
<input type="radio" name="sesso" value="maschio" id="maschio" required>
|
||||
<label for="maschio">Maschio</label>
|
||||
</div>
|
||||
<div class="box">
|
||||
<input type="radio" name="sesso" value="femmina" id="femmina" required>
|
||||
<label for="femmina">Femmina</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Attività preferite</label>
|
||||
<div class="box">
|
||||
<input type="checkbox" name="attivita_yoga" id="yoga" value="yoga">
|
||||
<label for="yoga">Yoga</label>
|
||||
</div>
|
||||
<div class="box">
|
||||
<input type="checkbox" name="attivita_nuoto" id="nuoto" value="nuoto">
|
||||
<label for="nuoto">Nuoto</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
<fieldset>
|
||||
<input type="submit" value="Invia">
|
||||
</fieldset>
|
||||
</form>
|
||||
<i class="msg">Nota: Dopo aver premuto "Invia", i dati saranno visibili come parametri nell'URL (dopo ?)</i>
|
||||
|
||||
<div class="output">
|
||||
<h3>Dati nell'URL con metodo GET</h3>
|
||||
<p>Nome: <span id="getnome"></span></p>
|
||||
<p>Cognome: <span id="getcognome"></span></p>
|
||||
<p>E-mail: <span id="getemail"></span></p>
|
||||
<p>Abbonamento: <span id="getabbonamento"></span></p>
|
||||
<p>Sesso: <span id="getsesso"></span></p>
|
||||
<p>Attività: <span id="getattivita"></span></p>
|
||||
|
||||
<i class="msg">Nota: Dati letti con JavaScript</i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script defer>
|
||||
// Con JS leggo i dati dall'URL e li stampo nella pagina
|
||||
const parametri = new URLSearchParams(window.location.href.split("?")[1]);
|
||||
|
||||
document.getElementById("getnome").innerText = parametri.get("nome") || "Dato non presente nell'URL";
|
||||
document.getElementById("getcognome").innerText = parametri.get("cognome") || "Dato non presente nell'URL";
|
||||
document.getElementById("getemail").innerText = parametri.get("email") || "Dato non presente nell'URL";
|
||||
document.getElementById("getabbonamento").innerText = parametri.get("abbonamento") || "Dato non presente nell'URL";
|
||||
document.getElementById("getsesso").innerText = parametri.get("sesso") || "Dato non presente nell'URL";
|
||||
document.getElementById("getattivita").innerText = parametri.get("attivita_yoga") && parametri.get("attivita_nuoto") ? `${parametri.get("attivita_yoga")}, ${parametri.get("attivita_nuoto")}` : parametri.get("attivita_yoga") ? parametri.get("attivita_yoga") : parametri.get("attivita_nuoto") ? parametri.get("attivita_nuoto") : "Dato non presente nell'URL";
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
45
index.html
Normal file
45
index.html
Normal file
@@ -0,0 +1,45 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="it">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Modulo iscrizione palestra</title>
|
||||
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="hero">
|
||||
<div class="overlay">
|
||||
<div class="container">
|
||||
<h1>Iscrizione Palestra</h1>
|
||||
<p>Metodi GET e POST</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<div class="box-container">
|
||||
<div class="box">
|
||||
<h3>Pagina HTML</h3>
|
||||
<p>Form gestito da una pagina HTML con metodo GET. I valori inviati vengono visualizzati come parametri nell'URL.</p>
|
||||
<p>Ho aggiunto la lettura dei dati dall'URL con JavaScript.</p>
|
||||
<a href="get.html" class="button">Vai al metodo GET</a>
|
||||
</div>
|
||||
<div class="box">
|
||||
<h3>Pagina PHP</h3>
|
||||
<p>Form gestito da una pagina PHP con metodo POST. I valori inviati vengono inviati all'interno della richiesta HTTP.</p>
|
||||
<p>Vengono poi visualizzati con PHP all'interno della pagina.</p>
|
||||
<a href="post.php" class="button">Vai al metodo POST</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<i class="msg">Realizzato da Francesco Giuseppe Mancuso - classe 5E - www.francescomancuso.it</i>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
30
index.php
30
index.php
@@ -1,30 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="it">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Funziona!</title>
|
||||
<style>
|
||||
body {
|
||||
padding: 8rem 1rem;
|
||||
margin: 0;
|
||||
background-color: #111111;
|
||||
color: #fafafa;
|
||||
text-align: center;
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Funziona!</h1>
|
||||
<p>Se vedi questa pagina, <code style="display: inline-block;">deploy-dynamic</code> funziona!</p>
|
||||
<br>
|
||||
<img src="https://media3.giphy.com/media/v1.Y2lkPTc5MGI3NjExZDcxMWdzaGY1aW1sdXBrN3pjbjR3dXRlc3A2aTRrenFwbjU4aWh1bCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/blSTtZehjAZ8I/giphy.gif" alt="PARTY" style="width:90%;max-width:500px">
|
||||
<br>
|
||||
<br>
|
||||
<span>Pagina generata dinamicamente con PHP il <?php date_default_timezone_set('Europe/Rome'); echo $current_date = date('d/m/Y H:i:s'); ?></span>
|
||||
<br>
|
||||
<br>
|
||||
<p><i>Ospitato su vps.francescomancuso.it</i></p>
|
||||
</body>
|
||||
</html>
|
||||
209
post.php
Normal file
209
post.php
Normal file
@@ -0,0 +1,209 @@
|
||||
<?php
|
||||
if (isset($_GET["sorgente"])) {
|
||||
highlight_file("post.php");
|
||||
exit;
|
||||
}
|
||||
?>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="it">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Modulo iscrizione palestra</title>
|
||||
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="hero">
|
||||
<div class="overlay">
|
||||
<div class="container">
|
||||
<h1>Iscrizione Palestra</h1>
|
||||
<p>Utilizzo di una pagina dinamica</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="buttons">
|
||||
<a href="get.html" class="button">Vai al metodo GET</a>
|
||||
<a href="post.php?sorgente" class="button">Leggi sorgente</a>
|
||||
</div>
|
||||
|
||||
<?php
|
||||
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
||||
?>
|
||||
<i class="msg success">
|
||||
Dati inviati e ricevuti con successo!
|
||||
</i>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
<form method="post" action=""> <!-- Action vuota == self -->
|
||||
<div class="orizzontale">
|
||||
<fieldset>
|
||||
<label for="nome">Nome</label>
|
||||
<input type="text" name="nome" id="nome" autocomplete="given-name" required>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label for="cognome">Cognome</label>
|
||||
<input type="text" name="cognome" id="cognome" autocomplete="family-name" required>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="orizzontale">
|
||||
<fieldset>
|
||||
<label for="email">E-mail</label>
|
||||
<input type="email" name="email" id="email" autocomplete="email" required>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label for="abbonamento">Abbonamento</label>
|
||||
<select id="abbonamento" name="abbonamento" required>
|
||||
<option value="" disabled selected> -- Seleziona</option>
|
||||
<option value="mensile">Mensile</option>
|
||||
<option value="trimestrale">Trimestrale</option>
|
||||
<option value="semestrale">Semestrale</option>
|
||||
<option value="annuale">Annuale</option>
|
||||
</select>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="orizzontale">
|
||||
<fieldset>
|
||||
<label>Sesso</label>
|
||||
<div class="box">
|
||||
<input type="radio" name="sesso" value="maschio" id="maschio" required>
|
||||
<label for="maschio">Maschio</label>
|
||||
</div>
|
||||
<div class="box">
|
||||
<input type="radio" name="sesso" value="femmina" id="femmina" required>
|
||||
<label for="femmina">Femmina</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Attività preferite</label>
|
||||
<div class="box">
|
||||
<input type="checkbox" name="attivita_yoga" id="yoga" value="yoga">
|
||||
<label for="yoga">Yoga</label>
|
||||
</div>
|
||||
<div class="box">
|
||||
<input type="checkbox" name="attivita_nuoto" id="nuoto" value="nuoto">
|
||||
<label for="nuoto">Nuoto</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
<fieldset>
|
||||
<input type="submit" value="Invia">
|
||||
</fieldset>
|
||||
</form>
|
||||
<i class="msg">Nota: Dopo aver premuto "Invia", i dati saranno visibili come parametri nell'URL (dopo ?)</i>
|
||||
|
||||
<div class="output">
|
||||
<h3>Dati nel body HTTP con POST</h3>
|
||||
|
||||
<?php
|
||||
|
||||
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
||||
|
||||
|
||||
if (isset($_POST['nome'])) {
|
||||
$nome = $_POST['nome'];
|
||||
// Lascio la variabile separata per futura sanitizzazione lato server
|
||||
?>
|
||||
<p>Nome: <span><?php echo $nome ?></span></p>
|
||||
<?php
|
||||
} else {
|
||||
?>
|
||||
<p>Nome: <span>Dato non presente nella richiesta</span></p>
|
||||
<?php
|
||||
}
|
||||
|
||||
|
||||
if (isset($_POST['cognome'])) {
|
||||
$cognome = $_POST['cognome'];
|
||||
?>
|
||||
<p>Cognome: <span><?php echo $cognome ?></span></p>
|
||||
<?php
|
||||
} else {
|
||||
?>
|
||||
<p>Cognome: <span>Dato non presente nella richiesta</span></p>
|
||||
<?php
|
||||
}
|
||||
|
||||
|
||||
if (isset($_POST['email'])) {
|
||||
$email = $_POST['email'];
|
||||
?>
|
||||
<p>E-mail: <span><?php echo $email ?></span></p>
|
||||
<?php
|
||||
} else {
|
||||
?>
|
||||
<p>E-mail: <span>Dato non presente nella richiesta</span></p>
|
||||
<?php
|
||||
}
|
||||
|
||||
|
||||
if (isset($_POST['abbonamento'])) {
|
||||
$abbonamento = $_POST['abbonamento'];
|
||||
?>
|
||||
<p>Abbonamento: <span><?php echo $abbonamento ?></span></p>
|
||||
<?php
|
||||
} else {
|
||||
?>
|
||||
<p>Abbonamento: <span>Dato non presente nella richiesta</span></p>
|
||||
<?php
|
||||
}
|
||||
|
||||
|
||||
if (isset($_POST['sesso'])) {
|
||||
$sesso = $_POST['sesso'];
|
||||
?>
|
||||
<p>Sesso: <span><?php echo $sesso ?></span></p>
|
||||
<?php
|
||||
} else {
|
||||
?>
|
||||
<p>Sesso: <span>Dato non presente nella richiesta</span></p>
|
||||
<?php
|
||||
}
|
||||
|
||||
|
||||
if (isset($_POST['attivita_yoga']) && isset($_POST['attivita_nuoto'])) {
|
||||
$attivita_yoga = $_POST['attivita_yoga'];
|
||||
$attivita_nuoto = $_POST['attivita_nuoto'];
|
||||
?>
|
||||
<p>Attività: <span><?php echo $attivita_yoga;
|
||||
echo ", ";
|
||||
echo $attivita_nuoto ?></span></p>
|
||||
<?php
|
||||
} else if (isset($_POST['attivita_yoga']) && !isset($_POST['attivita_nuoto'])) {
|
||||
$attivita_yoga = $_POST['attivita_yoga'];
|
||||
?>
|
||||
<p>Attività: <span><?php echo $attivita_yoga ?></span></p>
|
||||
<?php
|
||||
} else if (!isset($_POST['attivita_yoga']) && isset($_POST['attivita_nuoto'])) {
|
||||
$attivita_nuoto = $_POST['attivita_nuoto'];
|
||||
?>
|
||||
<p>Attività: <span><?php echo $attivita_nuoto ?></span></p>
|
||||
<?php
|
||||
} else {
|
||||
?>
|
||||
<p>Attività: <span>Dato non presente nella richiesta</span></p>
|
||||
<?php
|
||||
}
|
||||
|
||||
|
||||
} else {
|
||||
?>
|
||||
<span>> Nessun dato inviato nella richiesta POST</span>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
|
||||
<i class="msg">Nota: Dati letti con PHP</i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
208
style.css
Normal file
208
style.css
Normal file
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user