Blogul colgherului stochastic: Limbajul PHP. Formulare HTML pentru input. Un script pentru background de culoare variabila (link)

In PHP persistenta informatiei intre initializarile unui script oarecare este asigurata prin cookies si/sau sesiuni.

Enuntul urmator este dat ca tema in cadrul unui curs de PHP procedural inainte de partea de materie referitoare la cookies si sesiuni (care ar face rezolvarea mai facila J)

" Se realizeaza un formular HTML in care utilizatorul introduce componentele RGB ale culorii dorite (valorile pentru rosu, verde si albastru). Odata formularul expediat, fundalul paginii va deveni de culoarea solicitata. La aplicatia anterioara se adauga dupa fiecare din cele 3 campuri (R, G si B) doua butoane, cu etichetele "+10" si "-10". Efectul butoanelor va fi scaderea/cresterea cu 10 a valorii culorii corespunzatoare butonului (si implicit ajustarea culorii de fundal a paginii), in limita plajei de valori permise, 0 - 255."

Prima parte a enuntului nu comporta dificultati. Valorile sunt introduse in formulare de tip text input si expediate cu un buton submit.

Daca s-a apasat butonul (<==> daca in array-ul GET/POST se afla valoarea corespunzatoare cheii butonului), atunci componentele specificate in tagul

<body style = "background-color: rgb($r, $g, $b)"> primesc valorile expediate prin cele trei formulare text input.

….

$form =<<<ZED

< <input type = "text" name = "red">

</form>

ZED;

……

if(in_array("Ok", $_POST))

{

$r = $_POST['red'];

$g = $_POST['green'];

$b = $_POST['blue'];

}

…..

echo "<body style =\"background-color: rgb($r, $g, $b)\">".$form;

Propagrea informatiei starii curente (de pilda, $r = 100) in vederea folosirii (decrementarii/incrementarii) intr-o stare ulterioara implica utilizarea unui element hidden.

Pentru facilitarea intelegerii mecanismului, simplificam momentan cerintele si impunem ca aplicatia sa contina un singur element text input in care utilizatorul introduce valoarea pentru o componenta oarecare, sa zicem albastru. La acest element de input se adauga cele doua butoate submit pentru functionalitatea de decrementare / incrementare cu 10.

Astfel, aplicatia va avea, de fapt, trei butoane submit: cel pentru validarea input-ului si cele pentru decrementare/incrementare.

Apasarea unui buton submit determina trimiterea catre server a tuturor elementelor de formular, cu exceptia celor corespunzatoare altor eventuale butoane submit continute de respectivul formular. Asta, intrucat, in mod evident, putem apasa un singur buton odata.

In codul de mai jos, elementele de formular expediate sunt perechile cheie => valoare:

"blue" =>value (implicita, 255, sau furnizata de utilizator),

"hyde"=>$hid si respectiv

"s1" =>"-10" (daca se apasa '-10'/decrementare) sau

"s2" =>"+10" (incrementare) sau

"send" =>"Ok" (daca se introduce o valoare in vederea validarii sau daca se foloseste valoarea implicita).

Fie $_POST['blue'] valoarea primita de server la un moment dat in urma validarii butonului "Ok".

Valoarea va fi atribuita atat componentei $b in vederea folosirii in <body ….> pentru colorarea background-ului, cat si variabilei $hid, referita de cheia "hyde" elementului hidden, pentru cazul in care utilizatorul decide sa foloseasca butoanele de incrementare/decrementare.

Codul si printscreen-urile:

<!DOCTYPE HTML>

<head>

<title>bgcolor1</title>

<style>

body{

color: lime;

text-shadow: 2px 1px red;

}

</style>

</head>

<?php

$r = 0;

$g = 0;

$hid = 255;

$b = 255;

if(in_array("Ok", $_POST))

{

$b = $_POST['blue'];

$hid = $b;

}

else if(array_key_exists("s1", $_POST))

{

$increment = 10;

if($_POST['hyde']- $increment >= 0) $b = ($_POST['hyde'] -= $increment);

else $b = 0;

$hid = $b;

}

else if(array_key_exists("s2", $_POST))

{

$increment = 10;

if($_POST['hyde'] + $increment <= 255) $b = ($_POST['hyde'] += $increment);

else $b = 255;

$hid = $b;

}

$form =<<<ZED

</form>

ZED;

echo "<body style =\"background-color: rgb(0, 0, $b)\">".$form;

echo "<br><h3>Component blue: $b</h3><br />"

