The Tek Journal

Intro

Today, I'm going to show you the basics of setting up an environment for developing websites in HTML and PHP. This guide is intended for people who want to hand-write code, and NOT use GUI based development applications. If you are interested in GUI based web development software, I recommend solutions from Adobe such as Adobe Muse or Dreamweaver. These tools are also excellent if you want to develop for mobile platforms. It should be noted that these applications are pricey:

http://www.adobe.com/products/muse.html

http://www.adobe.com/products/dreamweaver.html

So why do it by hand?

So I just recommended two great web design tools above. So what is the point of handwriting your website? Two reasons immediately come to mind.

1. Hand writing your website gives you infinite possibilities and customization. If you use a tool like Adobe Muse, your creativity may be limited because the tool has limited features. Custom code lets you design features by hand until they are exactly the way you want.

2. IT'S 100% FREE. Adobe is known for sometimes charging ludicrous sums of money for some of their products, and not everyone can drop $800 -1000 just for building a simple website. All of the software I am about to give you, is opensource and 100% free.

There are downsides.

Learning HTML and scripting languages like PHP is not something that can simply be done overnight. It takes patience and tons of trial and error before you get something right. But this just makes it all the more satisfying when you complete your project. For those here who are just beginning HTML or PHP, I recommend checking out W3schools, which has excellent samples and tutorials.

So lets get started!

You will need 3 pieces of software for this. All of these are cross platform and work with Windows, Mac, and Linux.

1. You will need a web browser. You obviously have one of these if you are reading this blog. The only reason I bring it up at all, is you want to make sure it supports HTML 5. If you are unsure, Google Chrome is always an excellent choice.

2. Next you will want to download an IDE or "Integrated Development Environment." IDE's are essentially glorified text editors that provide programmers with additional debugging capabilities, integrated compilers, syntax error checking, and other features. Almost every programming language has had an IDE designed and built specifically for it. Netbeans is a good example, which is Oracle's IDE for Java. The complexity of IDE's differs.

The IDE that we will set up is called Brackets. Brackets is a free, opensource IDE for HTML, CSS, PHP, and JavaScript. Brackets is made for the exclusive purpose of web coding. It has very useful code highlighting, and syntax suggestion and correction.

Download it here and install it:

http://brackets.io/

3. Once you have installed Brackets, you will need a web server. This is the most important part of any form of web development. For this we will use a software package called WAMP. WAMP stands for "Windows + Apache + MySQL + Perl." If you are on Mac you want MAMP ("Mac + Apache...") and if you are on Linux, you want LAMP.

Apache is the actual web server that runs the code.

MySQL handles databases.

Perl is referring to the scripting language (either PHP or Python, in our case PHP).

You can download it here: http://www.wampserver.com/en/

Once you install it, go ahead and run it. with the WAMP manager.

Now that it is running, you will notice that a small "W" icon has appeared in the system tray.

It will say that the server is offline.

Left click the icon and select "Put Online." This will enable the server.

Once the server is online test it by typing "127.0.0.1" into your web browser. 127.0.0.1 is the address that the computer uses to locally refer to itself.

If all has gone well, You will be taken to a web page like this:

YAAAAAAY!!!! IT'S ALIVE!!!

You are now ready to start writing and testing your code. Click on the WAMP tray icon and navigate to the "www directory." This will open up a new file explorer window that contains two PHP files. These PHP files are the default installed by the server, and they can be deleted. The "www" directory contains all code files that apache can access and load to the web. Anything you write should be saved in this location.

Now open up Brackets and make a new file called "index.html." You can put whatever HTML or PHP you want into this file. index.html or index.php is the file accessed by default when the server is sent a request.