Sei sulla pagina 1di 108

The BACulator

MIS 4312 - Group 6


Team Leader: Andre Southivong
Kwame Addo
Jessica Farias
Michael Easton
Jimmy Phan
Erick Alvarez
Adrian Chapa

Table of Contents
Introduction
Phase I - Planning
-Objectives
-Risk Assessment
-Assumptions
-Constraints
-Visual Model
Phase II - System Analysis
-Project Description
-Project Requirements
-Possible Risks
-System Architecture
-Technology/Software
-Documentation
-Quality Control/Testing
-Project Breakdown with Estimated Hours
-Project Delivery Plan
-Maintenance and Support Terms
-Team Information
-Contact Information
Phase III - High Level Design & Detailed Design
-Background and Design Goals
-Architecture
Reports
-Testing and Deployment
Application Code
User Guide
Group Assessment
Group Member Evaluation

Introduction
Purpose of Plan

The purpose of this application is to provide the end user a means of utilizing a helpful tool
in calculating the blood alcohol content (BAC) levels of someone who is planning on or has
already consumed alcohol. In this case, the end user can be any adult who is legally
allowed to consume alcohol, ages 21 and up, in the state of Texas. Essentially, this
application will be designed to let the end user input variables, which are factors that play a
huge role in determining the blood alcohol levels of an individual, to calculate a predicted
percentage of blood alcohol content inside a users body. Utilization of the application
should thus help prevent users from driving while impaired and reduce the risks of car
accidents and deaths due to drunk driving. The application was also built to promote
responsibility and safe drinking habits amongst individuals. In order to use the application,
the BACulator app will require the user to sign up. It will then save and store the user input
data and use it later when calculating BAC levels. This functionality will enable the end
users to monitor, forecast, and determine their own blood alcohol content levels.
System Request
Group 6 came up with an idea that would definitely benefit people who are of the legal
drinking age. This project was derived from the passion to develop an app that would
engage drinkers to take more caution, when consuming alcohol, and monitor their BAC
levels before its too late and something bad happens.
Project Approach
Phase 1: Planning
Phase 2: Analysis
Phase 3: Design
Phase 4: Implementation

Phase I - Planning
Objectives

The primary objectives of the mobile application for this project are:

Allow users to input data, which are factors that calculate blood alcohol
concentration

Calculate the blood alcohol concentration of the end user, once input data of end
user is entered and saved into database

Display the end users BAC level, once calculation is computed

Inform the end user about all the side effects that are to be expected at that specific
BAC level

Risk Assessment

The Risk Assessment will be monitored constantly and updated by group members
throughout the life of the project.
Milestones

Phase 1: Planning

Risks discovered in planning:


Data redundancy

Phase 2: Analysis

Risks discovered in analysis:


Data loss

Security breaches into the application

Phase 3: Design

Risks discovered in designing:


Database security

Denormalization of attributes

Assumptions

The project assumptions include:

Guidance by Professor Nguyen


Leadership from the team leader and Project Manager, Andre Southivong
Assurance that the project team members will be available when needed
Hence the busy work schedules, must work around
The project plan may change throughout the project life cycle
The team may run into software or hardware related issues that could hinder the
deployment of the application

Constraints

The project constraints consists of:


Amount of time available outside of other classes for each members this semester
Limited knowledge that will have to be researched to get the project done
Busy work schedules of all team members
- Critical Project Barriers

Professor Nguyens disapproval of the project


Violating Student Code of Conduct
System or computer crash, data loss
Natural disasters or acts of war

Visual Model

Phase II - System Analysis


Project Description

As discussed in the purpose of the plan, The BACulator app will provide end users with a
tool to help calculate the blood alcohol concentration levels for that existing user. The app

doesnt have to be used while a user is currently drinking, it will also allow users to predict
and forecast their BAC levels for a later time. Users can test the amount of alcohol they
would like to consume with this app, to give them an approximate idea as to how much

alcohol will be in their system. The application will allow end users to input variables such
as gender and weight and will save this information to their profile, so it can be used over
again. There will also be other variables, which can be interchangeable and switchable,
such as the total amount of time drinking and the amount of beer, wine and/or liquor

consumed during that time. By inputting the factors that determine the BAC levels of a

body, the user will be able to calculate an approximate content level of their own. If this

mobile application gains momentum, we can expand new capabilities in future updates.

Project Requirements

Many adults lose track of how many alcoholic drinks they consume in a single outing often
wonder how much they actually had, and what percentage of alcohol is in their system, to
also not go over the limit and get in trouble with the law. As a result, the application will be
targeted mainly towards young adults, like college students, who like to have a good time
and consume a fair amount of alcohol. With the native application, iOS and Android
operating systems will be able to run the application. The top priority is to make it available
as a mobile web application, which will be developed using either or a combination of
PHP, CSS3, HTML5, and Javascript.

As for the application, it will give suggestions to the user which is based on the position of
their BAC level, high or low. For example, if the user has a BAC result of 0.03% or higher,
the application will warn the user that they need to be more cautious because they will soon
reach the legal limit, which is 0.08% in Texas. If the users level exceeds the legal amount,
the application will be programmed to alert the end user that they need to stop drinking
because they might be too intoxicated, and they will not be able to drive in that state.

Possible Risks

Risk and cost to maintain user data (login and user information)
Risk of security breaches, stealing users private information (email address, phone
number, etc.).
Losing or repeating user information in the application and database.
Problems with coding and implementing the application into the Red Hat cloud or
other required software that group members arent quite experienced with.
Risk of unsustainable user growth, not enough interest to use the app.
Difficulty in designing the database, trouble normalization database.
Miscommunication between team members
Loss of data, due to system failures

System Architecture

The web application architecture for this project encompasses the three layer architecture.
These are the presentation layer, the business layer and the data storage layer.
The presentation layer will have user interface components, as well as user interface
process components. The business layer popularly known as the middle layer is mainly
the layer for services interface, business workflows and the components utilized for this
workflow. The final layer is the Data storage, however between the business layer and
Data storage is the essential Data access layer. This is a significant sublayer or interface
to address, access, provisioning and security.
The presentation layer or user interface layer will be hosted in a web browser. The
functionality and process involved in this layer include, user input, and system output.
Javascript will be employed to verify that all form fields are filled in as required within the
browser. The services interface within the middle layer serves as recipient of
communicated data to the web server. These are expected to handle all the http / html
requests as well as all the static components involved in the application. We intend to
employ dynamic components and thus the webserver should be able to process these.
Within the middle layer, we will employ PHP to develop the business logic as well as any
application logic via the application server. These functionalities will include transforming
input data, massaging the data for specified output etc.
The Data Access layer is powered by the mysql, my php admin applications to interact
between the two upper layers.
7

The Data storage will be designed to store, index and and manage the physical storage in
a manner that makes its quick to access and manipulate. These servers are mostly
application servers and thus not physical servers, except for the data store tier.
The system will consist of the following major sections:
1) HTML5 and Javascript web application
2) Server-side application

Technology and Software

Team members have analyzed the scope of the project and plan to use the majority of the
following technologies below:
1) MySQL
2) JQuery
3) PHP
4) Javascript
5) HTML5
6) Red Hat Cloud

Documentation

Each team member will provide detailed information which include:


1. Source code comments: Detailed yet simple comments inline application code to
identify functions.

2. Technical documentation: Detailed information regarding functionality, execution and


progress of application

Quality Control and Testing

Members will work as a group and will implement the following tests:

1) Functional testing - base test cases on the specifications of the software component
under test

2) Performance testing - determine how a system performs under a particular workload


3) Destructive testing - test robustness by attempting to cause software or sub-system
to fail
4) Usability testing - used to evaluate software by testing it on real users

5) Security testing - process used to reveal flaws in the security of our software

Project Breakdown: Number of Hours (Estimation)


#

Breakdown of Project
Tasks

Efforts,
Man-Hours

Stage
1

Analysis and Design

15

1.1
1.2

Idea generation

1.3

Technical architecture design

10

Development outline

Stage
2

Implementation

163

2.1

Database design

2.2

Synchronizing service

2.1.1
2.3

2.3.1
2.3.2
2.4

2.5.1

2.5.1.1
2.5.1.2
2.5.1.3
2.5.1.4
2.5.2

2.5.2.1
2.5.2.2

Database creation
UI design

12
10

UI creation

Architecture

Container Creation

UI Debugging
Containers

Container Input Creation


Container Item Creation
Container Debugging

10

4
4
6

Input Design

Study Material view/edit

Courses view/edit

10

2.5.2.3

Grades view edit

2.5.2.5

Add/Edit Items

10

2.5.2.4
2.5.3
2.6

View Items
Other

10

Web app information check

2.6.2

Check Container Retention

2.7.1

New Transfer

2.6.1
2.7

2.7.2
2.8

2.8.1
2.8.2

Stage
3

Check Input Transfer/Save

Database Connections

View Transfers / View Transfer

