Skip to content

Hello World tutorial

Jump to bottom Edit New page
Greg Bowler edited this page Jan 13, 2015 · 31 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 PHP.Gt, you can install by pasting the following command into your terminal:

php -r "readfile('http://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 HelloWorld

The gt-create command creates a new directory called HelloWorld/ in the current working directory and initialises the directory with the official "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 HelloWorld

This will serve your new project over http://localhost:8080, and you'll see that the creation of a Hello World application has already been done for you - you didn't even have to write a line of code!

The Blank Blueprint that is used to initialise new projects is in fact a Hello World application in itself, 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 flair, along with HTML header and footers.

Creating the project manually

Step 1: Compose the project's dependencies

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

Inside the root directory, create a composer.json and specify brightflair/php.gt as the only requirement.

composer.json:

{
    "require": {
        "brightflair/php.gt": "2.0.*"
    }
}

The composer binary can be downloaded to the current folder by running the following command: php -r "readfile('https://getcomposer.org/installer');" | php, or you can install Composer manually by following the instructions on http://getcomposer.org/download .

Once there is a composer.phar file in your project's root directory, run ./composer.phar install to download PHP.Gt and its dependencies to the vendor/ directory. This should only take a few seconds.

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.

Create the index HTML file within the Page directory so that the path is HelloWorld/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.

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?
  • Add another page to say "Goodbye, World!" and link them together

This tutorial's completed code is hosted at http://github.com/BrightFlair/hello-world-tutorial - 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