Web IDE for PHP now Lesson1. Moved Lesson1 to Lesson2.

php/lesson1/tutorial.md

@@ -6,80 +6,98 @@ title: Introduction to PHP
 ##### Requirements
 
 * 15 minutes
-* PHP installed - this is by default on most Operating Systems. But if not, here are the official [installation instructions](http://php.net/manual/en/install.php)
-    * Check installation by running the following command in cli `php -v`, this should output the version, eg. **5.5.9**
+* Internet connection and a modern browser
+
+*Note: Free for small projects*
 
 ##### Achievements
 
 By the end of this tutorial you will be able to:
 
-* write a **Hello World** Application that outputs on the:
+* run PHP in your browser from any computer in the following manner:
     * Command Line (CLI)
     * Browser
 
 ---
 
-## What is PHP?
+If you want to have a go with **PHP** but do not wish to setup a local environment on your laptop, one can use an online IDE to write PHP.
+
+## Setting up the Web based IDE to write PHP
+
+* 1. In a modern browser visit the url `https://c9.io`
+
+* 2. Login with your GitHub credentials as shown in the image below
+
+![Login with GitHub](assets/images/login.png)
+
+Then you should see your **Workspaces**
+
+* 3. Click on the `+` to create a new **Workspace**
+
+![Create new Workspace](assets/images/workspace-add.png)
+
+* 4. Fill in your details: project name, description etc
+
+In the last section **Template**, choose **PHP**
 
-From the **PHP** [website](http://php.net/manual/en/intro-whatis.php)
+![PHP Template](assets/images/workspace-php.png)
 
-> PHP (recursive acronym for PHP: Hypertext Preprocessor) is a widely-used open source general-purpose scripting language that is especially suited for web development and can be embedded into HTML.
+* 5. Then press **Create**
 
-Well what does this mean? It is very easy to build dynamic websites using **PHP** as the server-side language, which generates **HTML**.
+Give it a minute to load, especially for the first time.
 
-## What does PHP look like?
+Then you should have something like this
 
-A simple Hello World application would look like the following:
+![PHP Workspae IDE](assets/images/workspace-ide.png)
 
-*File: index.php*
-```php
-<?php
-echo "Hello World";
-```
+## In the Web based IDE
 
-1. The file must end with the extension `.php`
-2. The file must begin with the opening tag `<?php`
-3. `"` are used to Open/Close a string
-4. 'echo' Outputs the string [echo on php website](http://php.net/manual/en/function.echo.php)
+Now your **Workspace** has been created, you will have an example **PHP** script listed on the left, called `hello-world.php`.
 
-## How to run the script?
+![Script list](assets/images/workspace-example-script.png)
 
-On the Command Line (CLI), type:
+Double click this file and it will open in the *main window* which is on the right of the file list.
 
-```php
-php index.php
-```
+![Workspace code](assets/images/workspace-code.png)
 
-And the output will be:
+## Running the PHP code
 
-```bash
-$ php index.php
-Hello World
-```
+The **PHP** code can be run in two ways, the **CLI** or in the **Web Browser**
 
-*Note: `$` implies the Command Line shell, you did not need to type this.*
+### Running the PHP code in the CLI
 
-## How to the output in the browser?
+* 1. Go to the bottom window that has your `yourname@yourprojectname:~/workspace`
 
-Seeing it on the Command Line is great, but what about the browser? We will need to get a WebServer running, the easiest way is to use the built-in PHP WebServer.
+* 2. Type `php hello-world.php` and press **enter**.
 
-*Note: Built-in PHP WebServer is great for Development, but **NOT** Production.*
+You should see the output `Hello world from Cloud9!`
 
-Go to the directory where you created the `index.php` file and run the following command:
+![PHP CLI](assets/images/php-cli.png)
 
-```bash
-$ php -S 0.0.0.0:8080
-```
+### Running the PHP code in the Browser
 
-1. `php` is the same command from before, that we used to run our **php** script
-2. `-S` means built-in WebServer
-3. `0.0.0.0` is the IP that the WebServer should listen on. By using `0` it will listen on everything - fine for development
-4. `8080` is the port to listen on - fine for development but in production the default port is `80` and therefore not required when accessing a URL
+* 1. Run the project webserver
 
-Lets see the script output in your web browser! In your web browser navigate to ` http://localhost:8080/` and you should see:
+Click on **Run Project**
 
-![Hello World](assets/images/helloworld.png)
+![Run PHP Webserver](assets/images/run-php-webserver.png)
 
-## Summary
+The button will now change to **Stop**
+
+* 2. Click **Preview**, then **Preview running application**
+
+![Preview PHP Webserver](assets/images/preview-php-webserver.png)
+
+This will now show a file list in the built-in browser
+
+![Preview file list](assets/images/preview-file-list.png)
+
+* 3. Click on `hello-world.php` to run the script
+
+Now in the built-in webserver you will see the same output as the CLI from earlier `Hello world from Cloud9!`
+
+![Preview webserver output](assets/images/preview-webserver.png)
+
+---
 
-Now you should know how to create a simple **PHP** script and run it via the Command Line or via the Built-in **PHP** WebServer and see the output to the Command Line or the Browser respectively.
+Now change the PHP code and repeat! Enjoy.

php/lesson2/tutorial.md

@@ -0,0 +1,86 @@
+---
+layout: page
+title: Introduction to PHP
+---
+
+##### Requirements
+
+* 15 minutes
+* PHP installed - this is by default on most Operating Systems. But if not, here are the official [installation instructions](http://php.net/manual/en/install.php)
+    * Check installation by running the following command in cli `php -v`, this should output the version, eg. **5.5.9**
+    * Or use an online IDE [Lesson 1](/php/lesson1/tutorial.md)
+
+##### Achievements
+
+By the end of this tutorial you will be able to:
+
+* write a **Hello World** Application that outputs on the:
+    * Command Line (CLI)
+    * Browser
+
+---
+
+## What is PHP?
+
+From the **PHP** [website](http://php.net/manual/en/intro-whatis.php)
+
+> PHP (recursive acronym for PHP: Hypertext Preprocessor) is a widely-used open source general-purpose scripting language that is especially suited for web development and can be embedded into HTML.
+
+Well what does this mean? It is very easy to build dynamic websites using **PHP** as the server-side language, which generates **HTML**.
+
+## What does PHP look like?
+
+A simple Hello World application would look like the following:
+
+*File: index.php*
+```php
+<?php
+echo "Hello World";
+```
+
+1. The file must end with the extension `.php`
+2. The file must begin with the opening tag `<?php`
+3. `"` are used to Open/Close a string
+4. 'echo' Outputs the string [echo on php website](http://php.net/manual/en/function.echo.php)
+
+## How to run the script?
+
+On the Command Line (CLI), type:
+
+```php
+php index.php
+```
+
+And the output will be:
+
+```bash
+$ php index.php
+Hello World
+```
+
+*Note: `$` implies the Command Line shell, you did not need to type this.*
+
+## How to the output in the browser?
+
+Seeing it on the Command Line is great, but what about the browser? We will need to get a WebServer running, the easiest way is to use the built-in PHP WebServer.
+
+*Note: Built-in PHP WebServer is great for Development, but **NOT** Production.*
+
+Go to the directory where you created the `index.php` file and run the following command:
+
+```bash
+$ php -S 0.0.0.0:8080
+```
+
+1. `php` is the same command from before, that we used to run our **php** script
+2. `-S` means built-in WebServer
+3. `0.0.0.0` is the IP that the WebServer should listen on. By using `0` it will listen on everything - fine for development
+4. `8080` is the port to listen on - fine for development but in production the default port is `80` and therefore not required when accessing a URL
+
+Lets see the script output in your web browser! In your web browser navigate to ` http://localhost:8080/` and you should see:
+
+![Hello World](assets/images/helloworld.png)
+
+## Summary
+
+Now you should know how to create a simple **PHP** script and run it via the Command Line or via the Built-in **PHP** WebServer and see the output to the Command Line or the Browser respectively.