Skip to content

Hello You tutorial

Jump to bottom Edit New page
Greg Bowler edited this page Jan 13, 2015 · 21 revisions

Adding logic to your pages

This tutorial will start at the point the Hello World tutorial left off: with a single HTML page outputting the traditional phrase "Hello, World!". The Hello World tutorial's completed code is hosted at http://github.com/BrightFlair/hello-world-tutorial.

Passing data from the page

Having PHP code inline within HTML is strictly forbidden, as it couples presentation view data with the computational business logic of your application.

Step 1: Add a form to the page

At some point, it becomes necessary to bridge the gap between HTML and PHP: the web browser has already been built to do this through the use of forms. Let's update the index.html markup to include a simple HTML form that takes your name as a parameter, and is submitted using a button.

<!doctype html>

<h1>Hello, World!</h1>

<form>
    <label>
        Your name:
        <input name="your-name" />
    </label>
    <button>Submit</button>
</form>

The outcome of this tutorial will be to replace the word "World" with the supplied name. In order to replace "World", we will surround it in a span tag, making it easy to reference using standard DOM methods.

Step 2: Add placeholder element

Let's change the h1 to wrap the placeholder word with a span:

<h1>Hello, <span>World</span>!</h1>

Page View & Page Logic

Code that executes in context of a page is called Page Logic. To add Logic to a View, create a PHP script with the same name as the View. For example, the index.html view has its logic in the optional index.php script. The contents of the Logic script is a class definition with at least one method, go().

The go() method is called before the page is rendered and allows you to interact with the page via PHP and execute your required logic, calling other classes and functions where required.

The Page Logic's namespace is the Page directory prefixed with your application's namespace (by default, "App"). See below for an example, or read the project configuration page for how to change this.

Namespaces must be PSR-4 compliant.

Step 3: Create Page Logic script

Create a new file containing the boilerplate Page Logic class for the index page:

src/Page/index.php

<?php
namespace App\Page;

class Index extends \Gt\Page\Logic {

public function go() {
	// Your page logic here.
}

}#

As you can see, the class is an extension of the \Gt\Page\Logic class, which provides the class with a number of useful features.

One of the most notable features of a Page Logic is access to the Page's DOM. We can use standard DOM methods to manipulate the contents of the page.

For this example, we will use the querySelector() method and textContent property to get reference to the span in the HTML and alter its content.

The querySelector() method takes one parameter, any CSS selector. Therefore to reference the span in question, we can use $this->document->querySelector("h1>span") and update its content like so:

$this->document->querySelector("h1>span")->textContent = "changed";

Step 4: React to form input

By default, html forms send their data over the URL in querystring parameters (the part of the address after the '?' character). Alternatively, forms can be set to use HTTP POST (keeping the URL clean), but either way we can access these variables in PHP using the $_GET and $_POST variables and react to them. Read more about the basics of reading URL parameters.

The name attribute of our HTML input element is "your-name", which we can check on in our Page Logic. If the value is not empty, we will simply set the textContent of the span to the supplied content.

<?php
namespace App\Page;

class Index extends \Gt\Page\Logic {

public function go() {
	// First, check that the form has been submitted.
	if(!empty($_GET["your-name"])) {
		// Store a reference to the output element.
		$outputEl = $this->document->querySelector("h1>span");
		// Set its textContent to the supplied data.
		$outputEl->textContent = $_GET["your-name"];
	}
}

}#

We now have an interactive page that greets you!

Taking things further

A good idea now is to experiment with the project you've just created. What else can be done with a simple form on a page? Here are some ideas:

  • Remove the h1 element until the form is submitted, so that the project only greets you once you have supplied a name.
  • Use HTTP POST to submit the form rather than passing the data as URL querystring parameters.

This tutorial's completed code is hosted at http://github.com/BrightFlair/tutorial-hello-you- check out the simple example code, and also the other branches of the repository to see some different approaches.

Up next: Todo List tutorial

Website | Packagist | CircleCI | Scrutinizer

Introduction

Tutorials

User guide

Further reading

Setup guides

Clone this wiki locally