Web Applications

Absract

The internet usage has grown dramatically in the last years almost reaching every home on earth. With the growing trend of mobile devices especially with the introduction of the smartphone new possibilities emerged. Every connected device can be traced. Most of today's devices have GPS that can report the position with high accuracy. These GPS enabled devices allow web developers to extract users location. With the introduction of HTML5 new components were added such as Geolocation, and with Google Maps it can be easily displayed on the map. The basic idea for this capstone is businesses register their stores on the web application, put all the products there and other related information together with the location of the store that is extracted from the current location of the current user or manually changed. The store can accept reservations or orders from the ordinary users/clients (B2C) or from other stores (B2B).
Whoever logs in the location is detected by every possible way the application can for example GPS, IP, etc. By default the application will display important stores near you. The users can change the location if they wish to display stores they will visit later. Also users can browse through different categories. The next step will be to choose the store and enter it. Once the user is in the store sub domain there he can make reservations and order products online.


I. Technologies

The real beauty of PHP, MySQL, JavaScript, and CSS is the wonderful way in which they all work together to produce dynamic web content: PHP handles all the main work on the web server, MySQL manages all the data, and the combination of CSS and JavaScript looks after web page presentation. JavaScript can also talk with your PHP code on the web server whenever it needs to update something (either on the server or on the web page).

1.1 HTML5

It is the new web standard and it is meant will replace both HTML4 ,XHTML and DOM Level 2. World Wide Web Consortium (W3C): The W3C contains the HTML working group that is currently charged with delivering their HTML5 specification. HTML5 is all about simplification and avoiding needless complexity such as new simplified DOCTYPE and new character set declaration. To achieve all this simplicity, the specification has become much bigger, because it needs to be much more precise than any previous version of the HTML specification. It 's goal is to achieve true browser interoperability by 2022. HTML5 is also designed to handle errors well, with a variety of improved and ambitious error handling plans.

HTML5 provides native support for many features that used to be possible only with plugins because it is designed to be plugin free. Plugins, of course, present many problems such as they cannot always be installed or they can be disabled or blocked. Plugins also often have difficulty integrating their displays with the rest of the browser content, which causes clipping or transparency issues with certain site designs. This is where HTML5 comes on the scene. You can style elements with CSS and script with JavaScript

Fetures of HTML5 are: Canvas (2D and 3D), Geolocation, Audio and Video, Forms, MathML, Scalable Vector Graphics (SVG), WebSocket API and protocol, Web origin concept, Web storage, Application Cache, Web Workers, Drag and Drop, XMLHttpRequest Level 2. These are the major features implemented in the specification there are a lot of other features still at early stages that are not implemented in any browser and thus not displayed here. If you read the specification carefully you will not find Geolocation and Web Workers in there because they were originally part of the HTML5 specification and were then moved to separate standards documents to keep the specification focused but the industry still refers to the original set of features, including Geolocation, and so on as HTML5.

When you use the new HTML5 DOCTYPE, it triggers browsers to render the page in standards compliant mode. The declaration is:

<!DOCTYPE html>

Like the new DOCTYPE, the character set declaration has also been shortened it is:

<meta charset="utf-8">

HTML5 introduces new elements and has marked others as obsolete. If you use these obsolete elements, your page will not be valid. However, browsers will continue to render them as they used to.

HTML5 defines a new semantic markup to describe an element's content. It provides a set of new sectioning elements that you can use in modern browsers. Those elements are: header, footer, section and article. All of these elements can be styled with CSS. In fact HTML5 pushes the separation of content and presentation, so you have to style your page using CSS styles in HTML5.

HTML5 is not yet an official standard, and no browsers have full HTML5 support. But all major browsers (Safari, Chrome, Firefox, Opera, Internet Explorer) continue to add new HTML5 features to their latest versions.

1.2 Geolocation API

Using the Geolocation API is fairly straightforward. You request a position and, if the user agrees, the browser returns location information. The position is provided to the browser by the underlying device (for example, a laptop or a mobile phone) on which the Geolocation'enabled browser is running. The location information is provided as a set of latitude and longitude coordinates along with additional metadata. Armed with this location information, you can then build a compelling, location-aware application.

When you use the Geolocation API, coordinates are always returned in the decimal format. In addition to latitude and longitude coordinates, Geolocation always provides the accuracy of the location coordinates. Additional metadata may also be provided, depending on the device that your browser is running on. These include altitude, altitudeAccuracy, heading, and speed. If this additional metadata is not available it will be returned as a null value.

