Step 5: Basic Interface
This step includes the basic data processing thingy.
Now, make a new file and name it
Write these down:
The outcome is about like this:
Actually, the whole file was made of HTML codes, but it's fine to keep it with
Now make a new file, name it
It's short, but when you input the name on the
Hello, *name_input*!
You can change the
For an instance, you enter "Chloe" on the text input and name the input "name", then the
OK, after it's changed, you can enter the name as you wish, like "Chloe" in our example now. Type it in, then press Send.
You will see the screen writes 'Hello, Chloe!'
The codes are short, but now you can have some interface basics. Now try this for another kind of experiment.
Open
When you enter a name,for instance "Anton", here's what you get in
Hello, Anton!
But look at the address bar. Taking example that the text input is named "input", here's what you get in the URL:
The underlined part shows you what the GET method does. See why it's called URL rewriting?
Now you should have some idea about processing data from form inputs. On the next meetings, we'll start with basic operations like
Now, make a new file and name it
interface.php
.Write these down:
<form action="process.php" method="post">
<input type="text" name="name">
<br />
<input type="submit" value="Send">
</form>
The outcome is about like this:
Actually, the whole file was made of HTML codes, but it's fine to keep it with
.php
extension. The action="process.php"
parameter sets the destination file when the 'Send' button is pressed. While the method="post"
sets the method used to send the data input. Then the name="input"
parameter on <input> tag names the inserted data as "input" for the superglobal $_POST
. You can change it into "name" or anything else, but don't forget to change the name parameter in the box bracket on the new codes below.Now make a new file, name it
process.php
, and type these codes in:<?php
$name = $_POST["input"];
print("Hello, $name!");
?>
It's short, but when you input the name on the
interface.php
and pressed 'Send', it'll print:Hello, *name_input*!
You can change the
$_POST["input"]
into $_POST["name"]
or anything as long as it's the same with the text input's name, so the data won't be lost in the middle of the process.For an instance, you enter "Chloe" on the text input and name the input "name", then the
process.php
must be changed first, change from $_POST["input"]
into $_POST["name"]
.OK, after it's changed, you can enter the name as you wish, like "Chloe" in our example now. Type it in, then press Send.
You will see the screen writes 'Hello, Chloe!'
The codes are short, but now you can have some interface basics. Now try this for another kind of experiment.
Open
interface.php
in editor mode, change the method into GET (method="get"
). Then in the process.php
, change the line $name = $_POST["input"]
into $_GET["input"]
(those examples showed the text input named as "input", if you name it with another name, be sure to change it as well).When you enter a name,for instance "Anton", here's what you get in
process.php
:Hello, Anton!
But look at the address bar. Taking example that the text input is named "input", here's what you get in the URL:
http://your_web_address/process.php?input=Anton
The underlined part shows you what the GET method does. See why it's called URL rewriting?
Now you should have some idea about processing data from form inputs. On the next meetings, we'll start with basic operations like
if()
,if()-else()
,for()
, and some more and see what they can do.