Working on a Background Color and Text Color Switching Project

6/13/2018 Update
Hey guys, noob here… ok, so I manage to make some nursing calculators in the last few days, but we all know those are basic stuff kids in high school have probably already been doing so I stepped up my self-study and training class up a bit to something a little more complicated.

In project 2: IV Fluid Drip Rate Calculator (Expanded Version), I made a Background Color Switch in there that changes the background color of the page. It works like a charm until you use the IV Fluid Drip Rate Calculator (the main thing), wherein the background color goes back to default (equivalent to #ffffff otherwise commonly known as White). I left it like that because that wasn’t the main goal of the project, but from that glitch I learned more on how PHP process the submitted values. Of course, without books or teachers to teach me, I am merely learning from observation.

This is what I observed, when you submit the values from the form, PHP processes it one time, then the variables empty. Which means in the next session, those values you previously entered are already gone. So when you use the calculator, and since you can only submit either of the two forms, in this case the calculator, PHP will only process the content of the submitted form (of the calculator). The background color switch didn’t send a new value for PHP to process and there was no value retained from the previous session so that is why the background color went back to default. I was able to confirm this when I did a variable dump, the variable for the background color did disappear on page reload. But of course, it’s common sense, it follows an analogy that if you don’t have a pocket to store your coins then of course you can’t keep your coins and the same logic applies here. My code lacks the instruction as to where PHP should store the values for future retrieval and neither was there a retrieve instruction. Sometimes, this is the problem, we thought computers can think and interact like humans… it doesn’t, at least, not without an AI. We have to provide instructions for it to follow otherwise it would just do nothing. Anyway, I started another project to solve this problem. This time, this project is about Background and Text Color Switching. I replicated the Background Color Switch code from the last project and rewrote some parts of it (or should I say — develop) to make it more efficient and clean.

About a day before, I talk to a developer regarding this problem, he advised me to use cookies to store the values and he generously provided me with a solution, here’s his code: (I’m posting this for educational purposes)

<?php

if (array_key_exists('color', $_POST)) {
    $bgcolor = $_POST['color'];
    setcookie('color', $bgcolor);
} elseif (array_key_exists('color', $_COOKIE)) {
    $bgcolor = $_COOKIE['color'];
} else {
    $bgcolor = 'black';
}

?>
<html>
  <head>
    <style>
      body {
        color: <?= $bgcolor ?>;
      }
    </style>
  </head>
  <body>
    This color is <?= $bgcolor ?>
  </body>
</html>

Unfortunately, I could not make it work as setcookie function seems like it does not get values from variables like in the code above, $bgcolor. It returns an error stating that second value should be a string. I tried to make it work but then I realized that it won’t work anyway if the user’s browser does not allow cookies. So I tried another approach, this time, using $_SESSION global variable and it worked remarkably! I instructed PHP to store the textcolor variable into a Session variable when the form is submitted, so eventhough the content of the textcolor variable emptied after page reload, the content was transferred into the Session variable. After that, I instructed PHP that if Session variable is not empty, then Textcolor should be equal to (or should get its value from) Session Variable. With this instruction, I was able to make use of the two forms without undoing the changes made by one another. However, it still gives me an error. There is an undefined variable in one of my options. I suspect there is a conflict with the variables and I think Session variable should be unset somewhere in the process… I’m still analyzing, but it’s 3am in the morning, so I think I should do this tomorrow.

By the way, here’s my code: (It’s still broken though)

The link for my project is here.

<?php
	session_start();
	if(!empty($_SESSION['textcolor'])) {
		$txtcolor = $_SESSION['textcolor'];
	} else {
		if(isset($_POST['changetxtcolor'])) {
			$selected = "selected=\"selected\"";
			foreach ($_POST['txtcolor'] as $txtcolor );
			$_SESSION['textcolor'] = $txtcolor;
		} else {
			if(empty($_POST['txtcolor'])) {
				$_POST['txtcolor'] = "#000000;\n";
				$txtcolor = $_POST['txtcolor'];
			}
		}
	}
	if(isset($_POST['changebgcolor'])) {
		$selected = "selected=\"selected\"";
		foreach ($_POST['bgcolor'] as $bgcolor );
	} else {
		if(empty($_POST['bgcolor'])) {
			$_POST['bgcolor'] = "#ffffff;";
			$bgcolor = $_POST['bgcolor'];
		}
	}
?>
<html>
<head>
<title>Background and Text Color Switch | Altometa</title>
<meta name="description" content="A simple PHP program that demonstrates how PHP can change the background color and text color of the page using a Dropdown switch." />
<meta name="robots" content="index,follow" />
<meta name="keywords" content="background color, text color, background and text color" />
<style>
	body {
		background-color: <?php echo $bgcolor . "\n"; ?>
	}
	p, form{
		color: <?php echo $txtcolor . ";\n"; ?>
	}
	h1 {
		color: <?php echo $txtcolor . ";\n"; ?>
		text-align: center;
	}
</style>
</head>
<body>
	<h1>Background and Text Color Switch</h1>
	<p>This is a demonstration to show how PHP can manipulate the colors of the background of the page as well as change the color of the texts.</p><br/>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br/>
	<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">Change Background Color: <select size="1" name="bgcolor[]" required="required">
		<option value="#ffffff" <?php if(isset($bgcolor)) { if($bgcolor == "#ffffff") { echo $selected;} else { echo "";}}?>>White</option>
		<option value="#000000" <?php if(isset($bgcolor)) { if($bgcolor == "#000000") { echo $selected;} else { echo "";}}?>>Black</option>
		<option value="#ff4500" <?php if(isset($bgcolor)) { if($bgcolor == "#ff4500") { echo $selected;} else { echo "";}}?>>Red Orange</option>
		<option value="#ffb6c1" <?php if(isset($bgcolor)) { if($bgcolor == "#ffb6c1") { echo $selected;} else { echo "";}}?>>Peach</option>
		<option value="#008080" <?php if(isset($bgcolor)) { if($bgcolor == "#008080") { echo $selected;} else { echo "";}}?>>Teal</option>
		<option value="#8db600" <?php if(isset($bgcolor)) { if($bgcolor == "#8db600") { echo $selected;} else { echo "";}}?>>Apple Green</option>
		<option value="#00ffff" <?php if(isset($bgcolor)) { if($bgcolor == "#00ffff") { echo $selected;} else { echo "";}}?>>Cyan</option>
		<option value="#654321" <?php if(isset($bgcolor)) { if($bgcolor == "#654321") { echo $selected;} else { echo "";}}?>>Dark Brown</option>
		<option value="#008000" <?php if(isset($bgcolor)) { if($bgcolor == "#008000") { echo $selected;} else { echo "";}}?>>Green</option>
		<option value="#ff0000" <?php if(isset($bgcolor)) { if($bgcolor == "#ff0000") { echo $selected;} else { echo "";}}?>>Red</option>
	</select>
	<input name="changebgcolor" type="submit" value="Submit" />
	</form>
	<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">Change Text Color: <select size="1" name="txtcolor[]">
		<option value="#ffffff" <?php if(isset($txtcolor)) { if($txtcolor == "#ffffff") { echo $selected;} else { echo "";}}?>>White</option>
		<option value="#000000" <?php if(isset($txtcolor)) { if($txtcolor == "#000000") { echo $selected;} else { echo "";}}?>>Black</option>
		<option value="#ff4500" <?php if(isset($txtcolor)) { if($txtcolor == "#ff4500") { echo $selected;} else { echo "";}}?>>Red Orange</option>
		<option value="#ffe5b4" <?php if(isset($txtcolor)) { if($txtcolor == "#ffe5b4") { echo $selected;} else { echo "";}}?>>Peach</option>
		<option value="#008080" <?php if(isset($txtcolor)) { if($txtcolor == "#008080") { echo $selected;} else { echo "";}}?>>Teal</option>
		<option value="#8db600" <?php if(isset($txtcolor)) { if($txtcolor == "#8db600") { echo $selected;} else { echo "";}}?>>Apple Green</option>
		<option value="#00ffff" <?php if(isset($txtcolor)) { if($txtcolor == "#00ffff") { echo $selected;} else { echo "";}}?>>Cyan</option>
		<option value="#a52a2a" <?php if(isset($txtcolor)) { if($txtcolor == "#a52a2a") { echo $selected;} else { echo "";}}?>>Brown</option>
		<option value="#008000" <?php if(isset($txtcolor)) { if($txtcolor == "#008000") { echo $selected;} else { echo "";}}?>>Green</option>
		<option value="#ff0000" <?php if(isset($txtcolor)) { if($txtcolor == "#ff0000") { echo $selected;} else { echo "";}}?>>Red</option>
	</select>
	<input name="changetxtcolor" type="submit" value="Submit" />
	</form>
</body>
</html>
Follow me at:

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.