The Geolocation API does not specify which underlying technology a device has to use to locate the application's user. Instead, it simply exposes an API for retrieving location information. What is exposed, however, is the level of accuracy with which the location was pinpointed. There is no guarantee that the device's actual location returns an accurate location.

A device can use any of the following sources:
' IP address
' Coordinate triangulation
o Global Positioning System (GPS)
o Wi-Fi with MAC addresses from RFID, Wi-Fi, and Bluetooth
o GSM or CDMA cell phone IDs
' User defined
In the past, IP address'based geolocation was the only way to get a possible location, but the returned locations often proved unreliable. IP address'based geolocation works by automatically looking up a user's IP address and then retrieving the registrant's physical address. Therefore, if you have an ISP that provides you with an IP address, your location is often resolved to the physical address of your service
provider that could be miles away.

A GPS fix is acquired by acquiring the signal from multiple GPS satellites that fly around the earth. However, it can take a while to get a fix, which does not lend itself particularly well for applications that must start up rapidly. Because it can take a long time to get a GPS location fix, you might want to query for the user's location asynchronously. To show your application's users that a fix is being acquired, you can add a status bar.

Wi-Fi'based geolocation information is acquired by triangulating the location based on the user's distance from a number of known Wi-Fi access points, mostly in urban areas. Unlike GPS, Wi-Fi is very accurate indoors as well as in urban areas.

Cell phone'based geolocation information is acquired by triangulating the location based on the user's distance from a number of cell phone towers. This method provides a general location result that is fairly accurate. This method is often used in combination with Wi-Fi' and GPS'based geolocation information.

Instead of programmatically figuring out where the user is, you can also allow users to define their location themselves. An application may allow users to enter their address, ZIP code, or some other details; your application can then use that information to provide location-aware services.

Geolocation was one of the first HTML5 features to be fully embraced and implemented, and it is available in all the major browsers now. When you access a web page that uses the Geolocation API, the privacy protection mechanism should kick in. Figure 1.1 shows what this looks like in Google Chrome.


Figure 1.1

Apart from providing the necessary mechanism to request permission to share your location, browsers also allow you to remember the permission granted to the site
for the next time you enter.

 

The following steps happen when the user visits a website that uses Geolocation:
1. A user navigates to a location-aware application in the browser.
2. The application web page loads and requests coordinates from the browser by making a Geolocation function call. The browser intercepts this and requests user permission. Let's assume, in this case, that the permission is granted.
3. The browser retrieves coordinate information from the device it is running on. For example, a combination of IP address, Wi-Fi, and possibly GPS coordinates. This is an internal function of the browser.


Figure 1.2 Geolocation browser and device privacy architecture

The Geolocation methods are:
o getCurrentPosition() which is executed if Geolocation is supported in the browser and this method returns an object if it is successful. The latitude, longitude and accuracy properties are always returned. The other properties are returned if available (coords.latitude, coords.longitude, coords.accuracy, coords.altitude, coords.altitudeAccuracy, coords.heading, coords.speed, timestamp) if it is not successful an error is displayed to the user ,
o Permission denied - The user did not allow Geolocation
o Position unavailable - It is not possible to get the current location
o Timeout - The operation timed out
o showPosition() function gets the displays the Latitude and Longitude
o watchPosition() Returns the current position of the user and continues to return updated position as the user moves (like the GPS in a car).
o clearWatch() Stops the watchPosition() method.

 

 

1.3 JavaScript

It is a scripting language supported by all major browsers. It is interpreted from top to bottom left to right. In syntax it is similar to C. Its best feature is that it is client side and the load is on the client not the server but there are possibilities to develop javascript on server side using frameworks such as node.js

It has made the current generation of web applications possible'browser-based email clients, maps, and social networks'and is also used in more traditional sites to provide various forms of interactivity There have been several versions of JavaScript. ECMAScript version 3 was the dominant, widely supported version in the time of JavaScript's ascent to dominance, roughly between 2000 and 2010. During this time, work was underway on an ambitious version 4, which planned a number of radical improvements and extensions to the language. Changing a living, widely used language in such a radical way turned out to be politically difficult, and work on the 4th edition was abandoned in 2008, leading to the much less ambitious 5th edition coming out in 2009. We're now just reaching the point where all major browsers support this 5th edition, which is the language version that this book will be focusing on. Work on a 6th edition is underway.

