Me want website, but where to start? A basic guide for newbie Yii Developers - Part I

Welcome to my Yii developer tutorial series! These tutorials are aimed at taking absolutely new Yii developers through the process of developing their first website. Instead of creating a boring Blog application, I am going to walk through the process of creating a (very basic) E-Commerce site. I'll go into more details about what we will be building in the next post. In the first installment of my set of Yii tutorials, I'm going to show how to:

• Download and test Yii
• Creating our first project
• Git-ing started with version control

First, an introduction is in order. Who the hell am I, and where do I get off teaching you how to code? My name is AJ Perez. I do computer security for a living and web / game development as a hobby. I have been using Yii for the past couple of years and have been developing with PHP ever since I started programming. I received my degree in Computer Science from Oregon State University in 2010. I tend to dabble in many things, and always have multiple projects going on outside of work, but web development is still my favorite hobby.

Whew, got that out of the way. My goal here is to get new developers moving in the right direction. I don't claim that what I will show you, nor how I develop it, are necessarily the best practices for Yii. If it gets you hitting the ground running and producing results than I will consider my job done.

Disclaimer: if you are new to Yii and reading this, I am just as new to writing tutorials as you are to the framework, so positive (and negative!) feedback is welcomed and encouraged. 


These posts will be an ongoing set of tutorials, building upon the same project throughout each tutorial until we end up with a basic, but finished, website. Due to content length, I may end up splitting some tutorials amongst multiple posts, but I'll be sure to link them appropriately. I will also have my version of the code on github, so people can download it and see the code first hand, but I encourage people to do these tutorials alongside me, as nothing beats learning by doing it yourself. Finally, enough blabbing, let's get started shall we?

Downloading Yii

If you haven't already, go ahead and Download Yii from their website. At the time of this writing, Yii 1.1.10 is the latest version so that is what I will be using. Once downloaded, unzip the folder from the archive and place it into your webroot (I renamed the folder from the default yii-1.1.10.r3566 to simply "yii". I'll assume you already have a local development environment established (but if not, I would recommend XAMPP for OSX or Windows). I use OSX for my web development, so my tutorials will be done in that environment, but absolutely all of the tasks I do will carry over to a Windows (and especially Linux) environment, albeit a few minor differences at times.


The folder we now have contains the following folder structure:

• demos/
• framework/
• requirements/

We'll leave the demos folder for now, since they can be useful in seeing various ways to build projects. In your web browser, visit the following url: "http://localhost/yii/requirements/"

Before moving on, fix any errors marked as "Failure". If your tests look similar to mine then you have successfully installed Yii, congratulations!

The First Project

Alright, we finally gave our Yii framework a nice little home in our webroot, now it's time to setup the project files for our first Yii application. We're going to use Yii's built-in "YiiC" app to auto-generate our project files for us. I decided to name our application "YiiCommerce," I know, I'm so creative. The following process is highly documented, so if you get lost following me, try Yii's documentation for Creating your First Yii Application. 

1) In a command-line terminal, navigate to your webroot:

$ cd /Applications/XAMPP/htdocs/

2) We should now see our "yii/" folder. Run the following command to generate our project files:

$ php yii/framework/yiic.php webapp yiicommerce

* If your console complains about not being able to find your php executable, just use the full path instead:

/usr/bin/php in Linux, 

/Applications/XAMPP/xamppfiles/bin/php in OSX

3) We should now see the following folders in our webroot:

• yii/
• yiicommerce/

To test it out, visit the following URL: http://localhost/yiicommerce/index.php

If you see a welcome message, then congratulations, we have our first Yii application running! We'll start the process of making it all fancy in the next tutorial.

Git-R-Done!

Setting up our Git Repository

Now that we have our project files ready, it's time to add them into a Git Repo. If you're new to Git, I'll attempt to explain the Git commands as I use them. There's a great Git Tutorial here that I often refer back to, if I forget a particular command. I'm not going to attempt to walk you through the process of installing and setting up Git, since their creators did such a good job walking you through the process already. So, follow their Github guide to set it up.


Once Git is installed and configured, we can create our repository. Create a new public repository (on github), I called mine "Yii-Commerce," and you can view it here. Since we're using github, you'll notice a button that's called "Gitignore", scroll down its list and click 'Yii'.  Github is nice enough to have bunches of presets for many types of projects that will automatically ignore files that shouldn't be included in your repository. In case you didn't see it, don't worry, i'll walk through the process of setting up our .gitignore file later.


Now that you have your repository, we need to add our project files to it! In your command line, change the working directory to your newly-created project:

$ cd webroot/yiicommerce/

Now run the following command to create and initialize an empty local repository:

$ git init

Next, add all of the files from your project into the Git repo:

$ git add .
$ git commit -m "First Commit"

Here, we have added all of the files from our project into our Git repository. Committing the changes to the repo finalize the adding process. Git will make sure you always add a message for each commit, so make sure you choose meaningful messages such as: "Edited the product model - now includes pricing and descriptions for each model." Meaningful messages will help you track your changes more accurately.


The next step is to push our local repository to github. On your github page, you should see your .git url, mine is:


https://github.com/brixican/Yii-commerce.git


This is the address to your remote repository on github. To connect it to our local repo, use the following command:

$ git remote add origin https://github.com/brixican/Yii-commerce.git

Replacing my URL for yours, of course. Lastly, we can push our local repository over to our remote one:

$ git pull origin master
$ git push origin master

If your Git installation was anything like mine, it complained about SSH keys! If it worked, you can skip these steps.


To setup your SSH Keys, follow Git's generating ssh keys tutorial. If this doesn't work (again, like my git installation), then we'll switch from using the HTTPS git server to the SSH-based one. Run the following two commands to switch your repo:

$ git remote rm origin
$ git remote add origin git@github.com:brixican/Yii-commerce.git

Now we should be good to go, we'll try to merge and push our repos again:

$ git pull origin master
$ git push origin master

...and it finally worked! Hopefully you won't have as many problems as I had setting up a git repo, but if you did hopefully my suggestions helped you get it going. You can verify that the repository has been uploaded successfully by refreshing your project page on github. If you can see your project files, then all is well. Now we finally have our first Yii project safely saved into Git. 


Keep an eye posted for my next post, where we'll start adding some of our business logic into our application. Finally, some real coding! If I have any errors, or you have any problems or suggestions, let us hear about them in the comments!


See you next week!


Edit: Part II of this series is now up!