Tuesday 29 March 2011

XAMPP

Introduction

In a client server environment, all client requests are handled and interpreted by a Server. In computer terms a server is a machine, connected to the network (and/or Internet) running various services.
The server continuously is listening and waiting for a client to connect/request. As soon as a client requests a service using a standard protocol, the server will interpret the request and provide a response.
Depending on the infrastructure and number of requests, a server can provide one or more services.

What types of servers exist?

Different servers exist, but the most popular are:
  • Proxy servers – Usually these are located between a group of client computers and the Internet, and is used to filter client requests and server responses. (Microsoft ISA server)
  • Mail servers – Used to store e-mails in an organisation. Nowadays, many internet service providers have their own mail servers to provide email accounts for their subscribers. (Microsoft Exchange Servers)
  • Web servers – Used to host web pages. When a user requests a web page, the web server retrieves the requested file and sends it back to the user. With the introduction of dynamic web pages, nowadays, web servers perform server side scripting. (Apache)
  • FTP servers – Usually this is a file repository (File server) that enables users to upload and download files using the File Transfer Protocol (FTP). (Filezilla server)
  • Virtualization environments – Enables users to create and manage Virtual servers. (Microsoft Hyper-V and VMware)
  • Database servers – These include a Database Management Systems (DBMS) and enables applications to connect and retrieve data remotely. (Microsoft SQL Server)
In this blog I will describe my experience and what I’ve learned while performing a task assigned by my tutor.

XAMPP


What is XAMPP?

From a personal experience, installing and configuring various services from different vendors/providers on the same machine, is a difficult job. Various issues may rise and the majorities are all related to compatibility and system requirements.
Another drawback is price. Just imagine a student web developer having to buy software licensing just to get acquainted and gain some experience with these services.  
Peace of mind, some commonly used services are free, and thanks to the Apache Friends, these can be downloaded as a bundled package.
The XAMPP package can be downloaded from Apache Friends for various operating systems, including:
  • Linux
  • Windows
  • Mac OS X
  • Solaris
Amongst others XAMPP includes the following modules:
  • Apache web server
  • MySQL
  • PHP
  • Perl
  • phpMyAdmin
  • Webalizer
  • Mercury Mail Transfer
  • Filezilla FTP Server

Why XAMPP?

