1. Abstract
2. About Cloud9
3. Step 1 - Login To Cloud9
4. Step 2 - Create A New Workspace
5. Step 3 - Enter The Workspace
6. Step 4 - Exploring The Workspace
7. Step 5 - Link Yii
8. Step 6 - Choose Yii Version To Use
9. Step 7 - Create Yii Skeleton App
10. Step 8 - Final Touch
11. Step 9 - Publish Workspace On GitHub

Abstract ¶

This tutorial will guide you through the process of creating a yii application using Cloud9. We will use a git workspace to enable version control and also show how to link the Cloud9 workspace to GitHub.

About Cloud9 ¶

From the Cloud9 homepage:

Cloud9 IDE is an online development environment for Javascript and Node.js applications as well as HTML, CSS, PHP, Java, Ruby and 23 other languages.

But Cloud9 not only allows you to edit your sources online, it also provides the possibility to run your project.

Step 1 - Login To Cloud9 ¶

Go to to Cloud9 Homepage and log in. Nothing special about it. I just wanted to point out that I created an account and linked it to my GitHub account later. But they also provide an instant login using an existing GitHub (or BitBucket) account. So maybe you can skip another registration process.

Step 2 - Create A New Workspace ¶

Once you've logged in, you can create a new workspace using the big green button on the upper left in your dashboard. It's hard to miss.

If you click it, you'll be presented two options:

• Create a New Workspace
• Clone From URL

For now, I'll focus on using Cloud9 without any external services like GitHub, so choose the first option. A dialog will pop up, providing you to set some options for the new workspace:

• Name your workspace: Just fill in a name for your new project. I'm not sure about what characters allow, but I experienced that the name will be converted to lowercase.
• Workspace Privacy: I'll keep the default, "Open and Discoverable". As a free user, I can only set up one private workspace. And currently, I'm not doing anything secret. ;)
• Type of workspace: Again, I'll keep the default, "Git". This will initialize the workspace as a git repository. This allows us to keep track of the changes we make. In addition, it will also allow us to link the whole project to GitHub at a later time. I guess "Mercurial" is very similar, "FTP" and "SSH" allow you to store the project on your own server (I didn't look into that).

Confirm your settings by clicking the "Create" button and your workspace will be initialized.

Step 3 - Enter The Workspace ¶

Once the newly created workspace shows up in the left side panel under "My Projects", select it. The main panel will update and show some information about the workspace:

• Its public url
• An activity feed
• A description (you can edit it right in place)
• The list of team members (only you at this state)

At the top of the main panel, you will realize two buttons:

• A "Delete" (workspace) button at the right
• A "Start Editing" button at the left

Click "Start Editing" to enter the workspace.

Step 4 - Exploring The Workspace ¶

Notice the little input at the very bottom of the workspace.

For one, it allows you to interact with the editor programatically. Try it and enter "open README.md" - guess what? It will open the README.md file. This file is included by default in the newly created workspace. It contains information about how to configure the newly created project to work with GitHub. But that's not what we want to do right now. First, let's explore Cloud9 a bit more.

When you executed the command above, a console should have opened (you can toggle it visible/invisible using the little switch button at the right side of the input). As a free user, you won't have full access to all console commands, but you can use it to navigate the filesystem, create and delete files and folders and so on. Let's see what version of php is availabele. Enter "php -v". Mhm... PHP 5.3.3... Maybe they'll update it at some time. ;)

For more information, enter "php -i". This might be the right time to maximize the console, since output will be somewhat lengthy. In theory, there is this "detach console" button (console toolbar, second from right). It should maximize the console, but for some reason this doesn't work reliably (at least not for me). Instead, you can make sure the button is NOT pressed and manually increase the height of the console (there is a splitter between the console and the editor). Unfortunatelly, even with a maximized console, the output isn't very readable...

Let's try to get some html formatted view if the php info:

• Create a new file
• Insert the following content

<?php

    phpinfo();

• Save the file as "index.php"

Now go to the run configuration view: It is the icon showing the running man, just above the project explorer. Here, we switch the "Runtime" from "Default" to "Apache+php".

