I am starting a series of tutorials designed to move a person from a newbie in PHP to a proficient PHP developer even if that person has limited knowledge of web development. This is one of the 20 projects that this series will have. This project is beginner level. Stay tuned for the coming projects because they will involve challenging and fun stuff like a forum, blog, address book, and much more. Please register on this channel if you want to be notified when another project is published.
Here are the aspects of PHP that are covered in this post:
- Form submission using GET and POST superglobals
- Form validation
As I progress with this post, the source code of the Greeter application will be modified to cover other aspects of PHP.
1. Greeter app – Version 1
This version receives a name submitted through an input form and then displays that name alongside the string “Hello “. For example, “Hello Awa” is displayed if the name submitted from the form is Awa.
greeter_v1.php:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Greeter - 2/20 Projects in PHP</title>
</head>
<body>
<?php
// if the button with name="greet" is clicked
if (isset($_GET['greet'])) {
echo "<h1>Hello " . $_GET['name'] . "</h1>";
}
?>
<form action="greeter_v1.php">
<input type="text" name="name">
<button type="submit" name="greet">Submit</button>
</form>
</body>
</html>
What we can learn from this version of the greeter app:
- The action attribute of the form specifies the destination of the data in the form after the form is submitted. In this case, it is greeter_v1.php which is the same page.
- The method attribute specifies the request type that is made when the form is submitted
- When the method attribute is not specified, the default is GET – like in this case.
- When the form is submitted, the values are placed in the $_GET[] built-in superglobal as an array with keys being the name attributes of the form fields and the values as what was entered into the form.
- When the method used to submit the form is GET, the values from the form are submitted through the browser URL and are visible. Something like this:
This is not good practice for two main reasons:
- If there was any sensitive information in the form such as a password, it would be visible in the browser URL and therefore a security risk.
- There is a limit to the length of a string that can be passed through the URL. Very long strings cannot be passed using GET.
2. Greeter app – Version 2
This version of Greeter app basically performs the same function as version 1 but with some additional features and optimization that we will examine in a minute:
greeter_v2.php:
<?php
// initialize $name and $error variables
$name = "";
$error = "";
// if the button with name="greet" on the form is clicked
if (isset($_POST['greet'])) {
$name = $_POST['name'];
if (empty($name)) {
$error = "Please provide username";
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Greeter - 2/20 Projects in PHP</title>
</head>
<body>
<!-- display greeting if the $name is not empty -->
<?php if (!empty($name)) { ?>
<h1> Hello <?php echo $name; ?> </h1>
<?php } ?>
<!-- display validation message if there is an error -->
<?php if (!empty($error)) { ?>
<p style="color: red;"><?php echo $error; ?></p>
<?php } ?>
<form method="post" action="greeting_v2.php">
<input type="text" name="name">
<button type="submit" name="greet">Submit</button>
</form>
</body>
</html>What to learn from version 2 of Greeter app:
- In this version of Greeter app, setting the method attribute to post enables the browser to send a POST request (instead of the GET request of version 1) when the submit button is clicked.
- When the form is submitted, the values are stored in the superglobal $_POST[ ] variable in the form of an array
- Using a POST request doesn’t display the information being submitted on the browser URL, which is good.
- The form is also being validated; if the form is submitted without a value for the name, an error message (or rather a validation message) is displayed, telling the user to provide a name.
- A new method has been introduced called empty() which checks if a variable has a value by returning true or false
