Planets in the Solar System is a small PHP project that demonstrates the use of an array function and array variables. In this project, we made use of a WHILE loop, LIST language construct, and EACH function to produce a page that displays each planet in the Solar System along with a description of it using a selector-type form.
The link to the PHP page can be found here.
For this project, I heavily relied on Gautam Mokal’s PHP Tutorial on creating Dropdown lists using PHP. The tutorial seems kinda old since it’s still using the deprecated EACH function, but it still works as of this writing. I don’t know if PHP developers would remove it some day though, but if that happens, then most likely, this PHP code that I wrote may also cease functioning. As of PHP 7.2.0, EACH has been deprecated and usage of the function has been discouraged in favor of FOREACH.
About the Code
Unfortunately, it’s already 4am in the morning as of this writing, so I don’t have much time to discuss the entire code anymore. I’ll just focus on the important stuff including the CSS code that I use to make this page both browser, and at the same time, mobile-friendly.
On the CSS side, this is the style instructions that I gave the browser:
html {
font-size: calc(0.5em + 1vw);
background: url("//archive.org/download/galaxy-2643089_640/galaxy-2643089_640.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
overflow: hidden;
}
The above CSS for the font size “calc(0.5em + 1vw)” automatically adjusts the text size base on screen resolution, so that it would neither come out too big nor too small. The second line shows the url where the page is getting the background image from. It is also set to not repeat the image in case it’s smaller than the page size, and will be centered on both x and y coordinates (thus center center), and then “fixed” to make it not scroll.
The -webkit, -moz, and -o background size lines are for the different browsers, telling it to set background size as cover, which means, the background image should cover the entire background of the page, even if it has to stretch the image or cut a little bit off one of the edges.
Height specifies the amount of height the page should extend. 100% means it should make use of the maximum page height.
form, select {
background-color: transparent;
color: #ffffff;
font-size: 18px;
}
option {
background-color: #000000;
}
As for the transparent form, we use the CSS above… it should render the background color non-existent. Unfortunately, for the background color of the dropdown list, background-color transparent doesn’t work because this instruction only works on flat backgrounds; so we have to style it black (#000000) to match the background instead.
Now, let’s go to the PHP part… in the demo page shown, there are actually two Functions. Here is the first part… the code below is for the generated dropdown list.
<?php
$selected_planet = '';
function options() {
$var_none = '';
$var_mer = '';
$var_ven = '';
$var_ear = '';
$var_mar = '';
$var_jup = '';
$var_sat = '';
$var_ura = '';
$var_nep = '';
$var_plu = '';
$selected_planet = '';
if(isset($_POST['planets'])) {
$selected_planet = $_POST['planets'];
}
if($selected_planet == 'None') {
$var_none = '" selected="selected';
}
if($selected_planet == 'Mercury') {
$var_mer = '" selected="selected';
}
if($selected_planet == 'Venus') {
$var_ven = '" selected="selected';
}
if($selected_planet == 'Earth') {
$var_ear = '" selected="selected';
}
if($selected_planet == 'Mars') {
$var_mar = '" selected="selected';
}
if($selected_planet == 'Jupiter') {
$var_jup = '" selected="selected';
}
if($selected_planet == 'Saturn') {
$var_sat = '" selected="selected';
}
if($selected_planet == 'Uranus') {
$var_ura = '" selected="selected';
}
if($selected_planet == 'Neptune') {
$var_nep = '" selected="selected';
}
if($selected_planet == 'Pluto') {
$var_plu = '" selected="selected';
}
$planets=array('Please Select a Planet'=>'None' . $var_none,
'Mercury'=>'Mercury' . $var_mer,
'Venus'=>'Venus' . $var_ven,
'Earth'=>'Earth' . $var_ear,
'Mars'=>'Mars' . $var_mar,
'Jupiter'=>'Jupiter' . $var_jup,
'Saturn'=>'Saturn' . $var_sat,
'Uranus'=>'Uranus' . $var_ura,
'Neptune'=>'Neptune' . $var_nep,
'Pluto'=>'Pluto' . $var_plu);
$opt='';
while(list($choice,$value)=each($planets)) {
$opt.='<option value="' . $value . '">' . $choice . '</option>';
}
return $opt;
}
In the long code above, we are trying to create a loop that goes through once and loop the process several times so that we don’t have to make an option form one by one. If you guys notice, we have several empty variables above. This has to be all declared even if they are defined empty, otherwise, they would contain a null value and throw in a warning. After that, we need to set up conditions in case they are set or called by the dropdown list. It is stated there that if they are set or called, then they should contain ‘” selected=”selected’, but why? OK, I’ll explain… if you guys notice the part here:
while(list($choice,$value)=each($planets)) {
$opt.='<option value="' . $value . '">' . $choice . '</option>';
}
return $opt;
It is interpreted there that PHP will send the variable $opt into the loop. If you guys notice, $opt variable contains the html for the form — <option value=[variable A]>[Variable B]</option>. The variables that turns to selected=”selected” (ie. var_none, var_mer, etc.) are actually extra parts of the form that will be concatenated if the condition is met. It means that if certain values are selected in the dropdown list, then it will make the selection selected (thus selected=”selected”), this is to prevent the dropdown list from going back to the first option in the list.
Here’s the code for creating a dropdown option list:
$planets=array('Please Select a Planet'=>'None' . $var_none,
'Mercury'=>'Mercury' . $var_mer,
'Venus'=>'Venus' . $var_ven,
'Earth'=>'Earth' . $var_ear,
'Mars'=>'Mars' . $var_mar,
'Jupiter'=>'Jupiter' . $var_jup,
'Saturn'=>'Saturn' . $var_sat,
'Uranus'=>'Uranus' . $var_ura,
'Neptune'=>'Neptune' . $var_nep,
'Pluto'=>'Pluto' . $var_plu);
$opt='';
while(list($choice,$value)=each($planets)) {
$opt.='<option value="' . $value . '">' . $choice . '</option>';
}
return $opt;
In the code above, $planets is the variable that contains the array values. It goes on saying that if the value ‘Please Select a Planet’ is picked, then it would be converted to the paired value after “=>”. By the way, I’d assume that you guys know the basic PHP operators… we learned that period (.) means concatenate or it should attach the next entity. In this case, the paired value there is the string “None”, which will be attached to the content of the variable $var_none. $var_none as well as the rest of the $var_ variables initially contains no value, but if certain values are set then they turn into the value selected=”selected and thus, this certain option in the form will remain selected on page reload. $opt initially contains nothing, but once while and list executes, then its value changes and it keeps on changing until the loop ends.
While is a loop that tells PHP to execute the nested statement(s) repeatedly, as long as the while expression evaluates to True. The value of the expression is checked each time at the beginning of the loop, so even if this value changes during the execution of the nested statement(s), the process will not stop until the end of the iteration (each time PHP runs the statements in the loop is one iteration).
List is used to assign a list of variables in one operation and Each returns the current key and pair value from an array and advance the array cursor. In this case, the combination of list and each means it’s going to make the listed $choice and $value equivalent to each array key and corresponding value contained in the array variable $planets. $value and $choice will be concatenated into the option form along with the values they carry.
Finally, Return helps return the program control to the calling module. This is how the forms are generated until PHP runs out of statements to process.
So there you have it, that’s how the forms are generated. For the second function, I don’t think there is a need to explain it as it merely contains the key and the triggered event conditions. However, you guys might ask how the PHP generated dropdown list appears on the page? Well, they don’t just magically appear, they have to be called by a PHP echo command. This — <?php echo options($selected_planet); ?>, wherein “options” in that line is the function, and $selected_planet is the main variable it’s going to use in the function.
Here is the complete PHP code for the page:
<?php
$selected_planet = '';
function options() {
$var_none = '';
$var_mer = '';
$var_ven = '';
$var_ear = '';
$var_mar = '';
$var_jup = '';
$var_sat = '';
$var_ura = '';
$var_nep = '';
$var_plu = '';
$selected_planet = '';
if(isset($_POST['planets'])) {
$selected_planet = $_POST['planets'];
}
if($selected_planet == 'None') {
$var_none = '" selected="selected';
}
if($selected_planet == 'Mercury') {
$var_mer = '" selected="selected';
}
if($selected_planet == 'Venus') {
$var_ven = '" selected="selected';
}
if($selected_planet == 'Earth') {
$var_ear = '" selected="selected';
}
if($selected_planet == 'Mars') {
$var_mar = '" selected="selected';
}
if($selected_planet == 'Jupiter') {
$var_jup = '" selected="selected';
}
if($selected_planet == 'Saturn') {
$var_sat = '" selected="selected';
}
if($selected_planet == 'Uranus') {
$var_ura = '" selected="selected';
}
if($selected_planet == 'Neptune') {
$var_nep = '" selected="selected';
}
if($selected_planet == 'Pluto') {
$var_plu = '" selected="selected';
}
$planets=array('Please Select a Planet'=>'None' . $var_none,
'Mercury'=>'Mercury' . $var_mer,
'Venus'=>'Venus' . $var_ven,
'Earth'=>'Earth' . $var_ear,
'Mars'=>'Mars' . $var_mar,
'Jupiter'=>'Jupiter' . $var_jup,
'Saturn'=>'Saturn' . $var_sat,
'Uranus'=>'Uranus' . $var_ura,
'Neptune'=>'Neptune' . $var_nep,
'Pluto'=>'Pluto' . $var_plu);
$opt='';
while(list($choice,$value)=each($planets)) {
$opt.='<option value="' . $value . '">' . $choice . '</option>';
}
return $opt;
}
function show_planet() {
$selected_planet = '';
if(isset($_POST['planets'])) {
$selected_planet = $_POST['planets'];
}
if($selected_planet == 'Mercury') {
echo '<img src="mercury.gif" alt="Planet Mercury" width="30%" height="auto" /><br/>
<b>Planet Mercury</b><br/><br/>
<p>Mercury is the smallest planet in the Solar System and the closest to the Sun. During daytime, its temperatures can reach up to a blistering 806°F (430°C), which is hot enough to melt lead. However, Mercury has a very thin atmosphere, so the heat of the day escapes very quickly at night time. Mercury\'s nights are freezing cold, much colder than the coldest place on Earth.</p>';
}
if($selected_planet == 'Venus') {
echo '<img src="venus.gif" alt="Planet Venus" width="30%" height="auto" /><br/>
<b>Planet Venus</b><br/>
<p>Venus is the second planet from the Sun, and the second brightest heavenly body in the night sky after Earth\'s Moon. The planet is about the same size as Earth. Its atmosphere is thick with poisonous gas. Because of its thick atmosphere, heat is trap in the planet in a greenhouse effect causing its average temperature to shoot up to a scorching 864°F (462°C), making it even hotter than Mercury. The surface of Venus is hidden by thick clouds of sulfuric acid.</p>';
}
if($selected_planet == 'Earth') {
echo '<img src="earth.gif" alt="Planet Earth" width="30%" height="auto" /><br/>
<b>Planet Earth</b><br/>
<p>Earth is the third planet from the Sun, and the only planet in the Solar System that is known to support life. It has an atmosphere rich in Oxygen, and a large supply of liquid water on its surface.</p>';
}
if($selected_planet == 'Mars') {
echo '<img src="mars.gif" alt="Planet Mars" width="30%" height="auto" /><br/>
<b>Planet Mars</b><br/>
<p>Mars is the fourth planet from the Sun. It is a rocky planet about half the size of Earth. Mars and Earth share some similarities. Both planets have seasons, and both have icy layers at their north and south poles. However, unlike Earth, the surface of Mars is cold and dry, with only a thin atmosphere that is mostly made up of carbon dioxide.</p>';
}
if($selected_planet == 'Jupiter') {
echo '<img src="jupiter.gif" alt="Planet Jupiter" width="30%" height="auto" /><br/>
<b>Planet Jupiter</b><br/>
<p>Jupiter is the fifth planet from the Sun, and is the largest planet in the Solar System. It is more than 1,300 times the volume of the Earth. Jupiter is a gas giant, made mostly of Hydrogen and Helium with a small rocky core. Near the surface, powerful natural forces create clouds of brightly colored misty-looking gas, forming gargantuan storms that can grow bigger than the Earth and last for hundreds of years.</p>';
}
if($selected_planet == 'Saturn') {
echo '<img src="saturn.gif" alt="Planet Saturn" width="30%" height="auto" /><br/>
<b>Planet Saturn</b><br/>
<p>Saturn is the sixth planet from the Sun, and the second largest planet in the Solar System after Jupiter. It is famous for its huge system of colorful rings, which is made up of countless small particles of frozen water, with a trace component of rocky material. Saturn has a large family of more than 60 moons. Saturn is a huge ball of gas and liquid with s small solid core at its very center.</p>';
}
if($selected_planet == 'Uranus') {
echo '<img src="uranus.gif" alt="Planet Uranus" width="30%" height="auto" /><br/>
<b>Planet Uranus</b><br/>
<p>Uranus is the third largest planet in the Solar System, the second furthest from the Sun, and surprisingly the coldest, with -357°F (-216°C). It is mostly composed of various ices, like frozen water, ammonia and methane. Being a gas giant type planet, it doesn\'s have a surface. Anything that lands on it will just sink through its upper atmosphere, and into the liquid icy center. Like Saturn, Uranus also has a ring. While most planets spin like tops on an axis, Uranus spins on its side like a rolling ball.</p>';
}
if($selected_planet == 'Neptune') {
echo '<img src="neptune.gif" alt="Planet Neptune" width="30%" height="auto" /><br/>
<b>Planet Neptune</b><br/>
<p>Neptune is the second coldest planet in the Solar System after Uranus, and the furthest planet from the Sun. Methane gas in its upper atmosphere makes it look blue in color. At the top of its cloud layers, the temperature is usually a freezing -330°F (-201°C), though it can get even colder. Unlike its calm neighbor planet Uranus, Neptune often experiences raging storms.</p>';
}
if($selected_planet == 'Pluto') {
echo '<img src="pluto.gif" alt="Planet Pluto" width="30%" height="auto" /><br/>
<b>Planet Pluto</b><br/>
<p>Pluto\'s classification as a planet is still being debated by Scientists at the time of this writing, however, if it is classified as a planet, then it is the furthest planet to the Sun. Pluto is a dwarf planet consisting of a mixture of 70 percent rock and 30 percent water ice. The planet has a rocky core surrounded by a mantle of water ice, with more exotic ices such as methane, carbon monoxide, and nitrogen ice coating the surface. Pluto has a different elliptical orbit that doesn\'s lie in the same plane as the eight planets.</p>';
}
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Planets in the Solar System</title>
<meta name="description" content="A PHP demonstration that makes use of an array variable. Each dropdown selection will provide information of the selected planet." />
<meta name="robots" content="index,follow" />
<meta name="keywords" content="planets, solar system, array, PHP" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
html {
font-size: calc(0.5em + 1vw);
background: url("//archive.org/download/galaxy-2643089_640/galaxy-2643089_640.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
overflow: hidden;
}
body, p, h1 {
font-family: Lucida Console, monospace;
}
body {
text-align: center;
color: #ffffff;
height: 100%;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
p {
text-align: justify;
}
form, select {
background-color: transparent;
color: #ffffff;
font-size: 18px;
}
option {
background-color: #000000;
}
</style>
</head>
<body>
<h1>Planets in the Solar System</h1>
<p>This PHP demo will demontrate usage of array variables for the form selector. Using a while loop, list language construct, and an each function, we would be able to create a dropdown list form and trigger an event that displays and describes each planet in the Solar System with each selection.</p>
<form action="<?PHP echo $_SERVER['PHP_SELF']; ?>" method="POST">
<select name="planets" onchange="this.form.submit();">
<?php echo options($selected_planet); ?>
</select>
</form><br/><br/>
<?php echo show_planet($selected_planet); ?>
</body>
</html>
Note that per each selection in the dropdown list, the second function “show_planet” executes and reveal the planet and its description base on the value of the chosen option. The second function is written to display that content and is called via an echo function, pretty much similar from the call for the dropdown list.
I know this writing might still be vague for you guys, but if you have questions, feel free to drop me a comment and I’ll be glad to explain it in more detail.
Follow me at:
