Week 6 - The Server Side

Yesterday, the basic ideas behind servers have been introduced during the lecture.

A server in computing is a software application that gives a service on behalf of the client. They respond to incoming requests and provide a service. There are different types of servers such as:

• Mail
• Database
• File
• Application
• Web
• Image
• Sound

In the coming weeks, we will be using PHP (PHP: Hypertext Preprocessor). PHP is a server side scripting language used to produce dynamic websites. To start developing in PHP, one needs to install as a minimum, a web server, PHP and a database server.

Therefore XAMPP have been downloaded from http://www.apachefriends.org/en/index.html, where it contains the following:

• Apache HTTPd (Web Server)
• MySQL
• Filezilla FTP server
• phpMyAdmin
• Open SSL
• PHP

After installing XAMPP, the control panel was started, and the servers have been stopped and started, but the buttons where not working properly. This is because I have to start the service by right clicking on the Control Panel icon of XAMPP and choose ‘Run as Administrator’.

XAMPP Control Panel

Then the http and https services have been checked if they are activated

Http

Https

As you can see, for https, the statuses for most of the components are deactivated, but at the bottom it says the following: 'Some changes in configuration may sometimes cause false negatives. All reports viewed with SSL (https://localhost) do not function!'

I also checked the security status of the XAMPP installation where I found that all components have been unsecured. Therefore to fix the problems for mysql, phpmyadmin and the XAMPP directory, http://localhost/security/xamppsecurity.php , have been used.

XAMPP Security (Unsecure)

XAMPP Security (Secure)

When I started FTP the service on the Control Panel, I clicked on Admin to set the Filezilla service on XAMPP, where I followed the steps that are found in http://tutpages.com/download/images/xampp/filezila/chmod.html to assign users.

Filezilla Server

Then I connected the FTP program to the XAMPP server FTP service.

Filezilla FTP Client

To get a phpinfo() report, I created a php file named 'hello.php'. This was created inside the htdocs document and the following URL has been inserted in the browser 'http://localhost/hello.php'.   At first, it displayed 'Object not found', but when I rebooted the system, the following phpinfo() report have been displayed.

phpinfo() report

I also tested the default guestbook and got a visitor report using the 'Webalizer' tool.

guestbook

visitor report

I also modified the html file found in 'C:\xampp\htdocs\index.html' by adding an image and a style sheet to it and typed 'http://localhost/index.html' in the URL and got the following:

index.html

Running from a different computer

 

Week 5 - Accessibility

Yesterday we had an insteresting talk about accessibitly and how one can improve when creating a website so that the website will not be for one type of audience only, but for various audiences.

What is Web Accessibility?

Web accessibility means that people with special needs can understand, navigate and interact with the web.

Making your web site accessible

• Use the 'alt' attribute in images
• Descriptions of video and captioning of audio
• Headings and lists
• Use the 'longdesc' attribute on graphs and charts
• Instead of writing "click here" use text that makes sense
• Use signs inside a button
• Minimize the amount of flash and javascript.  Also, if you have animation, include a stop button.
• Allow the user to choose the font size of text
• Use less contrast colours

When I designed websites, I always tested the websites using validators and different web browsers but I never thought that there might be visitors that can see the website differently (as in colors).  Now that I know about this, I tested one my websites using a colour blind filter

Normal

Protanopia Vision: unable to receive color red

Deuteranopia Vision: unable to receive color green

 Tritanopia Vision: unable to receive color blue

When I saw this, I was abit surprised; I knew that in color blindness people look at the color differently but I did not know how.

That's it for this week!!

Week 4 - XML

XML
XML stands for eXtensible Markup Language. It is a language used to describe other languages and was designed to carry data and not to display data.  In XML the syntax is strict.

The following are the Key Components of XML:

Elements

• Elements must have a closing tag
• Tags are case sensitive
• Elements must be nested correctly
• XML documents must have a root element
• Example: <studname> Stephanie </studname>

Attributes

• Can be added to elements in XML
• Must always be quoted
• Example: <student dob="30/04/89"></student> 