The most common use of JavaScript is to write functions that are embedded in or included from HTML pages and that interact with the Document Object Model (DOM) of the page. Some simple examples of this usage are:
o Loading new page content or submitting data to the server via AJAX without reloading the page (for example, a social network might allow the user to post status updates without leaving the page)
o Animation of page elements, fading them in and out, resizing them, moving them, etc.
o Interactive content, for example games, and playing audio and video
o Validating input values of a web form to make sure that they are acceptable before being submitted to the server
o Transmitting information about the user's reading habits and browsing activities to various websites. Web pages frequently do this for web analytics, ad tracking, personalization or other purposes

Because JavaScript code can run locally in a user's browser (rather than on a remote server), the browser can respond to user actions quickly, making an application more responsive. Furthermore, JavaScript code can detect user actions which HTML alone cannot, such as individual keystrokes.

 

 

1.4 CSS3
Cascading Style Sheets (CSS) is a W3C recommendation and is used to define how HTML elements are displayed. Even default styles are controlled internally by the browser's own CSS. Instead of applying styles directly to individual elements, the most common'and efficient'way of using CSS is to create the styles in a separate file. At first, this separation of style information from the content of a web
page seems counterintuitive. But it has the following significant advantages:
' Less-cluttered HTML code, making it easier to read and maintain
' Changing the look of multiple pages across a site by editing a single file
' Greater control over the way page elements look

The body responsible for drawing up agreed standards for the Web, the World Wide Web Consortium (W3C), published the first version of this language (CSS1) at the end of 1996, but it wasn't an instant success. According to the W3C, the CSS specification was drawn up in response to 'pressure from authors for richer
visual control.' The W3C published CSS2 in 1998. CSS2 retained all the features of CSS1 and added some new ones. At the time neither of the main browsers, Netscape Navigator or Microsoft Internet Explorer (IE), had good support for CSS. Because no two browsers ever managed to implement the full CSS2 specification, the W3C issued a revised specification called CSS2.1 in 2002. However, it took a further nine years before CSS2.1 finally received the formal seal of approval in June 2011. To speed up the development and adoption of CSS3, the W3C has divided the pecification into some 50 modules. Work on some of them is already at an advanced stage. Others are only ideas, and don't yet have any formal proposals.

The CSS3 Color module expands the type of color formats that you can use in websites to include HSL (hue, saturation, lightness) and alpha transparency. The following year, the Media Queries module also became a formal recommendation. Media queries serve different styles to devices depending on screen width and orientation. Other modules at an advanced stage of development and widely supported by browsers include Backgrounds and Borders, and Multi-column Layout. The Background and Borders module makes it easy to add multiple backgrounds to page elements, and to create rounded corners and drop shadows without the need
for images. There's also strong support for embedding web fonts.

All the main browser makers now seem committed to implementing CSS3 features as quickly as possible, and the pace at which new versions of browsers are released has rapidly accelerated. This means there's no need to wait for a particular module to gain formal approval. You can begin using many parts of CSS3 in your designs right now.

There are three ways of inserting a style sheet: external (style is applied to many pages), internal (a single document has a unique style) and inline (loses many of the advantages of style sheets by mixing content with presentation). Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number four has the highest priority:
1. Browser Default
2. External Style sheet
3. Internal Syle sheet (in the head section)
4. Inline Style sheet (inside an HTML element)
A CSS rule has two main parts: a selector, and one or more declarations:


The selector is the HTML element you want to style. Each declaration consists of a property and a value. The property is the style attribute you want to change.

At the time it was introduced, IE 6 was considered an excellent browser, but it had some terrible bugs that continued to frustrate designers more than 10 years after its release. To avoid a similar situation with CSS3, browser makers have decided to prefix the names of new or experimental properties with the browser-specific identifiers
' Firefox uses the prefix 'moz-
' Internet Explorer uses 'ms-
' Opera uses 'o-
' Webkit browsers (Chrome and Safari) use 'webkit-

This might look like a waste of time and effort because the values for the browser-specific versions are identical to the standard property. However, some browsers implemented CSS3 gradients and flexible box layout before the specifications stabilized, and they used different syntax to define the values. Using prefixes like this ensures that incorrect syntax in one browser doesn't affect the way your pages look in other browsers.

Some of the most important CSS3 modules are: Selectors,Box Model, Backgrounds and Borders, Image Values and Replaced Content, Text Effects, 2D/3D Transformations, Animations, Multiple Column Layout, User Interface.

