Setting up GitHub with PHP and PhpStorm

 

Let’s begin where every developer starts, getting something to work locally. Instead of the typical install and and phpinfo check, let’s setup a actual production style environment.

PHP Locally

media_1334117460900.png

It’s trivial how setting up a PHP install has become these days. While there are a number of choices from BitNami stacks to MAMP. For Windows or Linux users looking for a one step setup, there is XAMPP. Since I work off OSX, I’m going to download and setup MAMP.

Setting Up MAMP Ports

media_1334121702253.png

There are a few simple configuration options that you will want to do to make your development environment closer to your production environment. Let’s first change the port to 80. This will let us use http://localhost/ without adding :8888 to the end of our urls.

Setting Up Apache Root

media_1334122008061.png

Also, to ease up navigating to your site root, switch to Apache and set the Document Root to ~/Sites/. On Lion and Mountain Lion fresh installs, you will need to create this folder. Click ok and Apache and MySQL will restart.

Download your IDE

media_1334123423352.png

I don’t want to bore you here with a long speal about why I choose to use PhpStorm. Heck, just a few months ago I was a die hard Coda fan. For a quick PHP editor, it’s really great. However, there were a few times working on a production machine where it failed during a upload and overwrote my file with a blank file to the server before crashing. After this happens a few times it’s time to reconsider your IDE. So for quick and dirty edits, I turn to Sublime Text, but for larger projects I like the features found in PhpStorm.

Setting up GitHub

media_1334124077168.png

GitHub for development is really amazing. It sure beats using svn and really incrases workflow across multiple people. Even if you are a single developer, you can get some great benefits from using GitHub. It’s free if you want your repos public, which for most code branches works fine, but if you’re working for a client or comapny, you will probably want to fork over the few bucks for the private ones.

Create a Repository

media_1334124280564.png

Just enter your text here to create your project.

media_1334124386508.png

You can now follow these steps or download a GIT GUI. One I found recently was SourceTree for Mac, which is free on the AppStore.

Setting Up Our Project

media_1334440733850.png

Now let’s add our repository from github to our local machine. Click Hosted Projects.

media_1334440842832.png

Next select the project we just created and simply double click it. Thene select the specified path we setup earlier.

media_1334440925624.png

GitHub Status

media_1334441192369.png

Now we are ready to start working on our project. Let’s start with a simple “Hello World” in PHP. This will update our GUI to show that we have edited this file. Now save your PHP file and click Commit.

Commit

media_1334441301320.png

Now you will see all of your changes in the “Files in the working tree”. We can either select to Commit changes staged in the index. This requries us to click each file that we’ve modified and select “Stage File” or we can change the Commit mode to “Commit all changes from selected files in the working tree.

media_1334441452452.png

Now we are ready to commit our changes to the files.

Pushing to GitHub

media_1334441544809.png

Now let’s push our commit to GitHub. Click master under branches and the you will see your latest commit. Select it and click Push.

media_1334441589971.png

Verify the push

media_1334441669570.png

Now lets goto GitHub and check the status of our repository. You should see the message gone and now it should be showing you the index.php file that we pushed.

PhpStorm’s git integration

media_1334442006975.png

While we can do all of the features above in PHP Storm itself, it’s GUI for doing so is a bit confusing and not all that friendly. However, it is great to be able to monitor changes to our files and it uses color coding to show files which have yet to be committed.

Wrapping Up

media_1334442125945.png

This is part one of a three part tutorial. Stay tuned for the next part where we look at setting up our live server to automatically pull down changes from GitHub when we do a push from our localhost.

 

Richard

Leave a Reply

You must be logged in to post a comment.

Pages

Contact information