PHP

with HTML and a pinch of CSS and Javascript

Recap on HTML

<p>

<h1>

<br>

<hr>

<a>

<meta>

<input>

<script>

Text

Big Heading

Break (new line)

Horizontal Rule (Line)

Link

Information about the page

Input Box

Javascript

Getting Started

Make a new account at https://codeanywhere.com/. Then tell Jake the email you signed up with to get an invite to the Code Club server.

Make yourself a new work folder by right clicking on the Code Club server then New Folder. You may work in pairs as Codeanywhere has collaborative features.

please don't edit anyone elses work or any files in the root

Collecting Data from a form.

Make a new file in your project folder ending in .php. Even though it is a PHP file you can still put HTML inside. Make a simple page and add this form:

<!-- feel free to remove comments -->

<form>
    <label>Name:</label>
    <input type="text" placeholder="Enter Your Name"> <!-- placeholder is the text that shows
                                                           before the user has typed anything -->
    
    <br> <!-- this is to make the inputs show on different lines and not just one -->
    
    <label>Favourite Colour:</label>
    <input type="color">
    
    <br>
    
    <button type="submit"> <!-- the type="submit" tells the browser to send the data from the
                                form to the server -->
        Submit
    </button>
</form>

Adding a bit of flair

Now we will use some CSS to make it look a bit nicer:

body {
    padding: 1em;
}
      
* {
    font-family: sans-serif;
}

Adding some test code

If you're observant you'll have noticed that when you try out your form you get a little ? on the end of the URL. That is because the browser is trying to send the data to the server but we haven't got any name tags on our inputs. Add appropriate names to your inputs:

And try out your form again. Now if you look at the URL you'll get something like:

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

The colour has a %23 in front which is a hashtag. You can't put hashtags in URLs so they are automatically converted.

...continued

Now we need to get our server to collect this information. For this we are going to need some PHP code.

Anywhere in your HTML, make a new <p>. Inside that we need to put some PHP. To tell the server you are putting some PHP you need to start with <?php then you can put some commands, we are going to put echo $_GET["name"]; then put a ?> at the end to close off the PHP. Now if you refresh your page it will say your name. We can say hello in front by adding "Hello " then to join two strings we need to put a . inbetween. You should have this:

<?php
    echo "Hello ".$_GET["name"]."!";
?>

What if there is no name?

Well, it will just say Hello ! and will display an error. We can add an if statement to check if there is a name by doing:

<?php
    if (**STATEMENT**) {
    
    }
?>

You need to replace **STATEMENT** with what you want to check. PHP has a function called isset() which checks whether the variable exists. Our statement is:

isset($_GET) && isset($_GET["name"])
//    /|\               /|\
//     |                 |
//     |            Check if the name exists
//     |
// Check for a the GET request which the browser sends

Great! Test it out and then try and make the Hello {name}! The colour that the user picked.

Calling an API

Now make a new page. Try and do this yourself with the first answer on this page (https://vh7.uk/z0). Then try one of these APIs:

or try and find one that interests you.

Challenges:

Make it look nice with CSS

Next week we will continue with PHP and make a login system.

PHP

By Jake Walker

PHP