Week 6- Server side Scripting

Introduction

The blog so far contained client-side related posts, where we started from some basic HTML, then went to styling the site to vamp it up with some designs and not to leave it static we also worked on some JavaScript and some basic XML. After learning those it was time to switch to server-side.

What is server-side scripting?

Internet works cause of TCP /IP. It has two protocols working together both of which are lower level protocols such as application level. Server-side scripting is a web server technology and is done to generate a dynamic page by having the users request running directly on the web server. Server-side scripting was performed with the use of a combination of C programs that made use of the CGI. It is mostly used in websites so they will be able to connect to a database. It is usually used to provide interactive web sites that interface to databases or other data stores. Some advantages to server-side scripting is the ability to highly customize the response based on the user's requirements, access rights, or queries into data stores. As security, server-side scripts aren’t available to the browser and they are executed on the server.

Task Overview

This week’s task is about installing Xamp together with running some few tests to make sure it works well.

Control Panel

 Testing

FTP works

 Xamp was downloaded from www.apachefriends.org and it was installed successfully. After it installed users which have skype installed it interfered with Xamp since they both work on port 80. First we had to check that the control panel opens and works fine and so far it did work fine. Then we had to check that both  http and https works fine and it worked. Then we had to check if the FTP works. At first the FTP was showing as deactivated then i managed to activate it from the control panel but still it did not work. Therefore I went on SCM in Xamp control panel and for some reason altough it was activated from the control panel it did not get activated therefore i activated it manually and got it working.

FileZilla activated manually

After that we had to check other severall reports like php info report, visitors report and also test the guestbook. These mentioned above all worked successfully. To check if the guestbook is working you simply type in the details it asks you for and when you save them you are to get your details in the guestbook.

PHP Report

Guestbook

Visitors

 The html index.html file was also tested, this was found in the C: in the folder Xamp then htdocs. I added a picture and also in the folder I added another folder where there was the CSS found in it and linked it to it. I then tested it by by typing in the following URL http://localhost/index.html

index.html working

Testing from another computer. 


To do this I went on cmd to get my IP address went on another computer and opened the browser and typed in the IP address in the URL to check that it works to.
Replacing the index.html
We also had to replace the index file, this was done using FileZilla. I connected to the FTP server then drag and dropped the index.html file. Since there was already and index.html file a dialog box came up asking what I wanted to do, in this case i wanted to overwrite the index.html file and clicked Ok.
Conclusion
Xamp installation was not a hard task although there were some things that didn't work immediately one can easily find some answers one the internet itself.  

Week 5 - Web Accessibility

This week I won’t be blogging the usual things, I won’t talk about what language we have learnt or what implementation didn’t work in my program. This week’s lesson was about web site accessibility. We had a presentation with the purpose to understand and keep in mind that there are people that have certain problems when it comes to using a computer or reading something of a website. This is a huge issue and people don’t know about the large number of people that there is that can’t make proper use of certain websites and features.

Web Accessibility is split into four major parts, visual, mobility, auditory and cognitive. These are split from children to youngsters up to elderly who all make use of the internet. Certain sites have certain colors that certain people with visual problems won’t see it properly or else there is a fast icon going on and they won’t be able to click it, also some sites which have some sound going on and off automatically and the stop button is nowhere to be found can affect people with certain disabilities.  

Chosen colors don't pass

Groups of people are forming to try and show the awareness for these types of people and make sure that websites are accessible by everyone. WAI is one of these groups this stands for Web. Accessibility Initiative, with their help and documents which they provide one can develop a site that could be viewed by everyone even those people that have some disability. In 1994 the disability discrimination act was formed in 1994 and revamped in 2004 while the equality act was formed in 2010. Services on the website must be equal to people with disability.



As technologies continue to evolve developers are making more use of certain tools that are being released to make it easier for developers to create a more accessible site. An example of this tool is to check the colors of the sites and make your site look as how it would look like for people with visual problems. There are also different type of sites that offer services to check your color contrast if it passes the WAI standards. I took a shot at it and tried some contrast. A list of useful tools can be found on http://www.w3.org/WAI/RC/tools/complete