1.5 PHP

PHP is a server-side scripting language designed specifically for the Web. Within an HTML page, you can embed PHP code that will be executed each time the page is visited. Your PHP code is interpreted at the web server and generates HTML or other output that the visitor will see.

PHP was conceived in 1994. It has gone through five major rewrites to bring us the broad mature product we see today. It is installed on millions webservers worldwide and is growing every year. PHP is an Open Source project, which means you have access to the source code and can use, alter, redistribute it all without charge. PHP originally stood for Personal Home Page but was changed in line with GNU recursive naming convention and now stands for PHP Hypertext Preprocessor. The current major version of PHP is 5. This version saw a complete rewrite of the underlying engine and some major improvements to the language. The majority of PHP code can be written to be portable between operating systems and web servers. There are some PHP functions specifically relate to the filesystem that are operating system dependent, but these are clearly marked as such in the manual.

The PHP syntax is similar to C programming language and when writing PHP code first we write the php open tag and at the end the close tag as follows:
<?php
//some code
?>

PHP scripts are executed on the server. It is importand for the server to have the appropriate software for running PHP. The most popular web server that uses PHP is Apache Web Server running a linux distribution which altogether is callet a LAMP (Linux, Apache, Mysql, PHP).

PHP 5 has well designed object-oriented features. If you learned to program in Java or C++, you will find the features and the syntax that you expect, such as inheritance, private and protected attributes and methods, abstract classes and methods, interfaces, constructors, deconstructors.

PHP allows you to implement simple tasks simoly, and eaily adapts to implementing large applications using a framework based on design patterns such as Model-View-Controller (MVC)

PHP has native connections available to many database systems. In addition to MySQL, you can directly connect to PostgreSQL, Oracle, dbm, FilePro, DB2, Hyperwave, Interbase and Sybase databases among others. PHP has also built-in SQL interface to a flat file called SQLite. In addition to native libraries PHP comes with a database access abstraction layer called PHP Database Objects (PDO), which allows consistent access and promotes secure coding practices

1.6 MySQL

MySQL is a very fast, robust, relational database management system (RDBMS). A database enables you to efficiently store, search, sort and retrieve data. The MySQL server controls access to your data to ensure that multiple users can work with it concurrently, to provide fast access to it, and to ensure that only authorized users can obtain access. Hence, MySQL is a multiuser, multithreaded server. It uses Structured Query Language (SQL), the standard database query language. MysSQL has been publicly available since 1996 but has development going back to 1979. It is the world's most popular open source database and has won the Linux Journal Readers Choice Award on a number of occasions. MySQL is available under dual licensing scheme. You can use it under an open source license (the GPL) free as long as you are willing to meet the terms of that license. If you want to distribute non-GPL application including MySQL, you can buy a commercial license instead.

The database management system connects and works perfectly with PHP . It can be used from the command line or from third party applications such as phpMyAdmin.

1.7 AJAX
It is not a new technology it stands for Asynchronous JavaScript and XML and its roots are at Netscape when they introduced the xmlHttpRequest. It is used by modern websites to manipulate the DOM without refreshing the whole page and to sent requests and recive responses asynchronously. Asynchronous refers to events that are happening on the background independently of the main application flow. These events do not disturb the flow of the application, allowing the continuation of it's normal process. AJAX is based on internet standards. It uses a combination of the following to accomplish it's goal:
' XMLHttpRequest Object (Modern Browsers)
' ActiveXObject(IE6 and below)
' JavaScript/DOM (Used to interact browser and server)
' XML(return results)
' JSON(return results)
' HTML(return results)

These standards are browser based, making them platform independent. It doesn't matter where you program this in, as long as you have a browser, then this 'should' work. All you would need is a server with the application files, and the browser should do the rest. Another advantage using AJAX would be a better user interactivity. This could be named the most obvious benefit of using AJAX, and why web developers and webmasters are using AJAX more and more every day. AJAX simplifies the flow of an application, thus making it have quicker interaction between user and website since pages are not reloaded for content to be displayed. This activity can be simplified, since the loading times can be reduced from websites.
The advantage above opens up for this next advantage, which you can call it, smoother navigation on a website. While using AJAX, users will not have the need to use the refresh nor the back button, thus, allowing quicker response from the server.

1.8 XML

