Files in example:
index.php
<?php
/** Load an array from a cookie and clear the cookie. */
function loadAndClearArrayFromCookie($name)
{
if (isset($_COOKIE[$name]) && !empty($_COOKIE[$name])) {
$array = json_decode($_COOKIE[$name], true);
// Reset the cookies by expiring them.
setcookie($name, "", time() - 1000, "/");
return $array;
}
// Return an empty array if cookie not found.
return [];
}
$formErrors = loadAndClearArrayFromCookie("formErrors");
$lastInput = loadAndClearArrayFromCookie("lastInput");
?>
<html>
<head>
<style>
body {
height: 100vh;
background-color: #ff8000;
display: flex;
flex-direction: column;
align-items: center;
}
label, input, span.error, form > button {
display: block;
font-family: "Helvetica";
}
label, input, form > button {
color: #773d04;
}
input {
padding: 0.3em 1em;
margin: 12px 0;
}
span.error {
font-size: 0.85em;
color: #e42512;
text-shadow: 1px 1px #ff6f6f;
}
input, span.error {
margin-left: 10px;
}
form {
margin-top: 100px;
width: 300px;
padding: 50px;
/* see: https://neumorphism.io/#ff8000 */
border-radius: 50px;
background: #ff8000;
box-shadow: inset 20px 20px 16px #de6f00,
inset -20px -20px 16px #ff9100;
}
form > div {
margin-bottom: 20px;
padding: 20px;
border-radius: 28px;
background: linear-gradient(145deg, #ff8900, #e67300);
box-shadow: 13px 13px 21px #de6f00,
-13px -13px 21px #ff9100;
}
form > button {
margin-top: 50px;
border:none;
padding: 10px;
width: 75px;
border-radius: 62px;
background: linear-gradient(145deg, #e67300, #ff8900);
box-shadow: 7px 7px 14px #d96d00,
-7px -7px 14px #ff9300;
}
form > button:hover {
border-radius: 62px;
background: linear-gradient(145deg, #e67300, #ff8900);
box-shadow: 7px 7px 14px #d96d00,
-7px -7px 14px #ff9300;
}
form > button:active {
border-radius: 62px;
background: #ff8000;
box-shadow: inset 13px 13px 26px #e87400,
inset -13px -13px 26px #ff8c00;
}
input {
border: none;
border-radius: 62px;
background: #ff8000;
box-shadow: inset 13px 13px 26px #e87400,
inset -13px -13px 26px #ff8c00;
}
</style>
</head>
<body><form action="process_my_form.php" method="post">
<div> <!-- First name field -->
<label>First Name</label>
<input name="first_name" value="<?=$lastInput["first_name"] ?? "";?>">
<span class="error"><?=$formErrors["first_name"] ?? "";?></span>
</div>
<div> <!-- Last name field -->
<label>Last Name</label>
<input name="last_name" value="<?=$lastInput["last_name"] ?? "";?>">
<span class="error"><?=$formErrors["last_name"] ?? "";?></span>
</div>
<button>Submit</button>
</form></body></html>
process_my_form.php
<?php
define("ERROR_TOO_LONG", "Must be shorter than ");
define("ERROR_TOO_SHORT", "Must be longer than ");
define("ERROR_EMPTY", "Must not be empty");
/** Returns the input with potentially dangerous parts removed. */
function sanitize(string $input, mysqli $databaseLink): string
{
$input = strip_tags($input); // Remove HTML tags, preventing abuse
$input = $databaseLink->real_escape_string($input); // Prevent SQL injections
return $input;
}
/** Returns whether the input is empty or not. */
function isPresent(string $input): bool
{
return !empty($input);
}
/** Returns whether the input is longer that maxLength. */
function isLongerThan(string $input, int $maxLength): bool
{
return strlen($input) > $maxLength;
}
/** Returns whether the input is shorter than minLength. */
function isShorterThan(string $input, int $minLength): bool
{
return strlen($input) < $minLength;
}
/**
* Process the registration form.
*
* @param array $inputArray Either $_GET or $_POST, depending on what
* the form method was.
*/
function processRegisterForm(array $inputArray)
{
$databaseLink = new mysqli("localhost", "root", "", "NeatTreats");
$firstName = sanitize($inputArray["first_name"], $databaseLink);
$lastName = sanitize($inputArray["last_name"], $databaseLink);
$databaseLink->close();
$formErrors = [];
if (isPresent($firstName)) { // optional field - only check if specified
if (isLongerThan($firstName, 20)) { // length check
$formErrors["first_name"] = ERROR_TOO_LONG . "20";
// error message will specify it was longer than 20
}
}
if (!isPresent($lastName)) { // presence check
$formErrors["last_name"] = ERROR_EMPTY;
}
$addedSuccessfully = false;
if (empty($formErrors)) {
$databaseLink = new mysqli("localhost", "root", "", "NeatTreats");
$databaseLink->query(
"INSERT INTO Customer(FirstName, LastName)" .
"VALUES ($firstName, $lastName);"
);
// No error means added succesfully!
if (empty($databaseLink->error)) $addedSuccessfully = true;
$databaseLink->close(); // Always remember to close the database.
}
if ($addedSuccessfully) {
/* I have provided 3 methods of automatic redirection below.
Also provide a link just in case the automatic redirection
fails. */
echo "<p>You were added to our database!</p>";
echo "<script>window.location='on_success.php';</script>"; // Javascript redirection
// header("Location: on_success.php"); // Header redirection
// echo "<meta http-equiv='refresh' content='0;url=on_success.php'>"; // HTML redirection
echo "<a href='on_success.php'>Continue</a>";
} else {
// Redirect back to form page.
echo "<p>Could not add record due to invalid input</p>";
echo "<script>window.location='index.php';</script>";
echo "<a href='index.php'>Try again</a>";
/* Set form errors and last inputs by a cookie.
json_encode is so the cookie sent is a string. It should be
decoded at the other end.
time() + 3600 makes the cookie expire in 3600 seconds (1 hour)
from now.
Set the cookie path to "/" so that it can be accessed from
the form on the other page. */
setcookie("formErrors", json_encode($formErrors), time() + 3600, "/");
setcookie("lastInput", json_encode($inputArray), time() + 3600, "/");
}
}
?>
<html><body><?php processRegisterForm($_POST); ?></body></html>
on_success.php
<html><body>
<p>Well done, you're in our database!</p>
</body></html>
Parent topic: Example 2
Top comments (0)