Conclusion
Trying to make everyone feel that they have the same equality is of utmost importance you can do this by following certain guidelines. I think that their isn't enough knowledge about Web Accessibility and students should give more taught about accessibility so that everyone would be able to roam the internet and use all sites. Thanks to this lesson I would now keep in mind certain things when creating a site so everyone can use and enjoy the site.

Chosen colors pass

Week 4 - Introduction to XML

Introduction

For the fourth week, we were introduced to XML. XML stands for eXtensible Markup Language. This is a markup language because one can invent entities which mean something. Some research was made on XML using http://www.w3schools.com/xml. XML was designed to carry data and not to display. XML and HTML are different then each other, XML is used to store data while HTML is used to display data. In XML you predefine your own tags, there aren't tags that are XML standards. XML syntax are case sensitive.

XML documents starts with declaring the XML version. The first tag is the root element which describes what the document is.Example: <mail> that means that the document is a mail the next tags are the child elements of the root. 

DTD which stands for document type definition describes the XML file, it defines the structure with a list of legal elements.

Task 

This weeks task was to create a file about a school project having student name, student Id, project title, project category, abstract and date submitted. We had to try use both elements and attributes to describe the data. Then we had to validate the XML using a W3Schools Validator. After that create a DTD to describe the XML file and validate the DTD too.

XML Document

Above is the code for the XML document. The root element is the project element meaning that this document is about a project. Student is the child element of  the project element and contains the student tag. Both attributes and element needed to be used so in student name and Id where used as the attributes of student. Each student will give the project a title, the category, abstract and what date it was submitted since each student will have a project.

DTD Schema

On the right hand side is the code for the DTD for the XML document in the above section. The <!ELEMENT> tag declares an element with the following syntax. <!ELEMENT element-name category>. Therefore first comes the element tag then you write the name of that element then in the brackets the sub elements are written if there isn't any sub elements you write what data type is expected. Some elements show (#PCDATA) that means that elements with only parsed character data are declared. <!ATTLIST> is the tag which is used to declare the attributes together with the name of that attribute. #REQUIRED states that that element is to be included. 

Both XML and DTD where tested in w3schools validators. 

Schema

Further more to XML and DTD there is also the Schema this is used to describe the structure of the XML Schema in detail like stating which are the child elements and there order which is an empty element and which element includes text and more. Since the XML contained both elements and attributes the Schema has elements for the <!ELEMENT> and others for th <!ATTLIST>. The element date submitted on line 9 is of type date since it will output a date format. 

Week 3 - Animation with more JavaScript

Introduction
This week we moved further on about JavaScript. We went into more detail. DOM was mentioned and also framework and cookies were mentioned.

Last week we skimmed a bit through DOM but this week we went into more detail. This defines the logical structure of documents and the way a document is accessed and manipulated. With the help of DOM, programmers can build documents, navigate their structure, and add, modify, or delete elements and content. Anything found in an HTML or XML document can be accessed, changed, deleted, or added using the Document Object Mode. An example of this is the document.getElementByName(name). Another thing that we mentioned was the Framework, these help developers in providing them with some libraries that are ready for use to be able to build websites with less code and in less time. An example of this is JQuery which handles good animation. 

Task Description

In the end of the session some animation was covered and this is what the weekly blog is concerned about. With JavaScript one can build more interesting and enhanced websites. This weeks task includes in doing an animation of a runner running were one can choose either to make it run slow, faster and even more faster. Then we are to add an obstacle and as it hits the running man he stops running and also add a features of our interest to make it more interesting.

Animation
First of I started with the code of the runner. When saved and run it was not running at all since the code had some errors like missing semicolons missing ending tags and missing inverted commas. Once these were fixed the runner was running.

On the left is an image showing how the states of the runner are saved. In line 7 an array called runner is declared which will have 6 elements. Lines 11-16 show the images stored in the array. Line 8-9 show another 2 variables which are also being declared. At first  I had some syntax error one of which was writing the file extension wrong and the pictures couldn't load but  that was all fixed. 