XML (Extensible Markup Language) is a flexible way to create common information formats and share both the format and the data on the World Wide Web, intranets, and elsewhere. XML, a formal recommendation from the World Wide Web Consortium (W3C), is similar to the language of today's Web pages, the Hypertext Markup Language (HTML). Both XML and HTML contain markup symbols to describe the contents of a page or file. HTML, however, describes the content of a Web page (mainly text and graphic images) only in terms of how it is to be displayed and interacted with. For example, the letter "p" placed within markup tags starts a new paragraph. XML describes the content in terms of what data is being described. An XML file can be processed purely as data by a program or it can be stored with similar data on another computer or, like an HTML file, that it can be displayed. For example, depending on how the application in the receiving computer wanted to handle the phone number, it could be stored, displayed, or dialed.

XML is "extensible" because, unlike HTML, the markup symbols are unlimited and self-defining. XML is actually a simpler and easier-to-use subset of the Standard Generalized Markup Language (SGML), the standard for how to create a document structure. It is expected that HTML and XML will be used together in many Web applications. XML markup, for example, may appear within an HTML page. You can document the tags you create in a schema written in any of several languages,
including document type definitions (DTDs) and the W3C XML Schema
Language. XML markup describes a document's structure and meaning. It does not describe the formatting of the elements on the page. You can add formatting to a document with a style sheet. The document itself only contains tags that say what is in the document, not what the document looks like.

An XML parser (also known as an XML processor) reads the document and verifies that the XML it contains is well formed. It may also check that the document is valid, although this test is not required. The exact details of these tests are covered in Part II. If the document passes the tests, the processor converts the document into
a tree of elements. Finally, the parser passes the tree or individual nodes of the tree to the client application. If this application is a web browser such as Mozilla, the browser formats the data and shows it to the user.

1.9 Google Maps API

