Website Testing (Part 2)

Running a Local Web Server

Articles > Webmaster > Website Testing (Part 2)

After you have built a website on your local machine and tested it using DreamWeaver's 'Preview in FireFox'1 feature, the next step is to publish it on the internet, right?

Well... maybe. If you are using any server-side technologies (i.e., PHP) you cannot test the pages without running through a web server.

Apache to the Rescue!

Sites FolderLuckily, if you are using a Mac OS X computer2, your machine comes pre-installed with Apache, one of the most popular open-source web servers! First, copy your website into the Sites folder in your Home directory. The Sites folder is a special folder that the computer knows to look into when people request HTML files.

Web Sharing

Second, turn on the web server. Run System Preferences, click the Sharing button, and activate the checkbox beside Personal Web Sharing.

Finally, click on the second hyperlink on the sharing panel (the one that contains a ~ character). Your default web browser should launch and display your website. When you are finished testing your web page, just uncheck the box to turn personal web sharing off again.

Troubleshooting

Web Browser

It's possible that when you clicked on the hyperlink you saw a page like the one shown above and not the website you are intending to test. This will happen if you copied the web folder into the Sites directory rather than all of the web files. The easiest thing to do is to simply add the folder name to the URL. For example, in the picture shown above the url is http://10.1.0.1/~mike. If the folder containing my website was MySite then I would change the url to http://10.1.0.1/~mike/MySite/.

Getting Fancy

Copying files around like this can get annoying, and its possible that you will make a mistake and publish the wrong files to the web server. One solution is to always build your websites inside the Sites folder to begin with. If you decide to do this, then rename the index.html file that is currently inside the Sites folder to index-old.html and create a new file named index.php3 file with the following contents: 

<html>
  <head><title>My Sites</title></head>
  <body>
    <div align="center"> 
      <?php
        $files = glob("*");
        $folders = array_filter($files, "is_dir"); 
        foreach ($folders as $x)
          echo "<a href='$x>$x</a><br />\n"; 
      ?>
    </div>
  </body>
</html>

Now when you click the hyperlink on the Sharing Panel you will not see the "Your Website Here" page — you will see a list of all your websites.

References

See also:

Other intermediate webmaster articles:

Other intermediate webmaster resources:

Notes

  1. You should always test your web sites using a wide variety of web browsers, but start your testing using Firefox with the Validator add-on. This will display a green checkmark on the bottom of the browser window if the page contains valid HTML, and a yellow exclamation mark if there are any problems. Double-click the exclamation mark and you'll get a detailed description of each error on the page. Return to text.
  2. PHP is a server-side extension to standard HTML. In this case the glob("*") function returns all files and folders, the array_filter(...) filters out anything that is not a directory, and the foreach and echo display each remaining item (the subfolders) as a hyperlink. If you want to learn more, the official php website is a good place to start. Return to text.
  3. This article only discusses Mac OS X, but if you are on Windows you can install a web server to do local testing. See the apache web server documentation for details. Return to text.