10

Outputs

List Items/ View Item

10

UI Container Return Test

Testing and other QA tasks

38

3.1

Acceptance testing of all system

10

3.2.1

Feedback Implementation

15

Deployment

3.2

3.2.2

Stage
4
4.1

Feedback

Feedback Testing

Application deployment

10

11

Project Delivery Plan

The project will be implemented in the following stages:


Stage 1. Analysis and Design
Tasks

Plan study app, Make decisions for app based


on analysis; Technical architecture design;

Deliverables

Work plan and technical architecture

Estimate (work days)

Total man-hours by stage

15

Stage 2. Implementation
Tasks

DB creation; Merging Services;


Design, UI;Register; Courses
View/Edit; Study Material View/Edit;
Grades View; Timers View/Edit;

Deliverables

Draft application with few errors

Estimate (work days)

23

Total man-hours by
stage

151

Stage 3. Testing and other Q/A tasks


Tasks

Testing application for smooth execution

Deliverables

Executable application with no errors

Estimate (work days)

Total man-hours by stage

38
12

Stage 4. Deployment
Tasks

Running Application

Deliverables

Execution of Application

Estimate (work days)

Total man-hours by stage

Total project timeframe: 5 weeks


Total estimated hours: 212 hours

Maintenance and Support Terms

There would be no initial cost at first since the group members will be working on this
collectively for the project. There may be some maintenance cost after the project is

completed as bugs and compatibility issues are to be expected. Future capabilities may

require additional maintenance costs. The application will be maintained and supported by
our team on a daily basis.

General Team Information

Key expertise of each team member include:

Kwame - Software Engineer, C, Javascript, SQL


Adrian - Java, C, SQL
Erick - Java, SQL
Mike - C, Java, SQL
Andre - Java , SQL, HTML
Jimmy - HTML
Jessica - Java, HTML

Location: USA

Team Expertise- Our team specializes in creating applications to suit the needs of
college students

13

Contact Details

Further details can be requested through the following:


Kwame Addo - krokrokoto@gmail.com
Jimmy Phan - jxp142430@gmail.com

Adrian Chapa - adrianchapa87@gmail.com

Erick Alvarez - erick.alvarez0919@gmail.com


Michael Easton - maeaston25@gmail.com
Jessica Farias - fariasjess93@gmail.com

Andre Southivong - andresouthivong93@gmail.com

14

Phase III - High Level Design and Detailed Design


Background

The idea of the BACulator application is to help a person calculate their BAC (blood alcohol
concentration) level. The application will be using a standardized formula that uses various

variables, such as gender, weight, and the type and quantity consumed. The algorithm that
our app uses will calculate the users BAC in different methods depending on primarily the
type of alcohol consumed and their gender. Then, the app will take these inputs from the
user and produce the proper output coinciding with their specific bodily intake.

Design Goals

Create an easy to use interface for the user to input the necessary attributes to
calculate the BAC

Calculate proper BAC levels using algorithm best suited for the unique type of
alcohol consumption of user

Display BAC level and inform user if they are above or below safe BAC levels to
operate a vehicle

Create an enhanced relationship diagram to analyse the necessary entities with the
adequate attributes to use and store in a database

Create a sequence diagram that will show the actions of each entity

Develop a diagram or prototype to show how the application interface will look like

15

Architecture

We plan to use a 5 step design for our mobile application that allows the user to:
Input the data

Save the data for the user in either the database or using cookies, subject to which
type of data

Process the data by placing it into our formula to calculate the BAC
Display the Output for the User

Allows the user to change cookie data to affect the output

We plan to use a 5 step design for our mobile application that allows the user to:
Input the data

Save the data for the user in either the database or using cookies, subject to which
type of data

Process the data by placing it into our formula to calculate the BAC
Display the Output for the User

We will implement a 3-tier architecture as shown in the diagram above.


16

The tiers will each containing:

1. User Tier: This tier will receive the user input as well as display the results of the
application.

2. Application Tier: This tier contains the mode of transmission and processing for the
data. It will also posses certain data as local cookies to allow ease of change.

3. Database Tier: The database will store the user information separate from the
application. The database holds more permanent information that does not
necessarily need to be changed with each use of the application.

17

Data Model

Our Entity Relation Diagram model displays the relationship between the different
databases and storage methods of our application

The following are the attributes involved with our architecture


Database

User

User

User_Name (Primary Key)


Weight

Gender (foreign key)

Gender

Male

Female

Session

18

Alcohol
Time

Time

Hours

Alcohol

Beer Data

Wine Data

Liqour Data

BAC Calculation
Weight

Gender
Alcohol
Time

Output

BAC display

Reports
Testing

The mobile web application has been through extensive testing t and deployment through
both cloud and local environment, but more on the local environment. Based on the user
guide, the actual functionalities that have been tested include: the actual blood alcohol

content calculation, showing the team information, signing up and signing in to the mobile
web application. The only device we were able to test with were group members laptops.
There are no third party software that was required in testing. The final application is

deployed locally, due to some minor issues with Red Hat Cloud. The application performed

all of the required functionalities, but has some minor tweaks and adjustments to make i the
near future. Our group tried our best, with the resources we had, to make sure deployment
was successful.

19

User Guide
Sign in:
-

The user will need to access the mobile web application through the internet. Once

the user accesses the mobile web page, the user needs to sign in with their email
and enter their password.

Sign up:
-

If the user is new, they will need to sign up and create an account in order to use the

application. Users will be required to fill out a form

Blood Alcohol Concentration Calculator:


-

Once the user logs in or signs up, the user will be able to input variables which is
their weight, gender

20

MIS4312 Mobile Web App Development

Semester Project Peer Evaluation


My Group: Group 6

My Name: Jimmy Phan

I evaluate other team members contribution to the project as follows:


On scale of 10

10 is the highest

Team member #2: Name ____Kwame Addo____________ Score: ___2___


Team member #3: Name ____Andre Southivong ________ Score: ___10___
Team member #4: Name ____Jessica Farias___________ Score: ___8___
Team member #5: Name ____Erick Alvarez____________ Score: ___8___
Team member #6: Name ____Mike Easton_____________ Score: ___10___
Team member #7: Name ____Adrian Chapa____________ Score: ___5___
Any other comments about the team:
Most of our team members worked really hard on the project and found the project

very challenging when also balancing other school work and our jobs. There were a couple
of members that did not want to contribute, but showed up to meeting and promised on

some work. I ended up picking up their sections and doing it because the material that was

handed to the group does not provide anything useful to the project itself. This was brought
up multiple times within the group and given multiple chances throughout the semester.

21

Application Code

application_feature_sample.php
<?php
/**

* File Name: application_feature_sample.php


* User: Jimmy Phan
* Date: 12/2/14

* Time: 4:29 PM
*/

?>
<!DOCTYPE html>
<html lang="en">
<head>

22

<meta charset="UTF-8" >


<title>Mobile Web Applications</title>
<!--[if IE]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!--[if lt IE 9]>

<script src="http://ie7-

js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

<meta name="viewport" content="width=device-width, initial-scale=1,

maximum-scale=1">

<link rel="stylesheet"

href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-

1.4.4.min.js"></script>
<style>

p.notes {font-weight: bold}

</style>
</head>

23

<body>
<div data-role="page" id="manage_user_accounts">
<div data-role="header" data-theme="b">
<h1>BACulator</h1>

<a href="user_sign_in.php" data-icon="power" class="ui-btn-right" data-

theme="a">Sign Out</a>
</div>

<div data-role="content">
<div style="text-align: center;">

<h2>Application Feature Name</h2>


<br><br>
<br><br>

</div>

<div style="text-align: center;">

<h5>Content of the mobile web page should be here ...</h5>


<br><br>

</div>
</div>

<div data-role="footer" data-position="fixed" data-id="nav" data-theme="b">


<div data-role="navbar">
<ul>

<li><a href="start.php">Home</a></li>
24

<li><a href="list_features.php" class="ui-btn-active ui-state-

persist">Feature List</a></li>

<li><a href="user_sign_in.php">Sign In</a></li>

</ul>

</div>

</div>

</div>

</body>
</html>

calculator.php
<?php
/**

* Created by PhpStorm.
* User: MikeE

* Date: 12/7/14

* Time: 1:26 PM
*/

?>
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8" >


<title>Mobile Web Applications</title>
25

<!--[if IE]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!--[if lt IE 9]>

<script src="http://ie7-

js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

<meta name="viewport" content="width=device-width, initial-scale=1,

maximum-scale=1">
<!--

<link rel="stylesheet"

href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-

1.4.1.min.js"></script
-->

<link rel="stylesheet"

href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-

1.4.4.min.js"></script>
<style>

p.notes {font-weight: bold}


26

</style>
</head>
<body>
<div data-role="page" id="manage_user_accounts">
<div data-role="header" data-theme="b">
<h1>Mobile App Name</h1>

