Skip to content

Hello World tutorial

Jump to bottom Edit New page
Greg Bowler edited this page Sep 4, 2016 · 34 revisions

Creating your first website.

The traditional starting point when learning any computer language or system is to output the "Hello, World!" message, so that's exactly what we'll do in this tutorial.

Using the automatic installer.

Step 1: install.

Assuming you've not already installed the PHP.Gt webengine, you can install by pasting the following command into your terminal:

php -r "readfile('https://php.gt/install');" | php

Once installed, you have the gt-create and gt-serve commands available in your terminal.

Step 2: create.

Navigate to a directory in your computer where you would like to keep your Hello World project and execute the following command:

gt-create hello-world

The gt-create command creates a new directory called hello-world/ in the current working directory and initialises the directory with a blank blueprint, including an index.html page and the basics for laying out your new project.

Step 3: serve.

Serve the newly initialised project with the following command:

gt-serve hello-world

This will serve your new project at http://localhost:8080 . Accessing that URL in your web browser will display the blank index.html page - to complete the traditional Hello World project, add this to the page's body:

<h1>Hello, World!</h1>

Refresh your browser, and the Hello World project is complete.

Creating a new project using the gt-create command clones the blank blueprint, intended as the simplest possible starting point for laying out the bare minimum of a project. There are a few helpful elements to the blank blueprint, such as including front end components normalize-css and a few stubbed files, along with HTML header and footers.

Creating the project manually.

If you do not wish to globally install the gt-* commands, projects can be created manually using Composer.

Step 1: Compose the project's dependencies.

Create a directory on your computer called hello-world/, which will be the project's root directory. This directory can be put anywhere, as explained in project layout.

Inside the root directory, run composer require phpgt/webengine or use the following composer.json configuration:

{
    "require": {
        "phpgt/webengine": "^3.0.0"
    }
}

For information on installing Composer, please see https://getcomposer.org/download .

Step 2: Lay out the project.

All project source files are kept within the src/ subdirectory of the project root. Create a src/ directory and within it, create a page/ directory. The page directory will hold all of your Page View and Page Logic files, but for this tutorial we only require one file: index.html.

Directories and files are case-insensitive, but the recommended approach is explained in the coding guidelines.

Create the index HTML file within the page directory so that the path is hello-world/src/page/index.html, and fill it with the most minimal markup possible:

<!doctype html>
<h1>Hello, World!</h1>

Step 3: Serve the project.

The project can now be served by running the gt-serve script within the vendor's bin directory.

From the application root directory, run vendor/bin/gt-serve, which will start an HTTP server on http://localhost:8080

Requesting the URL in your browser will give you the "Hello, World!" message as written in index.html.

Creating an application yourself using Composer to grab the dependencies does not install anything, so the gt-serve command (and others) have to be accessed within the vendor bin directory. If you want to use Composer but still have access to the gt-* commands, you can install them by running vendor/bin/gt-install, or running the automatic installer script.

Taking things further.

The obvious next step is to add some interactivity to the page. The Hello You tutorial does exactly this, by adding a form to take the user's name and displaying a greeting back to them.

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

  • Change the index.html file to index.md and use Markdown to send out your message.
  • Flesh out the HTML and add a stylesheet to add a bit of colour... why not try a pre-processor like Scss or Less? Read how in the Client side files chapter.
  • Add another page to say "Goodbye, World!" and link them together.

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

Up next: Hello You tutorial.

Website | Packagist | CircleCI | Scrutinizer

Introduction

Tutorials

User guide

Further reading

Setup guides

Clone this wiki locally