Google Maps was introduced in a blog post on Google in February 2005. It revolutionized the way maps on web pages work by letting the user drag the map to navigate it. This was new at the time. The map solutions used then were expensive and required special map servers, yet they didn't deliver the same level of interactivity.
Google Maps was originally developed by two Danish brothers, Lars and Jens Rasmussen. They cofounded Where 2 Technologies, a company dedicated to creating mapping solutions. The company was acquired by Google in October 2004, and the two brothers then created Google Maps. On today's Web, mapping solutions are a natural ingredient. We use them to see the location of things, to search for the position of an address, to get driving irections, and to do numerous other things. Most information has a location, and if something has a location, it can be displayed on a map. There are several mapping solutions including Yahoo! Maps and Bing Maps, but the most popular one is Google Maps. In fact, according to Programmableweb , it's the most popular API on the Internet. Mapping solutions are one important ingredient in a lot of these mashups. The Google Maps API lets you harness the power of Google Maps to use your own applications to display your own (or others') data in an efficient and usable manner. This Capstone is in fact a mashup of that uses Google Maps API v3. When seeing the dynamic nature of Google Maps, you might think there is something magical going on under the hood. But there's really nothing magical about it. It's just HTML, CSS, and JavaScript working together. The map tiles are images that are loaded in the background with Ajax calls and then inserted into a <div> in the HTML page. As you navigate the map, the API sends information about the new coordinates and zoom levels of the map in Ajax calls that return new images. And that's it! No magic involved whatsoever. The API itself basically consists of JavaScript files that contain classes with methods and properties that you can use to tell the map how to behave.
Coordinates are used to express locations in the world. There are several different coordinate systems. The one being used in Google Maps is the Word Geodetic System 84 (WGS 84), which is the same system the Global Positioning System (GPS) uses. The coordinates are expressed using latitude and longitude. You can think of these as the y and x values in a grid . Latitude measures from south to north, and longitude measures from west to east. At the equator, the latitude is 0. This means that everything below the equator (the south hemisphere) has a negative number, and everything above it (the north hemisphere) has a positive number. Similarly, there's a zero line for the longitude too. It's called the prime meridian, and for historical reasons it runs through Greenwich, England. Every position that is located east of this line has a positive number, and everything west has a negative number (Figure 1-3). The coordinates are expressed using decimal numbers separated with a comma. The latitude always precedes the longitude value (latitude, longitude). The position for New York City, for example, is 40.714,
-74.005. The positive value for the latitude is because it resides north of the equator, and the negative value for longitude is because it's positioned west of the prime meridian.

Figure 1-3
II. Database Schema

2.1 Tables

When starting to code an application that have databases that's the first thing you should do. In this capstone I choose to work with MySQL and the database was created using phpMyAdmin which is a web application itself to manage with MySQL databases and tables.

Our problem domain is that businesses register their stores on the web application, put all the products there and other related information together with the location of the store that is extracted from the current location of the current user or manually changed. The store can accept reservations or orders from the ordinary users/clients (B2C) or from other stores (B2B). Once the user is in the store sub domain there he can make reservations and order products online.

Firstly we need to create database by issuing the CREATE DATABASE command or by the create database menu tool of phpMyAdmin. Put the name of the database CAPSTONE and hit create . By default a InnoDB database with collation latin1_swedish_ci is created. phpMyAdmin automatically uses the newly created database so we are ready to create the tables.

The first table we need is table users named tbl_users. Here by standard convention we need a column that will uniquely identify the table and as usualy we name it id which is of type int, primary key and is auto incremented. The columns of user information like name, lastname, email and password are all of type varchar(200). The column birthday is set to type date. Gender is varchar(1). The important columns for the capstone which are columns lat and lng are of type float(10,6) where the coordinates in decimal will be stored. The registration date column rdate is of type datetime and the last column to check if the user has opened a business meaning that the user can be at the same time a user and a business the column has_store of type varchar(1).

Tbl_users(id, name, lastname, email, password, birthday, gender, lat, lng,rdate, has_store)

Next is the table store named tbl_store. It has an id column named store_id which is of type int and is primary key and autoincremented. Columns name and image are of type varchar(200). In the column image will be stored the name of the image that will be uploaded to the server. The column phone is of type text. Columns lat and lng are of type float(10,6) and rdate column is of datetime. Columns category_id and user_id are foreign keys of tbl_store_category and tbl_users tables

Tbl_store(store_id, name, image, phone, lat, lng, rdate, category _id, user_id)

Next table is tbl_store_category which speratas the stores into categories. It has an id category_id as usual auto_incremented and primary key. Column name and description of type varchar(200) and a column icon of type varchar which will later be used by Google Maps API to create the marker icons

Tbl_store_category(category_id, name, description, icon)

Next is table tbl_products which has the first column id auto incremented and primary key. Other columns are the product name , and image which are of type varchar(200). Column description of type text , column price of type double and the foreign keys category from tbl_category and store_id from tbl_store

tbl_products(id, name, description, image, price, category, store_id)

We create another table named tbl_category for products categories. It has an id of type int auto incremented and primary key. It has another column for name and yet another for description both of type varchar(200)

Tbl_category(id, name, description)

The next table is table tbl_order. It has a column named order_id auto incremented and primary key. The foreign key user_id from tbl_users and the column total for the sum of payment which is of type float.

Tbl_order(order_id, user_id, total)

The table tbl_order_item is needed to properly make the ordering of the products as needed. It starts with an id of type int and is primary key and auto_incremented. It has foreign keys order_id from tbl_order and product_id from tbl_products. The column quantity which as the name says displays the quantity of the product is of type int and the last column total which totals the total price for the row is of type float.

Tbl_order_item(id, order_id, product_id, total)

To make reservations we need to store the information so we can manipulate it and display the desired results. Create the table tbl_reservations. The column reservation_id is its primary key and is auto incremented. Column datetime saves the date and time of the reservation and is of type datetime. Columns user_id and store_id are foreign keys of tables tbl_users and tbl_store respectively. Column n_people saves the number of people for the reservation and is of type int. The column type is of type varchar(30) and lastly the column to comment is of type varchar(200).

Tbl_reservations(reservation_id, datetime, user_id, store_id, n_people, type, comment)

2.2 Relationships

Using the MySQL Workbench software is easy to generate the schema of a MySQL database. With the reverse engineering tool of the application it creates the schema from the sql code. Here is the result:

III. Case Study

Capstone:.
''''html
' ''''css
' ''''fonts
' ''''img
' ' ''''icons
' ' ''''uploads
' ''''js
' ''''less
''''includes
' ''''uploads
''''templates

''''includes

actAddProducts.php
actOpenStore.php
actRegister.php
addProducts.php
calculator.php
config.php
createkml.php
database.php
footer.php
genxml.php
header.php
login.php
logout.php
myStore.php
myStore_leftPannel.php
openstore.php
register.php
viewStore.php


''''html
Index.php
''''js

Geolocation.js
Bootstrap.min.js
jquery.min.js

includes/config.php
define('WEBSITE_PATH_ROOT', 'http://127.0.0.1/capstone');
define('WEBSITE_PATH_HTML', WEBSITE_PATH_ROOT. '/html');
define('WEBSITE_PATH_INCLUDES', WEBSITE_PATH_ROOT. '/includes');
define('WEBSITE_PATH_TEMPLATES', WEBSITE_PATH_ROOT. '/templates');

database.php
$host="127.0.0.1";
$user="root";
$password="";
$database="capstone";

$con = mysqli_connect($host,$user,$password,$database);
//The mysql adapter to connect with php is the mysqli adapter
3.1 Users

The target of every application is the user. PinPoint works both with user authentication and without it. Users can only view the stores as guest but if they want to order an item or make a reservation they need to log in. The login system is very straightforward. At the navigation bar which is the header of every page on the right side is the login button which when pressed drops a dropdown which contains two textboxes for the username and password and a link to create a new account.

The login button sends the form fields to a file named login.php where the inputs are escaped with the mysqli_real_escape_string and the password is hashed with the md5 algorithm. When the user data is given correct and the result is returned from the database query it stores in the $_SESSION the user id and if the user has opened a store it sets the has_store variable to 'y'.

If the user clicks create an account he is sent to register.php. After filling the form it is submited together with the location specified in the map to the actRegister.php. There using php code after escaping the inputs if the user is not already registered with that email it registers it to the database and is redirected to the home page and already logged in with the session started.

 

3.2 Businessess

When users log in they have an option on the right side of the navigation bar to open a store. If the user choses to do so then the user becomes at the same time a user and a store owner. To open a store is an easy step just fill out the form and click the location o the business on the map. At the end click sign up and its done. When a user that has a store logs in a button at the right of the navigation bar is displayed My Store which when clicked lets the user manage his store. At the store the owner can add/update/delete products, view orders and reservations. An option to update the store info is also available on the left panel.
3.3 Implementation

When the application is clicked a HTTP request is sent to the webserver wanting the default document from the root folder which in this case is index.php. After the response is loaded in the clients device the web browser prompts the user for the location's permission and when the user allows the function initialize() is called which inside contains the HTML5 Geolocation API . The function in geolocation.js navigator.geolocation.getCurrentPosition puts inside var pos = new google.maps.LatLng the coordinates of the current position . Now the variable pos has the location in decimal format separated with comma. If geolocation fails or permission is not granted an error is issued and the user has to manualy click his location on the map.

This capstone uses Google Maps API v3 the javascript API. To use google's services you must obtain the API key. After obtaining it from google include it on the html head element as javascript

src=http://maps.googleapis.com/maps/api/js?key=AIzaSyBihRujwYxBjy8VHegFFiW6wLQMyvWE8Q0&sensor=true

This allows google to recognize your application and allow them to let you use their services. To display the location on the map google uses markers. Because the icons on the application are custom icons they need to be hosted somewhere on the internet so google maps can access them so the user icon

image = 'http://poki.site50.net/html/img/icons/male-2.png'

var marker = new google.maps.Marker({
map: map,
position: pos,
icon: image,
title: 'Me!',
draggable:true
});
Now that the marker is created the only thing left is to center the map on that position by calling the function setCenter.

map.setCenter(pos);

To find the stores near the user, inside the geolocation.js there is another function called findeStores () which takes as input the current location of the user Marker and the distance from the html <select> tag

function findeStores(coord,d){
$.ajax({
type: 'post',
url: '../includes/calculator.php',
data: { 'coord' : coord,'d':d },
dataType: "json",
success: function(data){
$('#s_stores').empty();
$.each(data, function (index, value) {
$('#s_stores').append('<div class="close_stores"><span><a href="../includes/viewStore.php?store_id='+value.store_id+'"><table><tr><td rowspan="2"><img src="img/uploads/'+value.image+'" width="64" height="64"><td><td><p>'+value.name+'</p></td></tr><tr><td></td><td><p>'+value.phone+'</p></td></tr></table></a></span>');
if(index==4) return false;
});
},
// Alert status code and error if fail
error: function (xhr, ajaxOptions, thrownError){
alert(xhr.status);
alert(thrownError);
}
});
}
The function uses jquery and sents http requests through ajax to calculator.php and this php file processes the data and then passes the location using $lat and $lng variables and the distance using the $distance to mysql query using this statement

SELECT *, ( 3959 * acos( cos( radians('".$lat."') ) * cos( radians( lat ) ) * cos( radians( lng ) - radians('".$lng."') ) + sin( radians('".$lat."') ) * sin( radians( lat ) ) ) ) AS distance FROM tbl_store HAVING distance < '".$distance."' ORDER BY distance LIMIT 0 , 10"

The result of this query is limited to 10 stores. And the php parses the result as json with the ready function json_encode and the javascript findStores() function receives the response clears the divs with $('#s_stores').empty(); before writing new ones thus making an automatic load of data without refreshing the whole browser

There are a lot of included event listeners. If the users changes the distance the function

document.getElementById("myselect").addEventListener('change', function()

is executed and calls again findStores() where the content changes without refreshing at all the browser.

When the user Marker is dragged meaning that the user wants to change the location this event listener is fired up

google.maps.event.addListener(marker, 'dragend', function()

It calls findStores() to reload the fresh results.

When the user decides to enter a store the file viewStore.php is called and via GET is given the id of the store. Inside the store Info is displayed in the left panel on the center column are the products listed you want to order. From the left panel if you choose reservations and the resevations are allowed the user can make reservations at will.

Orders are saved in the php global variable $_SESSION in the file cart.php in an array. At any time the user can view the orders and before checkout can cancel, delete or alter the order.
IV. Supplementary

4.1 Bootstrap

Bootstrap is a free web development tool originating from Twitter that, with a little HTML, CSS and JavaScript experience, makes building websites quick, intuitive, and fun. It's a customizable and lightweight framework that allows you to create and deploy feature-rich websites by easily accessing built-in goodies in the form of CSS3, JavaScript, HTML5 and UI elements. It's built using what's commonly referred to as a 'grid system,' and specifically with Twitter Bootstrap, 'scaffolding' and makes building attractive, responsive websites a breeze. The Bootstrap libraries offer existing snippets of code that immediately inject life into a website. Web designers and developers don't have to spend time working and writing out code, and can spend more time creating and building. Bootstrap allows you to grab the tool you need for your workspace quickly and easily. In addition, much of the styling and design aspects are already handled, since the
CSS is built with LESS. Redundancy is minimized.

Bootstrap's default is a platform with a 12 column grid which is 940px wide. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide, depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically. Here are the different column and gutter widths, depending:There are now 4 column size class variants:

col-xs-*
col-sm-*
col-md-*
col-lg-*

The premise is that the grid is controlled by the viewport size via the media queries and that as the browser width gets wider, the different column class will overwrite the previous. So at the phone width, the 'xs (extra small)' column is active. But if you stretch your browser out wide, then the 'lg (large)' class is active and overwrites the smaller sizes.

Bootstrap comes equipped with JavaScript libraries that are far beyond just basic structure and styling. JavaScript often needs to be incorporated heavily in some designs, and developers have to pull elements in from all over the place. With Bootstrap, you can
easily manipulate modal windows alerts, tooltips, Scrollspy, Popover, Button, Typeahead, etc..., and again, only pull the JavaScript tools from the shelf that you want with Bootstrap's customization app. The best part, however, is that Bootstrap enables you to skip writing the <script> altogether.


Bibliography

BrianP. Hogan, HTML5 and CSS3
Robin Nixon, Learning PHP, MySQL, JavaScript,
and CSS, (O'Reilly)
Cody Lindley, JavaScript Enlightenment, (O'Reilly)
Peter Lubbers, Brian Albers and Frank Salim. Pro HTML5 Programming
David Powers, Beginning CSS3
Dynamic HTML: The Definitive Reference, 2nd Edition
Flanagan ,David. JavaScript: The Definitive Guide, 4th Edition
Lerdorf ,Rasmus and Kevin, Tatroe. Programming PHP, (2002), 4th Edition
Welling, Luke and Th. ,Laura . PHP and MySQL Web Development
Cascading Stylesheets: W3C page on CSS
DOM: W3C Specification of DOM

Source: Essay UK - http://doghouse.net/free-essays/information-technology/web-applications.php


Not what you're looking for?

Search:


About this resource

This Information Technology essay was submitted to us by a student in order to help you with your studies.


Rating:

Rating  
No ratings yet!


Word count:

This page has approximately words.


Share:


Cite:

If you use part of this page in your own work, you need to provide a citation, as follows:

Essay UK, Web Applications. Available from: <http://doghouse.net/free-essays/information-technology/web-applications.php> [22-02-19].


More information:

If you are the original author of this content and no longer wish to have it published on our website then please click on the link below to request removal:


Essay and dissertation help

badges