How to set up a local web server on your computer with Apache, PHP and MySQL

In this tutorial, I’m going to explain how to set up a web server on your computer (Windows) with Apache, PHP and MySQL. I’m also going to show you how to configure name-based virtual hosting so that you can run multiple sites off the web server. I’m then going to validate the set up by installing WordPress.

Why would you want to do this?

The main reason for setting up a local web server is so that you can develop and test your website(s) very quickly, without having to constantly upload to another server. It’s a good way to “stage” your content in an environment which somewhat mimics what the live server environment would be. Whether you’re developing themes or plug-ins for wordpress, or creating a site from scratch using PHP/MySQL, this is a great way to develop and test stuff.

Explanation

This is basically a three step process (and it would be the same on a Mac, though I’m doing this on a PC):

  1. Install XAMPP (or MAMPP)
  2. Configure Apache virtual hosts file
  3. Configure host file

Install XAMPP

Installing XAMPP is dead easy. Download it and install it.

The one thing that I would recommend to do before jumping into configuring virtual hosting is that you fire up XAMPP to make sure that the installation works. You can start XAMPP either by using the GUI which is conveniently installed to your Start Menu. Look for “XAMPP Control Panel”. Or you can start using the command line by clicking Start->Run and typing “cmd”. Type “cd c:\xampp”. Then “xampp_start”.

Make sure you have other network-listening apps such as Skype turned off as they may prevent Apache from starting.

You should now be able to fire up a web browser and visit http://localhost, which will load up the default XAMPP page.

Configuring Virtual Hosting

Virtual hosting is basically a way of hosting multiple websites through the same server. It’s as if it’s running several servers but it’s all running off one server and IP address. So…for example… if you have a server and it has the IP address of 127.0.0.1, you can run 10, 20, 100 different websites on that server. You’d also be able to call the individual websites by their name. For example in this case I have “upvector.local”.

Once you’ve validated that the installation of XAMPP works, you’ll need to set up the Apache virtual hosts file. This is typically in:

XAMPP installation directory\apache\conf\extra\httpd-vhosts.conf

Look for this line:

#NameVirtualHost *:80

Un-comment it so that it reads without the pound sign before it:

NameVirtualHost *:80

Each “virtual host” has its own set up. You’ll need one for the default “localhost” name, so that when you type “localhost”, you get all the XAMPP utilities.

<VirtualHost *:80>
    DocumentRoot "C:\xampp\htdocs"
    ServerName localhost
    <Directory "C:\xampp\htdocs">
        Options Indexes FollowSymLinks
        AllowOverride All
        Order allow,deny
        Allow from all
    </Directory>
</VirtualHost>

To create any arbitrary virtual host, you basically create a new definition using <VirtualHost *:80>. E.g. to create one for “upvector.local”, you’d use this code:

<VirtualHost *:80>
    DocumentRoot "C:\webprojects\upvector"
    ServerName upvector.local
    <Directory "C:\webprojects\upvector">
        Options Indexes FollowSymLinks
        AllowOverride All
        Order allow,deny
        Allow from all
    </Directory>
</VirtualHost>

Configuring the Hosts file

Once you’ve configured Apache, you’ll need to configure your operating system’s “hosts” file. This will let your OS know that when you call a particular network host name, it will route it back to your computer.

To find your hosts file, go to this page on Wikipedia where they have documented the hosts file on almost every operating system.

On Windows, it is typically here:

C:\Windows\system32\drivers\etc\hosts

I recommend that you use Notepad ++ to edit text files. Make sure that when you run Notepad++ (or whatever text editing app), that you RIGHT-CLICK and RUN AS ADMINISTRATOR. If you don’t run the program as an administrator, you’ll be unable to write to the hosts file.

For each of the virtual hosts that you want to run, add:

127.0.0.1        host_name

E.g.

127.0.0.1        upvector.local

Restart Apache. If you did everything correctly, it should start back up and you’ll be able to type the host name into your browser and it’ll serve the correct website.

Star Wars Subway Car

Because…you know…we’re nerds… :)

YouTube Preview Image

Fun with Materials

One of the most enjoyable parts of my work with Gnomon School of Visual Effects is that I get to do 3D again. I’m taking a texturing class with Eric Miller this term. Here’s my first assignment, produced in Maya 2010 and Mental Ray. Basically just trying to simulate some real life materials.

Really nice ad by Pedigree

Here’s a great new ad by Pedigree for its line of dog food. I want to point out that from a marketing angle, the ad is very very good.

The marketing message that is communicated through the video is that “dogs love Pedigree”. It is wonderfully communicated through the commercial without a word ever being said or spelled out. Dogs flying in the air slow motion, catching their treat and smacking their lips? Just about perfect in my books!