Next is the function marathon() this is the method that works out the array and make the runner move. If curRunner is == 5 then start again from 0 while if it is something else do ++ which shows the next image. Line 34 shows that curRunner should refer to the runner array. Next thing i wanted to do was make the runner move horizontal thats if why then from the marathon() i called the doMove() on line 35. To do this i created another variable called running and stored in it the <div> that had the running man in it. Line 48 is then stating that the div is to move 10px. Unfortunately this didn't want to work for some reason and instead on making the runner run i made it seem like he is running but making the background move.

I created 6 images, one image for each element in the runner array so that there will be one background image for each element. Stored them in a new array called background and created a function bgChange() which will work out the changing of the images. 

I added a two buttons so that the runner can not only run but slow jog, jog and also run. At first there was a problem which was when you click jog, then run and then click stop the runner wouldn't stop running. The stop button was only working when you click any of those buttons and then pressing the stop button . This was solved by doing  clearInterval(startRunning); in all of the 3 buttons.

Also i added an obstacle which is a ball. When the user clicks the hit ball button the ball moves to the left till the end of the border. When the ball hits the runner the runner is suppose to stop moving. The user can stop the ball when the stop ball button is clicked.

This function moves the ball for 842px then when it arrives to that limit it goes into the stopMoving() function which stops the ball from moving further more. Also the users can stop the ball automatically half way by clicking the stop ball button.

I wanted to make the runner stops running when the ball hits the running man unfortunately I had some errors and the ball continued moving all the way when  it hit the person.

Further Work
This runner program was a really interesting program  and  i intend to continue working on it to improve it more. There were some things that i wanted to implemented but didn't manage because of some errors. Therefore i am planning on continuing to work on this  program till i get it the  way i really wanted it.

Final Result

Week 2 - HTML, CSS & JavaScript

Introduction

Last week was all about HTML and CSS which create static websites now we want to enhance our sites and make them more dynamic, to get this we learnt some basic JavaScript and continued on with CSS . We were given out source code that shown a basic loan calculator we than had to add styles to it so it will look more interesting and also add some more functions to give out more information. Throughout this post I will be talking about how these things were added to this calculator and about some obstacles that came my way. We were able to use www.jsfiddle.net so it helps us out. You can put HTML CSS and JavaScript in different section and as an output you will be displayed the final result.

Source code

When you are given a piece of code the first thing to do is to analyse this code to see how it works and which part is what and what each input is called. This calculator works by the user inputting some data into the fields then the user clicks compute and he will be displayed the information into the payment information section.

 
CSS

This calculator was a plain white calculator with some functionality. First off I started by making the calculator look more appealing, some CSS Styles were added. I added an outer div surrounding the table and gave it one colour and I gave the table a different colour. I also gave the heading some styles to make it more appealing.

HTML

Then I added a few more input types in the section where the user has to input fields and some more in the information section which will be displayed. We also had to add a checkbox in the enter loan information section which users will thick if they are eligible for discount. After adding these things I had then to make them working by adding their functionality in JavaScript. This was the hardest part of all since I have never seen any JavaScript before and it was quit cheeky to deal with it.

JavaScript

I first started by adding the functionality showing the number of payments done.  To do so I added two variables; one which keeps how long it took to pay the loan (this part is inserted by the user) and the other where it will display the answer. At first it didn’t want to work and I kept getting my answer as 0.00 or NaN, then I realized I had left the .toFixed(2) which kept getting my answer as a decimal point instead of a whole number also I had a mistake in my variable and that was also why I was getting certain results. 

Checkbox:

I continued by making the 10% discount feature, this will reduce the interest rate by 10%. It will work only when the checkbox will be checked, if not the interest will have its normal rate as showing in line 14 if discount.checked = true then perform the discount feature. Another variable for the discount was added and then

Loan End Data:
After those two functions we also had to add the date of when the loan will end. For this feature a new function was added called function getLastDate() {} and new variables were added like var date and var year and then it was displayed in the loan information section. 

Final Result:

 

I found this weeks task a bit difficult since I never touched any JavaScript before but hopefully I will keep on trying and make this loan calculator work to the full and add some flashy features which will make it unique! After all practice makes perfect :)