Difference between #1 and #2 of Create Yii Project In Cloud9

unchanged
Title
Create Yii Project In Cloud9
unchanged
Category
Tutorials
unchanged
Tags
collaborative software, cloud, IDE, git, github, yii, yiic, tutorial
changed
Content
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](https://c9.io/) 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:

![](http://img515.imageshack.us/img515/1544/02createnewworkspace02.png
"")

* 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.
 
![](http://img803.imageshack.us/img803/949/03enterworkspace01.png "")
 
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.

![](http://img36.imageshack.us/img36/2643/04exploreworkspace01.png "")

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]
<?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.

![](http://img404.imageshack.us/img404/7135/04exploreworkspace02.png
"")
 
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.

![](http://img59.imageshack.us/img59/5135/05linkyii01.png "")

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]
<?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]
<?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. **ThanksThanks for
reading!**reading!

Resources
---------
### Resources

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