PHP, Code Challenge

PHP Code Challenge 002

In this PHP code challenge, we learn how to build and handle submission a form with PHP.
Published: 06/27/2022 11:01 am
Updated: 06/27/2022 11:02 am
#php #code challenge #interview prep #learn php #php test #form #html
June 2022 | Work Heavy

What is a PHP Code Challenge?

What is a PHP code challenge? A PHP code challenge is question/task used to test your skills as a PHP developer. Most commonly theses are used in PHP developer interviews, but ultimately can be used at anytime to improve your knowledge and mastery of PHP.

We have created a library of PHP code challenges for you to study from as developers. Employers can also use this library to test potential employees. You can find all the challenges & source code answers in our Github repo.

The Challenge

Create a basic HTML form that takes an hourly wage and number of hours as number inputs and then prints out the total wage for the given inputs. For example, the user enters 7.5 for the hourly wage, 5 for hours, presses a button to submit the form, then the UI displays 37.50 for the result.

This a fairly basic challenge in which we test 1 important fundamental of PHP:

  • Inputs/Output of Forms

Solution Step 1

The first step in any solution is to first clarify and truly understand what is problem asking. For this challenge there are 3 distinct tasks:

  • Build form that takes an hourly wage and number of hours as number inputs
  • Calculate the total wage for the given inputs
  • Print out the total wage for the given inputs

Solution Step 2

The second step in the solution is to identify any objects that you can code into models. The answer to this question is yes, we have 1 object we should model, the wage data. This will model the data inputted in to the form. Since we have 2 inputs, hours and hourly wage, those will be the fields on the class.

class WageEntry{

    // fields
    public $hourly_wage = 0;
    public $hours = 0;


    function __construct($hourly_wage, $hours) {
        // set data
        $this->hourly_wage = $hourly_wage;
        $this->hours = $hours;
    }
}

Solution Step 3

The third step in the solution is to add a function to our class for calculating the total wages. Here we simply multiple the two fields and round the result.

class WageEntry{

    // fields
    public $hourly_wage = 0;
    public $hours = 0;

    function __construct($hourly_wage, $hours) {
        // set data
        $this->hourly_wage = $hourly_wage;
        $this->hours = $hours;
    }

    function totalWage(){
        return round($this->hourly_wage*$this->hours, 2);
    }
}

Solution Step 4

The fourth step in the solution is to build the model from the form inputs. We haven't build the form yet but we will end up a form that submits via a GET request. We create a helper function to safely get the URL params, then get the params, and finally build the entry via our class.

function getUrlParamSafely($key, $default = null){
    return isset($_GET[$key]) ? $_GET[$key] : $default;
}

// url params
$hourly_wage = getUrlParamSafely('hourly_wage', 0);
$hours = getUrlParamSafely('hours', 0);

// get wage entry
$wageEntry = new WageEntry($hourly_wage, $hours);

Final Solution Step

The final step in the solution is to build the form. We need two inputs, a button to submit, and then some way to display the results. For the sake of this exercise, we will just add another input field after the button. For this solution, we will just keep the form options to default aka it will submit to the same page and it will make a GET request. For displaying the results

<form>
    <label class="form-element">Hourly Wage</label>
    <input class="form-element mb-25" type="number" name="hourly_wage" id="hourly_wage" step="0.01" value="<?php echo $wageEntry->hourly_wage; ?>"/>

    <label class="form-element">Hours</label>
    <input class="form-element mb-25" type="number" name="hours" id="hours" step="0.01"  value="<?php echo $wageEntry->hours; ?>"/>

    <button class="form-element mb-25">Calculate</button>


    <label class="form-element">Total Wage</label>
    <input class="form-element" type="number" value="<?php echo $wageEntry->totalWage(); ?>"/>
</form>

Recap

Now we have a working solution to the challenge. The most important thing is that it actually accomplishes what the challenged asked for. We also were able to add a little extra to make it a better solution & reusable for the future. Here are the key aspects:

  • Built a model for the data in the form
  • Used a custom function in the model
  • Safely get URL params in reusable function
  • Build model from form inputs
  • Build a form
  • Print results back to UI

You can find the source code to this challenge (#002) and all the other challenges in our Github repo.