“The philosophy behind XAMPP is to build an easy to install distribution for developers to get into the world of Apache. To make it convenient for developers XAMPP is configured with all features turned on.” (http://www.apachefriends.org/en/xampp.html)

While using XAMPP I noted the following advantages:
ü  One installer for multiple modules; you just need to run one setup.
ü  No special knowledge is required to get it up and running.
ü  Intuitive and easy to use control panel.
ü  Includes various tools; amongst others, XAMPP Security report, Webalizer and phpMyAdmin.
ü  Minimum system requirements.
ü  XAMPP is FREE
The only issues I had while doing this task where not directly related to XAMPP. These are described in this blog but the following is a summary:
û  To install XAMPP on Windows 7 I had to turn off the User Access Control (UAC).
û  To connect from a remote computer, I had to enable a number of ports in my server firewall.

Task Description


This blog describes my experience while performing a task assigned by my tutor. The task consists of the following stages:
  • Install XAMPP on your computer
  • Test the following functions:
    • Control panel
    • Test HTTP and HTTPS
    • Test FTP
    • Generate a XAMPP security report
    • Generate a PHPINFO report
    • Generate a visitors report
    • Test the default guestbook
  • Add and image and a style sheet to the default index page
  • Test the web services from another computer

Preparing the environment


To test XAMPP, using VMware server, I implemented the environment described in this section.

XAMPP is installed on the Server (192.168.2.6), a Windows 7 machine with Windows Firewall enabled. The Client (192.168.2.5) is used to connect to the Server and test the XAMPP services.
The first thing to check when implementing such networks is communication. Communication between Client and Server can be tested using the command line PING.
Using Internet Control Message Protocol (ICMP), the PING command sends a number of packets to a destination and waits for a reply. When using PING from a command line, the time taken for a packet from source to destination and back to source is calculated and displayed.  
Using my environment as an example, to test connectivity from my client machine I used the following command line:

ping 192.168.2.6

Important to note that PING will not work if the Windows Firewall is configured to block ICMP messages. In fact to be able to send a PING request to the server I created an inbound firewall rule that allows ICMP messages. For more information on how to create such rule, refer to Nobody Can Ping My Computer Microsoft article.

Installing XAMPP


Download XAMPP

The XAMPP installer for Windows can be downloaded from the Apache friends web site and is compatible with Windows 2000, 2003, XP, Vista, and Windows 7.

Installation

Since XAMPP needs to install and run services, it is recommended to run the XAMPP installer as an administrator. To achieve this in Windows 7, right click the XAMPP installer and select Run as administrator.

UAC problems

After selecting the installation language, I bumped into the following warning:
The problem when installing XAMPP on Windows Vista and Windows 7 is that it may conflict with Microsoft User Account Control (UAC); UAC may prevent XAMPP to work correctly. UAC was introduced in Windows Vista to provide a more secure infrastructure and monitors software applications and services. To solve this issue in my testing environment I deactivated UAC. To disable UAC:
1.    Stop the XAMPP installation.
2.    In the Start menu search box, type msconfig and press Enter.
3.    Select the Tools tab in System Configuration.
4.    From the list select Change UAC settings and click Launch.
5.    From the User Account Control Settings select Never Notify. Click OK.
6.    Restart your computer.
7.    Restart XAMPP installation.When UAC is deactivated, the XAMPP installer launches another warning stating that activating UAC may restrict XAMPP functionality. Ignore the message and continue the installation.
For more information on UAC, refer to User Account Control Step-by-Step Guide and Security Watch.

The installation wizard

Once started, the installation wizard enables you to select the language and configure where to install the XAMPP files. During the installation, the XAMPP Options dialog enables you to install all XAMPP modules as services. When installed as services, modules are started automatically when starting the Server.

The Control Panel

Upon installation, XAMPP enables you to launch the Control Panel. Amongst others, the control panel enables you to:
  • Start and stop a service
  • Configure administration settings for each module
  • View each module status
  • Quick link to the XAMPP installation folder

Testing installation


Introduction

This section describes the tests I performed to ensure that the XAMPP modules are installed and working correctly. All tests are done on the server machine.

HTTP and HTTPS

To test if HTTP and HTTPS are working on the server machine first you should try to access the XAMPP default page from a web browser.
To test HTTP, launch any Internet browser and browse to http://localhost. If the Apache service is running the following page should be displayed.
To test HTTPS, launch any Internet browser and browse to https://localhost. If the Apache service is running the following page should be displayed.
Since the server security certificate is not verified by a Certificate Authority, the Internet browser will complain that the web site is not trusted.


FTP

To test the FTP module, from the server machine I downloaded and installed Filezilla FTP client; available from FileZilla client download. Filezilla enables users to connect, browse, upload and download files from FTP servers.
When installing XAMPP, the following two FTP accounts are installed by default:
User name
Password
Root directory
newuser
wampp
<Home Directory>\xampp\htdocs\
anonymous
<No password>
<Home Directory>\xampp\anonymous\

Using Filezilla, I connected to the FTP server using the newuser credentials.

While browsing and moving files using FTP, I monitored the actions in the Filezilla server.
You can test FTP using Windows Command line as follows:
1.    Launch a command line interface.
2.    Key-in ftp 127.0.0.1 and press Enter.
3.    Key-in the username (newuser) and press Enter.
4.    Key-in the password (wampp) and press Enter.
5.    After connecting, key-in the FTP subcommand ls and press Enter to list the folder contents.
For a full list of subcommands, refer to FTP Syntax.

XAMPP Status

The XAMPP status enables you to generate a report that shows the status of all installed XAMPP modules. To generate a XAMPP status:
1.    From an internet browser connect to http://localhost/
2.    From the left panel, click Status.

NOTE: As the page suggest, generating reports over HTTPS may give false results.

XAMPP security report

The XAMPP security report enables you to generate a report that shows the security status of all installed XAMPP modules. To generate a XAMPP security status:
1.    From an internet browser connect to http://localhost/
2.    From the left panel, click Security.
The XAMPP security reported the following issues:


Issues 1 to 3

These issues are reported because of the following:
1.    XAMPP pages can be accessed by everyone over the network without a password.
2.    MySQL Root account has no password.
3.    phpMyAdmin can be accessed without a password. (phpMyAdmin is a tool that enables you to manage MySQL, for more information refer to phpMyAdmin home page)
Luckily enough, XAMPP provides a quick link that enables you to solve these issues. This can be achieved by doing the following:
1.    From an internet browser, launch http://localhost/security/xamppsecurity.php.
2.    Key-in a new Root password for MySQL and click Password Changing.
3.    Key-in a new User name and password for the XAMPP directory. Click Make safe the XAMPP directory.
NOTE: Once the XAMPP directory is configured, to access the XAMPP directory, you must provide the username and password configured in step 3.

Issue 4

To solve this issue you must change the default FTP password for newuser. To change the default password:
1.    Launch XAMPP control panel and click the Filezilla Admin button.
2.    Click OK when asked for credentials.
3.    From the Filezilla server, click the user button and select newuser from the list.
4.    Key-in a new password in the Password text box.
5.    Click OK.

Issue 5

The PHP ‘Safe Mode’ was designed to prevent unauthorized scripts to run at the operating system level; preventing hackers from accessing the server.
The problem with ‘Safe Mode’ is that innocuous script that is needed to run a web site may not function correctly. Since I’m using a virtual environment I will ignore the message and leave PHP with the default configuration.

Issue 6
Mercury is an SMTP mail server and since it is outside the scope of this task, I will not go into further details. The Security report is not identifying a security issue but is indicating that the Mercury POP3 server is not running.

PHPINFO report

The phpinfo () function enables you to generate a report and view how your PHP installation is configured. This report is useful because:
  • It helps you understand your environment.
  • Enables you to identify installed functions and modules
  • It helps when debugging and troubleshooting issues.
To generate a PHP report from your XAMPP installation:
1.    Launch an internet explorer on your server (where XAMPP is installed).
2.    Browse to http://localhost/xampp/.
3.    From the left panel, click phpinfo().
The phpinfo() function enables you to specify parameters to customize the report. The following script generates the report, showing only the General section.
<?php
phpinfo(INFO_GENERAL);
?>
For a full list of parameters, refer to phpinfo parameters.

Generate a visitors report

One of the tools available in the XAMPP package is Webalizer, a web server log that enables you to generate statistical usage reports.
To generate a usage report from your XAMPP installation:
1.    Launch an internet explorer on your server (where XAMPP is installed).
2.    Browse to http://localhost/xampp/
3.    From the left panel, click Webalizer.


Amongst others, the report shows:
  • Monthly statistics
  • Daily and hourly usage per month
  • Top visited URLs and Top visited URLs by Kbytes
  • Top visited entry and exit pages
  • Top visited sites
  • Top visitors by username
  • Top visitors by country
For more information on Webalizer, refer to the Webalizer home page and the Webalizer FAQ.

Test the default guest book

The default guest book in XAMPP is written in Perl and can be launched as follows:
1.    Launch an internet explorer on your server (where XAMPP is installed).
2.    Browse to http://localhost/xampp/
3.    From the left panel, click Guest Book.
It’s very easy to use and to add an entry you just need to key-in your name and email, add your comment and click Write.

Modify the default index page


In Apache, all web pages should be added to the htdocs folder; this is the folder that by default Apache looks for files and is located at <Home Directory>\xampp\htdocs\. When installing XAMPP, a default page is added, this enables you to test your web server. To create my custom default page I did the following:
1.    Added a folder containing some images.
2.    Modified the contents of the index.html page.
3.    Added a style sheet style.css.
From the server machine I loaded the page using http://localhost/index.html. The output is as follows:
Different sites and web applications can exist within the same htdocs folder. The following image shows a scenario where multiple web sites exist on the same server:

NOTE: You can use an FTP client to upload and modify the htdocs contents.

Test the web services from another computer


Firewall ports to enable

As described previously, I’m using Windows firewall on my server machine. To enable other computers (clients) to connect and use the XAMPP modules over the network, the firewall should allow traffic on the following ports:

Port number
Protocol
Type
Services
21
TCP
Inbound and Outbound
FTP
80
TCP
Inbound and Outbound
HTTP
443
TCP
Inbound and Outbound
HTTPS
25
TCP
Inbound and Outbound
SMTP
110
TCP
Inbound and Outbound
POP3
143
TCP
Inbound and Outbound
IMAP
3306
TCP
Inbound and Outbound
MySQL
8080
TCP
Inbound and Outbound
HTTP alternative

NOTE: For maximum security, ONLY allow the required ports. For example, since in my environment I’m going to test HTTP, HTTPS and FTP I enabled only ports 21,443 and 80.

Web Server


XAMPP default page

My XAMPP default page is password protected, so users cannot access the XAMPP configuration page from a remote computer. To test this, load an internet browser from a client machine and browse to the server XAMPP folder; for example http://192.168.2.6/xampp/


HTTP

To test HTTP, I launched the default index page in the htdocs folder using http://192.168.2.6/index.html.

HTTPS

To test HTTPS, I launched the default index page in the htdocs folder using https://192.168.2.6/index.html.


FTP Server

From my client computer, I used Filezilla and the XAMPP default account (newuser) to connect to the FTP server.

As seen in the figure below, by default the newuser account home directory is the htdocs folder.

I used this to transfer files from my client computer in the htdocs folder, and change my web page without even logging into my server.

Conclusion


XAMPP is awesome and I recommend downloading. As seen in this blog, the steps to get XAMPP modules up and running are easy to achieve and can be tested with minimal effort. I installed XAMPP on one of my personal machines at home. This is very useful for debugging and troubleshooting my web projects; main reason, I’m trying on a real, working environment.

Thanks Apache Friends...


Monday 21 March 2011

Accessibility

Introduction


A couple of weeks ago, I had a chat with a colleague and friend of mine; who is also a User Experience Analyst, regarding the Do’s and Don’ts when designing a user interface (UI). He explained that before starting the design stage of a web page or a software application, one should investigate what type of audience and users will be using this application. He explained that one of the most difficult tasks he ever had, was to design a UI for a product that was localized in 14 different languages. Reasons being, that when you are designing such UI, one should take in consideration Cultural and National differences especially when choosing UI colours and icons. One should be aware that a colour in one country may mean peace of mind and success, while in a different country it means danger and failure. On the other hand choosing an icon is a bit trickier. Let’s assume that we need an icon that represent a user account, is the following icon valid?
Some will say YES, but I think women will complain because the icon represents a male. Same applies for different races having different skin colour. So Icons should be generic as much as possible.
I thought that catering for different cultures and races are the only concerns when designing a suitable UI. I was wrong. This week, our lecturer invited a professional web designer consultant that during the presentation she explained that we should also consider Accessibility.
Accessibility is defined as the ‘ability to access’, and in web development this means that a web site has to be fully accessible by users with physical disabilities.

In this blog I will explain what I’ve learned during the presentation.

Sensory impairments


After the presentation, I did some research on what type of disabilities exist that may prevent users from accessing a web site. Several sources mention Sensory impairments, disabilities related to the human five senses; sight, hearing, smell, touch and taste. Obviously when dealing with web accessibility the main concerns are sight, hearing and touch.
Not everyone is aware that unfortunately these conditions can be combined; a person can have more than one disability. In fact, complex conditions like deaf and blindness exist (dual sensory impairment) and is not rare amongst conditions.
Some disabilities are Congenital (from birth) or Acquired (developed as time goes by). For example, some people may lose sight as they get older, others are born blind.

Frustration


Part of the presentation we did in class, the presenter showed us a couple of videos where persons having difficulties and disabilities shared their experience. Mainly I noticed that these persons are more interested in the contents of a web site rather than the aesthetical appearance. Some background colours and animations we add to make an eye catchy web site sometimes make accessibility difficult or impossible for disabled persons. Not being able to read the latest news or to play a game makes a person emotionally frustrated.

I must help


What should web developers do to make a web site fully accessible?
To describe this, I created a list that I collected from various sources:
  • A web page should enable the user to increase fonts and zoom without altering the web page contents.
  • Use online resources to check how a colour blind person will see your web site. (http://www.vischeck.com/vischeck/vischeckURL.php)
  • Use heading tags to enable users to using key strokes to navigate between titles.
  • When using images, use the <img>, alt attribute and provide a short description. Screen readers will read the description and will skip the image.
  • Extra care should be taken when using animation (Example: Flash and JavaScript). Flashing colours may disturb the user.
  • Try to make your web site accessible only by keyboard. Some users are not able to use the mouse.

Some examples


Colour vision

Using an online simulation http://www.vischeck.com/vischeck/vischeckImage.php I processed an image and the following images shows the result obtained. Some of the flags are completely different:

Text resize

A well designed web page will not change the layout when increasing and reducing the font size. The following two examples show how the BBC news web page maintains the layout while changing font size.

Alternative text

When using screen readers, images are skipped. So a visually impaired person using a screen reader will not be aware that the web page contains images. When using the <img> tag to include an image, web developers should provide a short description in the alt attribute. Screen readers are able to detect and interpret the text within the alt attribute. The following example shows the images within the BBC news ‘Features and Analysis’ section. Each image within this section contains a suitable alternative text.

Some resources


I found the following resources very interesting:

Conclusion


Web sites have no geographical boundaries and can be accessed by users from different cultures and locations, 24 hours a day, 7 days a week. To ensure that a web site content is well interpreted by different users, organizations provide a localized version of their web site.
Sometimes when we design a web site we assume that everyone can see our animation, listen to a background music or able to click a button.  We forget that lot of users have difficulties doing basic tasks like clicking and using the mouse.
When web sites are not accessible, users are frustrated. Lot of tools exist to test your web site for accessibility.
Having a disability is not easy. Let’s not make it more difficult...