Server Side Development

Server Side

The posts of the first 5 weeks of this blog were about client side web technologies including JavaScript, HTML, CSS and XML. Now the blog will shift towards server-side development and technologies which perform tasks by the server in the client-server model.

The basic way to describe this model is, the client will send a request to the server using the appropriate protocol (for example using the HTTP protocol on port 80 for Web Requests while using a web browser) which will then respond either with the requested item or an error. There are many server types apart from Web Servers which make use of this model. These include:

• File Servers
• Application Servers
• Instant Messaging
• Images and Sound (such as live streaming and online radio)

The 2 leading Web servers being used in today’s industry are Apache and Microsoft IIS (Internet Information Services). Now these servers usually make use of Database servers or other types of servers to add more functionality and to set up all servers needed could cause a lot of problems but fortunately there are some packages, which are open source, which group all the servers so that it will be much easier for the user to install and set up. An example of such package is XAMPP, a cross platform package (meaning it could be used on different operating systems such as Windows, Linux, MAX OS X etc…), which consists of Apache HTTP (The Web Server), MYSQL Database server, FileZilla FTP server, PHP and OpenSSL.

Task Summary

The task assigned relates to the installation and setting up of XAMPP. Here is an outline of the given tasks

• Install XAMPP
• Test the following function with XAMPP:
• Control Panel
• Check that the http and https services work
• Check the ftp service
• Get an XAMPP security Report
• Get a php info report
• Get a visitor report 
• Test the guestbook 
• Add an image and a style sheet to  "..\xampp\htdocs\index.html" and test it out
• attempt to replace index.html and other files using an FTP client from another computer

Downloading and Installing XAMPP

XAMPP for Windows can be easily downloaded for free from Apache Friends. The latest version available at the time of writing and thus used for this task was 1.7.4. Once downloaded the installation wizard starts, which asks the user which services he would like to install. All the services were ticked and the installation was started. After the installation is finished, all services can be controlled from the XAMPP control panel.

Common problems with Apache Web Server

There are a couple of common problems that one could face after installing Apache:

• Sometimes before the installation starts a message box pops up which states that due to UAC (User Account Control) some functions of XAMPP may be restricted. This is due lack of permissions the user has in the C:\Program Files. To Change the UAC settings in a Windows 7 machine go to the Control Panel à System and Security à Action Center and under Security there is the option User Account Control, click on Choose you UAC level and slide to the option “Never Notify”. The machine usually needs a restart to implement these changes.
• Another common problem with Apache is that something may already be using port 80(HTTP) and 443(HTTPS) on the server, to solve these issues one could set the Apache server to use different ports for HTTP and HTTPS.

Testing the Functions of XAMPP

Control Panel

The image below shows the XAMPP control panel running on a Windows 7 machine. The Control panel shows you all the available services installed with an option to stop them at any time. Also information such as the Directory and version of the XAMPP along with any problems there are, are found in the large text field under the services. The Status button will show you all the services currently running along with the Port that they use. The explore button will take you to the folder where the XAMPP is installed (usually c:\xampp).

Check the HTTP and HTTPS services