YouTube Preview Image

According to the YouTube comments, it may be a knock off of a film by Pleix called ‘Birds’. Nevertheless….very effective.

CG Channel goes video-based

One of the cool things about working on CG Channel again but under the auspices of Gnomon is that we can innovate and do it really quickly. This week, we announced the new content direction for CG Channel, going video-based. Watch the announcement here.

We’ve already posted a few really good interviews on the site:

More to come…

New CG Channel website

This is awesome. Yesterday, we launched the brand new CG Channel website.

CG Channel is an online destination for entertainment artists. Our mission is to inform, inspire and empower our viewers. For over a decade, CG Channel has served the entertainment production industry with news, features and community services.

What makes CG Channel different from other sites?

High quality video content – CG Channel features impactful interviews and insights from professional production artists.

Broadcasting worldwide from Hollywood – With access to hundreds of studios and artists, CG Channel has access to some of the best artists and studios for unique, insightful content.

Focus on education and training – CG Channel is part of the Gnomon group of companies, which is focused on inspiring and empowering entertainment production artists. The Gnomon group of companies includes:

Competitions hosted by top-level professionals – CG Channel runs monthly digital art contests hosted by top-level industry professionals, giving an opportunity for developing artists to learn from the pros.

So check it out. Head on over to www.cgchannel.com.

High quality video content – CG Channel features impactful interviews and insights from professional production artists.

Broadcasting worldwide from Hollywood – With access to hundreds of studios and artists, CG Channel has access to some of the best artists and studios for unique, insightful content.

Focus on education and training – CG Channel is part of the Gnomon group of companies, which is focused on inspiring and empowering entertainment production artists. The Gnomon group of companies includes:

Competitions hosted by top-level professionals – CG Channel runs monthly digital art contests hosted by top-level industry professionals, giving an opportunity for developing artists to learn from the pros.

Peoples Church of Montreal Website

I’m pleased to say that the new Peoples Church of Montreal website that I got to work on has finally gone live at www.peoplesmontreal.org. The website was built with WordPress and a theme which I designed and developed from scratch with PHP and JQuery. I built it using WordPress so that others in the church can update the website on their own. Jonathan Sturgeon, the Media Director for the church has been shooting videos of all the sermons and is making them available through Vimeo on the website.

Peoples Church of Montreal website

PTGUI and Panoramas

After years of using Realviz Stitcher software for creating panoramas, I decided to try out PTGUI, which was recommended to me by visual effects artists for creating spherical HDR’s used for lighting and reflections in 3D computer graphics. I ran in some old images that I had taken which did not stitch correctly in Stitcher, and found PTGUI to be absurdly amazing. Check out the images.

Calanque in Marseilles, France

Seven Lakes in Sierra Nevada Ranges, California

Seven Lakes in Sierra Nevada Ranges, California

Seven Lakes in Sierra Nevada Ranges, California

The Dom Cathedral – why technology doesn’t make us better

I recently had the opportunity to visit Cologne, Germany for the Game Developers Conference and Gamescom conventions. When I arrived in Cologne, I was greeted by an amazing, towering cathedral larger than any historical building that I’ve ever seen.

Koelner_Dom

Look at the photo above (I didn’t take this btw, I swiped it off Wikipedia as I didn’t bring a camera with me). Check out how small the people are in relation to the cathedral. That’s just insane.

The story goes that the Dom commenced construction in 1248 and stopped in 1473, then commenced again in 1842 and was completed in 1880. The structure is beautiful, made of solid stone and carved to perfection. There is so much detail as you walk up to the walls to check out the intricacies of its exterior.

As I walked into the interior, I couldn’t believe it. It looked like a matte painting from a movie. This was not something that I was expecting to see in real life.

The Dom was built in an era where they had no computers and no power machinery. Granted, they probably had lot’s of slaves or peasants who worked their entire lives on the Dom without much to survive on. But my point is that they somehow managed to build this structure without all the technological wizardry that we have today.

Today, our construction methods involve using a lot of CAD, BIM and software to design and visualize the construction project before it gets built. Dom had none of that. In fact, I learned from a colleague that the Dom is technically not supposed to be standing. Apparently, if you put the Dom into a software simulation, it should actually fall down!

Construction-wise, the Dom is literally rock solid. I’m just amazed at how much stone they moved, cut and put into place! This was all done by hand with no powertools, heavy machinery and powercranes to haul up the materials.

I can’t help but make comparisons. Here is a structure that was built hundreds of years ago, without the aid of technology. Not only is it more beautiful than most of the concrete monstrosities that we create today, it’s still standing strong and not falling down any time soon! Compare that with the structures in Montreal which are all crumbling to pieces after only a few years!

Koelner_Dom_Innenraum