<a href="user_sign_in.php" data-icon="power" class="ui-btn-right" data-

theme="a">Sign Out</a>
</div>

<div data-role="main">
<div style="text-align: center">
<form method="post" action="demoform.asp">
<div class="ui-field-contain">

<label for="Beers">Number of Beers:</label>

<input type="number" name="Beers" id="Beers">


<label for="Liquor">Number of Liquor:</label>

<input type="number" name="Liquor" id="Liquor">


<label for="Wine">Number of Wine:</label>

<input type="number" name="Wine" id="Wine">


<label for="Hours">Hours drinking:</label>

<input type="number" name="Hours" id="Hours">


<label for="Weight">Your Weight:</label>

27

<input type="number" name="Weight" id="Weight">


<fieldset data-role="controlgroup">

<legend>Choose your gender:</legend>


<label for="male">Male</label>

<input type="radio" name="gender" id="male" value="male">


<label for="female">Female</label>

<input type="radio" name="gender" id="female"

value="female">

</fieldset>

</div>

<div style="text-align:center">

<input type="submit" data-inline="true" value="Submit">

</div>

</form>

</div>

<div style="text-align: center;">


<h5></h5>
<br><br>

</div>
</div>

<div data-role="footer" data-position="fixed" data-id="nav" data-theme="b">


<div data-role="navbar">
<ul>

<li><a href="start.php">Home</a></li>
28

<li><a href="list_features.php" class="ui-btn-active ui-state-

persist">Feature List</a></li>

<li><a href="user_sign_in.php">Sign In</a></li>

</ul>

</div>

</div>

</div>

</body>
</html>

config.php
<?php

/* configure file */
$dsn = "mysql:host=localhost; dbname=mis4312proj";
$DBAname = "DBAdmin";

$DBApassword = "dbadminpswd";
?>

list_features.php
<?php
/**

* File Name: list_features.php


* User: Jimmy Phan
* Date: 11/09/2014
* Time: 8:30 PM
*/

29

?>
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8" >


<title>Mobile Web Applications</title>
<!--[if IE]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!--[if lt IE 9]>

<script src="http://ie7-

js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

<meta name="viewport" content="width=device-width, initial-scale=1,

maximum-scale=1">
<!--

<link rel="stylesheet"

href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-

1.4.1.min.js"></script
-->

30

<link rel="stylesheet"

href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-

1.4.4.min.js"></script>
<style>

p.notes {font-weight: bold}

</style>
</head>
<body>

<div data-role="page" id="list_features">

<div data-role="header" data-theme="b">


<h1>BACulator</h1>

<a href="user_sign_in.php" data-icon="power" class="ui-btn-right" data-

theme="a">Sign Out</a>
</div>

<div data-role="content">
<div style="text-align: center;">
<h2>Feature List</h2>
<br/><br/>

</div>

<ul data-role="listview">
31

<li><a href="user_manage_account.php">Manage user

account</a></li>

<li><a href="application_feature_sample.php">Blood Alcohol Content

Calculator</a></li>
</ul>

</div>
<div data-role="footer" data-position="fixed" data-id="nav" data-theme="b">
<div data-role="navbar">
<ul>

<li><a href="start.php">Home</a></li>

<li><a href="list_features.php" class="ui-btn-active ui-state-

persist">Feature List</a></li>

<li><a href="user_sign_in.php">Sign In</a></li>

</ul>

</div>

</div>

</div>

</body>
</html>

start.php
<?php
/**

* File Name:start.php
* User: Jimmy Phan

32

* Date: 11/09/2014

* Time: 2:30 PM PM
*/

?>
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8" >


<title>Mobile Web Applications</title>
<!--[if IE]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!--[if lt IE 9]>

<script src="http://ie7-

js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

<meta name="viewport" content="width=device-width, initial-scale=1,

maximum-scale=1">
<!--

<link rel="stylesheet"

href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

33

<script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-

1.4.1.min.js"></script
-->

<link rel="stylesheet"

href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-

1.4.4.min.js"></script>
<style>

p.notes {font-weight: bold}

</style>
</head>
<body>

<div data-role="page" id="home">

<div data-role="header" data-theme="b">


<h1>Semester Project</h1>

</div>

<div data-role="content">

<div style="text-align: center;">

<h2>MIS4312: Group 6</h2>


<h2>2014</h2>

</div>

<p align="Center"><b>Baculator</b></p>
34

<p align="Center"><a href="http://szuperblog.hu/wp-

content/uploads/2013/09/Screen-Shot-2013-07-08-at-8.11.21-PM.png"><img

src="http://szuperblog.hu/wp-content/uploads/2013/09/Screen-Shot-2013-0708-at-8.11.21-PM.png" width="400" alt="Logo"/></a></p>

</div>

<div data-role="footer" data-position="fixed" data-id="nav" data-theme="b">


<div data-role="navbar">
<ul>

<li><a href="#home" class="ui-btn-active ui-state-

persist">Home</a></li>

<li><a href="#team">Team</a></li>

<li><a href="#project">Project</a></li>

</ul>

</div>

</div>

</div>

<div data-role="page" id="team">

<div data-role="header" data-theme="b">


<h1>The Team</h1>

</div>

<div data-role="content">
<ul data-role="listview">
35

<li><a href="#team_leader">Team Leader</a></li>

<li><a href="#team_members">Team Members</a></li>

</ul>
</div>

<div data-role="footer" data-position="fixed" data-id="nav" data-theme="b">


<div data-role="navbar">
<ul>

<li><a href="#home">Home</a></li>

<li><a href="#team" class="ui-btn-active ui-state-

persist">Team</a></li>

<li><a href="#project">Project</a></li>

</ul>

</div>

</div>

</div>

<div data-role="page" id="team_leader">

<div data-role="header" data-theme="b">


<h1>The Team</h1>

</div>

<div data-role="content">
<h2 align="Center">Andre Southivong</h2>
<p align="Center">Major: MIS </p>

36

<p align="Center">ass104020@utdallas.edu </p>

<p align="Center" class="notes"> Responsibility: Project Supervisor </p>

</div>

<div data-role="footer" data-position="fixed" data-id="nav" data-theme="b">


<div data-role="navbar">
<ul>

<li><a href="#home">Home</a></li>

<li><a href="#team" class="ui-btn-active ui-state-

persist">Team</a></li>

<li><a href="#project">Project</a></li>

</ul>

</div>

</div>

</div>

<div data-role="page" id="team_members">


<div data-role="header" data-theme="b">
<h1>The Team</h1>

</div>

<div data-role="content">

<ul data-role="listview">
<li>

<h2 align="Center">Jessica Farias</h2>


<p align="Center">Major: MIS </p>

<p align="Center">jxf101320@utdallas.edu </p>


37

<p align="Center" class="notes"> Responsibility:Front End </p>

</li>
<li>

<h2 align="Center">Andrian Chapa</h2>


<p align="Center">Major: MIS </p>

<p align="Center">axc118130@utdallas.edu </p>

<p align="Center" class="notes"> Responsibility:Front End </p>

</li>
<li>

<h2 align="Center">Kwame Addo</h2>


<p align="Center">Major: MIS </p>

<p align="Center">Contact info</p>

<p align="Center" class="notes"> Responsibility:Middleware

Development </p>
</li>
<li>

<h2 align="Center">Jimmy Phan</h2>


<p align="Center">Major: MIS </p>

<p align="Center">jxp142430@utdallas.edu </p>

<p align="Center" class="notes"> Responsibility:Middleware

Development </p>
</li>
<li>

<h2 align="Center">Mike Easton</h2>


<p align="Center">Major: MIS </p>

<p align="Center">axc118130@utdallas.edu </p>

<p align="Center" class="notes"> Responsibility:Back End </p>


38

</li>
<li>

<h2 align="Center">Erick Alvarez</h2>


<p align="Center">Major: MIS </p>

<p align="Center">ena130030@utdallas.edu </p>

<p align="Center" class="notes"> Responsibility:Back End </p>

</li>

</ul>

</div>

<div data-role="footer" data-position="fixed" data-id="nav" data-theme="b">


<div data-role="navbar">
<ul>

<li><a href="#home">Home</a></li>

<li><a href="#team" class="ui-btn-active ui-state-

persist">Team</a></li>

<li><a href="#project">Project</a></li>

</ul>

</div>

</div>

</div>

<div data-role="page" id="project">

<div data-role="header" data-theme="b">


<h1>The Project</h1>

</div>

39

<div data-role="content">

<div style="text-align: center;">


<h2>BACulator</h2>

</div>

<p align="Center"><b>Disclaimer

Your actual BAC is dependent on many complex factors, including

your emotional and physical condition and health, and what you've recently

ingested (including food, water, medications and other drugs). No blood/breath


alcohol calculator is 100% accurate.

The best that can be done is a rough estimation of your BAC level.

You should not consider this to be a guideline for how much you can drink and
still drive responsibly, or avoid being arrested!
<br>

