Web Applications

Exercise: Render simple web page

Create a PHP file and use it to render a simple (and valid) web page.

Create the following variables and render them. Do one variable at a time. You can employ following fragment of code.

$name = 'Ailish';
$age = 32;
$title = '<AI>';
  

You can upload the file to webik. Alternatively, you can execute the following command to run the PHP server locally. You have to run the command in the directory where you PHP files are located.

php -S 127.0.0.1:8080
  

Always use htmlspecialchars to sanitize output of dynamic content.

Exercise: Url query arguments

You can extend the previous code or create a new PHP file. Utilize $_GET global property to access URL query arguments. Implement the following functionality (Demo).

• If URL query argument counter is not set, use 0 as a default.
• Add link that navigates to counter - 1.
• Add link that navigates to counter + 1.

Remember that you can utilize var_dump to get debug output for a variable, employ http_build_query to build URL query part, and use filter_input to read values from $_GET.

$counter = filter_input(INPUT_GET, "counter", FILTER_VALIDATE_INT);
if ($counter !== false && $counter !== null) {
  echo("Variable is an integer");
} else {
  echo("Variable is not an integer");
}
  

Exercise: Simple form

Create two files: form.php contains HTML form, submit.php handles submissions.

The form uses GET method and submits (using action) to the submit.php file. The form must contain the following fields: name, age, luck, and intelligence. Where age, luck and intelligence are numbers between 0 and 100.

In the submit.php, read query arguments and check that all data was provided and that they meet requirements from the previous section. Render a page with information about invalid data and link back to the original form. If data is valid, render a hello message based on age:

• age <= 6 : You are so cute {name}.
• 6 < age <= 18 : Hello young one.
• 18 < age : Greetings, {name}.

Demo.

Exercise: Invalid data handling

Build on the previous exercise. When a user submits invalid data, redirect the user back to the original form. You can utilize header and exit functions. Setting the location header automatically sets the response code. The redirect code may look like the example below:

header("Location: ./form.php?name=petr&luck=30&invalid=submit");
exit();
  

Make sure to call the header function before any output (e.g., echo, var_dump) is sent to the client.

Modify form.php so that it loads form values from the URL query and uses them during rendering the form. In addition, use an additional URL query argument (like in the example above) to indicate invalid submission.

As a result, when I provide invalid values to the form and submit it, I get redirected back to the form. Yet the form contains the values as I provided them. In addition, there is the message that a submission failed.

Exercise: POST

Change the form method to POST. Try to submit the form and refresh the page. Make sure you understand what is happening and why.

Exercise: POST with redirect

Create a new page success.php and redirect to this page from submit.php for successful submit. You need to move the rendering of the submission message and utilize the URL query to pass the state.

Exercise: One file to rule them all

Merge all files into one while preserving the same functionality. You may need to add some more query arguments. Utilize $_SERVER['REQUEST_METHOD'] to read the HTTP method.