An XML file was created to keep the following data about a student project: student name, student ID, project title, project category, abstract, date submitted.  The XML have also been validated using the W3Schools XML Validator.

Without a root element and without quoted attributes:

With the right syntax:

DTDs
DTDs stands for Document Type Definitions and defines the legal building blocks of an XML document.  A DTD describes an XML document in terms of elements, tags, attributes, entities, PCDATA (parsed character data) and CDATA.  CDATA is similar to a comment that will not be processed.  A DTD have been created and also validated using W3Schools DTD Validator, that will validate the XML against a DTD.  Only Internet Explorer will check the XML against the DTD.

Missing attributes id and name (since #REQUIRED is included):

 Without errors:

Schemas
A schema is used to describe the structure of an XML document.  The following is an example of a schema.

Week 4 - Javascript Animation Part 2

This week, I continued on the running man animation, and created some additional features.

Going back to the previous post, I created a textfield such that the user can control the speed of the animation, but in here I had a problem.  When the user inputs another number without clicking on the stop before, the animation would not stop (when the stop button is clicked).  In order to overcome this, clearInterval method was written before the set interval method: 

onClick="clearInterval(startRunning);startRunning=setInterval('marathon()',document.animateform.speed.value);"

Since the speed is controlled via a text field, a user may input a string instead of a number (the number of seconds).  In this case, when the user clicks the run button, the animation starts normally with a very fast speed. An alert dialog box may have been displayed when the user inputs text. 

The next thing I did is creating a style for running man animation using html and css, and I ended up with the following style:

The html page consists of the title, a box that consists of the runner (its boundaries) and buttons at the bottom to control the animation of the runner.

The first icon (the lightning) is instead of writing ‘speed’, where the user inserts the number in milliseconds inside the textfield. The second icon is a button used so that the animation of the running man will start.  The third icon is a button used to stop the animation.  The fourth icon is also a button used as an additional feature, where the runner will run backwards.  This is done by decrementing ‘curRunner’, instead of incrementing.

The icons found on the right are buttons used to move the runner up, down, left and right.  To make the runner move to the right, the following code is used:

A variable x with a value of null, a variable y with a value of null and a variable 'inc' with a value of '20' have been declared.  Each time the right arrow is clicked, the runner will move 20px to the right.  Similar functions have been created to move to the left (x-=inc), up (y-=inc) and down (y+=inc), using style.left and style.right.

Moving to the right:

The icons found in the middle are used so that an obstacle will be thrown at the runner.  The soccer ball icon is the obstacle, the soccer ball icon with a play icon on it is a button used to throw an obstacle and the soccer ball icon with a stop button on it is a button used to get the ball back.  The other icon is a button used to get the runner to its initial position.

A function named obstacle have been created, where the ball will move upwards with a speed of 50 milliseconds.

Throwing obstacle:

I also added to the code what to do when the runner reaches boundaries.  When moving to the right, the runner starts moving to the left and when moving to the left, the runner starts moving to the right.

A problem have been encountered when implementing the feature of throwing an obstacle to the runner.  I wanted that when the user throws the ball and the runner image meets the ball image, the runner stops from running.  Otherwise, if the images do not meet, the runner continues to run.  In the animation I created, each time the user throws the ball, the runner stops from running, even if the images do not meet.

One thing I noticed when watching the animation is the way the runner is running when moving the runner left or right. The runner is not moving smoothly (visually); this might be because there is no ground under the runner.  It might also be that the images where not created for the runner to move (only to run in a fixed position).

Programming in javascript is not that easy as I thought, but the more time you spend on it the more you learn.

Week 3 - More Javascript + Animation

This week, we continued on javascript.  In the last part of the lecture animation from javascript have been introduced.  Animation is used to create effects and enhance the content of the web site using Dynamic HTML (DHTML).  This leads us to the next task which was given to work on it for the next two weeks.

The task consists of implementing the animation of a man running using the 6 images, which are found in our coursework material.  Additional features include:

• Allow the user to speed up / slow down the animation
• Allow the user to ‘throw’ an obstacle at the runner

So first I started to crop the whole image into 6 separate images, so that the running man animation can be implemented.  I inserted the code found in our material to view the animation on the web browser.  At first nothing happened, this is because there are some missing semi-colons, the ending script tag had a missing forward slash and had html comments “<!-- -->” inside the javascript code.

After making it work, I took a look at the code to understand the code step by step, since it’s the first time I will be using javascript to create animation.

An array has been created, so that it can hold more than one image at a time.  An Array object called runner is used, having a size of 6.  Javascript arrays start at 0.

A second alternative on how to create an array is by using a Condensed Array

A third alternative is by using a Literal Array

A fourth alternative, which I will be using is creating a for loop where "runner" is concatenated with the variable i and with ".jpg". The advantage of this code is that the image source is not written for six times. 

The function marathon is used to loop from runner0 to runner5, when the run button is clicked, and repeats itself until the stop button is clicked.

When the run button is clicked, the setInterval() method is used, which has the following syntax:

setInterval (code, millisecond, lang)

The 'code' parameter is required and is a reference to the function to be executed.  In our case it is the marathon() function.  The 'millisecond' parameter is also required and specifies the intervals.  In the example, the millisecond was written as 100, but I created a text field where the user can control the speed of the running man animation, by inputting the number in milliseconds. Therefore 'document.animateform.speed.value' was written instead of '100'.

That's all for this week, next week I will continue on the running man animation.

Week 2 - Introduction to Javascript

In this week’s lecture, javascript have been introduced, where we learned the basics of javascript. During our lab session, the source code found in http://www.davidflanagan.com/javascript5/display.php?n=1-3&f=01/03.html has been given.  The tasks which we had to do are the following: 

• Modify the CSS and HTML to make the table more presentable.
• Display the total number of payments
• Display the date when loan ends (assuming loan starts today)
• Also modify to add a checkbox showing “Eligible for discount” which will reduce the interest rate by 10%.
• Add a new feature of your own.

Before I started modifying the code I went through the code line by line. The getElementById method is a method of the document object.  It gets the id of the HTML element.

The innerHTML property is used to insert the content of the HTML elements.

To make the table more presentable, the HTML and CSS have been modified.

HTML:

• Inserted an <h1> tag named ‘Loan Calculator’
• Replaced the <b> tags in ‘Enter Loan Information’ and ‘Payment Information’ into <h2> tags
• Divided the table into 2 tables using the <div> tag
• A checkbox, a reset button and additional rows have been inserted as well

CSS:

• Changed the font type and size of the text
• Changed the style and colour of the headings
• In order to separate the two tables, a dotted line was created using ‘border-top: 1px dotted’

Javascript:

Total number of payments:

To get the total number of payments, the line of code 'totalmonthpay.innerHTML = payments;' have been used:

Date when loan ends:

To get the loan ending date, the Date Object and functions getDay(), getMonth() and getFullYear() have been used.  While I implemented this code, I found out that if the current month is February, number 1 will be displayed instead of 2.  This is because the number of month is counted from 0 till 11. Therefore I added one to the month as shown in line 75.  Another thing I found out is that when I was adding the variables year with years (line 78), these variables where being concatenated not added.  Therefore I used the parseInt function to return that string into an integer, shown in line 73.

Eligible for discount checkbox:

Another feature which we had to create is to add a checkbox showing “Eligible for Discount”, which will reduce the interest rate by 10%.  Line 108 shows that if the checkbox will be checked, the statements found in lines 109-116 will be calculated. The discount is (90/100) multiply by the interest.  The toFixed(2) method is used to format the values into two decimal places.

Additional Features:

I created two additional features. One of them is that if the amount will be less than €5000, a dialog box with message “loan starts from €5000” will appear.  In the other feature I added a reset button which calls the ‘reload()’ function. This was created so that when the user presses the ‘Reset’ button, not only the text fields will be cleared but also the calculated values. 

Loan Calculator:

Loan Calculator with discount:

Loan Calculator with Dialog box: