Kerry Owston Blog

I've identified a weakness: It's forms

Photo by Dimitri Karastelev on Unsplash

I've identified a weakness: It's forms

Kerry Owston's photo
Kerry Owston
·

4 min read

I intend to use Laravel, but I still need PHP knowledge, so I challenge myself to write small projects that test my knowledge.

I tend to do okay but get really stuck when I need to process user-inputted data (For now, that user is me) using a form so I end up using a workaround.

Number Guessing game

My number guessing game was simple: the user inputs a range and generates a random number based on that range.

Then the user starts guessing and the script tells them if it was correct or incorrect while counting their number of guesses.

I simulated user input in my logic.

<?php 

$min = 7;
$max = 12;
$randomNum = 0;
$guess= 9;
$guesses = 0;

?>
<html>

<form>
    <h1>Number guessing game</h1>
</br>
    <label for="min">min number</label>
    <input type="text" name="min"></input>
</br>
    <label for="max">max number</label>
    <input type="text" name="max"></input>
</br>
    <input type="submit" />

</form>

<html>

<?php

if($min > $max || $min === $max){
    echo "the minimum number must not be greater to or equal to than the maximum number";
} else {
    $randomNum = rand($min,$max);
} 

if($guess < $min || $guess > $max) {
    echo "</br>your guess is not within the range you set</br>try again</br>";
    $guesses += 1;
    echo $guesses;
} elseif($guess < $randomNum || $guess > $randomNum && $guess != $randomNum) {
    echo $randomNum;
    echo "</br>incorrect try again</br>";
    $guesses += 1;
    echo $guesses;
} else if($guess === $randomNum) {
    echo "</br>correct</br>";
    $guesses += 1;
    echo "you needed ".$guesses." number of guesses";
}

?>

Here is how it was fixed.

A few things to note:

I was questioned why am letting users set a minimum and maximum range, that's because I wanted the number to have the maximum it could be and figured may as well add a minimum. It was really not that necessary for this purpose.

I was also told that to track the guesses I would need some asynchronous loading like AJAX which is beyond what I was trying to achieve here. Retaining the random number also depended on this.

<?php 

$min = 1;
$max = 10;
$error = null;
$result = null;

if (isset($_GET['guess'])) {
    $guess = $_GET['guess'];

    if ($guess < $min || $guess > $max) {
        $error = "the minimum number must not be greater to or equal to than the maximum number";
    } else {

        $randomNum = rand($min, $max);

        if ((int)$guess === $randomNum) {
            $result = "Correct";
        } else {
            $result = "you're guess is incorrect";
        } 
    }
}

?>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>

<?=$randomNum ?? '';?>

<form method="get" action="">
    <h1>Number guessing game</h1>
    <p>Please guess between <?=$min;?> and <?=$max;?></p>

   <p><label for="guess">Your guess:</label>
    <input type="text" min='<?=$min;?>' max='<?=$max;?>' name="guess" value="<?=$_GET['guess'] ?? '';?>"></p>

    <?php if (isset($error)) { ?>
    <p>Error: <span style='color:#ff0000'><?=$error;?></span></p>
    <?php } ?>

    <p><button type="submit">Submit</button></p>
</form>

<?php if (isset($result)) { 
    echo "<p>Result: $result</p>";
} ?>

</body>
</html>
https://codesandbox.io/p/sandbox/bold-merkle-ptzc2l

What did I gain from all this

Posting the data

<form method="post" action="">
Leave the action null and it will post to the same page.
Methos="post" means instead is send temporarily with the request to the server when the form is submitted which is generally when creating new data.
A get request meanwhile is for retrieving information.

if (isset($_GET['guess']))
When retrieving from the post request, I must use the isset function to extract the data I wan and apply logic to it.

<?=$randomNum ?? '';?>
<?= shorthand for open PHP and echo.
?? ' ' means if that echo happens to be empty then create an empty string instead.
This way I will avoid a warning that $randomNum has not been defined.

<p><label for="guess">Your guess:</label> <input type="text" min='<?=$min;?>' max='<?=$max;?>' name="guess" value="<?=$_GET['guess'] ?? '';?>"></p>
I was creating my inputs like it was HTML4 days also I can add min and max parameters for the number input field to make it hard for the user to guess also I can make the inputs sticky by using a $_GET to retrieve the last input I just posted..

When might this be useful?

I's pretty useless as a game. It doesn't track guesses or state the number.

It's good I guess if I wanted to make some sort of randomised selector based on user input. The user input would be moot when I could just generate a user input randomly since there is only 1 try.

It could be useful when trying to make some kind of competition-based random number generator that gives the user the option to use a number of their choice, their lucky number for instance.

Now What

You can expect many more forms from me.

HTMLPHPforms