XAMPP

Introduction

This week's work involves setting up XAMPP on my system. I have used WAMP extensively in the past as a development and test platform for developing Joomla templates. I have had no issues with it and found it very useful for working on Joomla sites locally. Porting the developed sites onto live servers have sometimes proved problematic. The big advantage with Joomla as a CMS is that it functionality and features can be enhanced by installing third party components and modules. Porting of locally developed sites involves re-installation of the components on the target server and nowadays I mostly work directly on the target server to avoid the extra waste of time although I still usually design the basic template on my local pc on WAMP.

When I had started using WAMP I had looked at other solutions and for the purposes of this week's work I have revisited the publishers and read up on some blogs by users who prefer these other solutions such as EasyPHP and AppServ. XAMPP seems to be a very popular solution.

Installing XAMPP

Before installing XAMPP, I decided that it would be better to uninstall WAMP as it might later on cause issues with the XAMPP installation. Removal of WAMP did not cause any issues.

I downloaded XAMPP from www.apachefriends.org. I went for the installer version as the text clearly showed that this would be the easier installation option. I was asked if I would like to install Apache, Filezilla and MySQL as a service. I assumed that installing them as a service would allow them to be used even when XAMPP is not loaded. As my system is already bloated with a multitude of services, I decided to not install these as a service.

The image shows the control panel as it appeared straight after the installation was completed. As I had selected not to install Apache and FileZilla as a service it has to be started up manually.

I first started up Apache which started up without any complaints.  I noticed that although the log at the bottom of the control panel was showing that Apache was started, the "Running" label did not appear next to the Apache text as it shows near the MySQL service. I am, at this stage,  not sure that Apache is running properly. Test should be able to prove this later on.

When attempting to start FileZilla I was told that it can only be installed as a service but at least I was allowed to install it as a service there and then. I then decided that to avoid potential problems I would install Apache as a service too and again I was allowed to but the green "Running" label still did not show up.

This image shows the missing "Running" label showing that Apache is indeed running.

I then tested the setup by attempting to browse to http://127.0.0.1. The browser displayed a simple html page  that I had once placed in the inetpub folder which is the Microsoft IIs Webserver default web page. I then understood why Apache would not start. I had the IIs server running. I then stopped the "Web Publishing" service from the Administrative Tools in the Control Panel and tried again This time the XAMPP control panel showed that Apache did start successfully.



Testing XAMPP

 

The above image shows the initial XAMPP page loaded. This is on the development machine itself. Once I clicked on English and then proceeded to the first screen I clicked on "Status" in the left menu and I saw that I may have an issue with the MySQL installation as shown in the report below :

After spending two hours attempting to solve the MySQL "Deactivated" issue, I decided that perhaps it would be easier to uninstall the old MySQL installation that I had installed previously on my system. I uninstalled it using the "Add/Remove Program" from the control panel and tried again by restarting the MySQL Service through the XAMPP control panel and it seemed to work. I then checked the status as shown below which showed that indeed it was working fine. 

I then tested the https:// version of XAMPP by typing https://127.0.0.1 in a browser . I was told that this was an untrusted connection probably because no valid certificate is installed. I added a security exception for this site and the browser displayed the XAMPP pages correctly.

The above image shows the testing of the FTP FileZilla server from another machine on the network. I used the ip address of the developement machine where XAMPP is installed and the default login and password. I had no issues with this test. The FTP service is working.

Solving the security issues
The image above  shows the installed XAMPP security report and shows that there are issues with security. As this is a development machine these issues should not pose a real threat however I decided to tackle them regardless. Running the security console and adding a root password for the MySQL super user cured the MySQL and Php security issues.

Adding a password for XAMPP throuh the security console also solved the issue with XAMPP pages being accessible over the network by everyone. At this stage I am unsure if this is indeed desirable or not but for the purposes of this exercise I decided to proceed.

I then had to change the password for FileZilla and I did this through "fileZilla server Interface.exe" file that is located in the FilleZilla folder within the XAMPP folder. The FileZilla interface is shown below :