The best policy is don't drink and drive. Period.

<br>

NOTE: The basic formula for estimating a person's blood/breath

alcohol concentration comes from the National Highway Traffic Safety


Administration.</b></p>
<br>

<p><a href="user_sign_in.php" data-role="button">Run

Application</a></p>
</div>

<div data-role="footer" data-position="fixed" data-id="nav" data-theme="b">


<div data-role="navbar">
<ul>

<li><a href="start.php">Home</a></li>
<li><a href="#team">Team</a></li>

40

<li><a href="#project" class="ui-btn-active ui-state-

persist">Project</a></li>
</ul>

</div>

</div>

</div>

</body>
</html>

user_change_password.php
<?php
/**

* File name: user_change_password.php


* User: mwa6

* Date: 11/09/2014

* Time: 4:08 PM PM

* To change this template use File | Settings | File Templates.


*/

?>
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8" >


<title>BACulator</title>
<!--[if IE]>
41

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!--[if lt IE 9]>

<script src="http://ie7-

js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

<meta name="viewport" content="width=device-width, initial-scale=1,

maximum-scale=1">

<!-- USE LATEST VERSION OF JQUERY MOBILE - MUST RUN IN

CHROME for the -->

<link rel="stylesheet" href="jquery.ui.datepicker.mobile.css" />


<script src="jQuery.ui.datepicker.js"></script>

<script src="jquery.ui.datepicker.mobile.js"></script>
<link rel="stylesheet"

href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-

1.4.1.min.js"></script
</head>
<body>

42

<div data-role="page" id="change_password">


<div data-role="header" data-theme="b">
<h1>BACulator</h1>

<a href="user_sign_in.php" data-icon="power" class="ui-btn-right" data-

theme="a">Sign Out</a>
</div>

<div data-role="content">
<div style="text-align: center;">

<h2>CHANGE PASSWORD</h2>

</div>

<form method="post"

action="user_change_password_dataprocess.php">
<div data-role="fieldcontain">

<label for="email">Email:</label>

<input type="email" name="email" id="email">

<label for="current_password">Current password: </label>


<input type="password" name="current_password"

id="current_password">

<label for="new_password">New password: </label>


<input type="password" name="new_password"

id="new_password">
</div>

<div style="text-align: center;">

<input type="submit" data-inline="true" value="Submit">


43

</div>

</form>
</div>

<div data-role="footer" data-position="fixed" data-id="nav" data-theme="b">


<div data-role="navbar">
<ul>

<li><a href="start.php">Home</a></li>

<li><a href="list_features.php" class="ui-btn-active ui-state-

persist">Feature List</a></li>

<li><a href="user_sign_in.php">Sign In</a></li>

</ul>

</div>

</div>

</div>

</body>
</html>
<?php
/**

* File name: user_change_password_dataprocess.php


* User: mwa6

* Date: 11/09/2014
* Time: 4:10 PM

* To change this template use File | Settings | File Templates.


44

*/

?>
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8" >


<title>BACulator</title>
<!--[if IE]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!--[if lt IE 9]>

<script src="http://ie7-

js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

<meta name="viewport" content="width=device-width, initial-scale=1,

maximum-scale=1">

<!-- USE LATEST VERSION OF JQUERY MOBILE - MUST RUN IN

CHROME for the -->

<link rel="stylesheet" href="jquery.ui.datepicker.mobile.css" />


<script src="jQuery.ui.datepicker.js"></script>

45

<script src="jquery.ui.datepicker.mobile.js"></script>
<link rel="stylesheet"

href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-

1.4.1.min.js"></script
</head>
<body>

<?php // Start of PHP code


// BE CAREFUL! THE PATH MUST BE CORRECT, especially
/MIS4312/mwa?

require_once($_SERVER['DOCUMENT_ROOT'].'/MIS4312/mwa6/config.php')
;

// Get the new user's email and password from the form
$anEmail = $_POST["email"];

$aCurrentPassword = $_POST["current_password"];
$aNewPassword = $_POST["new_password"];
/************

echo "Email: " . $anEmail . "<br>\n";

echo "Current Password: " . $aCurrentPassword . "<br>\n";


echo "New Password: " . $aNewPassword . "<br>\n";

46

print ("<br><br>");
*************/

// Verify to be sure that no such account has been created in the system
try{

//$conn = new PDO("mysql:host=localhost; dbname=mis4312", "DBAdmin",

"dbadminpswd");

$conn = new PDO($dsn, $DBAname, $DBApassword);

// $sqlcmd: using prepare

$sqlcmd = $conn->prepare( "SELECT * FROM users WHERE email =

:email and password = :password" );

$sqlcmd->bindValue( ":email", $anEmail, PDO::PARAM_STR );


$sqlcmd->bindValue( ":password", $aCurrentPassword,

PDO::PARAM_STR );

// $sqlcmd: execute --> results stored right in $sqlcmd


$sqlcmd->execute();

// Count number of retrieved rows right in $sqlcmd


// IMPORTANT NOTES:

// CANNOT FETCH AND THEN COUNT LIKE THIS: $results = $sqlcmd-

>fetch(); $count = $sqlcmd->rowCount();


/***********

print("Return number of rows that were retrieved:\n");


$count = $sqlcmd->rowCount();

print("Retrieve $count rows.\n");


print ("<br><br>");

47

************/
// Scan through the result array to print out all the rows
// IMPORTANT NOTES:

// CANNOT FETCH AND THEN foreach LIKE THIS: $results = $sqlcmd-

>fetch(); foreach ($results as $arow)


foreach ($sqlcmd as $arow) {
}

print $arow["id"] . "-" . $arow["email"] . "-" . $arow["password"] ."<br/>";

print ("<br><br>");
// IMPORTANT NOTES:

// At this point, the cursor of $users is already at the end of the array
// If we would to scan through the array of results (rows) again,
// we need to re-execute the command

// IF WE FETCH() WITHOUT RE-EXECUTE

// $rows = $sqlcmd->fetch(); --> NO row is fetched --> $rows: NULL


// IMPORTANT NOTES: MUST RE-EXECUTE $sqlcmd
$sqlcmd->execute();

$rows = $sqlcmd->fetch();
if ( $rows ) {

// An account with the credentials exist in the system

// READY to update the record --> change the password


// Prepare and bind values to the command
48

$sqlcmd2 = $conn->prepare("UPDATE users SET password = :password

WHERE email = :email" );

$sqlcmd2->bindValue( ":email", $anEmail, PDO::PARAM_STR );


$sqlcmd2->bindValue( ":password", $aNewPassword,

PDO::PARAM_STR );

// Execute the command

$isOK = $sqlcmd2->execute();
// Check the result
if ($isOK){

/**********

print ("<br><br>");

print("The password has been successfully changed.<br/>\n");


print("You're ready to sign in with the new password.<br/>\n");
print("Thank you for using our service.<br/>\n");
***********/

// Redirect to another mobile web page to handle the scenario


}

header("Location:/MIS4312/mwa6/change_password_success.php");

else {
/**********

print ("<br><br>");

print("For some reason, the system could not perform the

task.<br/>\n");

49

print("Please try to do it later.<br/>\n");

print("Thank you for using our service.<br/>\n");


***********/

// Redirect to another mobile web page to handle the scenario


header("Location:/MIS4312/mwa6/user_perform_task_failed_no_reason.php")
;

else {

// NO existing account with the same email address has been created in

the system

// CANNOT update the account --> CANNOT change the password


/************

print("No account with the same credentials exists in the

system.<br/>\n");

print("Please try to repeat the task.<br/>\n");

print("Thank you for using our service.<br/>\n");


*************/

// Redirect to another mobile web page to handle the scenario


header("Location:/MIS4312/mwa6/user_perform_task_failed_no_account.php"
);

}
50

// Close the connection


}

$conn = null;

catch(PDOException $e) {
}

echo $e->getMessage();

?> <!-- End of PHP code -->


</body>
</html>
<?php
/**

* File name: user_change_password_success.php


* User: mwa6

* Date: 11/09/2014
* Time: 11:30 AM

* To change this template use File | Settings | File Templates.


*/

?>
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8" >

51

<title>BACulator</title>
<!--[if IE]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!--[if lt IE 9]>

<script src="http://ie7-

js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

<meta name="viewport" content="width=device-width, initial-scale=1,

maximum-scale=1">

<!-- USE LATEST VERSION OF JQUERY MOBILE - MUST RUN IN

CHROME for the -->

<link rel="stylesheet" href="jquery.ui.datepicker.mobile.css" />


<script src="jQuery.ui.datepicker.js"></script>

<script src="jquery.ui.datepicker.mobile.js"></script>
<link rel="stylesheet"

href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-

1.4.1.min.js"></script
</head>

52

<body>
<div data-role="page" id="sign_in">

<div data-role="header" data-theme="b">


<h1>BACulator</h1>

</div>

<div data-role="content">
<div>

<h5>The password has been successfully changed.</h5>


<h5>You're ready to sign in with the new password.</h5>
<h5>Thank you very much for using our service.</h5>

</div>

<div style="text-align: center;">


<h2>SIGN IN</h2>

</div>

<form method="post" action="user_sign_in_dataprocess.php">


<div data-role="fieldcontain">

<label for="email">Email:</label>

<input type="email" name="email" id="email">


<label for="password">Password: </label>

<input type="password" name="password" id="password">

</div>

53

<div style="text-align: center;">

<input type="submit" data-inline="true" value="Submit">

</div>

</form>

<div style="text-align: center;">

<h5>Without an account, please <a href="user_sign_up.php">sign

up</a>.</h5>
</div>

</div>
<div data-role="footer" data-position="fixed" data-id="nav" data-theme="b">
<div data-role="navbar">
<ul>

<li><a href="start.php">Home</a></li>

<li><a href="start#team.php">Team</a></li>

<li><a href="start#project.php" class="ui-btn-active ui-state-

persist">Project</a></li>
</ul>

</div>

</div>

</div>

</body>
</html>
<?php

54

/**

* File name: user_delete_account.php


* User: mwa6

* Date 11/09/2014
* Time: 4:25 PM

* To change this template use File | Settings | File Templates.


*/

?>
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8" >


<title>BACulator</title>
<!--[if IE]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!--[if lt IE 9]>

<script src="http://ie7-

js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

<meta name="viewport" content="width=device-width, initial-scale=1,

maximum-scale=1">

55

<!-- USE LATEST VERSION OF JQUERY MOBILE - MUST RUN IN

CHROME for the -->

<link rel="stylesheet" href="jquery.ui.datepicker.mobile.css" />


<script src="jQuery.ui.datepicker.js"></script>

<script src="jquery.ui.datepicker.mobile.js"></script>
<link rel="stylesheet"

href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-

1.4.1.min.js"></script
</head>
<body>

<div data-role="page" id="delete_account">

<div data-role="header" data-theme="b">


<h1>BACulator</h1>

<a href="user_sign_in.php" data-icon="power" class="ui-btn-right" data-

theme="a">Sign Out</a>
</div>

<div data-role="content">
<div style="text-align: center;">

<h2>DELETE ACCOUNT</h2>
56

</div>
<form method="post" action="user_delete_account_dataprocess.php">
<div data-role="fieldcontain">

<label for="email">Email:</label>

<input type="email" name="email" id="email">


<label for="password">password: </label>

<input type="password" name="password" id="password">

</div>

<div style="text-align: center;">

<input type="submit" data-inline="true" value="Submit">

</div>

</form>
</div>

<div data-role="footer" data-position="fixed" data-id="nav" data-theme="b">


<div data-role="navbar">
<ul>

<li><a href="start.php">Home</a></li>

<li><a href="list_features.php" class="ui-btn-active ui-state-

persist">Feature List</a></li>

<li><a href="user_sign_in.php">Sign In</a></li>

</ul>

</div>

</div>

</div>

57

</body>
</html>
<?php
/**

* File name: user_delete_account_dataprocess.php


* User: mwa6

* Date: 11/09/2014
* Time: 4:30 PM

* To change this template use File | Settings | File Templates.


*/

?>
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8" >


<title>BACulator</title>
<!--[if IE]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!--[if lt IE 9]>

<script src="http://ie7-

js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
58

<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1,

maximum-scale=1">

<!-- USE LATEST VERSION OF JQUERY MOBILE - MUST RUN IN

CHROME for the -->

<link rel="stylesheet" href="jquery.ui.datepicker.mobile.css" />


<script src="jQuery.ui.datepicker.js"></script>

<script src="jquery.ui.datepicker.mobile.js"></script>
<link rel="stylesheet"

href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-

1.4.1.min.js"></script
</head>
<body>

<?php // Start PHP code


// BE CAREFUL! THE PATH MUST BE CORRECT, especially
/MIS4312/mwa?

require_once($_SERVER['DOCUMENT_ROOT'].'/MIS4312/mwa6/config.php')
;

59

// Get the new user's email and password


$anEmail = $_POST["email"];

$aPassword = $_POST["password"];
/***********

echo "Email: " . $anEmail . "<br>\n";

echo "Password: " . $aPassword . "<br>\n";


print ("<br><br>");
************/

// Verify to be sure that no such account has been created in the system
try{

//$conn = new PDO("mysql:host=localhost; dbname=mis4312", "DBAdmin",

"dbadminpswd");

$conn = new PDO($dsn, $DBAname, $DBApassword);

// $sqlcmd: using prepare

$sqlcmd = $conn->prepare( "SELECT * FROM users WHERE email =

:email and password = :password" );

$sqlcmd->bindValue( ":email", $anEmail, PDO::PARAM_STR );

$sqlcmd->bindValue( ":password", $aPassword, PDO::PARAM_STR );


// $sqlcmd: execute --> results stored right in $sqlcmd
$sqlcmd->execute();

// Count number of retrieved rows right in $sqlcmd


// IMPORTANT NOTES:

60

// CANNOT FETCH AND THEN COUNT LIKE THIS: $results = $sqlcmd-

>fetch(); $count = $sqlcmd->rowCount();


/***********

print("Return number of rows that were retrieved:\n");


$count = $sqlcmd->rowCount();

print("Retrieve $count rows.\n");


print ("<br><br>");
************/

// Scan through the result array to print out all the rows
// IMPORTANT NOTES:

// CANNOT FETCH AND THEN foreach LIKE THIS: $results = $sqlcmd-

>fetch(); foreach ($results as $arow)


/**********

foreach ($sqlcmd as $arow) {

print $arow["id"] . "-" . $arow["email"] . "-" . $arow["password"] ."<br/>";


}

print ("<br><br>");
***********/

// IMPORTANT NOTES:

// At this point, the cursor of $users is already at the end of the array
// If we would to scan through the array of results (rows) again,
// we need to re-execute the command

// IF WE FETCH() WITHOUT RE-EXECUTE

// $rows = $sqlcmd->fetch(); --> NO row is fetched --> $rows: NULL


61

// IMPORTANT NOTES: MUST RE-EXECUTE $sqlcmd


$sqlcmd->execute();

$rows = $sqlcmd->fetch();
if ( $rows ) {

// An account with the credentials exist in the system

// READY to update the record --> change the password


// Prepare and bind values to the command

$sqlcmd2 = $conn->prepare("DELETE FROM users WHERE email =

:email" );

$sqlcmd2->bindValue( ":email", $anEmail, PDO::PARAM_STR );


// Execute the command

$isOK = $sqlcmd2->execute();
// Check the result
if ($isOK){

/**********

print ("<br><br>");

print("You account has been successfully deleted.<br/>\n");


print("Thank you for using our service.<br/>\n");
***********/

// Redirect to another mobile web page to handle the scenario


}

header("Location:/MIS4312/mwa6/delete_account_success.php");

62

else {

/**********

print ("<br><br>");

print("For some reason, the system could not delete your

account.<br/>\n");

print("Please try to do it later.<br/>\n");

print("Thank you for using our service.<br/>\n");


***********/

// Redirect to another mobile web page to handle the scenario


header("Location:/MIS4312/mwa6/user_perform_task_failed_no_reason.php")
;

else {

// NO existing account with the same email address has been created in

the system

// CANNOT update the account --> CANNOT change the password


/***********

print("No account with the same credentials exists in the

system.<br/>\n");

print("Please start the process of changing the password again.<br/>\n");


print("Thank you for using our service.<br/>\n");
************/

63

// Redirect to another mobile web page to handle the scenario


header("Location:/MIS4312/mwa6/user_perform_task_failed_no_account.php"
);

}
// Close the connection

$conn = null;

catch(PDOException $e) {
}

echo $e->getMessage();

?> <!-- End of PHP code -->


</body>
</html>
<?php
/**

* File name: user_delete_account_success.php


* User: mwa6

* Date: 11/09/2014
* Time: 11:30 AM

* To change this template use File | Settings | File Templates.


*/

?>
64

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8" >


<title>BACulator</title>
<!--[if IE]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!--[if lt IE 9]>

<script src="http://ie7-

js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

<meta name="viewport" content="width=device-width, initial-scale=1,

maximum-scale=1">

<!-- USE LATEST VERSION OF JQUERY MOBILE - MUST RUN IN

CHROME for the -->

<link rel="stylesheet" href="jquery.ui.datepicker.mobile.css" />


<script src="jQuery.ui.datepicker.js"></script>

<script src="jquery.ui.datepicker.mobile.js"></script>
<link rel="stylesheet"

href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css" />
65

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-

1.4.1.min.js"></script
</head>
<body>

<div data-role="page" id="sign_in">

<div data-role="header" data-theme="b">


<h1>BACulator</h1>

</div>

<div data-role="content">
<div>

<h5>Your account has been successfully deleted.</h5>


<h5>Thank you very much for using our service.</h5>

</div>

<div data-role="footer" data-position="fixed" data-id="nav" data-

theme="b">

<div data-role="navbar">
<ul>

<li><a href="start.php">Home</a></li>

<li><a href="start#team.php">Team</a></li>
66

<li><a href="start#project.php class="ui-btn-active ui-state-

persist"">Project</a></li>
</ul>

</div>

</div>

</div>
</body>
</html>
<?php
/**

* File Name: user_manage_account.php


* User: Jimmy Phan
* Date: 12/1/14

* Time: 4:33 PM
*/

?>
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8" >


<title>Mobile Web Applications</title>
<!--[if IE]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
67

<![endif]-->

<!--[if lt IE 9]>

<script src="http://ie7-

js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

<meta name="viewport" content="width=device-width, initial-scale=1,

maximum-scale=1">
<!--

<link rel="stylesheet"

href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-

1.4.1.min.js"></script
-->

<link rel="stylesheet"

href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-

1.4.4.min.js"></script>
<style>

p.notes {font-weight: bold}

</style>
</head>

68

<body>
<div data-role="page" id="manage_user_accounts">
<div data-role="header" data-theme="b">
<h1>Mobile App Name</h1>

<a href="user_sign_in.php" data-icon="power" class="ui-btn-right" data-

theme="a">Sign Out</a>
</div>

<div data-role="content">
<div style="text-align: center;">

<h2>Manage User Accounts</h2>


<br><br>

</div>

<ul data-role="listview">

<li><a href="user_change_password.php">Change password</a></li>


<li><a href="user_delete_account.php">Delete account</a></li>

</ul>
</div>

<div data-role="footer" data-position="fixed" data-id="nav" data-theme="b">


<div data-role="navbar">
<ul>

<li><a href="start.php">Home</a></li>
69

<li><a href="list_features.php" class="ui-btn-active ui-state-

persist">Feature List</a></li>

<li><a href="user_sign_in.php">Sign In</a></li>

</ul>

</div>

</div>

</div>

</body>
</html>
<?php
/**

* File name: user_perform_task_failed_no_account.php


* User: Jimmy Phan
* Date: 11/09/2014
* Time: 12:22 PM

* To change this template use File | Settings | File Templates.


*/

?>
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8" >


<title>Mobile Web Applications</title>
<!--[if IE]>
70

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!--[if lt IE 9]>

<script src="http://ie7-

js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

<meta name="viewport" content="width=device-width, initial-scale=1,

maximum-scale=1">

<!-- USE LATEST VERSION OF JQUERY MOBILE - MUST RUN IN

CHROME for the -->

<link rel="stylesheet" href="jquery.ui.datepicker.mobile.css" />


<script src="jQuery.ui.datepicker.js"></script>

<script src="jquery.ui.datepicker.mobile.js"></script>
<link rel="stylesheet"

href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-

1.4.1.min.js"></script
</head>
<body>

71

<div data-role="page" id="sign_in">

<div data-role="header" data-theme="b">


<h1>BACulator</h1>

</div>

<div data-role="content">
<div>

<h5>No account with the same credentials exists in the system.</h5>


<h5>Please try to repeat the task.</h5>

<h5>Thank you very much for using our service.</h5>

</div>

<div data-role="footer" data-position="fixed" data-id="nav" data-

theme="b">

<div data-role="navbar">
<ul>

<li><a href="start.php">Home</a></li>

<li><a href="start#team.php">Team</a></li>

<li><a href="start#project.php class="ui-btn-active ui-state-

persist"">Project</a></li>
</ul>

</div>

</div>

</div>

72

</body>
</html>
<?php
/**

* File name: user_perform_task_failed_no_reason.php


* User: Jimmy Phan
* Date: 11/09/2014
* Time: 11:30 AM

* To change this template use File | Settings | File Templates.


*/

?>
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8" >


<title>Mobile Web Applications</title>
<!--[if IE]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!--[if lt IE 9]>

<script src="http://ie7-

js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

73

<meta name="viewport" content="width=device-width, initial-scale=1,

maximum-scale=1">

<!-- USE LATEST VERSION OF JQUERY MOBILE - MUST RUN IN

CHROME for the -->

<link rel="stylesheet" href="jquery.ui.datepicker.mobile.css" />


<script src="jQuery.ui.datepicker.js"></script>

<script src="jquery.ui.datepicker.mobile.js"></script>
<link rel="stylesheet"

href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-

1.4.1.min.js"></script
</head>
<body>

<div data-role="page" id="sign_in">

<div data-role="header" data-theme="b">


<h1>BACulator</h1>

</div>

<div data-role="content">
<div>
74

<h5>For some reason, the system could not perform the task right

now.</h5>

<h5>Please try to do it later.</h5>

<h5>Thank you very much for using our service.</h5>

</div>

<div data-role="footer" data-position="fixed" data-id="nav" data-

theme="b">

<div data-role="navbar">
<ul>

<li><a href="start.php">Home</a></li>

<li><a href="start#team.php">Team</a></li>

<li><a href="start#project.php class="ui-btn-active ui-state-

persist"">Project</a></li>
</ul>

</div>

</div>

</div>
</body>
</html>
<?php
?>

<!DOCTYPE html>
75

<html lang="en">
<head>

<meta charset="UTF-8" >


<title>BACulator</title>
<!--[if IE]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!--[if lt IE 9]>

<script src="http://ie7-

js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

<meta name="viewport" content="width=device-width, initial-scale=1,

maximum-scale=1">

<!-- USE LATEST VERSION OF JQUERY MOBILE - MUST RUN IN

CHROME for the -->

<link rel="stylesheet" href="jquery.ui.datepicker.mobile.css" />


<script src="jQuery.ui.datepicker.js"></script>

<script src="jquery.ui.datepicker.mobile.js"></script>
<link rel="stylesheet"

href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

76

<script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-

1.4.1.min.js"></script
</head>
<body>

<div data-role="page" id="sign_in">

<div data-role="header" data-theme="b">


<h1>BACulator</h1>

</div>

<div data-role="content">
<div style="text-align: center;">
<h2>SIGN IN</h2>

</div>

<form method="post" action="user_sign_in_dataprocess.php">


<div data-role="fieldcontain">

<label for="email">Email:</label>

<input type="email" name="email" id="email">


<label for="password">Password: </label>

<input type="password" name="password" id="password">

</div>

<div style="text-align: center;">

<input type="submit" data-inline="true" value="Submit">


77

</div>

</form>

<div style="text-align: center;">

<h5>Without an account, please <a href="user_sign_up.php">sign

up</a>.</h5>
</div>

</div>
<div data-role="footer" data-position="fixed" data-id="nav" data-theme="b">
<div data-role="navbar">
<ul>

<li><a href="start.php">Home</a></li>

<li><a href="start#team.php">Team</a></li>

<li><a href="start#project.php" class="ui-btn-active ui-state-

persist">Project</a></li>
</ul>

</div>

</div>

</div>

</body>
</html>
<?php
/**

* Created by PhpStorm.
78

* User: Khamsing

* Date: 12/2/2014
* Time: 6:15 AM
*/

?>
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8" >


<title>BACulator</title>
<!--[if IE]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!--[if lt IE 9]>

<script src="http://ie7-

js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

<meta name="viewport" content="width=device-width, initial-scale=1,

maximum-scale=1">

<!-- USE LATEST VERSION OF JQUERY MOBILE - MUST RUN IN

CHROME for the -->

79

<link rel="stylesheet" href="jquery.ui.datepicker.mobile.css" />


<script src="jQuery.ui.datepicker.js"></script>

<script src="jquery.ui.datepicker.mobile.js"></script>
<link rel="stylesheet"

href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-

1.4.1.min.js"></script
</head>
<body>

<?php // Start of PHP code


$anEmail = $_POST["email"];

$aPassword = $_POST["password"];
// BE CAREFUL! THE PATH MUST BE CORRECT, especially
/MIS4312/mwa?

require_once($_SERVER['DOCUMENT_ROOT'].'/config.php');
// $conn = new PDO( DB_DSN, DB_USERNAME, DB_PASSWORD );
try{
80

//$conn = new PDO("mysql:host=localhost; dbname=mis4312",

"DBAname", "dbadminpswd");

$conn = new PDO($dsn, $DBAname, $DBApassword);

// $sqlcmd: using prepare

$sqlcmd = $conn->prepare( "SELECT * FROM users WHERE email = " +

$anEmail + " and password = " + $aPassword);

$sqlcmd->bindValue( ":email", $anEmail, PDO::PARAM_STR );

$sqlcmd->bindValue( ":password", $aPassword, PDO::PARAM_STR );


// $sqlcmd: execute --> results stored right in $sqlcmd
$sqlcmd->execute();

// Count number of retrieved rows right in $sqlcmd


// IMPORTANT NOTES:

// CANNOT FETCH AND THEN COUNT LIKE THIS: $results = $sqlcmd-

>fetch(); $count = $sqlcmd->rowCount();


/*****

print("NOTES: Here is the number of rows that were retrieved:\n");


$count = $sqlcmd->rowCount();

print("Retrieve $count rows:<br>\n");

//print ("<br><br>");
******/

// Scan through the result array to print out all the rows
// IMPORTANT NOTES:

// CANNOT FETCH AND THEN foreach LIKE THIS: $results = $sqlcmd-

>fetch(); foreach ($results as $arow)

81

// print("NOTES: Here is the contents of the rows that were retrieved:\n");


foreach ($sqlcmd as $arow) {
}

print $arow["id"] . "-" . $arow["email"] . "-" . $arow["password"] ."<br/>";

// print ("<br><br>");
// IMPORTANT NOTES:

// At this point, the cursor of $users is already at the end of the array
// If we would to scan through the array of results (rows) again,
// we need to re-execute the command

// IF WE FETCH() WITHOUT RE-EXECUTE

// $rows = $sqlcmd->fetch(); --> NO row is fetched --> $rows: NULL


// IMPORTANT NOTES: MUST RE-EXECUTE $sqlcmd
$sqlcmd->execute();

$rows = $sqlcmd->fetch();
// print("NOTES: Here is how the results of login is processsed:<br>\n");
// print ("<br>");
if ( $rows ) {

// echo "Welcome ". $anEmail . "<br>\n";

// echo "You have successfully logged in the app. Enjoy!!! <br>\n";


// echo '</pre>';

// Redirect to another mobile web page to handle the scenario


}

header("Location:/MIS4312/mwa6/list_features.php");

82

else {
// echo "The log in has failed. <br>\n";

// echo "Please log in again or sign up for a new account before you can

use the app. <br>\n";

// Redirect to another mobile web page to handle the scenario


}

header("Location:/MIS4312/mwa6/user_sign_in_failed.php");

// Close the connection


}

$conn = null;

catch(PDOException $e) {
}

echo $e->getMessage();

?> <!-- End of PHP code -->


</body>
</html>
<?php
/**

* Created by PhpStorm.
* User: Khamsing

* Date: 12/2/2014
* Time: 6:15 AM
*/

83

?>
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8" >


<title>BACulator</title>
<!--[if IE]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!--[if lt IE 9]>

<script src="http://ie7-

js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

<meta name="viewport" content="width=device-width, initial-scale=1,

maximum-scale=1">

<!-- USE LATEST VERSION OF JQUERY MOBILE - MUST RUN IN

CHROME for the -->

<link rel="stylesheet" href="jquery.ui.datepicker.mobile.css" />


<script src="jQuery.ui.datepicker.js"></script>

<script src="jquery.ui.datepicker.mobile.js"></script>

84

<link rel="stylesheet"

href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-

1.4.1.min.js"></script
</head>
<body>

<div data-role="page" id="sign_in">

<div data-role="header" data-theme="b">


<h1>Mobile App Name</h1>

</div>

<div data-role="content">
<div>

<h5>The sign-in has failed.</h5>

<h5>Please sign in again or sign up for a new account before you can

use the app.</h5>


</div>

<div style="text-align: center;">


<h2>SIGN IN</h2>

</div>

85

<form method="post" action="user_sign_in_dataprocess.php">


<div data-role="fieldcontain">

<label for="email">Email:</label>

<input type="email" name="email" id="email">


<label for="password">Password: </label>

<input type="password" name="password" id="password">

</div>

<div style="text-align: center;">

<input type="submit" data-inline="true" value="Submit">

</div>

</form>

<div style="text-align: center;">

<h5>Without an account, please <a href="user_sign_up.php">sign

up</a>.</h5>
</div>

</div>
<div data-role="footer" data-position="fixed" data-id="nav" data-theme="b">
<div data-role="navbar">
<ul>

<li><a href="start.php">Home</a></li>

<li><a href="start#team.php">Team</a></li>

<li><a href="start#project.php class="ui-btn-active ui-state-

persist"">Project</a></li>
</ul>

86

</div>

</div>

</div>

</body>
</html>
<?php
/**

* Created by PhpStorm.
* User: Khamsing

* Date: 12/2/2014
* Time: 4:11 PM
*/

?>
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8" >


<title>BACulator</title>
<!--[if IE]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!--[if lt IE 9]>

87

<script src="http://ie7-

js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

<meta name="viewport" content="width=device-width, initial-scale=1,

maximum-scale=1">

<!-- USE LATEST VERSION OF JQUERY MOBILE - MUST RUN IN

CHROME for the -->

<link rel="stylesheet" href="jquery.ui.datepicker.mobile.css" />


<script src="jQuery.ui.datepicker.js"></script>

<script src="jquery.ui.datepicker.mobile.js"></script>
<link rel="stylesheet"

href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-

1.4.1.min.js"></script
</head>
<body>

<div data-role="page" id="sign_up">

<div data-role="header" data-theme="b">


<h1>Mobile App Name</h1>

88

</div>
<div data-role="content">
<div style="text-align: center;">
<h2>SIGN UP</h2>

</div>

<form method="post" action="user_sign_up_dataprocess.php">


<div data-role="fieldcontain">

<label for="email">Email:</label>

<input type="email" name="email" id="email">


<label for="password">Password: </label>

<input type="password" name="password" id="password">


<label for="retype_password">Retype password: </label>
<input type="password" name="retype_password"

id="retype_password">
</div>

<div style="text-align: center;">

<input type="submit" data-inline="true" value="Submit">

</div>

</form>
</div>

<div data-role="footer" data-position="fixed" data-id="nav" data-theme="b">


<div data-role="navbar">
<ul>

89

<li><a href="start.php">Home</a></li>

<li><a href="start#team.php">Team</a></li>

<li><a href="start#project.php" class="ui-btn-active ui-state-

persist">Project</a></li>
</ul>

</div>

</div>

</div>

</body>
</html>
<?php
/**

* Created by PhpStorm.
* User: Khamsing

* Date: 12/2/2014
* Time: 4:12 PM
*/

?>
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8" >


<title>BACulator</title>
90

<!--[if IE]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!--[if lt IE 9]>

<script src="http://ie7-

js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

<meta name="viewport" content="width=device-width, initial-scale=1,

maximum-scale=1">

<!-- USE LATEST VERSION OF JQUERY MOBILE - MUST RUN IN

CHROME for the -->

<link rel="stylesheet" href="jquery.ui.datepicker.mobile.css" />


<script src="jQuery.ui.datepicker.js"></script>

<script src="jquery.ui.datepicker.mobile.js"></script>
<link rel="stylesheet"

href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-

1.4.1.min.js"></script
</head>

91

<body>
<?php // Start of PHP code
// BE CAREFUL! THE PATH MUST BE CORRECT, especially
/MIS4312/mwa?

require_once($_SERVER['DOCUMENT_ROOT'].'/config.php');
// Get the new user's email and password
$anEmail = $_POST["email"];

$aPassword = $_POST["password"];

$aRetypePassword = $_POST["retype_password"];
/***********

print("NOTES: Here are the inputs entered by the user:<br>\n");


echo "Email: " . $anEmail . "<br>\n";

echo "Password: " . $aPassword . "<br>\n";

echo "Retype password: " . $aRetypePassword . "<br>\n";


print ("<br><br>");
************/

// Verify that password and retype_password must be matched


if (strcmp($aPassword, $aRetypePassword) != 0) {
// strcmp() != 0 --> NOT matched
/*******

print("The password and the retyped password are not matched.<br/>\n");


92

print("Please sign up again.<br/>\n");

print("Thank you for being interested in our service.<br/>\n");


********/

// Redirect to another mobile web page to handle the scenario


}

header("Location:/MIS4312/mwa6/sign_up_password_not_matched.php");

else { // Start sign-up code


// Verify to be sure that no such account has been created in the system
try{

//$conn = new PDO("mysql:host=localhost; dbname=mis4312proj",

"DBAdmin", "dbadminpswd");

$conn = new PDO($dsn, $DBAname, $DBApassword);


// $sqlcmd: using prepare

$sqlcmd = $conn->prepare( "SELECT * FROM users WHERE email =

:email and password = :password" );

$sqlcmd->bindValue( ":email", $anEmail, PDO::PARAM_STR );

$sqlcmd->bindValue( ":password", $aPassword, PDO::PARAM_STR );


// $sqlcmd: execute --> results stored right in $sqlcmd
$sqlcmd->execute();

// Count number of retrieved rows right in $sqlcmd


// IMPORTANT NOTES:

// CANNOT FETCH AND THEN COUNT LIKE THIS: $results = $sqlcmd-

>fetch(); $count = $sqlcmd->rowCount();

93

/***********

print("NOTES: Here is the number of rows that were retrieved.<br/>\n");


print("NOTES: If any row is retrieved, the account already

exists.<br/>\n");

$count = $sqlcmd->rowCount();

print("Retrieve $count rows.\n");


print ("<br><br>");
************/

// Scan through the result array to print out all the rows
// IMPORTANT NOTES:

// CANNOT FETCH AND THEN foreach LIKE THIS: $results = $sqlcmd-

>fetch(); foreach ($results as $arow)


foreach ($sqlcmd as $arow) {
}

print $arow["id"] . "-" . $arow["email"] . "-" . $arow["password"] ."<br/>";

print ("<br><br>");
// IMPORTANT NOTES:

// At this point, the cursor of $users is already at the end of the array
// If we would to scan through the array of results (rows) again,
// we need to re-execute the command

// IF WE FETCH() WITHOUT RE-EXECUTE

// $rows = $sqlcmd->fetch(); --> NO row is fetched --> $rows: NULL


// IMPORTANT NOTES: MUST RE-EXECUTE $sqlcmd
$sqlcmd->execute();

94

$rows = $sqlcmd->fetch();
if ( $rows ) {
/********

print("An account with the same email address has existed in the

system.<br/>\n");

print("Please register a new account with a different email

address.<br/>\n");

print("Thank you for using our service.<br/>\n");


*********/

// Redirect to another mobile web page to handle the scenario


}

header("Location:/MIS4312/mwa6/sign_up_failed_account_exist.php");

else {
// NO existing account with the same email address has been created

in the system

// READY to create a new account for the new user


// Prepare and bind values to the command

$sqlcmd2 = $conn->prepare( "INSERT INTO users (email, password)

VALUE (:email, :password)" );

$sqlcmd2->bindValue( ":email", $anEmail, PDO::PARAM_STR );

);

$sqlcmd2->bindValue( ":password", $aPassword, PDO::PARAM_STR

95

// Execute the command

$isOK = $sqlcmd2->execute();

// Check the result


if ($isOK){
/*******

print ("<br><br>");

print("A new account has been successfully created for

you.<br/>\n");

print("You're ready to sign in and use the service.<br/>\n");


print("Thank you for using our service.<br/>\n");
********/

// Redirect to another mobile web page to handle the scenario


}

header("Location:/MIS4312/mwa6/sign_up_success.php");

else {
/*******

print ("<br><br>");

print("For some reason, the system could not perform the task right

now.<br/>\n");

print("Please try to do it later.<br/>\n");

print("Thank you for using our service.<br/>\n");


********/

// Redirect to another mobile web page to handle the scenario


96

header("Location:/MIS4312/mwa6/user_perform_task_failed_no_reason.php")
;

// Close the connection


}

$conn = null;

catch(PDOException $e) {
}

echo $e->getMessage();

} // End of sign-up code


?> <!-- End of PHP code -->
</body>
</html>
<?php
/**

* Created by PhpStorm.
* User: Khamsing

* Date: 12/2/2014
* Time: 4:14 PM
*/

?>
97

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8" >


<title>BACulator</title>
<!--[if IE]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!--[if lt IE 9]>

<script src="http://ie7-

js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

<meta name="viewport" content="width=device-width, initial-scale=1,

maximum-scale=1">

<!-- USE LATEST VERSION OF JQUERY MOBILE - MUST RUN IN

CHROME for the -->

<link rel="stylesheet" href="jquery.ui.datepicker.mobile.css" />


<script src="jQuery.ui.datepicker.js"></script>

<script src="jquery.ui.datepicker.mobile.js"></script>

98

<link rel="stylesheet"

href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-

1.4.1.min.js"></script
</head>
<body>

<div data-role="page" id="sign_in">

<div data-role="header" data-theme="b">


<h1>Mobile App Name</h1>

</div>

<div data-role="content">
<div>

<h5>An account with the same email address has existed in the

system.</h5>

<h5>Please register a new account with a different email

address.</h5>

<h5>Thank you very much for using our service.</h5>

</div>

<div style="text-align: center;">


<h2>SIGN UP</h2>

99

</div>
<form method="post" action="user_sign_up_dataprocess.php">
<div data-role="fieldcontain">

<label for="email">Email:</label>

<input type="email" name="email" id="email">


<label for="password">Password: </label>

<input type="password" name="password" id="password">


<label for="retype_password">Retype password: </label>
<input type="password" name="retype_password"

id="retype_password">
</div>

<div style="text-align: center;">

<input type="submit" data-inline="true" value="Submit">

</div>

</form>
</div>

<div data-role="footer" data-position="fixed" data-id="nav" data-theme="b">


<div data-role="navbar">
<ul>

<li><a href="start.php">Home</a></li>

<li><a href="start#team.php">Team</a></li>

<li><a href="start#project.php class="ui-btn-active ui-state-

persist"">Project</a></li>
</ul>

100

</div>

</div>

</div>

</body>
</html>
<?php
/**

* Created by PhpStorm.
* User: Khamsing

* Date: 12/2/2014
* Time: 4:16 PM
*/

?>
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8" >


<title>BACulator</title>
<!--[if IE]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!--[if lt IE 9]>

101

<script src="http://ie7-

js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

<meta name="viewport" content="width=device-width, initial-scale=1,

maximum-scale=1">

<!-- USE LATEST VERSION OF JQUERY MOBILE - MUST RUN IN

CHROME for the -->

<link rel="stylesheet" href="jquery.ui.datepicker.mobile.css" />


<script src="jQuery.ui.datepicker.js"></script>

<script src="jquery.ui.datepicker.mobile.js"></script>
<link rel="stylesheet"

href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-

1.4.1.min.js"></script
</head>
<body>

<div data-role="page" id="sign_in">

<div data-role="header" data-theme="b">


<h1>Mobile App Name</h1>

102

</div>
<div data-role="content">
<div>

<h5>The password and retyped password are not matched.</h5>


<h5>Please sign up again.</h5>

<h5>Thank you very much for being interested in our service.</h5>

</div>

<div style="text-align: center;">


<h2>SIGN UP</h2>

</div>

<form method="post" action="user_sign_up_dataprocess.php">


<div data-role="fieldcontain">

<label for="email">Email:</label>

<input type="email" name="email" id="email">


<label for="password">Password: </label>

<input type="password" name="password" id="password">


<label for="retype_password">Retype password: </label>
<input type="password" name="retype_password"

id="retype_password">
</div>

<div style="text-align: center;">

<input type="submit" data-inline="true" value="Submit">

</div>

</form>

103

</div>
<div data-role="footer" data-position="fixed" data-id="nav" data-theme="b">
<div data-role="navbar">
<ul>

<li><a href="start.php">Home</a></li>

<li><a href="start#team.php">Team</a></li>

<li><a href="start#project.php class="ui-btn-active ui-state-

persist"">Project</a></li>
</ul>

</div>

</div>

</div>

</body>
</html>
<?php
/**

* Created by PhpStorm.
* User: Khamsing

* Date: 12/2/2014
* Time: 4:16 PM
*/

?>
<!DOCTYPE html>
104

<html lang="en">
<head>

<meta charset="UTF-8" >


<title>BACulator</title>
<!--[if IE]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!--[if lt IE 9]>

<script src="http://ie7-

js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

<meta name="viewport" content="width=device-width, initial-scale=1,

maximum-scale=1">

<!-- USE LATEST VERSION OF JQUERY MOBILE - MUST RUN IN

CHROME for the -->

<link rel="stylesheet" href="jquery.ui.datepicker.mobile.css" />


<script src="jQuery.ui.datepicker.js"></script>

<script src="jquery.ui.datepicker.mobile.js"></script>
<link rel="stylesheet"

href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

105

<script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-

1.4.1.min.js"></script
</head>
<body>

<div data-role="page" id="sign_in">

<div data-role="header" data-theme="b">


<h1>Mobile App Name</h1>

</div>

<div data-role="content">
<div>

<h5>A new account has been successfully created for you.</h5>


<h5>You're ready to sign in and use the service.</h5>
<h5>Thank you for using our service.</h5>

</div>

<div style="text-align: center;">


<h2>SIGN IN</h2>

</div>

<form method="post" action="user_sign_in_dataprocess.php">


<div data-role="fieldcontain">

<label for="email">Email:</label>
106

<input type="email" name="email" id="email">


<label for="password">Password: </label>

<input type="password" name="password" id="password">

</div>

<div style="text-align: center;">

<input type="submit" data-inline="true" value="Submit">

</div>

</form>

<div style="text-align: center;">

<h5>Without an account, please <a href="user_sign_up.php">sign

up</a>.</h5>
</div>

</div>
<div data-role="footer" data-position="fixed" data-id="nav" data-theme="b">
<div data-role="navbar">
<ul>

<li><a href="start.php">Home</a></li>

<li><a href="start#team.php">Team</a></li>

<li><a href="start#project.php" class="ui-btn-active ui-state-

persist">Project</a></li>
</ul>

</div>

</div>

</div>

107

</body>
</html>

108

Potrebbero piacerti anche