Abstract
The Project “Mapira” is based on an API development and ease of access to the geographical stats. This project is aimed at providing the users with a way of accessing features of Mapira through an API channel. Mapira is therefore the name of the website or simply the project. On this website there is a feature of Google maps where users can browse to any location while at the same time they can change the map views which are traditionally provided by Google for instance the street view, satellite view and the hybrid view. This website also has a feature of bookmarking specific locations where the users create a marker over the map and different users come and see what someone else suggested. This implementation was used to make the travelers plan map, in which different users suggested the places they had visited, upload their comments as well as the relevant picture for that location. On the same website users can also search for the population of an area since the maps are also given a polygon mapping which also compares different regions of the world with color darkness or lightness. In addition, the website also has interactive maps like distance finders and car trip maps. These maps can be very helpful while on vacations or traveling because the distance finder map will let you know two different kind of distances, the point to point that is the straight line distance and a proper route distance. The car trip map is also an extension to the distance finder as it will actually also make an icon go along the path so that one can easily get to his destination. This project further includes an API feature where users can request the services he can use on the mapira website to some remote application. For this he or she will request an API key and API secret with which their preferences can recognized and authenticate the remote application thus sending data in the form of Jason feed.
Introduction
Motivation
The fact that this is the age or era of enhanced and user friendly computing and letting users to do whatever they can imagine in real life, the web has made transitions from being static to dynamic by coming up with more user interactive platforms like Ajax, and web 2.0 applications. Each and every organization’s website are providing an application programming interface which allows the users to access their features and services remotely thus satisfying the customers and gaining much traffic. The Motivation behind the project was the lack of a website which provides a collection of Google maps showing various geographical statistics and information. This is what motivated me to develop a website that will make the life of the end user such as travelers and tourists much easier. This is because they can access the site over the internet and get various kinds of information just by going to one hyperlink location rather than searching various websites in the search engines and either getting the correct information or losing hope in frustration.
Later the API development was also developed so that the users who find the website useful can also show these statistics on their homepages, blogs, or internet spaces. Shortly the emerging platforms and users’ interest in internet website forced me to come up with an idea in which I could serve the end user in such a way that he feels convenient, satisfied and happy while browsing and searching for various geographical statistics.
Requirement Analysis
After getting the basic idea for the project I had to gather and maintain a requirements document. I began by researching and looking on the internet for what kind of geographical statistics and information was available on Google, yahoo, and Bing maps. I researched and looked at various methodologies and API of the different sites mentioned above. In my research I found that Google maps’ JavaScript API v3 was quite easy to embed and work with. It also had a very clear and easy documentation with a lot of books. Help was also available for geo-coding over Google maps. I therefore decided to take on Google maps’ API as the base of the project. After which I planned for the requirements and statistics to be displayed on the internet. I researched on what kind of geographical stats were available on the internet and found out that I could get population stats, forest, desert just to mention but a few. I noted down the requirements for geo-coding, and started looking for various sites to get information on them. Unfortunately, I could not get much information on forests and deserts so I had to change my mind and dropped them from the requirements list. I got census and population information worldwide till year 2006 and used it to check the working on my project. With time I added more and more maps and as I got familiar with coding on Google maps, I constructed the Google distance finder map, car trip map, traveler maps, climate maps and dangerous road maps which had markers. I displayed statistics from remote locations or xls files stored on the websites server.
Aims and Objectives
The requirements I gathered in the previous phase were, as follows,
- Develop on Google maps
- Show population information
- Show forests information
- Show deserts information
- Show weather maps
- Show other geographical information like postal codes, time zones etc.
The main objective was to accomplish all the aforementioned requirements with the aim of accomplishing them without the presence of bugs and other problems. I researched and looked up for various resources to find some source with the information on the above mentioned requirements. I found many to be helpful and some not much helpful therefore In the progress report I have mentioned some links that only gave statistics for the USA, not for the whole world,
Approach adopted
During the development of the project I first thought that since I would be coding over the Google maps API in JavaScript, I would adopt simple html and JavaScript website development. However, I later found out that it was necessary to have some server side scripting language since I would be making an API and would need to know and restrict the services of my website to some remote user. Because of that the users would also need to login. I therefore ended up choosing PHP as my server side language because it is an open source, free to use and it also has a large number of help and documentation available on the internet. I also had experience with PHP development, since there was not so much server side scripting involved in this project and therefore opted for the MVC architecture and the layered development style, in which I made the view layer, business layer and the Data access layer. The View layer has only the interface and views of the website, the business layer included the business logic that is from where to get data, to where to return data, and calling different functions of the data access layer is done in the business layer. The data access layer on the other hand is simply the layer that communicates directly with the database. This layer has implementation for the functions to insert, select and update data in the database; later for the API library a separate layer was also created which has wrapper functions for the database and host for the API request which eventually access the Data access layer any ways.
Summary of the project plan
The project is built on Google maps and will also focus on the development of an API with which users can get services of the website. The project also includes integration of different geographical statistics on the Google maps and showing information to the user on the website and also remotely on their web pages with the help of the API to be developed. The geographical statistics showed on the maps are for example world literacy rates, world population, dangerous roads around the world, traveler map, distance finder, car trip map, world weather and world climate, cloud projection and daylight map. All these maps will also be accessible via the API service.
Structure of the dissertation
This report has been structured according to the phases I did the development.
- Section 2 will have the background of the project, study of the literature, references of the previous similar work, a description of the methodology, tools, standards, languages, algorithms, and techniques that were used in the project, including a rationale for making choices.
- Section 3 will include the wireframes the structures for the website.
- Section 4 will have detailed information for the implementation, how it was implemented, what problems were faced and the solutions adopted for those problems, and their justification and tools adopted.
- Section 5 will have the testing phase, how the project was tested, what accessibility requirements are met; mark up validations, security checks, cross browser testing and penetration testing.
- Section 6 will have a description of what was learnt during the development, implementation process, users’ evaluations, any social or ethical issues, review of the plan and any deviation from the plan.
- Section 7 has analysis of the objectives that were met, any special or unexpected problems, and possible improvements.
Later on in the dissertation are references and appendixes.
Background
An in-depth investigation of the literature
After gathering the requirements and analyzing the project’s aims and objectives I searched for literature and the products to be used for the project development. I looked for various recourses on the internet and library downloaded a book (shown below).
At first I was confused on what kind of Google maps API to select as Google was providing flash API, html static map API and the JavaScript API. After a lot of study I found that the Google’s map JavaScript API was preferable as I was already familiar with java scripting so it would not take much time to understand the java script API. The other API such as html and flash API were not that good for the project because the html map was only a static image and was not very user interactive. This kind of the map can only be used for some specific causes for example showing a location of some hotel, library or cinema etc. on the other hand the flash API is user interactive but has a limitation in that it requires the adobe flash player to be installed on the system and takes a lot of load time initially. So after much analysis of the Google maps API I selected the JavaScript API.
References to the previous work
For the enhancement of Google maps I wanted to add geographical statistics on the maps. The selection of Google maps API was done and the time was to get the sources for geographical statistics whose data would be used upon the maps. Web.
Which gives information’s like postal code, elevation, population, longitude and latitude country and state name. I noted the link on my scratch pad for future reference.
For the weather information I looked for various website and links where I could find some information upon weather of different places. Web.
For the maps that showed markers like traveler map, climate map, the world dangerous road maps I used the code samples from Google and studied how to create a marker on Google maps, the Google maps API had a very helpful documentation, which had easy explanation and briefing and had good code sample. Web.
Methodology
Commercial Web development has been around for more than ten years. As an industry, it is still fairly young when you consider others that have been around for centuries. Consider the number of sites that are rebuilt for clients every day, and you’ll definitely agree that there is still much poor quality work being done, which affects us all: it means that clients are more wary and less trustful of Web developers. Anything that tarnishes our industry can tarnish all of us personally.
Having tried trusted and standardized approach to Web development would go a long way to helping avoid the mistakes we all see over and over again. We need a Web methodology. However, finding a methodology that seems suited to Web development is not easy, making it work in the real world is even harder. As the Development Manager for a team of 20, in the heady dotcom days, this was exactly the dilemma I faced. This article explores the issues that arose from our lack of a decent methodology, and how we as a team tried to resolve them. The result was the successful adaptation of an existing methodology for Web development. Once the decision had been made to find a better way of doing things, we realized we had three paths to choose from:
- adopt an existing methodology
- adapt from an existing methodology
- build our own methodology
At the time, there were no recognized Web methodologies (although, from recent research it appears that the situation has not changed much). So, for adopting or adapting, I had little choice but to look at the existing software development methodologies.
Complexity
The solution had to be more than just a simple guide, but at the other end of the scale, if it was too big, there was no way it would work. We needed something that was easy to understand on the surface — as both staff and clients had to be able to grasp it — but had sufficient depth to give developers the guidance they needed.
Size
It is hard to get people to read documentation at the best of times, so a thick document explaining the methodology was unlikely to be effective. Chances were that, if we had a 100-page guide with a 10-page summary at the end, most people would use only the summary.
Cost
Anything that cost money would have to be justified; the lesser money that was required, the better.
Risk
We could not afford to get the methodology wrong. It was extremely unlikely that I would be able to convince people to go through the process of trying a second methodology if the first one did not work.
The methodology is like the core on how a system is built. There are various methodologies for development in PHP like sequential codes, object oriented, and MVC patterns etc. The sequential codes are the easiest to write but are the most difficult to maintain, update or modify. because this kind of implementation gets cluttered in different files rather than having one central location, the PHP sequential code usually gets mixed up with the java script , css and the html mark up so it get difficult to change once it is implemented. On the other hand, object oriented patterns take much more time to setup initially but later on things in object oriented get simpler. All the codes are resided in the class and have one central location, modification or updating is very easy in object oriented patterns. The next methodology for PHP development is the MVC pattern. Here MVC stands for model view controller and consists of three major parts. The model is the layer that has direct access to the database. The controller acts as a middle man between the interface and the database layer, while the view is the layer which holds the interface and its components. So since there are a lot of different methodologies available for implementing the website I adopted the object oriented pattern for this project in a waterfall approach in which things were done as a top to bottom approach. Since MVC is preferable for large scale website, and the sequential is not a good option to go for, I made three layers same as the MVC and gave them my own names as view, business logic and data access layer (DAL). The reason I made my own was for a simulation of MVC but in much simpler form, the classes were constructed according to the tables in the database. Later on their objects were instantiated in the business layer with which we later on filed with our view files.
Tools
For the project development I searched for various tools. I was used to coding my projects and websites on notepad++ but for this project I wanted to code in a systematic manner so I looked for various IDE for PHP development. First of all, I adopted the Eclipse but later could not get used to with it so I chose the Komodo HTML IDE as it had a very simple interface and was very easy to use. For the css part I used the well known adobe dream weaver css 5. It has very unique and excellent features which make it easier to apply different styles on html components. Once I got used to it, it was just getting easier than ever. For java script development I coded on the Komodo IDE and for testing I used the well known java script debugger called Firebug. I installed its plug-in for Firefox 3.6 and Google chrome 11.0 and the debugger was very much easy to use and it pin pointed the errors in my java script clearly making it easier to modify later. On the other hand the Java script debugger built in Internet explorer never showed the right cause of the error and always gave a wrong point of reference, so firebug was always the right choice. As for the snapshots I used the print screen button on the keyboard and directly pasted the screen shot in this document, simple as ABC.
For the wireframes I used an online website , this site was very much confusing to use due to its technical slangs later I found it quite helpful to create the wireframes on it. It has a nice feature of drag & drop with which I created the wireframe for this project and then cropped the unnecessary part of the image with Microsoft photo manager and then pasted the image in this document.
Standards
When a web site or web page is described as complying to web standards, it usually means that the site or page has valid html, css & java script. For this project I used the transitional and loose dtd to comply with the w3 standards. The reason why I chose the loose dtd is that it also allows deprecated html tags like etc for the older browser which do not support css. I have used css 3.0 but validated it for css 2.0 because css 3.0 is an emerging standard and is not completely supported by all browsers. Currently css 3.0 is fully supported in Google chrome and safari, Firefox and IE 9 supports it partially. Due to the fact that the website will be built once I thought that it is good to write in css 3.0 because whenever there is complete support for css 3.0 on each browser then I would not need to modify my website.
Languages
The languages used in the development of the project are HTML, CSS, JavaScript, PHP and query. The HTML is used to display the content of the website and show the information on the pages. The HTML tags were placed in files with an extension of PHP since the pages also included some server side script so it would be better that I maintain a single file extension throughout the website so that server side checks could also be implemented inline.
Algorithms
The Algorithms in the website are written quite simple for easier understanding and not creating complex code structure which would be difficult to manage, change and update in future. The complete server side code is written in object oriented pattern having class and objects. The algorithms were written such that it does not make the website slow or increases the load time of the website. The best way to try was to avoid loops and make the algorithms in O (1) that is big O of 1 or constant. If a loop has to be implemented I made correct branching and did not implement any nested loop.
The following are some of the algorithms written in the development of the website.
<? PHP Function random string ( ) { $character_set_array = array ( ); $character_set_array [ ] = array (‘count’ => 5, ‘characters’ => ‘abcdefghijklmnopqrstuvwxyz’);
$character_set_array [ ] = array (‘count’ => 15, ‘characters’ => ‘0123456789’);
$temp_array = array ( );
for each ( $character_set_array as $character_set ){
for ( $i = 0; $i < $character_set[ ‘count’ ]; $i++ )
{$temp_array[ ] = $character_set[ ‘characters’ ][ rand( 0, strlen( $character_set[ ‘characters’ ] ) – 1 ) ];}}
shuffle( $temp_array );
return implode( ”, $temp_array );}
This function will generate a string consisting of random character that will be used to a lot a API key to the subscriber, the function accepts no parameter and simply returns a string of length = 20. In this function an array is created with 5 characters and 15 numbers and then a temporary array will hold the characters or numbers from the original array in shuffled order and then with the implode function of PHP. The array is then converted to a simple string and returned to the caller. The implementation of this function is done two more times. One for the generation of a random id for the API, and second for the generation of a random number of length 2 that is between 00 and 99. This random number was generated to be used on the population map, since I could not find any authentic source for the world population of year 2011. The best I could find was of year 2006 which was about 5 years old, so I thought that random population should be displayed to accomplish the completion of the population or census map.
The rest of the functions are written as method for different classes, and these methods have select insert and update queries in the data access layer.
Now for the java script part:
Function gets BaseURL() {
var url = location.href; // entire url including querystring – also: window.location.href;
var baseURL = url.substring(0, url.indexOf(‘/’, 14));
If (baseURL.indexOf() != -1) {
// Base Url for localhost
var url = location.href; // window.location.href;
var pathname = location.pathname; // window.location.pathname;
var index1 = url.indexOf(pathname);
var index2 = url.indexOf(“/”, index1 + 1);
var baseLocalUrl = url.substr(0, index2);
return baseLocalUrl + “/”;}
else {// Root Url for domain name return baseURL + “/”;}}
The above function returns the host or domain name in JavaScript.it is a simple function which uses the window object and then differentiates further to get specific properties of the document opened in the browser. The JavaScript is written as functions but is not written in object oriented pattern, because it performs small tasks and there was no need to save the state of that task throughout the project. The functions are written such that it could be called when ever needs rather than first creating the objects and then calling their destructors. Since it is just for interactivity and no state saving so object oriented paradigm is not applied in this case.
Techniques
At the time of development I saw that there were different techniques of coding the website, for instance, sequential pattern, layered pattern and the model view controller pattern also known as MVC pattern. The sequential pattern is quite out dated and not a good option to use because in sequential coding the modification and updating gets very difficult. The code becomes complex or some time looks like a wall of text, and specially in websites where the server side scripts , the css , the java script, the html tags are all mixed in one file which makes things look even more difficult to understand. The layered approach is an approach in which the view which has the interface. The business layer which is basically the logic files which passes and returns data from the interface to the data access layer and from data access layer to the interface. The data access layer contains the class and methods which populate or gets results from the database, the select, insert, update and delete queries are written in the data access layer. The MVC pattern is also an extension to layered pattern and is a much stricter version. In MVC pattern the view is for interface. The controller is same as the business layer and the model is same as the data access layer.
For this project I adopted the layer pattern technique which is the division of the interface, the business layer and the data access layer. I did not chose the sequential way due to its complexity, and the MVC pattern because it is best to use MVC for large scale website having a lot of server side code. Since this side does not have much of the server side code the MVC pattern would be an excise on implementation. The website has major development in the java script as I adopted the Google maps java script library and will also be geo-coding in java script. The server side scripting is used only to authenticate the user and the API request call from some remote location, or to store some information of a specific map in the database. Currently I am storing the information of the travelers map in the database.
Specification and Design
Wireframes
The wireframe of a website is an abstract model or sketch of how a website’s interface is built. The wireframes are helpful to the designers to design an eye catching and attractive interface. For this project I searched for various tools for building the wireframes and found that website was the best and helpful. It had a very nice and easy to use interface. I built wireframes on pidoco and following is the wireframe of the project website.
Since the whole website has the same interface and look, only one wireframe was applicable in this case. The home page, internal pages, login page, register page and all the pages have the same look and feel. Therefore I found that only one wireframe would be fine for the complete project as nothing is different among different pages, so creating each wireframe for each and every page would be a redundant activity.
Database design
The Following is an ER diagram of the database. The database of the website is very small, it has a total of three tables, since there was not much information to store, the database of the website is built in mysql, and the tools used for that is PHP MyAdmin. The reason I chose MySql is that is a very commonly used database and has support and compatibility with almost every online hosting. The database of the website consists of three tables namely users, app_applications and locations.
The Users table stores and maintains the records of the users that have registered on the website; the Users table has 5 columns as shown below.
The app_applications table stores and maintains the records of the API keys requested by the users that have registered on the website, the app_applications table has 6 columns
The location table stores and maintains the records of the locations added by any user in the travelers map on the website; the locations table has 9 columns
Now in the ER diagram the users table and the app_application table has a one too many relationship such that one user can have many API applications. While on the other hand the locations table has no link with any table it is just there to store information of the marker that are to be placed on the travelers map and any one can suggest any place on the map.
Development and Implementation
After the selection of the platform, Google maps and API selection, the objectives and aims of the project design system was implemented phase vise, whereby each and every task was done in an incremental approach of software engineering. The very first step I did towards the completion of the project was to build a nice interface for the users. The interface of the website is the very basic thing which appeals a user to stay on the website or tempts him to visit it again. If an interface of a website is not good looking or is not much user friendly then one will never visit your website again. So for the interface selection I looked randomly at various websites unfortunately most of the websites I visited were either too much professional or too much entertainment like. I then searched Google for the phrase “CS 5 designs” and looked at various designs and then came up with my own design. In my mind I wanted to have an interface which looks simple and yet beautiful, I thought of making a colored header and then making a body container and came up with a design as follows
On this design now I needed to place some links for the inner pages which were to be developed, so I made a big thick black menu bar which was big enough to accommodate the logo into that bar. I then added dummy text on the menu bar to get a perfect look and feel.
Later on I decided to make the interface even more beautiful so I added more tools or jQuery framework with which I can add transitions like slide in, slide out, fade in, fade out etc. With the help of jQuery I converted the menu bar into a drop down type of menu bar in which the drop down or sub links slides out of the menu bar when the mouse was hovered on them, this made things good. After this page was completed I felt good enough to continue to the next phase so I replicated this page for use as inner pages as well keeping design consistency in mind.
After the interface designing phase I applied for the Google maps API, and generated my API key there and read the complete procedure on how to add a Google map on my website. Then I added the JavaScript code for Google maps passed it my API and then the Google maps started to appear on my websites homepage.
Now as the map started to appear on my website and I knew that working on Google maps will take a lot more time than doing the server side scripting, since I was new to the Google maps or Geo-coding I skipped this phase for a while and went to the database portion and the server side scripting in PHP. To begin with I created the login and the register page, so I made the forms and then decided to keep the required fields’ minimum as users would not prefer to fill out large and boring forms. With the issue of filling large and boring form it also came to my mind that nowadays the website owners are using the plug-ins of various social networks to fill out their forms. I then decided to read and look for the social network plug-ins; I came across twitter, linked in and facebook API. The linked in and twitter were quite similar but they required PHP curl to be enabled on the server and I was not sure whether PHP curl would be enabled on the server or not. For filling out the forms I chose the facebook API, I applied for the facebook API and then facebook so had different APIs like graph API, the JavaScript API etc. I chose the facebook JavaScript API as it was very much familiar to me. I added the facebook API to the login and the register page where the forms were being filed so I also started to create the database and the data access layer.
For that I chose the layer pattern and moved the interface files to the view folder of the pages where the forms were submitted to the business layer and then eventually the data access layer where classes were written which had methods for insert, update and delete. The classes were build in such a way that if we needed to switch the database from MySQL to some other database then even there would not be much to change.
As the basic step of the project development was still and now I went back to phase 2 to start the Geo-coding on Google maps. Initially I tested the events on Google maps with the JavaScript alert() function by popping the latitude and longitude of the place then tested the maps by placing dummy markers at random points and learnt how to display info when markers were clicked. Later experimenting with Google maps API I learnt even more and more complex things then I started making more maps and linking the files together over the menu bar.
In the maps development phase which is followed by the revision of the interface which will be described in the problem section I made the following maps. The distance finder map was implemented by studying the Google maps API JavaScript API v3 documentation, and its example code. For this map implementation I used the directions Service = new Google map Directions Service (); Directional service provided by the Google maps API. This service was also used in the car trip map which is a kind of an extension of the distance finder because in distance finder map we just draw the routes and in car trip map we make an icon of a car follow the complete route from start to the end point.
The dangerous road map, the climate map were simple maps which had markers placements on specific locations so I made these maps as same as the traveler map was build but for these maps the data was not fetched from the database and was written in the JavaScript section itself.
The world literacy maps and the census maps both use an overlay layer which was grabbed from their respective sources. The sources are mentioned in the files from where they fetch the data and then display on the website. On the census map however, two tasks are performed at a time. The map colored overlay layer is fetched from the source and similarly on the same time the population data markers are placed on the Google maps. The data then is placed on the map is being fetched from an excel file which is found on the internet while the overlay has white to dark red color showing the least to the maximum population for that country, since I could not find the latest population stats so I added junk values for the population in the excel file.
The API library was developed in PHP and accepts the get parameters from the caller which takes the API key and app id from the user and the type of the map he wants to be returned. The maps URL is returned as a JSON encoded string which is then decoded and then an iframe is built on the go on the remote site. The JSON link is passed to that iframe which shows the maps to the remote location. The API has also a proper authentication system it authenticates the caller by his API key and app id, if wrong API key or app id is provided. The user gets nothing but a null is returned and no maps are displayed at the remote location. When the user passes the authentication the maps is transmitted to the remote location. Initially there were many problems in the API development which I was confused to choose what platform for API development I chose the REST based API till my progress report and later found that it can transmit in xml form. I then made a PHP curl class in which I fetched the map page and then grabbed its markup and transmitted it as over the REST based API I developed before, but later needed to change that to JSON based, the problems I faced with REST will be discussed in the next section.
Problems
During this course of development I found that the sources I wrote on my scratch pad were not help full for me to display their info on the Google maps, because either they were too much limited info like specific to one region only or were not perusable with PHP curl functions. This problem also arouses with the conflict between the Google maps and the jQuery menu bar. The interface started to appear bad, the drop down menu on some pages worked fine while on other the links dropped behind the menu making the links non accessible. Sometimes the Google maps did not even load properly and the firebug gave me numerous errors, thus the good interface turned out to be a glitch interface. I tried to solve the conflicts between the JavaScript codes but could not manage to make it look good again so I decided to remove the menu bar and changed the design.
Now I got again to phase 1 revision where I looked for some other jQuery plug-in and designs that could help me get another nice looking interface. I tried several jQuery menu bar plug-in e.g. lava lamp , jQuery menu bar etc. Some of them still conflicted while other just did not fit my choice but I kept on searching for something good, and I came across a very nice jQuery menu bar plug-in which I integrated with my interface. I then had to make a place for the logo and sign in & sign up buttons because the previous interface was not good anymore, so I created a new style class for the header and then applied some gradient effect for which I made an image in adobe photo shop CS 5 and applied it as the background of my header and placed the logo in that header. I moved the login controls in that header, and just beneath the header I placed the menu bar. Now the plug-in I chose was a bit different than other traditional plug-ins, this plug-in showed the sub links on the top rather than showing on the bottom or dropping a long list of links. This was also good as things would not be falling on my maps so I polished my interface further by adding icons using street maps and then came out with the following look and feel.
The above interface is the current interface which has a different look then the previous one and also looked good to me. In the previous implementation I had written the header, the menu bar, and the top links in each and every page, so it was a bit long task to change all the code and then paste the new interface html tags. So for the current implementation I introduced the iframe in the interface with which I had 1 major window called home.php and the maps were placed in separate files. All these maps were then called from the main window and displayed in the smaller window (iframe) below the Iframe this made the map pages free of unnecessary design tags.
This practice made me tension free of any conflicts between JavaScript code, and interface changes. Now the entire interface was placed in 1 file where the server side code was distributed in layers. The CS 5 styles were placed in an external style sheet which was included in the design file and I had nothing to worry about rather than coding the maps and placing their link in the design file
For the map coding I made the traveler map easily since it required no special technique it just needed the markers to be placed on the locations mentioned by visitors. I thought that it would be good to create an interactive map so I also wrote the PHP code which fetched the data from the “location” table in the database, and then before the map loads it initializes all the markers and then these markers are placed on the maps as the map loads. Later I decided to create the map which will show information like postal code, country name, country code and other information but the source if found earlier was giving me results only for the United States Of America, and no other place, so I searched for other recourses but there was not a single source where I could find the data for the whole world. I skipped this map for the time being and then moved to the next map I noted on the scratch pad.
The next map was the forest map which was to show the total % of forest around the world and the total area covered by deserts and water. I found that the map which I was considering to be developed was not a forest map but it was a satellite view of the Google maps but still I decided to display some overlay over the maps to represent the forest, deserts and water regions around the world but could not find a source which was showing stats for the whole world. This map also skipped the next maps which were the distance finder and the car trip map. Next the currency rate and stats map’s source is also very much turbulent, some time it returns data while some time is reply with an access denied or unauthorized link feedback which does not show the time zone, the currency rate etc for that map. The implementation is such that whenever one click on a location of the map the longitude and latitude are passed to the source whose reply is then displayed as a map pop up.
Initially there were many problems in the API development which I was confused to choose what platform for API development. I chose the REST based API till my progress report and later found that it can transmit in xml form then I made a PHP curl class in which I fetched the map page and then grabbed its markup and transmitted it as over the REST based. I developed API before but later needed to change that to JSON based because the REST transmitted simple XML and the Google maps were written in JavaScript. On the remote location I was using the inner HTML feature of the JavaScript to inject the received response from the API into the DOM but then I saw that it was not running my JavaScript and the Google maps were not showing up. I searched Google and found that JavaScript in external data when injected via inner HTML will never run hence there were work around like using EVAL() but that was a risky statement to use as it would allow XSS attacks and make the website go down. I looked for some other way to transmit my website data and found that mostly nowadays the websites are encoding JSON and transmitting for the API. I also started making the JSON class and the JSON host wrapper which then resulted in success for showing maps on remote locations.
A justification of the methods and tools adopted
The project development is layered patterned, the interface is present in the view folder, the business logic has algorithms, and the data access layer has the implementation for storage retrieval from the database. This pattern was chosen because it makes the modification, updating and maintenance of the code easy. one only concentrates on one part of the project rather than maintaining different things at one time, The server side scripting in the project is done in an object oriented manner, i.e. classes and objects are maintained in it while the client side scripting the JavaScript is done a simple procedural functions which have no classes and can be called from anywhere. The JavaScript code was not made object oriented because we did not needed to save the state of any instance it just has to perform its functionality and then pause. The tools adopted for the project developments were the Komodo Html Edit IDE, the firebug, adobe Dreamweaver CS 5, ColorPic and Zend Studio 8.0. The komodo Html Edit IDE was a good tool for writing the writing the html tags it has a very good and professional look and feel it has a tree view which makes it easier for the files to be opened and closed during the development course the firebug tools were installed as a plug-in for Google chrome and Mozilla Firefox 3.6. This is an excellent JavaScript debugger and is very effective for writing good JavaScript codes, adobe Dreamweaver CS 5 is also good software for html CS 5 development as it makes things quite easier by adding rich features to the html components with just single clicks. The ColorPic software was used to grab the color values that were to be used on the website main that needed to be used in the CS 5 file. The ColorPic software has an excellent interface and shows the result of the color value as hex format, the RGB format and other formats too. The server side code of the website which was in PHP was then made on Zend Studio 8.0 which is an IDE made by the PHP boys themselves. Zend is also a company of those who launched PHP like Komodo HTML edit the zend studio also has very good and nice interface for coding as it has a built in debugger with code predications and suggestions which make the coding even faster.
All the language and the tools that I chose were basically based on the idea that the language must be open source. The tools are preferred to open source but if they have a trial or free version then its fine. The reason for choosing open sources like PHP is that in the open source world you never have to pay for anything, you never get stuck on some things there is a lot of documentation and free help available on the internet. Also for PHP nearly all online servers and hosting have support for PHP unlike the dot NET for which you have to acquire a license first and then look for windows server etc.
Testing
Accessibility testing
Accessibility refers to the practice of making websites usable by people of all kind of abilities and disabilities. When sites are correctly designed, developed and edited, all users can have equal access to information and functionality. For example, when a site is coded with semantically meaningful html, as well as textual equivalents provided for images and with links named meaningfully, it helps blind users that use text-to-speech software and/or text-to-Braille hardware. When text and images are large and/or enlargeable, it is easier for users with poor sight to read and understand the content. When links are underlined (or otherwise differentiated) as well as colored. This ensures that color blind users will be able to notice them.
So for this project I followed the accessibility rules for instance I have placed images along with the textual links as in the login controls the login link has an icon of key. Besides it, the register buttons has a + icon besides it which is known to everyone that a key is required to login or unlock some feature and the + sign means to add something. so by this way the illiterate people can also visit the website and have benefit from it, also on the menu bar icons are placed besides the important links for example a home shaped icon is placed beside the home link, a globe icon is beside the Maps links. I have used all those icons which people already know and are familiar with so there would be no issue of getting used to the website. As for the color blinded people I have added a contrasting scheme, as the menu bar is in black color so the text and the icons used are white and are at a clear distance so that one may not find any ambiguity. For people having hand jerkiness the links and the sub links are kept close to each other so that they may not have to move their hands through large distances and acquire the target of interest. In addition, in the content section of the website things are also kept simple for better readability and better concentration on the content. a simple white background is provided on the top of which the Google maps is placed since the maps have different color patterns so the white background suites it very well and the color blinded people can also see the website equally as the normal person can see it.
Validation of markup and any CSS rules
While contemporary Web browsers do an increasingly good job of parsing even the worst HTML “tags”, some errors are not always caught gracefully. Very often, different software on different platforms will not handle errors in a similar fashion, making it extremely difficult to apply style or layout consistently. Using standard, interoperable markup and style sheets, on the other hand, offers a much greater chance of having one’s page handled consistently across platforms and user-agents. Indeed, most developers creating rich Web applications know that reliable scripting needs the document to be parsed by User-Agents without any unexpected error, and will make sure that their markup and CSS is validated before creating a rich interactive layer. When surveyed, a large majority of Web professionals will state that validation errors is the first thing they will check whenever they run into a Web styling or scripting bug. Checking that a page “displays fine” in several contemporary browsers may be a reasonable insurance that the page will “work” today, but it does not guarantee that it will work tomorrow. Validation is one of the simplest ways to check whether a page is built in accordance to Web standards, and provides one of the most reliable guarantees that future Web platforms will handle it as designed. As of today, there is little or no certification for Web professionals, and only few universities teach Web technologies, leaving most Web-smiths to learn by themselves, with varied success. Seasoned, able professionals will take pride in creating Web content using semantic and well-formed markup, separation of style and content among others. Validation can then be used as a quick check to determine whether the code is the clean work of a seasoned HTML author, or quickly hacked-together tag soup.
So for this project I validated all my source code so that it would be compatible with the future browser and there would be no issue with the website later on. Since the validation and code standards are meant to be followed the developers of different browsers also tend to add full compatibility for different web standards on their browsers. This way the validated website will open the same on mobile phones, computers, pda’s and even TVs. For the validation of the HTML markup I used CSE html validator which did a good job doing batch validation of the complete website page wise and also checked for broken links etc. But when I uploaded the site to the server and went to website I found that the source code still had some errors according to the w3 standards. So I downloaded the Total HTML Validator, and used that to validate my website, since my website was having <? PHP require ?> statements. so it was expecting the html header from some external file , the menu bar from some external file, I did this so that it would be like change once and apply everywhere mechanism. But I found that most of the total html validator checked for the html part only and gave me errors like there is no DOC type , no Head, Wrong placing of the DIV etc. I therefore read various blogs and website articles on how to validate my website completely but could not find some useful information. I then tried to play with the code and removed the code from the external files and placed all html in one file with which the error count was reduced. I then did the same for the whole website and validated my HTML source code or html markup at w3 validators’ website. Below are the attached screen shots of the validation response I got from the website.
Validation response for the Homepage
This page initially had 44 errors and 30 warnings which was then checked and removed successfully
Validation response for the distance finder map
This page initially had 14 errors and 8 warnings which was then checked and removed successfully
Validation response for the Car trip map
This page initially had 14 errors and 8 warnings which was then checked and removed successfully
Validation response for the dangerous road map
This page initially had 5 errors and 0 warnings which was then checked and removed successfully
Validation response for the Cloud projection maps
This page initially had 0 errors and 3 warnings which was then checked and removed successfully
Validation response for the Weather map
This page initially had 0 errors and 1 warnings which was then checked and removed successfully
Validation response for the Climates map
This page initially had 1 errors and 1 warnings which was then checked and removed successfully
Validation response for the World literacy rate maps
This page initially had 44 errors and 8 warnings which was then checked and removed successfully
Validation response for the Currency and stats map
This page initially had 24 errors and 18 warnings which was then checked and removed successfully
Penetration testing
The world is now loaded with IT experts and it does not take long for the website hacker to penetrate into the website’s database and exploit the data or even cause damage to the server. It was therefore necessary to test the website for security holes. The first and the most common security issue that websites face is SQL injections. SQL Injections is a code injection technique that exploits a security vulnerability occurring in the database layer of an application. The vulnerability is present when user input is either incorrectly filtered for string literal escape characters embedded in SQL statements or user input is not strongly typed and thereby unexpectedly executed. It is an instance of a more general class of vulnerabilities that can occur whenever one programming or scripting language is embedded inside another. So for this project as I made it layered it was easier to apply the protection against the sql injection attack. in the business layer I added the mysql_real_escape_string() around the posted values from the forms which sanitizes and removes the ‘<” kind of characters from the string passed, which will never allow the user to have access to the database. Below is a code from the business logic in which is sanitized the data. $U=new Users(); $U->setName(mysql_real_escape_string($_POST[‘fname’]).” “.mysql_real_escape_string($_POST[‘lname’]));
$U->setPassword($_POST[‘pass’]);
$U->setUsername(mysql_real_escape_string($_POST[‘uname’]));
$U->setEmail(mysql_real_escape_string($_POST[’email’]));
$uid=$U->insert();
Also from the login page the login form is secured as
$un=mysql_real_escape_string($_POST[‘uname’]);
$pw=mysql_real_escape_string($_POST[‘pass’]);
$U=new Users();
$id=$U->login($un,$pw);
Secondly, the next attack the website may face is the XSS attack which is an abbreviation for Cross Site Scripting. Since CSS stands for Cascade Style Sheets to this Cross Site Scripting could not be called as css they rather called it XSS. in this attachment one can inject vulnerability in your website by directly entering some js script in the address bar, for instance one can pass the alert(“hello”); in the address bar and can also do some other mischievous acts like stealing cookies, etc, so for this project I test the link for the following XSS; and did not get any error since the webpage did not execute the script. Other attacks which websites may face are like DOS attacks which are not directly related to data hijacking but are meant to keep the servers busy, a constant ping request is send to the server and overloading of the server memory occurs and eventually the server crashes due to this attack. Since this attachment is more related to the server so I could not prevent this it. I did not even want to check this attack on the university server as many of my fellow colleges have also uploaded their work on the server.
Cross Browser testing
The Testing was for two pages; the home page and the maps page because all other page have the same template.
Critical Evaluations
Lessons learnt during the course of the project
During the development of this project I learnt various things which I was never conversant with. I never knew about the application programming interfaces, the web 2.0 technologies, jquery styling just to mention but a few. I decided to choose this project as it was based on website development and I am found of developing unique and beautiful websites. On the interface I placed the jquery plug-ins for the menu bar. Initially I never knew about jquery but as for the design I searched Google for the term Css Designs and I saw very beautiful effects of jquery. This made me eager to learn the java script frame work called jquery. I read many tutorials and found that it is just java script but has a bit different syntax, so I embed a menu bar built in jquery but later found that the menu bar was conflicting with the Google maps. I then searched for more plug-ins and found a compatible one which I embed and am using till now. This project was a totally new experience with the web 2.0 apis and the way different websites allowed connecting to their systems. I learnt about the apis by first going through the documentation of Google and then while building the forms I also tried to embed the facebook connect api with which I succeeded and added the facebook connect feature to the registration and login maps. Later on, while doing website validations I removed the facebook connect because it was violating the w3 standards and I could not validate my code properly so that this is just an optional thing I am providing the user with. It is therefore better to remove it rather than violating the w3 standards. The screen shot reference of before are after is given below
After the removal and design changes.
After the removal of facebook connects, the markup was validated successfully on w3 validators’ website. I then looked for the patterns of development for the PHP server side script and chose the layered pattern which was easier to maintain, modify and update. As for the Google maps I learnt that java script v3 api and developed various maps on it. I began the learning procedure with the placement of markers on the maps and building a traveler maps, then later as I found different services like directional services I implemented the distance finder and car trip maps. Later on I became familiar with map overlaying and added overlays to the Google maps which gave a totally new look to the Google maps and showed the statistics with more explanation.
Any social, ethical and legal issues that arose
With the development of the project I found that no ethical issues were involved in this project. The project is just showing geographical information and is for the benefit of mankind. It does therefore not pinpoint, discriminate or harm the feelings of any human race, religious point of view and ethics.
Evaluation of the product, and the process of its production
For the project evaluation I tested each and every map on the website and then also I tested the maps on a dummy website and requested the different kind of maps. Each of the maps was retrieved successfully without giving any errors or problems. Initially the problem was with the REST api which did not allow the maps to be successfully displayed on the remote location, but later on I changed the api to json implementation then it was showing maps without any problem. The product at the end is now much useful to travelers and busy personnel having electronic gadgets with which they can see different statistics and find locations for travelling and even find paths and routes of their destinations. The process of developing this project was quite challenging yet very helpful and a provided a chance of learning , because certain features on the website I never knew before such as the jquery, api implementation all were new to me. This was a very good chance for learning. In the process of the development I also faced various problems like conflicting jquery.
A review of the plan, and any deviations from it
The initial project plan was supposed to be show forest maps, the postal codes, and other geographical information which were subjected and mentioned earlier but due to certain limitations like the non-availability of statistics for the world wide countries, no sources available for forest, deserts and water areas around the world, no authentic location or source for year 2011 census worldwide. I rather used the dummy value from an excel file in the census map, skipped the map for forest and made a currency and statistics maps which due to some limitation from the resource provider does not give accurate results all the time.
Conclusions
The project was developed to show geographical information on Google maps and then allow the user to connect to the website with an api which also enables the user to grab maps on their websites. The objective and aims of the project were to help users to see different geographical information on the site easily. Some of the points that were suggested in the initial version of the document could not be completed for example; the forest maps could not be built because I could not find any authentic source that was giving me forest, desserts and water area statistics across the world. Another map in which I intended to show the postal code, elevations and other information of various locations around the world could not be achieved as well because the source I found was only giving me information for United States of America. The overlays to maps are added perfectly but this can be improved by giving the overlay much more color combination and increasing the loading speed for the overlay because currently the overlay is being added with a delay of about 5 seconds. To increase the scope of the project more and more, maps can be added to the website, which will develop more interest in the users and can cause increase in traffic, since people are very much busy nowadays due to tough life schedules. It is always a good option to provide a facility to the user where users can easily access or manage their tasks, plan different thing easily. Keeping that point in mind, new ideas on maps can be implemented and hosted on the website.
So far after revision of the progress report and initial document I found that the task that were modified after the requirement collection phase and in the beginning of the development phase. Changes that were made to the requirements are success fully met, all accessibility is achieved, the website is non-penetrate able that is it is free from sql injection attacks, XSS attacks. The html mark up of the website is successfully validated by the w3 validator the standards of web languages, the CSS style sheets also meet the w3 standards and successfully comply with the w3 standards.
Reference List
Google apis. Web.
Google code examples. Web.
Facebook api. Web.
Appendixes
Original Project Plan
Introduction
The project includes the use of Google maps to elaborate the geographical information like populations, weather stats, stats like %of forests deserts and other similar landmarks. The project will also have the feature which allows external users to access the services provided by the website developed under this project. In this project will be developing a number of functions to simplify the use of the Google Maps API. The project will be used for simulating environmental information (such as pollution data) to be presented on street maps.
Objectives: with target dates for completion
- Users would be able to use an API service which will be provided by the website to use these services on external websites.
- Users can view geographical stats simply and easy not a complicated way.
- Users can view road maps with more information in details.
- Users can view population of different regions, states and countries around the world this will be fix more over user can but their own regions or country.
- Users can view the % of forests, hilly areas, desert in some specific regions, fix geographical or user can put own geographical area.
- Users can also view weather stats of any location.
Platform/languages to be used
- PHP
- Mysql database
- Google Maps
- Html
- JS
- CSS
- Ajax
Revised Project Plan (from the Progress Report)
Introduction
The project includes the use of Google maps to elaborate the geographical information like populations, weather stats, stats like %of forests deserts and other similar landmarks. The project will also have the feature which allows external users to access the services provided by the website developed under this project. In this project will be developing a number of functions to simplify the use of the Google Maps API. The project will be used for simulating environmental information (such as pollution data) to be presented on street maps.
Objectives: with target dates for completion
- Users would be able to use an API service which will be provided by the website to use these services on external websites.
- Users can view geographical stats simply and easy not a complicated way.
- Users can view road maps with more information in details.
- Users can view population of different regions, states and countries around the world this will be fix more over user can but their own regions or country.
- Users can view the % of forests, hilly areas, desert in some specific regions, fix geographical or user can put own geographical area.
- Users can also view weather stats of any location.
Platform/languages to be used
- PHP
- Mysql database
- Google Maps
- Html
- JS
- CSS
- Ajax
E- Sample Code
JSON HOST this code receives the request and then passes to the code on step 2
<?php
require_once ‘./JsonClass.php’;
$JC=new JsonClass();
if(isset($_GET[‘method’]))
{
$data=$JC->$_GET[‘method’]();
}
print_r(json_decode($data));
?>
Step 2
<?php
require_once(“../dal/api.php”);
require_once ‘./phpCurl.php’;
class JsonClass
{
public $callback;
public $authenticated;
public $reply_data;
public $method;
public function __construct() {
$callback=””;
$authenticated=””;
$reply_data=””;
$method=””;
$this->authenticate_call($_GET[‘appid’], $_GET[‘appkey’]);
}
//This Function will authehenticate the calling client
public function authenticate_call($app_id,$app_key)
{
$A=new Api();
$app_data=$A->grabappauth($app_id);
if($app_key==$app_data[‘api_key’])
{
$this->authenticated=true;
}
else
{
$this->authenticated=false;
}
}
public function getnormalmap()
{
if($this->authenticated)
{
$c=new mycurl(“”);
$target_url=;
$h=$c->getPage($target_url);
$j=json_encode(urldecode($target_url));
$_GET[‘jsoncallback’]=”web”. “(“. $j .”)”;
return $j;
}
else{
return “Unauthorized Api Request”;
}
}
public function gettravelmap()
{
if($this->authenticated)
{
$c=new mycurl(“”);
$target_url=;
$h=$c->getPage($target_url);
$j=json_encode(urldecode($target_url));
return $j;
}
else{
return “Unauthorized Api Request”;
}
}
public function getcartripmap()
{
if($this->authenticated)
{
$c=new mycurl(“”);
$target_url=;
$h=$c->getPage($target_url);
$j=json_encode(urldecode($target_url));
return $j;
}
else{
return “Unauthorized Api Request”;
}
}
public function getcensusmap()
{
if($this->authenticated)
{
$c=new mycurl(“”);
$target_url=
$h=$c->getPage($target_url);
$j=json_encode(urldecode($target_url));
return $j;
}
else{
return “Unauthorized Api Request”;
}
}
public function getcurrencymap()
{
if($this->authenticated)
{
$c=new mycurl(“”);
$target_url=;
$h=$c->getPage($target_url);
$j=json_encode(urldecode($target_url));
$_GET[‘jsoncallback’]=”web”. “(“. $j .”)”;
return $j;
}
else{
return “Unauthorized Api Request”;
}
}
public function getweathermap()
{
if($this->authenticated)
{
$c=new mycurl(“”);
$target_url=;
$h=$c->getPage($target_url);
$j=json_encode(urldecode($target_url));
return $j;
}
else{
return “Unauthorized Api Request”;
}
}
public function getdistancemap()
{
if($this->authenticated)
{
$c=new mycurl(“”);
$target_url=;
$h=$c->getPage($target_url);
$j=json_encode(urldecode($target_url));
return $j;
}
else{
return “Unauthorized Api Request”;
}
}
public function getcloudsmap()
{
if($this->authenticated)
{
$c=new mycurl(“”);
$target_url=;
$h=$c->getPage($target_url);
$j=json_encode(urldecode($target_url));
return $j;
}
else{
return “Unauthorized Api Request”;
}
}
public function getliteracymap()
{
if($this->authenticated)
{
$c=new mycurl(“”);
$target_url=;
$h=$c->getPage($target_url);
$j=json_encode(urldecode($target_url));
return $j;
}
else{
return “Unauthorized Api Request”;
}
}
public function getclimatemap()
{
if($this->authenticated)
{
$c=new mycurl(“”);
$target_url=;
$h=$c->getPage($target_url);
$j=json_encode(urldecode($target_url));
return $j;
}
else{
return “Unauthorized Api Request”;
}
}
//getters
public function getCallback()
{
return $this->callback;
}
public function getauthenticated()
{
return $this->authenticated;
}
public function getreply_data()
{
return $this->reply_data;
}
public function getmethod()
{
return $this->method;
}
//setters
public function setCallback($value)
{
$this->callback=$value;
}
public function setauthenticated($value)
{
$this->authenticated=$value;
}
public function setreply_data($value)
{
$this->reply_data=$value;
}
public function setmethod($value)
{
$this->method=$value;
}
}
?>
API Caller Code
Place this code in any website
<script type=”text/javascript”>
var App_id=”542341185735275″;
var App_key=”837c9ky552o8a9236896″;
var maptype=”cartrip”;
var map_width=””;
var map_height=””;
</script>
<script src=></script>
<div class=”wrapper”>
<div class=”container” id=”apiresponse”>
</div>
</div>