Coding, Read

Setting Up a Local PHP Development Environment

Perhaps setting up a local server on your personal computer is second nature to some, but I remember the process being rather confusing back when I first started trying to develop local sites using PHP.  Because PHP is a server-side scripting language, running a local server is necessary in order to view the product of your code.  Otherwise any PHP script will just display as text rather than executed code in your browser window.  In this post I will be showing you how to set up a local server on your personal computer.  I’m using Mac OS X Yosemite, though I imagine the process is similar for other operating systems.  

 1.  Download the Software

First, you’ll need to download the MAMP stack at mamp.info.  MAMP stands for My Apache, MySQL, and PHP.  This is the software necessary to run the local server on your machine.  The free version will work just fine for our purposes here.

Once you have MAMP downloaded and installed, go ahead and launch the application.  You will see the following screen:

Mamp Opening Screen

2.  Set Your Document Root

First thing’s first – let’s set our document root.  What is the document root?  Well, once you run your local server, any documents that you want to be processed by the server will need to be saved in this folder.  So for example if I save index.php to my desktop, and my document root is set to something else, when I open index.php then all of the php will display as plain text because it isn’t being processed by the server.

The default document root for MAMP is Applications/MAMP/htdocs.  I personally find this location to be a little hard to remember and find on the fly, so I like to change it to something much more friendly.  To change yours, click the Preferences button on the MAMP screen.

Click on the ‘Web Server’ option on the top right.  Click the little folder icon to select the directory you would like to use.  My files are saved in the directory Creative Cloud Files/Websites.  You can choose or create whatever folder you want.  All of the other default preferences may be kept as they are.  Click ‘OK’ once you are finished.

Document Root selection

Now whenever I am developing a website that I need the server to process, I will save it in my Creative Cloud Files/Websites directory.  You can also save your files within their own subdirectory.  For example, if I were developing a site for a company called Balloons ‘N Stuff, I could have a folder called balloons in my Websites folder.

3.  Start Your Servers!

Now for the fun part!  Go ahead and click the ‘Start Servers’ button to the right.  You’ll see some magic happening, and then voila!  You’re connected.  You can tell because the power icon will turn green, and the boxes next to Apache Server and MySQL Server will turn green.

Servers Started

You will also be greeted with this lovely MAMP welcome screen.

Mamp Welcome Screen

4.  How to View Your Projects

The final piece of wisdom I have for you is how to actually view your project on the server.  Remember how our files are saved in the directory Creative Cloud Files/Websites?  Well if I were to open that file directly from my finder, the address would be something like this: file:///Users/Liz/Creative Cloud Files/Websites/site

This is wrong and will not work.

Instead you use the address localhost:8888/site, where ‘site’ is the name of the directory where you project is.  For example, localhost:8888/balloons or localhost:8888/balloons/aboutus.php

If this is confusing at all, take a look here at the organization of my files.  I am going to open the project in the folder called site in this example.

File Directory

The ‘Websites’ folder is the document root. It actually lives in the Creative Cloud Files directory, but I have a shortcut to it in the sidebar so you can’t tell.

And a look at the web address typed in to make this site work.  Note that the file location of this page is Creative Cloud Files/Websites/site/index.php, but in the address bar you see localhost:8888/site/.

Web Address Shown

And that’s all there is to it!  I hope this tutorial is helpful for anyone needing step-by-step instructions so they can develop locally with PHP.

Advertisements
Standard

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s