Building a Pixel to EM Calc in PHP

Tag: 

This tutorial is for those beginner programmers whom are just looking to learn a bit more on how to use the php language to process and validate html forms.

This is in no way an exhaustive form processing tutorial.

I did my best to explain each statement and why I did what I did.

I hope this helps someone.

<?php
    
// php opening tag

// First, I use a conditional statement that checks if the forms "Convert button" has been clicked.
// When the Convert button is clicked it evaluates to "true", and executes the code inside the statement.
// However, because this condition evaluates to "false" on page load, it will exit and jump to the else statement.
if (isset($_POST['submit']) && $_POST['submit'] == 'Convert') {

  
// Next, I define the following variables with a global scope because
   // if I set them within the conditional statements below, php throws errors.
   // The $pattern variable is set to contain a regular expression which only allows numeric values.
   // I found the pattern on http://regexr.com/
  
$pattern = '/^(?:\d*\.)?\d+$/';
  
  
// Next, I set these two variables to their respective input textbox values.
   // The $ _POST constant is used because the form method is set to $_POST.
   // I could have used $_GET, but $_GET inserts these values into the browsers address bar.
  
$basePixelSize = $_POST['basePixelSize'];
  
$targetPixelSize = $_POST['targetPixelSize'];

  
// Next, I use an "if" statement that uses the php preg_match function().
   // The preg_match function() checks the the $basePixelSize variable for
   /// non numeric values and if the $basePixelSize value is greater than zero.
   // If this condition evaluates to "true", it executes the code within this statement.
   // If this condition evaluates to "false" it exits this statement and jumps to the else statement.
  
if(preg_match($pattern,$basePixelSize) && $basePixelSize > 0){

     
// Next, I nested a conditional statement within the previous conditional if statement..
      // This condition also uses the php preg_match function() that checks the
      // $targetPixelSize variable for non numeric values and if that value is greater than zero.
      // If this condition  evaluates to "false" it exits this statement and jumps to the else statement
      // If the statement evaluates to "true" it executes the code within this "if" statement.
     
if(preg_match($pattern,$targetPixelSize) && $targetPixelSize > 0){
        
         
// I set the $quotient variable to the quotent of $targetPixelSize divided by $basePixelSize.
        
$quotient = $targetPixelSize/$basePixelSize;;

        
// Next, I defined a variable $result and set it's value to the value of the $quotient variable.
         // Notice that I passed the $quotient variable into the php number_format() function.
         // This function, as defined, limits the decimal points to 4 places.
         // I also the "em" string to the $result variable so it's displayed in the result textbox in the form.
        
$result = number_format($quotient,4,'.','').'em';

     
// This else statement lies within the nested (third) if statement.
      // If it evaluates to false, this is the else statement it jumps to.
     
}else{
        
        
// Reset the $result variable to a string. This will be the result textbox vales you will see in the form.
        
$result = 'error';

        
// Use the php echo statement to display an error message in the browser.
        
echo '<h2 style="color:#f00">Enter a valid Target Pixel Size</h2>';
        }

   
// This else statement lies within the second if statement.
    // If it evaluates to false, this is the else statement it jumps to.
  
}else{

     
// Reset the $result variable to a string. This will be the result textbox vales you will see in the form
     
$result = 'error';

     
// Use the php echo statement to display an error message in the browser.
     
echo '<h2 style="color:#f00">Enter a valid Base Pixel Size</h2>';
        }

// This else statement lies within the first if statement.
// If it evaluates to false, this is the else statement it jumps to.
}else {

     
// Set these variables to empty.
      // I set them to empty because this will be the value of the textboxes when the page first loads.
      // Remember,  when the page first loads the first conditional evaluates to false.
     
$basePixelSize = "";
     
$targetPixelSize ="";
     
$result = "";
}

// Lastly, I use a conditional statement that checks if the forms "Reset button" has been clicked.
// When the reset button is clicked it evaluates to "true" and executes the code inside the statement.
if (isset($_POST['reset']) && $_POST['reset'] == 'Reset') {

  
// Set these variables to empty.
   // The values inside these variables will be the value of the textboxes when Reset button is clicked.
  
$basePixelSize = "";
  
$targetPixelSize ="";
  
$result = "";
}

// The closing php statment
?>
This is the HTML form that is processed by the above php code
// The form is using the post method so in the php code you must the $_POST constant
// The form has no action attribute so it defaults to self, meaning the same page the form in on.

// The maxlength  attribute limits the number of characters allowed to be entered into the textbox'
// The name attribute is how you target the form elements.
// The pattern attribute is a new HTML 5 form attribute that checks the value entered. Notice this pattern is the same regular expression I used in the $pattern variable in the php code. Even though I don't need this attribute because I'm checking against it in the php code this gives me extra protection. All browsers don't support this attribute, so be careful. You should use form validation via server side as well as client side.
// The placeholder attribute is another new HTML 5 attribute. The value of the placeholder is displayed inside the textbox and is usefull to give the user hints on data entry.
// The required attribute makes it necessary for the element to be filled in.
// The type attribute describes the type of element.
// The value attribute is the value that the element will pass to the php code (or other language).
// The readonly attribute allows you to highlight and copy the content of the element but not change it

// Notice that I'm using php code to echo out the variables value in the textbox elements value attribute.

<form id="ptec" method="POST" name="pixelToEmConverter">
<p>Base Pixel Size <span style="font-size:0.875em;">(can't be negative or zero)</span><br />
<input maxlength="5" name="basePixelSize" pattern="(?:\d*\.)?\d+" placeholder=".0001->99999" required size="16" type="textbox" value="<?php echo $basePixelSize; ?>" /></p>
<p>Target Pixel Size <span style="font-size:0.875em;">(can't be negative or zero)</span><br />
<input maxlength="5" name="targetPixelSize" pattern="(?:\d*\.)?\d+" placeholder=".0001->99999" required size="16" type="textbox" value="<?php echo $targetPixelSize; ?>" /></p>
<p>Result<br />
<input name="result" readonly size="16" type="textbox" value="<?php echo $result;?>" /></p>
<p><input name="submit" type="submit" value="Convert" /> <input name="reset" type="submit" value="Reset!" /></p>
</form>