A Tutorial Series Testing Your Web Devlopment: Part I. Setting Up Your Own Local Web Server Using XAMPP

Creating an Independent Web Environment

Perhaps you have reached the point where you have enough experience with HTML and CSS that you web pages have a real professional look to them. You might have even added audio and video to those pages. But this is one sided, you now want to do more. Perhaps you want to interact with your users by being able to communicate via e-mail. Perhaps you have a product or service to sell. If you reached this point and are not yet ready to "go live". Setting up your own web server might be the ideal, but you don't know how. In the next few tutorials I will demonstrate how you can take your simple desktop or laptop tutorial and turn it into a website where you can practice with some of these advanced feature.

Most importantly when reading online tutorials the things which are missing are the "mistakes", "missteps", and frustration in achieving a goal. Those sorts of things get filtered out of the presentation as if they never existed. In this tutorial series, I'll not only demonstrate the end result of your efforts, but I'll try to point out the common errors and unforeseen problems which you might encounter, as I have encountered them.

I'll first start with a working example of the environment and why this is probably the platform you would want to start with. Then, if you continue with the tutorials I will take you on a "voyage of rediscovery", start from scratch with a product installation and the pitfalls which come with anything new. Ready to dive in? Let's go!


A Preview of the Product We Will Install: XAMPP

What the heck is XAMPP?

XAMPP is a set of tools which was specifically designed as a development tool, to allow website designers and programmers to test their web pages on their own computers without relying on any Internet access. They wrapped together a set of tools which would satisfy most of the needs for any web developer. They created a single user interface via a console (see the snapshot which follows) and placed the various elements in a single "container" for download, be it a zip, 7z, tar, or executable file (platform dependent). The intention is that this file could be download and with little configuration input, be immediately used by a web developer. This is mainly true, the nor "mainly true" part is the reason for these tutorials.

The remainder of this tutorial will just be a "walk through" we will start the nitty gritty with the download at the end.


The XAMPP Console

This is the XAMPP Console as it appears on a Windows system. The services for the various compnent: Apache, Tomcat, FileZilla, Mercury, and MySQL have been started.
This is the XAMPP Console as it appears on a Windows system. The services for the various compnent: Apache, Tomcat, FileZilla, Mercury, and MySQL have been started.

So What is XAMPP?

XAMPP stands for:

  • X - Cross Platform - which means it works equally well on Windows, Linux, and Mac based systems.
  • A - Apache - is a web server application notable which has had a key role in the development of the World Wide Web
  • M - MySQL an implementation of the SQL relational database model
  • P - PHP, a server-side scripting language
  • P - a general purpose, interpreted, programming language.

These are the key components. Note that the emphasis is on the World Wide Web, database, cross-platform, and scripting, with an emphasis on server-sdie scripting. In other word when one implements in the XAMPP framework, one is emulating a server environment on a local machine.

Getting Very Detailed Component Information is a Breeze

Clicking on the "Admin" Button for Apache brings up this screen. There is a great deal of information presented here which is worth exploring.
Clicking on the "Admin" Button for Apache brings up this screen. There is a great deal of information presented here which is worth exploring.
Clicking on "Admin" for Tomcat causes this screen to appear. Apache Tomcat is  the "open source" software implementation of the Java Servlet and JavaServer Pages (jsp).
Clicking on "Admin" for Tomcat causes this screen to appear. Apache Tomcat is the "open source" software implementation of the Java Servlet and JavaServer Pages (jsp).
The beauty is that all of the information is right at your fingertips. Since the product is designed to be "self-contained" with no Internet access, the documentation is as well ---- the documents are all part of the product download.
The beauty is that all of the information is right at your fingertips. Since the product is designed to be "self-contained" with no Internet access, the documentation is as well ---- the documents are all part of the product download.

Investigating Other Console Options: Config and Logs

The first installation of XAMPP which I attempted was an early release. I had some fore-knowledge of what to expect but as with any new product there are some "growing pains". I had several issues I I felt were configuration problems. Heading directly into the downloaded code, I searched for configuration files until I found the information I needed.

If I had just clicked on the "config" buttons on the XAMPP console, I could have avoid a lot of searching. The "config" button of each of the components, brings up a list of the related configuration and initialization files. The other options will bring you to the point of the pertinent sub-directory.

The snapshot which follows illustrates this for the Apache component. Note well that if you were unaware that three files were involved in the configuration you would have to do a lot of digging to find the information which you were interested in.

The Console Configuration Information

The Apache "config" buttom when clicked shows a list of configuration files which you may choose from. Selecting a file name opens the file for inspection  in notepad.
The Apache "config" buttom when clicked shows a list of configuration files which you may choose from. Selecting a file name opens the file for inspection in notepad.
Clicking on a sub-directory bring up the directory structure of the installation at that point.
Clicking on a sub-directory bring up the directory structure of the installation at that point.

The Sub-component Logs

The "logs" button brings up the list of logs associated with the sub-component. In the case of Apache there are three logs: the error log, the access log, and the PHP error log.
The "logs" button brings up the list of logs associated with the sub-component. In the case of Apache there are three logs: the error log, the access log, and the PHP error log.

Miscellaneous But NOT Unimportant Button Options

There are several other buttons present on the screen: help, allows you to obtain additional external help; quit, ends the console session; explore brings up the directory.

Two are very relevant and helpful: the netstat and the services buttons. Many of the problems developers have when initially setting up XAMPP are related to problems with TCP/IP port and Windows services conflicts.

Wrap Up and What's Next

In this tutorial we looked at XAMPP and highlighted some of its features. In the next tutorial we will actually do a XAMPP download and installation and get it into a functioning state.

Was Reading This Tutorial Useful?

5 out of 5 stars from 1 rating of Did you find this tutorial informative?

More by this Author


1 comment

Mayara 21 months ago

Hey Bob, this is an awesome tuoaritl and gives me a lot to think about. One thing I am having trouble figuring out is how to implement transitions between States.In a real game situation, the dwarf would have to actually leave the mine and that would take some time before you could switch to the next State. Another example would be a character has a Jump State and he needs to transition to the Fall State. Another might be a character is in a Running State and then wants to Throw a Punch State or Take Damage State. Any clues to implement this?My idea was to have transition states, but this seems like it would add up. Start Jump State, Jump State, Fall State, Land State This seems to build up way too fast and become way too complicated.

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.


    Click to Rate This Article
    working