Passaggio di parametri PHP a Jquery con fogli di stile CSS e HTML

Vediamo adesso in questo nuovo articolo come fare passare dei dati del linguaggio di programmazione PHP attraverso un file JS , mettendo insieme un po’ di fogli di stile CSS.

Ovviamente il fulcro di questo esempio rimane il passaggio di parametri valori attraverso due linguaggi che sono appunto Jquery e PHP.

Principalmente per fare questo ci sono due metodi. Il primo ovviamente è quello di fare leggere tramite i metodi get o post doom di jquery dei valori inseriti da form o da file.

Ma ovviamente è un sistema che non si preferisce utilizzare in quanto un pò troppo laborioso. Il metodo che invece è preferibile utilizzare è quello del passaggio linguaggio Server, linguaggio CLient nello stesso file vediamo come.

Questo è ovviamente un esempio poi vedete voi come utilizzare il tutto.

Passaggio di Parametri PHP a Jquery

Inizializiamo un set di 10 volori per esempio numerici in PHP

$value[1]=90;
$value[2]=70;  
$value[3]=65;
$value[4]=55;
$value[5]=35;
$value[6]=25;
$value[7]=15;
$value[8]=10;
$value[9]=5;
$value[10]=2;

richiamiamo il file jquery che attualmente siamo arrivati alla versione 3.4.1

https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js

in questa maniera

Vi consigio sempre di utilizzare le librerie esterne in ogni caso. In questo caso ho preso le google che sono sempre aggiornate e veloci nel caricamento.

Vediamo il codice Jquery

$(document).ready(function(){
$(“button”).click(function(){
var para1 = $(“#para1”);
para1.animate({width: ‘%’, opacity: ‘0.9’}, “slow”);
var para2 = $(“#para2”);
para2.animate({width: ‘%’, opacity: ‘0.9’}, “slow”);

var para3 = $("#para3");
para3.animate({width: '<?php echo $value[3] ?>%', opacity: '0.9'}, "slow");

var para4 = $("#para4");
para4.animate({width: '<?php echo $value[4] ?>%', opacity: '0.9'}, "slow");

var para5 = $("#para5");
para5.animate({width: '<?php echo $value[5] ?>%', opacity: '0.9'}, "slow");

var para6 = $("#para6");
para6.animate({width: '<?php echo $value[6] ?>%', opacity: '0.9'}, "slow");

   var para7 = $("#para7");
para7.animate({width: '<?php echo $value[7] ?>%', opacity: '0.9'}, "slow");

   var para8 = $("#para8");
para8.animate({width: '<?php echo $value[8] ?>%', opacity: '0.9'}, "slow");

   var para9 = $("#para9");
para9.animate({width: '<?php echo $value[6] ?>%', opacity: '0.9'}, "slow");

   var para10 = $("#para10");
para10.animate({width: '<?php echo $value[6] ?>%', opacity: '0.9'}, "slow");

});
});

Come potete vedere sono 1′ animazioni lente (slow) che vengono fatte richiamando il selettore html para1 a para10 che vederemo a breve, con larghezza width stabilito secondo il passaggio di parametri PHP nell’array $value

Vogliamo immettere per completezza di esempio altri due selettori con ‘animazione che faccia un’altra funzione. In questo caso prendiamo quindi l’animazione slidetoggle. Questo potente strumento ha la particolarità di animare se non lo è, oppure de-animare in caso lo sia già. Anche in questo caso abbiamo scelto il metodo slow con selettori html flip e panel

File Jquery

$(document).ready(function(){
$(“#flip1”).click(function(){
$(“#panel1”).slideToggle(“slow”);
});
});

$(document).ready(function(){
$(“#flip2”).click(function(){
$(“#panel2”).slideToggle(“slow”);
});
});

$(document).ready(function(){
$(“#flip3”).click(function(){
$(“#panel3”).slideToggle(“slow”);
});
});

$(document).ready(function(){
$(“#flip4”).click(function(){
$(“#panel4”).slideToggle(“slow”);
});
});

$(document).ready(function(){
$(“#flip5”).click(function(){
$(“#panel5”).slideToggle(“slow”);
});
});

$(document).ready(function(){
$(“#flip6”).click(function(){
$(“#panel6”).slideToggle(“slow”);
});
});

$(document).ready(function(){
$(“#flip7”).click(function(){
$(“#panel7”).slideToggle(“slow”);
});
});

$(document).ready(function(){
$(“#flip8”).click(function(){
$(“#panel8”).slideToggle(“slow”);
});
});

$(document).ready(function(){
$(“#flip9”).click(function(){
$(“#panel9”).slideToggle(“slow”);
});
});

$(document).ready(function(){
$(“#flip10”).click(function(){
$(“#panel10”).slideToggle(“slow”);
});
});

Per quanto riguarda i fogli CSS abbiamo diviso in due parti . Una parte l’abbiamo messa direttamente dentro il file html e la richiamiamo con

Come potete vedere abbiamo giusto messo un pò di padding e border per l’abbellimento grafico, mentre una seconda parte la richiamiamo da file stile.css ed è la seguente

File CSS

#para1 {
background:#98bf90;
height:5%;
width:1%;
position:relative;
border: 3px solid;
text-align: center;
color: black;
}

#para2 {
padding :0.5 em;
background:#98bf80;
border: 3px solid;
height:5%;
width:1%;
position:relative;
text-align: center;
color: black;
}