The above shows the new security report with the issues  resolved except for the PHP Safe Mode issue. I decided to take XAMPP's own advice and leave php not in safe mode as this is after all installed on a development machine.

The image above shows the php report for the setup.

The image above shows the usage (visitor) report generated through the XAMPP home page. It's interesting to note that they are entried for May 2009 which are from an earlier installation of Apache that I had installed on the same machine.

The image above shows the new entry which I added to the default guestbook application which is included with XAMPP. It worked flawlessly out of the box !

Changing the default html page

It took me a little while to realise that I have to use http://127.0.0.1/index.html to display the default html page that is included in the htdocs folder. Looking through some blog posts about this subject, I found that the default page can be changed so that its accessible through http://127.0.0.1 but for now I decided to leave it.

The image above shows the html as I changed it. I added a few DIVS to structure the page and some text in the header and footer of the page. The next image shows the CSS style sheet :

and finally, the next image shows the completed html page for this exercise:

The next image shows the test made from my other computer :

This next sceenshot shows the index.html file being edited on another computer :

I also uploaded files from the other PC successfully.

Conclusion

XAMPP seems to be an excellent solution for setting up a development platform on a Windows box. As I said in the introduction, I had tested other solutions and although considerable time has passed since then I do distinctly remember that WAMP had presented a tougher challenge and it had taken me considerably longer to get it running correctly.

Accessibility

Accessibility

Introduction

Accessibility is all about keeping the website coherent with accessibility rules so that people with special needs and still use the site.

In my work I have often had to tackle accessibility issues especially when dealing with websites for the Maltese Government. All Government sites have to adhere to strict accessibility issues and sometimes this is a requirement which makes the design elements of the site less appealing. It is an ongoing battle between keeping the product accessible while at the same time using the desired design features.

In Malta there is an organisation called FITA (The Foundation for Information Technology Accessibility). FITA's mission is to ensure that there are equal opportunities through ICT, provide training services and offer advice and consultancy services.


I got to know exactly how important accessibility is when I had the opportunity of meeting a blind person and actually seeing him work on his system. He used text to speech hardware that reads the text on the screen. I was amazed at how he could understand the words as the system read very fast and I could not keep up. He was also telling me how annoying it is for him that some websites do not give any thought to accessibility and rely mainly on the GUI making it impossible for him to use these sites.

Making a website Accessible

I did some research and discovered that there is a lot to read about accessibility standards. The W3 Web Accessibility Guide at http://www.w3.org/WAI/ seems like a good place to start. The W3 WAG Lists 4 major principles namely (in my own words) :

1. Perceivable - The information displayed must not be invisible to all of the senses of the viewer.
2. Operable - The interaction that a website requires must be within the capabilities of the viewer
3. Understandable - The content and the user interface must be understandable to the users.
4. Robust - The content of the site must be robust enough so that it can be interpretted by various browsers and must support the common assistive technologies. 

XML

Introduction

This week we tackled XML.  I had used XML loosely in my work but never really delved much into understanding it. I had previously had to modify XML files for use in third party applications and I understood from previous experience during my diploma and advanced diploma work that XML files were designed to contain data in a standardised form. I had not yet grasped the idea that XML tags are really not XML tags at  all but rather just tags that you can invent at will and that you simply had to follow some rules for the XML file to be valid. If one keeps in mind that HTML is used to display data while XML is used to describe the data and focus on what the data is, the difference between the two is then very clear.

Creating and validating the XML File

The following XML file was created using a standard text editor and then validated using the validator  at W3 Schools. A simple Google search also revealed that there are many other examples of validators on-line. Another good example is the one at www.xmlvalidation.com

<?xml version="1.0"?>

<project name="John Gatt" id="223344">
    <title>Mastering XML</title>
    <category>BSC Projects</category>
    <abstract>This is the abstract</abstract>
    <date>12/12/2000</date>
</project>

The image above shows the validation results for the test XML file created. I then decided that perhaps it would be better to not use attributes in this case. I therefore changed the file as follows :

 

To create the DTD I chose to use an external DTD rather than one which is included within the XML document itself and the next image shows the line added to reference the external schema:

