Skip to content

Hello You tutorial

Jump to bottom Edit New page
Greg Bowler edited this page May 18, 2026 · 24 revisions

The Hello World tutorial is useful for orientation, but it doesn't show much of the real-world WebEngine workflow. This tutorial turns that first static page into a personalised response so we can see the full round trip from browser to PHP and back again.

What we'll build

In this tutorial we will add:

  • a form
  • page logic
  • simple input handling
  • basic DOM binding

By the end, the page will greet the user by the name they submit.

Build steps

Start by adding a form to the page view. The HTML can stay simple:

<!doctype html>
<h1>Hello, <span data-bind:text="name">you</span>!</h1>

<form>
	<label>
		<span>Your name:</span>
		<input name="name" required />
	</label>
	
	<button name="do" value="greet">Greet!</button>
</form>

This HTML has an h1 for outputting the greeting. Notice that the default value can be written directly into the HTML, so before the user has told us their name, we can still output the default "Hello, you!" message. Also notice the data-bind:text attribute. This means that PHP will be able to change the text content of the element by passing it a matching name value.

In the form, there's a label for the name input, and a button to perform the greeting. The button has a name attribute with the value do, which triggers a significant feature of WebEngine: do buttons can trigger the execution of do functions - see below.

Alongside the index.html, create an index.php with the do function:

use GT\Input\Input;
use GT\DomTemplate\Binder;

function do_greet(Input $input, Binder $binder):void {
	$name = $input->getString("name");
	$document->bindKeyValue("name", $name);
}

When the request contains a key of do, a matching function will be executed. In this case, the button's value is greet, so the do_greet function will execute, if it exists. The Input and Binder classes are all we need. In the example above, the name is extracted from the user input and provided directly to the binder. It's done as two steps to help explain what's happening, but the PHP could also be written like this:

function do_greet(Input $input, Binder $binder):void {
	$document->bindData($input);
}

The Binder has different methods for binding data to the document - with bindData it's possible to pass any structured key-value-pair. Because there's a name key within the user input, the Input object can be used directly. Either way of binding is fine - both are shown here for teaching purposes.

The page now has a complete request loop:

  1. the browser submits the form
  2. page logic's do function is read
  3. the page logic reads the input
  4. the document binds the value
  5. the browser receives a personalised page

Taking it further

From here it is natural to ask how styling, richer behaviour, or animations could be added. That is the point where the build system, components, and later the fluid user experience tools begin to come in.

For a more complete application, move on to the ubiquitous todo list tutorial.

Website | Packagist | Github

Overview

Build your first app

Pages, routes, and views

Adding server-side behaviour

Working with data and services

Production applications

Running, testing, and deploying

Reference

Further reading

Clone this wiki locally