With this runtime configuration, when you click "debug" (in the editor's menu), Cloud9 will not try to run the the curretly active file on the command line, but instead will run an apache process. The console will tell you the URL under which you can access your files. Currently, it follows the schema: "http://{workspace}.{user}.c9.io", so for the workspace I created for this tutorial, the URL is "http://yii-c9-tutorial.bwoester.c9.io". If you access the URL, you should see the php info as nicely formatted html.

Step 5 - Link Yii ¶

Okay, we've seen how we can edit source code and we know how to execute php webpages. Time to get started with our beloved yii framework! :)

The Cloud9 environment doesn't know anything about yii, so simply uploading an existing yii application won't work. We need the framework itself included in the workspace. We could certainly fetch a tarball on our local machine, extract it and the upload the framework folder to our workspace. But there is a better way.

Remember when we created the workspace, we chose the "Git" option? This made our whole workspace a git repository. You can check this by entering "git status" in the console.

At this stage, it reports 1 untracked file, the index.php file we created and which we haven't committed yet. Let's commit it, just to have a clean repository state before linking yii:

git add index.php
git commit -m "added index.php showing phpinfo"

Next, let's add the yii repository as a submodule of our workspace repository. This allows us to pull new versions from the yii upstream repository whenever we feel the need, and it doesn't require us to commit the whole framework into our own repository.

Execute the following command:

git submodule add git://github.com/yiisoft/yii.git yii

This might take a few seconds. If your project explorer doesn't update automatically, you can always refresh it manually. Just right click the workspace node and select "Refresh" from the context menu.

Doing another "git status" will show you two new files to be committed:

• .gitmodule - tells git what folders actually are submodules
• yii - the yii framework repository

We commit both:

git commit -m "added yii repository as submodule"

Step 6 - Choose Yii Version To Use ¶

At this stage, what we can see in the "yii" folder is the most recently available development snapshot of the framework. It's not said to be unstable, but I prefer to work on a released code base.

Since we just cloned the whole repository as a submodule, we can select to work on every revision we want. Thankfully, the Yii team taggs every releases, so it is as simple as:

git checkout {tagName}

to put the repository into this tagged state. The last version that has been released at the time of writing this tutorial is v1.1.12. So this is what I'm going to use:

cd yii
git checkout 1.1.12

The command will print a notice that the repository (the submodule, not our workspace repository) now is in 'detached HEAD' state. This is okay. Just remember not to commit changes in this state.

Go back to the workspace repository and issue a git status:

cd ..
git status

It will tell you that the yii submodule has changed. Let's commit this change. It is important to realize that this won't be a commit in the yii repository, but one in our workspace repository. It just tells our workspace what version of the submodule is to be used.

git add yii
git commit -m "Use yii v1.1.12"

Step 7 - Create Yii Skeleton App ¶

Almost done. We have the latest release of the yii framework available, we have a console, let's create the skeleton app.

There are 2 pitfalls I encountered:

1. As free users, we're not allowed to execute shell scripts. This means, we can't simply call

   yii/framework/yiic webapp ...
   

   Instead, we have to explicitly call the php script:

   php yii/framework/yiic.php webapp ...
   

2. The webapp command won't work if we only provide a path relative to the current working directory. So the following won't work:

   php yii/framework/yiic.php webapp sampleApp
   

   Instead, we have to provide an absolute path. To find out the absolute path of your workspace, issue

   pwd
   

   Then copy that path and use it in the webapp command

   php yii/framework/yiic.php webapp /var/lib/stickshift/149e551bbedc4393b4773f93176a8677/app-root/data/267105/sampleApp git
   

After the skeleton app has been generated, don't forget to commit it:

git add sampleApp
git commit -m "created yii skeleton app"

Step 8 - Final Touch ¶

For easy access, let's modify our index.php file. Instead of printing the phpinfo, it should redirect a visitor directly to our sample app. Replace its content with:

<?php
header('HTTP/1.1 307 Temporary Redirect');
header('Location: sampleApp/');
?>
<html>
  <head>
    <title>Moved</title>
  </head>
  <body>
    <h1>Moved</h1>
    <p>This page has moved to <a href="sampleApp/">sampleApp</a>.</p>
  </body>
</html>

Now, if we start the "Apache+PHP" runtime, Cloud9 offers us the link to the workspace. If we click it, index.php will be processed by the server. It sends the redirect header back to our browser which in turn will open our sampleApp.

Commit.

git commit -a -m "make index.php redirect to the yii application"

Unfortunatelly, when I access the yii application, I am presented a php warning. Something about date timezone settings. Maybe this is due to a different server setup, I never encountered that warning before. But it can be easily fixed. I decided it is a configuration thing, so it goes into sampleApp/protected/config/main.php:

<?php 

// uncomment the following to define a path alias
// Yii::setPathOfAlias('local','path/to/local-folder');

date_default_timezone_set( 'UTC' );

Commit again.

git commit -a -m "set the default timezone to UTC"

At this stage, we have a working, version controlled yii project. We can work on it wherever we are (given we have internet access and a webbrowser at hand), we can run it, and can invite our friends to collaborate.

Step 9 - Publish Workspace On GitHub ¶

As promised, I will also show you how to push the whole workspace to GitHub. Maybe someone wants to clone it, fix it and send you pull requests. Or open tickets. Comment on some lines of code. Do GitHub stuff.

1. Create a new, empty repository on GitHub. To prevent confusion, I'd name it the same as the Cloud9 workspace, but it's up to you.

2. Copy the SSH url of the newly created repository. For this tutorial, it is "git@github.com:bwoester/yii-c9-tutorial.git"

3. In the Cloud9 workspace console, add the GitHub repository as new remote:

   git remote add origin git@github.com:bwoester/yii-c9-tutorial.git
   

4. Push to the GitHub repository and set it as upstream

   git push -u origin master
   

That's it. Thanks for reading!

Resources ¶

• Tutorial workspace on Cloud9: http://c9.io/bwoester/yii-c9-tutorial
• Repository on GitHub: https://github.com/bwoester/yii-c9-tutorial