#para3 {
padding :0.5 em;
background:#98bf70;
border: 3px solid;
height:5%;
width:1%;
position:relative;
text-align: center;
color: black;
}

#para3 {
padding :0.5 em;
background:#98bf70;
border: 3px solid;
height:5%;
width:1%;
position:relative;
text-align: center;
color: black;
}

#para4 {
padding :0.5 em;
background:#98bf60;
border: 3px solid;
height:5%;
width:1%;
position:relative;
text-align: center;
color: black;
}
#para5 {
padding :0.5 em;
background:#98bf50;
border: 3px solid;
height:5%;
width:1%;
position:relative;
text-align: center;
color: black;
}

#para6 {
padding :0.5 em;
background:#98bf40;
border: 3px solid;
height:5%;
width:1%;
position:relative;
text-align: center;
color: black;
}

#para7 {
padding :0.5 em;
background:#98bf45;
border: 3px solid;
height:5%;
width:1%;
position:relative;
text-align: center;
color: black;
}

#para8 {
padding :0.5 em;
background:#98bf40;
border: 3px solid;
height:5%;
width:1%;
position:relative;
text-align: center;
color: black;
}
#para9 {
padding :0.5 em;
background:#98bf35;
border: 3px solid;
height:5%;
width:1%;
position:relative;
text-align: center;
color: black;
}

#para10 {
padding :0.5 em;
background:#98bf30;
border: 3px solid;
height:5%;
width:1%;
position:relative;
text-align: center;
color: black;
}

e il secondo risulta essere

#panel1, #flip1 {
  padding: 5px;
  text-align: left;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}

#panel1 {
  padding: 50px;
  display: none;
}

#panel2, #flip2 {
  padding: 5px;
  text-align: left;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}

#panel2 {
  padding: 50px;
  display: none;
}

#panel3, #flip3 {
  padding: 5px;
  text-align: left;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}

#panel3 {
  padding: 50px;
  display: none;
}

#panel4, #flip4 {
  padding: 5px;
  text-align: left;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}

#panel4 {
  padding: 50px;
  display: none;
}

#panel5, #flip5 {
  padding: 5px;
  text-align: left;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}

#panel5 {
  padding: 50px;
  display: none;
}

#panel6, #flip6 {
  padding: 5px;
  text-align: left;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}

#panel6 {
  padding: 50px;
  display: none;
}


#panel7, #flip7 {
  padding: 5px;
  text-align: left;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}

#panel7 {
  padding: 50px;
  display: none;
}


#panel8, #flip8 {
  padding: 5px;
  text-align: left;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}

#panel8 {
  padding: 50px;
  display: none;
}

#panel9, #flip9 {
  padding: 5px;
  text-align: left;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}

#panel9 {
  padding: 50px;
  display: none;
}

#panel10, #flip10 {
  padding: 5px;
  text-align: left;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}

#panel10 {
  padding: 50px;
  display: none;
}

A questo punto passiamo alla fase HTML che diventa sempre con l'aggiunta di un po' di codice php 

Per il bottone

<button> Premi Start</button> 

Per il codice PHP con cui richiamare i selettore con le Jquery

$val[1]=”Valore 1″;
$val[2]=”Valore 2″;
$val[3]=”Valore 3″;
$val[4]=”Valore 4″;
$val[5]=”Valore 5″;
$val[6]=”Valore 6″;
$val[7]=”Valore 7″;
$val[8]=”Valore 8″;
$val[9]=”Valore 9″;
$val[10]=”Valore 10″;

for ($i = 1; $i <= 10; $i++) {


echo '<div id="flip'.$i.'" align="left"> '.$val[$i].' <p id="para'.$i.'"> '.$value[$i].'</p></div>';
echo '<div id ="panel'.$i.'"> Hello World!</div>';
}

‘

‘.

Per vedere come funziona potete guardare su Esempio Test1 . Per un approfondimento sul linguaggio di programmazione