PHP and HTML

PHP Webserver

PHP has a built in web-server. This means that no external server like Apache or Nginx is required to start a web-site and interlink the pages on this site.

Starting a server

The server is started with one command on the command line:

php -S localhost:<port> [-t /path/to/folder]

Example:

php -S localhost:8080

This previous command will start a web-server in the current working directory and will be accessible at the URL: http://localhost:8080.

You can pick any port, as long as it is between 1024 and 65535. By convention 8000 or 8080 are picked because of the resemblance with the official HTTP-port: 80.

As mentioned before, by default the server will start in the current working directory. If you wish the root of the site to be another directory, specify it via the -t option.

By default the web-server will search and execute serve the index.html or index.php file in the servers root directory. (root directory = the directory where the server was started)

Making a simple page

mkdir my-website
cd my-website
echo "Hello world" > index.html
php -S localhost:8080
firefox localhost:8080

You should be greeted with Hello world…

Because the web-pages are served via a PHP server, all PHP files (ending in .php) will be interpreted by the webserver. This allows us to generate the HTML content dynamically.

Exercises

Include / Require

PHP allows us to include one file into another. This is done via the include or require;

The difference between the two is that require will fail if the specified file can’t be included where include will merely warn about the failed inclusion.

include('path/to/file.php');

require('path/to/another-file.php');

Forms

Forms can be used to send data from the web-page to the server. This data can be read and processed via PHP.

A form is composed out of a form-tag and data tags.

Form tag

<form action="<action>" method="<method>">
    <!-- content -->
</form>

The form tag has two required attributes:

• action
• method

Action

This attribute specifies the page the data should be sent to.

To send the data back to the same page, specify: # or the URL of the current page.

<form action="#"></form>
<form action="http://server.com/script-handle-data,php"></form>

Method

The method defines how the data should be send to the server.

There are two main methods:

• GET
• POST

GET

GET mains appending the data as URL parameters.

Say we want to send the username and the age of a user back to the server, the URL could look like this:

http://server.com/script-to-handle-data.php?username=johnd&age=21

This method has two gotchas:

1. The data is sent visible to the server. Never use this method to send sensitive data back to the server.
2. The number of characters allowed in an URL is limited. So large amounts of data can not be sent this way…

An advantage of this method is that the URL with the data attached can be bookmarked or shared.

POST

POST The post method comes in where GET falls short.

The data is sent in the body of the HTTP request and is this invisible and not limited by size.

This method is most often used to send data from forms back to the server

<form action="#" method="get"></form>
<form action="#" method="post"></form>

Data tags

Other special tags are used to present or request data from the user.

In order to send the data, contained in the elements, back to the server, the name attribute must be set on the elements. This name can than be used on the backend to retrieve the values entered by the user.

Input

<input type="text" value="" name="">

The input tag encompasses a lot of “data types”. The type-attribute can be used to modify the behaviour of this tag.

Types:

• checkbox
• email
• file
• number
• password
• radio
• text

The value attribute holds the default value of the element. If not defined, the element will be empty.

The radio and checkbox type don’t take a value (only) but a state, the checked replaces the value attribute.

<ul>
   <li><input type="checkbox" checked name="input-type-checkbox"></li>
   <li><input type="checkbox" name="input-type-checkbox"></li>
   <li><input type="email" value="hello.world@mail.com" name="input-type-email"></li>
   <li><input type="file" value="Hello World" name="input-type-file"></li>
   <li><input type="hidden" value="Don't show this input to the user" name="input-type-hidden"></li>
   <li><input type="number" value="42" name="input-type-number"></li>
   <li><input type="password" value="hello world" name="input-type-password"></li>
   <li><input type="radio" checked name="input-type-radio"></li>
   <li><input type="radio" name="input-type-radio"></li>
   <li><input type="submit" value="hello world" name="input-type-submit"></li>
   <li><input type="text" value="hello world" name="input-type-text"></li>
</ul>

<form action="#" method="post" enctype="multipart/form-data"></form>

Select

The select tag allows the user to choose options out of a predefined set:

<select name="name-sent-backend">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

As can be seen in the example, a select is composed out of multiple options.

The default behaviour is that only one option can be selected at once.

This can be altered via the multiple-attribute.

<select name="name-sent-backend">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

<br>

<select multiple name="name-sent-backend">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

Sub-group can be created via optgroup

<select name="name-sent-backend">
   <optgroup label="numbers">
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
   </optgroup>
   <optgroup label="letters">
         <option value="a">Option a</option>
         <option value="b">Option b</option>
         <option value="c">Option c</option>
   </optgroup>
</select>

<br>

<select multiple name="name-sent-backend">
   <optgroup label="numbers">
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
   </optgroup>
   <optgroup label="letters">
         <option value="a">Option a</option>
         <option value="b">Option b</option>
         <option value="c">Option c</option>
   </optgroup>
</select>

Textarea

To send a block of text back to the server, use a textarea.

<textarea name="name-sent-to-server">
Write

Multiline content

Here
</textarea>

Label

The label is not an input/data tag, but a meta-data tag.

This tag is used to add information about a data-tag. For example: label a password field as a password field.

A side benefit of using lables is that clicking a label, will automatically focus it’s corresponding data element.

<label>
   Name:
   <input type="text" value="jonh Doe" name="name">
</label>

<br>

<label>
   Age:
   <input type="text" value="21" name="age">
</label>

<br>

<label>
   Loves ice-cream:
   <input type="checkbox" name="loves-ice-cream">
</label>

PHP special data arrays

When data is sent to a PHP server, PHP will automatically populate the corresponding special array according/

Special arrays:

• $_GET: Holds al the data sent via the GET method.
• $_POST: Holds al the data sent via the POST method.
• $_REQUEST: Holds al the data sent via GET and POST combined.
• $_FILES: Holds all the info about the uploaded files.

Example:

<form action="#" method="post">
    <input type="text" value="Hello World" name="name">
    <input type="number" value="21 World" name="age">
    <input type="submit" value="Submit" name="submit">
</form>

print_r( $_POST );

/*
Array(
    [name] => "Hello World",
    [age] => 21
)
*/

This data can now be processed via PHP.

To test if data was submitted, the value of the submit button can be used.

In the previous example was the value: submit.

if( isset( $_POST['submit'] ) ) {

    /* Do stuff with data */
}

Exercises

first name, last name, gender, age
john, doe, male, 21
jane, doe, female, 18
jake, smith, male, 20
joan, d'arc, female, 33