To test these 2 services is very simple. In the Control Panel the Admin button next to the Apache module takes us to the main page of the web server which in the case is a splash screen. (Alternatively one could enter http://localhost in a web-browser). This page is a welcome page which allows the user to select the language for the XAMPP. Also by opening this page one has successfully tested if the HTTP module is working properly.

To check for the HTTPS service first I checked that the service is activated in the Status page of XAMPP, then to verify one must browse the main page using https instead of http. The result of browsing the main page with the URL https://localhost/ is a security message since the certificate is not trusted.

Check the FTP service

Again we go to the status page and make sure that the FTP service is enabled. To test this service we must make use of it by sending or downloading files from the server by using FileZilla FTP Server which is part of XAMPP and is already installed. By entering ftp://127.0.0.1 in the Windows Explorer the FTP server was accessed and logged into using one of the 2 default users Filezilla has when installed. After logging you could see all the files and folders which where given permission to that particular user.

Getting an XAMPP security Report

The report itself is very easy to get from the security page. At first most items are unsecured since XAMPP is defaulted to be as open as possible. To fix most of the security issues XAMPP provides with a security console which helps the user change some passwords to make some of the services more secure.

The remaining 2 items where fixed manually, The FTP password was changed from the FileZilla Server Interface and according to the Security report itself, if PHP is going to be used for development purposes its best to leave it running not in safe mode, so this security issue was left as it is.

PHP phpinfo() report

The XAMPP homepage provides the phpinfo() report which displays information regarding the PHP installation, configuration and operating environment of the server. Details include PHP version number, installed modules, predefined variables and server environment information.

Get A Visitor Report

XAMPP also provides us with a tool called the Webalizer. This tool shows the number of Visits on the server at a given month in the form of a graph.

Test the guestbook 

The Guestbook can also be found in the XAMPP menu

Changing the layout and adding an image to Index.html

After Finishing with all the features of XAMPP I went to the htdocs directory to change the HTML file of the index and then access it from another machine to notice the changes, the file was easily found and very simple changes in the document using HTML and CSS where used. To view the file online from another machine I ran the ipconfig command in the command prompt of the Server to find out the exact IP. Then using a web browser in the other machine I typed in the IP followed by “/index.html”, and the changes could be viewed.

Attempt to replace index.html and other files using an FTP client from another computer

The last task required to set up the FTP server so that it could be access from another computer in the network. First through the FileZilla Server, I created a new account “Guest” with a password and the files which it can read and/or write. This user will be used to access the Server from another PC. To access the Server I typed in ftp://192.168.1.83 in the windows explorer of the other machine, but before the computer asked for a username and password to gain access and error popped up stating that no connection was being established. This was identified as being simply the Windows firewall blocking FTP connections to the machine. 

Accessibility

Introduction

This week we had a talk about how to become more aware and amend and maintain websites to make them accessible for everyone and everything.

When talking about making websites accessible for everyone the first taught to spring to my mind was to make sure that the website created should cater for people with disabilities such as colour blindness. Although this group is part to consider, making a website accessible does not limit it to only disabled people with visibility issues. One must consider people who have hearing disabilities or motor disabilities. Also apart from people with disabilities you must also consider age groups such as the needs of young children and the needs of old people.

Also apart from people with disabilities you must also lay out the website for different users such as for people who will use PCs or mobile phones or tablets.

What can be done for these user groups?

Color blindness – make sure there is text and context when giving instructions, as if only pictures are giving to the user, he might have difficulty understanding what each picture mean. With clear context or text there won't be any misunderstandings and the user could navigate the website much more easily.

Old people – text should be of reasonable size, and the sound should be of  good quality as this user group's sensed are not as good as they used to be. Also since this user group has not grown with the internet it could be a steeper learning curve to learn how to use it so clear instructions should be given always.  Also make sure if the user will zoom with the browser the site still remains structured properly and not become cluttered.

Hearing impaired - subtitles or the context of any video is clearly explained for obvious reasons. Also all instructions are given in text form.

Small children – make sure you use text with videos and instructions  as without visual instructions small children can become easily distracted.

Structured menus with good tabbing order are very important especially for people how don’t use/can’t use the mouse. Also clear instructions are given to input forms are important to show the format such as when entering a date. After completing forms it is always better to give confirmation to the user so that he’s sure that that the form is filled correctly and the sending was successful. Also when the form is not correctly filled in clear messages to show where in the form it was incorrectly filled.

It is important not to make moving objects in a website that can’t be stopped easily as these can be very distracting.  The same goes for sound.

Tools and Information

Any more information about how to keep websites accessible can be easily found on http://www.w3.org/WAI/. This website provide the Web Content Accessibility Guidelines (WCAG) which are detailed guidelines on how to make websites more accessible for people in need. There is also a section that defines conformance levels of the website.

Also there are many tools found on the web that can be used to help developers check their work.

These tools include:

Color checkers to make sure the contrast does not effect color blinded people.

Emulators for Smart Phones

Tools to break down sites to the point of how visually impaired users would see/hear it

Conclusion

This talk we had showed us how important it is to think of every user group possible and not leave anyone out. It taught me to think of a website in a different way, making sure that it will allow all visitors, even with disabilities, could use the website with ease. As apart from helping people in need to access the website more easily, a well designed website that follows the guidelines would attract more visitors, and become more popular. 

Introduction to XML

XML

In this post, the basics of XML (eXtensible Markup Language) are discussed. XML is a language used to hold the meaning and store data in a format so that it can be changed into another type of document, such as another XML file with a different structure or could be a totally unrelated file such as a text file.  It icould be used to separate the data away from HTML.

Some main features of XML are:

• it's plain text
• it supports data structures
• it has a strict format
• it is useful to swap data between different application.

The Key components of XML are Elements and Attributes. All these components have strict syntax with rules that must be followed.  Elements must have a closing tag and the tags are case sensitive, also apart that elements must be nested correctly, XML documents must have a root element. Attributes must always be quoted.

DTD

Since XML is so strict in format, Document Type Definitions (DTDs) are used to create a template so that the document will follow the expected order and structure.  

Task

The Task for this psot was to create an XML file for to keep the data about a student project: student name, student ID, project title, project category, abstract, date submitted. Try to use both elements and attributes to describe the data. Validate the XML using the W3Schools XML Validator. Create a DTD Schema for the XML file and validate the XML against the schema using the W3Schools DTD Validator.

Here is the created XML document with all the elements and attributes required with the proper nesting and structure.

This XML was now tested in the w3schools XML validator. At first the validator found some errors which concerned the case sensitiveness of the document. These were easily fixed and no errors were found in the next validation.

The DTD of the XML was created with every tag beginning with “!” and nested inside the tag “!DOCTYPE”

Finalizing the Running Man

In this post I’ll be finalizing the coursework of the running man. So far I made the animation work and also being able to speed up and slow down, stop the animation and able to change the animation, In my case throw a rock to the running man and hitting him with it.

Custom Features

The next and final step of this coursework was to include a feature of my own. I decided when the user will click the throw rock button; the rock will not always hit the runner. To do this I edited the JavaScript function of when the button is clicked, so that when the function is run the number 1 or 0 is generated randomly, if the number generated is 0 instead of hitting the runner with the rock, the JavaScript will run through a different function making the runner duck and the rock will miss him.

Also in the HTML I added a textfield to show the user the delay in milliseconds being used while running the animation. The user will see this number change when he will click the faster or slower buttons.

One last thing I tried to do was to add some sound in the animation whenever the rock would hit the runner.  To do this I first found some free sound effects online, the closest thing to a sound effect of someone getting hurt or something crashing was a sound effect of some glass shattering.  To make the sound effect in the animation I created an empty span element in the HTML. Then in the function of the rock throwing when the picture of the rock hitting the runner is next in the animation the JavaScript will call another function which in the empty span element created in the HTML it will put the path of the sound effect and run it but will make sure it does not repeat itself once the sound effect is finished.

Even though I was successful in implementing the sound effect in the animation, when having this JavaScript running it will make the rest of the JavaScript bug when using Google Chrome, in cases such as the picture was not changing properly to the next leaving part of it in the animation and the buttons would become without the animation of when the mouse is over the button or when the buttons are clicked. Also the delay in milliseconds label was not shown updating even though the slow and faster buttons were working.  In other browsers such as Internet Explorer and Firefox the sound effect was played and the animation kept smooth, the buttons showed being pressed and released and the delay kept updating.

Compatibility

The last thing to do in this coursework was to make sure that the animation could run on multiple browsers, I was currently checking all my work in Google Chrome, but to make sure that most people could run this animation on their browser I also checked the animation using Internet Explorer 8 and Firefox 3.6 . I found out that all animations worked in both browsers. The only difference I found was that in Internet Explorer, the animation was a bit more choppy(the pictures where not changing fast enough to make the animation seem more smooth) and when using the sound effect it made everything even worse since it seemed that in IE it took longer to load than in Firefox or Chrome.

Also I think that the animation remained the same in all browsers since I put very little CSS styling in this coursework, and that is usually the biggest problem in browser compatibility.

Conclusion

That’s it for this blog post. I believe that all the requirements of the coursework have been reached. The Next post will be an introduction to XML.

More JavaScript (The Running Man Coursework)

As the title suggests this week we continued on JavaScript in More detail and ended it with a task that would require animation.

The DOM

One important thing we talked about was the Document Object Model (in short DOM), which is a technique which allows you to access anything in the HTML document through the JavaScript to change around, add new or delete HTML elements.

To retrieve elements from the HTML using the DOM. The first one is the document.getElementById(ID) which was used in the previous week to get single elements with the Id provided and the document.getElementsByTagName(name) with which you get an array of elements with that name, and then you can access each of the elements by array counter.

There are many methods used in the DOM such as nextSibling, previousSibling, parentNode and childNodes used to get elements without going back to the array.  Once you access the node you want you can get or edit its properties such as the Type, Name and Value of the specific Node. Apart from properties you can also add and change attributes of these nodes.

Cookies

Another important thing in JavaScript is cookies.  Cookies are used to store information on the client side of the webpage. You can only access the information you store on the client machine, so you can’t access cookies created by another site. These cookies contain a name, a value, expiration date and the path that can access it.

To create the cookie you create use the document.cookie = method to assign the name, value and exp date to a cookie. You can always create a function to get this information from the HTML.

Framework

In this week we also talked about some JavaScript frameworks which are Libraries that simply HTML event handling, animation etc... These frameworks give developers the ability to rapidly develop websites by providing libraries so that the developer does not need to re-create already invented code (Re-inventing the wheel).

TASK

This week’s task was to make a simple animation of a running man using 6 images along with some additional features and animation.  To start this off I created 6 simple images of the positions that a man does while running. Then I started working on the JavaScript and HTML by creating a couple of buttons, Run and Stop.  Then I started creating the JavaScript to animate the pictures one after another to simulate a running man, this was done using by assigning each picture to an array and a variable which will hold the delay of how much the JavaScript will wait before showing the next picture. Also a couple more variables where created, one of which to hold the counter of which picture to show and the other to set the method created for the animation.

To make the man run in the animation when the button Run is clicked, a small method will run to create some validations and  calls the marathon() method with a setInterval() which means it will call that method every time the interval is passed. In the marathon method an IF statement will check if the counter of the animation is in the last picture of the animation. If it is it will reset it to 0 and then show the picture, is not it will increment the counter and show the picture connected to that counter. This method keeps on going unless stopped since it uses the setInterval() mentioned before.

There is a small validation in place so that when the Run button is clicked more than once the method does not run on itself making the animation go crazy.

Next the animation to throw something at the man was created. I decided to make a the animation of a rock being thrown to the runner and hitting him making him fall down and him getting back up and continue running.

Again I created an array with all the pictures of the animation as before, this time when the user will click the throw rock button another small method will be called and  it will clear the interval of the running man so that there won’t be 2 animations going on at the same time and start the throwrock() method. Also validation is done so that the animation would not occur if the runner is stopped and also the validation so that if the button is clicked more than once is done here also.

Although an IF statement is used to show this animation, the method here is slightly different to the running man sequence since this animation has to be done only one whenever the user clicks the throw rock button and then resume back to the running as the running man animation but when it reaches the last picture (when the man got up) instead of starting this sequence again it will call the start running animation.

This was done with the IF statement first checking if the counter is holding the number bigger than the last picture of the animation. If not it will show it and increment the counter and then using a setTimeout() method recalls the same method to re-check the counter. If the counter is now bigger than the last animation the script will reset the counter and start the marathon method again with the delay.

The last feature for now was to make the man run faster or slower. This was easily done by having the delay variable decreased if the user pressed faster and increased if the user pressed slower. Also what had to be done so that the animation takes the effect of the new delay was to stop it and restart it whenever either button was pressed.

That’s it for this week, next week I’ll add 1 last feature to the running man of my own. Also next week in another post, there will be an introduction to XML.

More HTML and Introduction to JavaScript

JavaScript

This week’s topic focuses on JavaScript, the currently most used web scripting tool. Although the name suggests that they are, JavaScript has nothing to do with Java.  JavaScript is an object-based, scripting language used by HTML authors to make web pages interactive and dynamic.

Being an interpreted language, JavaScript requires no special program to be able to create usable code, and is supported by most web browsers but the code is visible to the user and could be easily modified if the user knows the syntax of JavaScript, which one could easily learn since it’s licence-free and a lot of material can be found on the web to learn it.


To create JavaScript, you just need to create the <script> tag in your HTML file and code all your scripts inside that tag. It is very simple to do stuff such as:

• React to Events - A JavaScript can be set to execute when something in the webpage happens, like when a user clicks on an HTML element.
• Read and Write the content of HTML elements.
•  Used to Validate Data before its submitted to the server, releifing it from extra processing (although server side validation is extremely important since it’s so easy to modify JAVAscript from the client).
• Used to detect the visitor’s browser so that depending on the browser detected load the page specifically designed for that browser because even though most syntax is universal, there is always that little bit of functions which have differing naming across different browsers such as the window.addEventListener used for browsers supporting DOM (more on this on the next blog) and window.attachEvent used for IE.
• Can be used to create cookies to store and retrieve information on the visitor’s computer.

Task

This week’s task was to modify some code given to us, so that we learn to use the basics of JavaScript. We were given some simple HTML and JavaScripts which gave us simple functionality of a Loan Calculator.  The Task involved that we edit the HTML and CSS of the code to make the table more presentable, modify the JavaScript to include the total amount of payments for the loan and the date that the loan will end (assuming the loan starts the date the calculation is done). Also we had to add a checkbox which when checked would reduce the interest rate by 10%

First I analysed the already existing JavaScript, to understand how the existing code was working. Since there wasn’t too much code I didn’t feel the need to separate the HTML, CSS and JavaScripts into different file and then link them.

The existing code was fairly simple, basically when the user fills in 3 fields with the loan amount, the interest rate and the payment period of the loan, then the user clicks the calculate button which will trigger the JavaScript which will gather the data inputted by the user in the 3 fields provided and calculate the monthly repayment, the total cost of the load and the total amount of the interest to be paid using some simple mathematical formula. Then the JavaScript will display the results of the calculation by changing the innerHTML property of the elements connected to the variables holding the results in the JavaScript.

I started off by giving the some styling to the tables. First, I created a header with a title and gave it a background image as a header. I left the background of the body as white but I gave the table holding the data a ridge border with a very thin width, I gave the background a light green color and I changed the font of the content to Verdana. I could have fiddled more since 

styling is so much vast but since this task was to focus on JavaScript I stopped here.

Next, I edited the HTML to add 2 more fields in the table under the current results. These were kept in the span class “result”. I kept the same HTML code as previous so that any styling given to the previous results would still be kept in the new ones. I also added a checkbox to be used when the user will be eligible for a discount.

After adding the fields I when to the JavaScript and modified the calculate method so that the new results will be shown along with the already existing ones. The number of payments was already being calculated in the method so to display this all I had to do was to create a variable, connected it to the span element I created in the HTML by ID and assign it to the no of the payment to the created variable.

For the last payment date I had to do a bit more work, first I created a date variable and to get the system date I used the getMonth(), getDate() and getFullYear() methods. Then to calculate the end date I added the value to the years taken from the form by first multiplying the value by 1 so that the years would not be added as a string but as an integer instead.

The last thing to go was to calculate the discount when the checkbox was ticked. An IF statement was created before any of the results are calculated. The IF statement was done only when the value of the checkbox was 1 (meaning it was ticked). Inside this statement there was to get 10% of the value of the interest given in the form and then the interest was calculated by first reducing the interest given in the form by the 10% found just now. If the checkbox is not ticked, the interest would be calculated normally.

Here is a screenshot of the form with all the modifications made:

That’s it for this blog, the next entry will focus on more JavaScript.