To be continued....

Javascript II

Introduction

This week I was abroad on work and therefore had to postpone my work on Javascript although I did do some reading about Javascript while travelling. The more I learn about this exciting language, the more I wonder why I had not learned it before. It certainly can be a great asset in web design.

This week's exercise

This weeks exercise was interesting because it involved making an animation, although purely for academic reasons as making animation will most likely not be something I would do for my work.

I first started doing some tests with the sample code that was provided by our tutor. Basically I started changing parameters to see how the browser behaves and to become familiar with the different instructions and how they work. I also spent considerable time looking for a better graphic of the running man than what was provided. I realized that although many simple graphics exists there are specialised graphics available but most of there are available for a fee. YouTube also revealed that many people have done lots of experiments with animating running people and with enough time an animation could be made using real images from photographs rather than clipart.


The Walking Man

I first started with images that I found of a 'walking man' rather than a running man. I wanted to test on these images as I where I got them from they were supposed to produce a smooth animation. 

The above image shows the changes made to the original example. The function move() was added to move the image of the man from left to right by changing the CSS left style and incrementing it as required. The image below shows the <div> that is being effected by the change in the CSS left style.

The animation created with the code above can be seen here:

Animation1 - walking man - Click to view

The Running Man with speed control

As the exercise brief actually mentioned a "running man" animation I then decided to switch the images to a running man. I managed to find a running man 'strip' and had to use Adobe Photoshop to separate the images into frames.

My aim now was to add speed increase and decrease buttons. To achieve this the delay between frames would have to be increased or decreased accordingly. For this purpose I created two functions as shown below. The first function increases the delay while the second decreases it.

I also had to add a global variable to store the delay value as it changes.

finally, the delay functions had to then be linked to the buttons so that the user will have a means to change the delay value as shown below :

I also added a 'Check Delay' button so that during testing I could check that the value was indeed being incremented as accepted. This would eventually be removed after testing.

I also changed the move() function and it now accepts a value for the amount of movement, that is, the value which will increment the CSS left style of the <DIV>. I also added a capping to limit the value of 'left' and when this value is reached (500), it is reset to zero so that the animation starts all over again. This is shown below:

The animation created so far can be seen here :

Animation2 - Running Man

Adding change direction

I wanted to add a change direction function so that when the running man reaches the right side of the screen he would then run from right to left and turn back when he reaches the left edge of the screen. The direction should also be controllable by clicking a button.

I first looked into finding an economical way to flip the images horizontally and then use the same images rather than have separate images for the right to left animation. Solutions do exist, they are complex and certainly much more difficult than simply having different images.

So, the first thing to be done is to make the images available to the program and load them into a new array and to create a global variable  'direction' which will store the current direction that the graphic is moving toward as shown below :

The lines added below select which array is used in the animation :

I then changed the move() function to include the automatic change in direction when the graphic reaches the screen edge. The function also changes the direction of the graphic by decreasing or increasing the CSS left.

Finally the next screen shot shows the button assignments including the 'Change Direction' button and algorithm behind it.

Animation 3 - Running man with direction change - Click here to view

Adding an obstacle

 Next, I wanted to add an obstacle. I decided to create a new button that will place an obstacle in a random location in the running man's path. When the running man encounters the obstacle he should change direction and continue running. The obstacle would then disappear as if it was picked up by the running man. I would also create another button that would remove the obstacle altogether.

So, firstly I had to create the obstacle and this was done in Photoshop. I then created a function that would place the obstacle in a random location along the path of the moving graphic:

As can be seen above I also created a variable called obstaclePosition which would store the current location of the obstacle along the x axis. To remove the obstacle I am simply increasing the x axis location to 4000 which effectively places the obstacle outside the viewable range of the screen.

The algorithms in the screen shot below show the collision detection system that I have employed. Basically it is checking if the location of the obstacle is within the location of the running man graphic. The '55' value is included to provide a range of detection.

Animation 4 - Running man with direction change and obstacle - Click here to view

Conclusion

Once again, I have found Javascript to be very interesting and not overly difficult to learn. However, this exercise was very time consuming mainly because the syntax of this language is new to me and also because there is very little syntax error checking in the editor (notepad ++) I am using. I certainly miss the Intellisence features of Microsoft Visual Studio !

Javascript

Introduction
This week I worked on Javascript. Although I have done considerable web design work I do not have much experience with Javascript. I have used scripts written by third parties on many occasions where I needed client side scripting. Javascript, being the client side scripting language that it is has always intrigued me and I have always wanted to learn it as I am sure that it will come in handy. The quick introduction given by our tutor was enough to get me going and stir my interest in this topic.

This week's exercise
For this week's work, I started by changing the look of the table through CSS. First of all, rather than having the CSS embedded in the HTML header I decided it would be better to split the CSS into a separate CSS file.

I also tried using JSFiddle and also I appreciate the potential with this application, I decided I would rather use a text editor for this task.

I then proceeded to change the look of the table that is being used to display the form for the Loan Calculator.

The image shows the CSS now located in a separate file called style.css. The preliminary changes can also be seen, namely the addition of padding and an overall background colour for the table. I also wanted to make the table headers a different colour and therefore I added a class that would be used to colour the specific table row where it is used.

The result so far already looks much better with these simple changes.

I then decided to change the fonts used because the default font does not do the new design justice. 

I also wanted to style the button into something more appropriate. This involved creating a class for the button and then creating another class for the button hover. Code is shown below :

I then started working on the Javascript. I spent some time looking through the code and familiarizing myself with the syntax. Experience has shown me that coding is similar in most languages, however the learning curve to learn the syntax of the language can only be made less steep by practice. 

Addind the total number of payments was not difficult as the variable already exists in the code. The variable 'payments' already contains the number of payments. I then had to modify the HTML to include a new table row that displays the result. While I was at it I also added another new row that will contain the result of the "Date when loan ends". 

I then had to add the discount feature. I though that ideally it would not allow only 10% discount but could allow more or less as the user prefers. To start off I decided to start with applying only a fixed rate for 10%. The equation to work out the new interest would be :

New Interest = ((100-Discount%)xOriginalInterest)/100

Of course, for the intents of the assignment the Discount% would be a flat 10% but the equation will also cater for other percentages which I intend to add later.

Firstly, I had to edit the HTML so that the discount checkbox is included and displayed as shown here :

 
I then had to add condition statements to calculate the interest only if the checkbox is checked. The code is shown below:

I then added the code to display if interest was applied to the calculations :

 

The images below show the results after adding the above code. The two images are purposely inlucluded as a test.  As in the first image 10% interest rate is applied and including 10% discount it should display the same result as when 9% interest is applied and in fact it does as shown below.

I then decided that it would be a good idea to have the user specify a percentage discount rather than just apply the fixed 10%. This would of course necessitate the inclusion of another textbox to get the percentage value from the user :

As the equation above had already purposely included the value for the discount percentage, it was not difficult to include the value as a variable in the calculation :

and finally, I added the code so that  the percentage entered by the user is also displayed :

The image above shows the final result after the new features were added.

Validation
Some validation should be included, although due to time constraints I have only attempted to add simple missing field validation. 

 The image above shows the validation function. It is based on a simple example from W3 schools but adapted for this case. The function returns the name of the field to validate that was originally passed to this function. The advantage with this approach is that the form can be used to validate any field in the form and a new function does not have to be written for each field. 

I then had to include calls to this function. My first attempt was to include the call in the form declaration so that when the form is submitted the fields are verified but since the program also calls the calculate() function when a user changes the value of one of the fields then it would be better to include the validation in the calculate() function as shown below.

After some testing I realized that with the calculate() function included with every change of a field, the error message indicating that a field has been left blank will appear every time that a user starts afresh. To solve this issue I decided to remove all the onchange events and leave the calculation only when the user clicks the button.

Conclusion

Javascript is cool ! I have enjoyed experimenting and working on this application and the more I do on it, the more interesting it is, however, due to time constraints I decided to stop here this week !

DEMO

You can view of demo of this week's work here