</body>

</html>

In continuare, putem reveni la cerintele initiale ale problemei. Va trebui sa introducem inca doua elemente text input pentru celelalte componente fundamentale de culoare (red, green) si cate doua butoane submit de decrementare/incrementare.

Principul ramane acelasi.

Daca se introduc valori in prin text input atunci acestea vor fi atribuite componentelor $r, $g, $g specificate in tagul <body ….>.

De asemenea, valorile curente ale componentelor $r, $g, $b se vor atribui variabilelor $hidr, $hidg, $hid referite de cheile "hyder", "hydeg", "hyde" in vederea unor eventuale decrementari/incrementari.

Selectia situatiilor se face in functie de butonul apasat. In acest caz, sunt 7 chei corespunzatoare a 7 butoane: "send"=>"Ok" pentru validare valori in text input, "s1" si "s2" pentru decrementare/incrementare componenta blue, "s3" si "s4" pentru componenta red si "s5" si "s6" pentru green.

Spre deosebire de cazul in care s-a tratat o singura componenta, aici s-au definit doua functii Add(…) si Dim(…) pentru a reduce duplicarea codului. Doua dintre argumentele acestor functii sunt referintele &$component si &$hidden pentru decrementarea/incrementarea valorilor componentelor de culoare, respectiv pentru setarea valorii atributelor hidden.

Inaintea codului si a printscreenului, link-ul catre un site de freehosting unde ruleaza solutia la enunt.

<!DOCTYPE HTML>

<head>

<title>bgcolor3</title>

<style>

body{

color: lime;

text-shadow: 2px 1px red;

}

#header{

width:60%;

background-color:lightgrey;

text-alignt:left;

color:blue;

}

</style>

</head>

<?php

$r = $b = $g = 100;

$hid = $hidr = $hidg = 100;

$increment = 10;

function Add($key, &$component, &$hidden)

{

global $increment;

if($_POST[$key] + $increment <= 255) $component = $_POST[$key] + $increment;

else $component = 255;

$hidden = $component;

}

function Dim($key, &$component, &$hidden)

{

global $increment;

if($_POST[$key] - $increment >= 0) $component = $_POST[$key] - $increment;

else $component = 0;

$hidden = $component;

}

if(in_array("Ok", $_POST))

{

$r = $_POST['red'];

$g = $_POST['green'];

$b = $_POST['blue'];

$hid = $b;

$hidr = $r;

$hidg = $g;

}

else if(array_key_exists("s1", $_POST))

{

Dim("hyde", $b, $hid);

$hidr = $r = $_POST['hyder'];

$hidg = $g = $_POST['hydeg'];

}

else if(array_key_exists("s2", $_POST))

{

Add("hyde", $b, $hid);

$hidr = $r = $_POST['hyder'];

$hidg = $g = $_POST['hydeg'];

}

else if(array_key_exists("s3", $_POST))

{

Dim("hyder", $r, $hidr);

$hid = $b = $_POST['hyde'];

$hidg = $g = $_POST['hydeg'];

}

else if(array_key_exists("s4", $_POST))

{

Add("hyder", $r, $hidr);

$hid = $b = $_POST['hyde'];

$hidg = $g = $_POST['hydeg'];

}

else if(array_key_exists("s5", $_POST))

{

Dim("hydeg", $g, $hidg);

$hidr = $r = $_POST['hyder'] ;

$hid = $b = $_POST['hyde'];

}

else if(array_key_exists("s6", $_POST))

{

Add("hydeg", $g, $hidg);

$hidr = $r = $_POST['hyder'] ;

$hid = $b = $_POST['hyde'];

}

$form =<<<ZED

<br>Green:<br />

</form>

ZED;

echo "<body style =\"background-color: rgb($r, $g, $b)\">";

echo "<div id = \"header\">";

echo "<h3>You can change the background color in two ways:</h3>";

echo "<h3>1. Put the desired value(s) in the appropriate text box(es) and then press Ok.</h3>";

echo "<h3>2. Increase or decrease one component at the time without any input in the text boxes.</h3>";

echo "<h3>Enjoy!</h3>";

echo "</div>";

echo $form;

echo "<h3>Component red: $r</h3>";

echo "<h3>Component green: $g</h3>";

echo "<h3>Component blue: $b</h3>";

</body>

</html>

Blogul colgherului stochastic

Sunday, January 31, 2016

Limbajul PHP. Formulare HTML pentru input. Un script pentru background de culoare variabila (link)

No comments:

Post a Comment