Dreamlandpoly: Бисквитки (cookies) (Част 2)

Промяна на цвят на фон и текст в HTML страница

Съдържание на файла cookies_form.html:

<!--cookies_form.html -->
<!DOCTYPE html>
<html>
<head>
<title>Бисквитки</title>
<meta http-equiv="Content-Type" content="text/html"; charset="UTF-8">
<link rel="stylesheet" type="text/css" href="cookies_style.css">
</head>
<body>
 
<div>

<fieldset id="st_1">
<legend id="st_2">Хрупкави бисквитки:</legend>

<form action="cookies_create.php" id="color" metod= "POST">
 
<label id="st_3">Изберете цвят за фон</label><br><br>
<select name="bgcolor" form="color" >
  <option value="white" >white</option>
  <option value="red" >red</option>
  <option value="blue">blue</option>
  <option value="orange">orange</option>
  <option value="yellow">yellow</option>
</select> <br><br>

<label id="st_3">Изберете цвят за текст:</label><br><br>
<select name="textcolor" form="color">
  <option value="white" >white</option>
  <option value="red">red</option>
  <option value="blue">blue</option>
  <option value="orange">orange</option>
  <option value="yellow">yellow</option>
</select> <br><br>

<hr id="st_4">

 
<input id="st_5" type="submit" name="submit" value=" Оцвети ме! ">
</fieldset>
</form>

</div>

</body>
</html>

Файлът, който обработва HTML формата е cookies_create.php:

<!--cookies_create.php -->
<!DOCTYPE html>
<?php
/*Тази страница получава и обработва данните от „cookies.html” */

//Задава езиковата кодировка на страницата
header('Content-Type: text/html; lang="en-US"; charset=UTF-8');

//Получава входните данни
if(isset($_POST['submit'])) {
 echo "Къде са бисквитките?";
}
else{
//Създава бисквитки
$body= "body";
$bgcolor=$_REQUEST['bgcolor'];
$text="text";
$textcolor=$_REQUEST['textcolor'];
setcookie("body", $bgcolor, time()+3600, "/","", 0);
setcookie("text", $textcolor, time()+3600, "/", "",  0);
echo "<body style='background-color:$bgcolor; color:$textcolor '>";
echo "Ура! Оцвети ме.<br><br>";
echo "Бисквитка '" . $body . "' е поставена!<br>";
echo "Бисквитка '" . $text . "' е поставена!<br>";
echo "Стойността на бисквитка" . " " . $body . " " . "e". " " . $_COOKIE["body"] . "." . "<br>";
echo "Стойността на бисквитка" . " " . $text . " " . "e". " " . $_COOKIE["text"] . ".". "<br>";
echo "Споделяме тайни със сървъра. :)";
}
 
?>
<html>
<head>
<title>Бисквитки</title>
</head>
<body>

</body>
</html>

Файлът, който стилизира формата е cookies_style.css:

/* cookies_style.css*/
#st_1{
 display: block;
    margin-left: 2px;
    margin-right: 2px;
    padding-top: 2em;
    padding-bottom: 1em;
    padding-left: 0.75em;
    padding-right: 0.75em;
    border: 1px solid lightgray;
    width: 300px;
    background-image: url('Butterfly1.png'); 
    background-repeat:no-repeat;
 background-position: bottom right;

}

#st_2{
 color: red;
}

#st_3{
 color: #005ce6;
}

#st_4{
 margin-top: 10px;
 margin-bottom: 20px;
 color: lightgray;
 height: 1px;
}

#st_5{
 font-size:20px; 
 cursor:pointer; 
 padding: 10px 10px 10px 10px;
 margin-bottom: 10px;
}

Създайте файловете.

Качете ги на сървъра.

Тествайте в браузъра.


Задаване на цвят за фон и текст


Създаване на бисквитки за промяна на цвят на фон и текст

Преглед на бисквитките и хедъра на HTML страница

Вече споменах за някои от начините за разглеждане на HTTP хедъра на HTML страница. Ще разгледам малко по-подробно как става това в уеб конзолата на браузъра Mozila Firefox.

Стартирайте браузъра.
Shift+F2, за да отворите уеб конзолата (или кликнете с десен клавиш на мишката върху страницата и от контекстното меню изберете Inspect Element).
Кликнете върху Toogle Developer Tools.

Уеб конзола на Mozila Firefox
От менюто изберете Networking.
Въведете URL-адреса в адресната лента на браузъра.
Презаредете страницата.
Ще видите списък с всички мрежови заявки (requests), които се правят при зареждане на желаната страница (ако страниците са няколко, ще се покажат всички заявки).

Уеб конзола на Mozila Firefox

В нашия случай заявките са три: първата е за страницата cookies_form.html, втората- за cookies_style.css (стилизирането на страницата се зарежда от външен файл), а третата е за фоновото изображение. И трите заявки са направени с GET метода.
Изберете Show request details, за да разгледате хедърите, бисквитките, GET параметрите на заявката, HTTP отговора на заявката и др..
Във формата, изберете цвят за фон и цвят за текст.
Кликнете върху бутон “Оцвети ме” на формата, за да я изпратите за обработка. Разгледайте хедърите, бисквитките, GET параметрите на заявката, HTTP отговора на заявката:

Уеб конзола-Headers

Уеб конзола-Cookies

Уеб конзола-Params

Уеб конзола-Response

Уеб конзола-Preview