Because you can complete this mini project in under 15 minutes while also learning the most useful fundamentals of the interactive web:
● Getting some data from a user
● Sending that data to a server
● Processing that data on the server
and generating a response
So, let’s start with this simple project, and then you can build on it.
In this project, we’ll follow this plan to send data from client to server. (To review some key terms: the client is your computing device, and the server manages all the requests from devices on a network.)
We’ll start with a bare-bones webpage—nothing fancy. (As you read the code below, note that in HTML, we can write comments in between the
<!—and --> symbols. Anything I write in between those symbols is an explanation of our code; these comments will not be rendered by the browser.)
<!DOCTYPE html>
<html>
<head>
<title>PHP feedback form</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
<!—We can add some styles later. -->
</style>
</head>
<body>
<!—Here be our form. -->
</body>
</html>
Now, let’s add the form. As we mentioned above, a form empowers us to collect data and send that data over the web to a server; the server processes the data. Observe the code:
<!-- Begin form, and specify where it’s going to send our data and how. -->
<form action="URL_OF_OUR_PROCESSING_SCRIPT.PHP" method="post" name="form">
<!—Inside the form, let’s put some input fields. -->
<input name="name" type="text" placeholder="Your name"/>
<br>
<input name="email" type="text" placeholder="Email"/>
<br>
<input size="30" name="header" type="text" placeholder="Subject"/>
<br>
<textarea cols="32" name="message" rows="5"> Your message
</textarea>
<br>
<!—Let’s add a button that submits this form to the server. -->
<input type="submit" value="Submit" />
</form>
We’ll be using a PHP script. PHP is a scripting language for websites that is widely supported and easy to use in cases like ours. When the server receives our request from the form and notices that this request contains a PHP script, the server will take these actions:
The script itself will take these actions:
For the purposes of this demo, we’ll just send the email to the same email address that we input into our form. For a project you’re putting into production, you might want to change the email address that will receive the message to something else—for example, your administrative email address or the email address of a customer support line.
We’ll need to make a file with a .php extension, and once we’ve written everything we need, upload the file to a certain place on our web server. So, let’s name our file feedback-mailer.php. Here’s the code that goes inside. (Note that we’ll write our comments after // when using PHP)
Now, let’s add the form. As we mentioned above, a form empowers us to collect data and send that data over the web to a server; the server processes the data. Observe the code:
<!-- After 10 seconds, redirect to a different page. In this case, Google. -->
<meta http-equiv='refresh' content='10; url=https://google.com/'>
<meta charset="UTF-8" />
<!-- The PHP logic begins. -->
<?php
// Time to get the variables from the user’s request. Once we execute these four commands, we’ll have the user’s data in our variables.
$name = $_POST['name'];
$email = $_POST['email'];
$header = $_POST['header'];
$message = $_POST['message'];
// Creating the email message that we’ll send.
$mes = "Name: $name \nE-mail: $email \nSubject: $header \nMessage: $message";
// Trying to send the message using the PHP mailer module.
$send = mail ($email,$header,$mes,"Content-type:text/plain; charset = UTF-8\r\nFrom:$email");
// If send successful:
if ($send == 'true')
// ‘Echo’ returns some text back to the webpage.
{echo "Message sent";}
// If send fails:
else {echo "Something went wrong";}
?>
To test this piece of software, we need to upload the .php file to a web server that runs PHP. It’s 2020, so almost any web-hosting server will run it. I could also install a local PHP environment and make requests over it.
Having uploaded the file, we need to find out its URL and place it in the <form> tag:
<form action="URL_OF_OUR_PROCESSING_SCRIPT.PHP" method="post" name="form">
This makes sure that once the form is sent, it is sent to the correct URL, and the data in the form gets processed by the script that we wrote.
Finally, we can open our HTML page from anywhere (a local computer or a website), and just… use it.
From here on, there’s a lot we can improve:
But for now, congratulations on creating some very useful software with PHP. PHP is the same script that Facebook, Wikipedia, and WordPress use, so be proud of yourself.