Code for JacApp (HTML and JavaScript)

HTML

<!DOCTYPE html>
<html>
<head>
<title>JAC App</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”css/jquery.mobile-1.0.1.min.css” />
<script src=”js/jquery-1.7.1.min.js”></script>
<script src=”js/jquery.mobile-1.0.1.min.js”></script>
<script src=”js/jacapp.js”></script>
<SCRIPT TYPE=”text/javascript”>
<!–
function dropdown(mySel)
{
var myWin, myVal;
myVal = mySel.options[mySel.selectedIndex].value;
if(myVal)
{
if(mySel.form.target)myWin = parent[mySel.form.target];
else myWin = window;
if (! myWin) return true;
myWin.location = myVal;
}
return false;
}
//–>
</SCRIPT>

</head>
<body>
<div data-role=”page” id=”main”>

<div data-role=”header”>
<h1>JAC App</h1>
<center>
<img border=”0″ src=”https://lh6.googleusercontent.com/-9eRq95vUTJY/T49Nu56rWrI/AAAAAAAAAAk/1arc8Ho1DaY/w500-h319-k/JMU_Duke_Dog.jpg&#8221;
alt=”Duke Dog” width=”304″ height=”228″/>
</center>
</div><!– /header –>
<div style=”background-color:yellow;”>
<FORM
ACTION=”../cgi-bin/redirect.pl”
METHOD=POST onSubmit=”return dropdown(this.gourl)”>
<SELECT NAME=”gourl”>
<OPTION VALUE=””>Choose a Destination…
<OPTION VALUE=”http://www.campusdish.com/en-US/CSMA/JMU/ContactUs/”>Contact Us
<OPTION VALUE=”http://www.campusdish.com/en-US/CSMA/JMU/Locations/”>Locations
</SELECT>
<INPUT TYPE=SUBMIT VALUE=”Go” onClick=”goToNewPage(document.dropwdown.list)”>
</FORM>

<div data-role=”content”>
<font face=”Tahoma”>
<font size=”5″>
<p>Enter your JAC ID and password to check your dining dollars balance:</p>
</font>
</font>

<form action=”#” method=”post”>
<div data-role=”fieldcontain” class=”ui-hide-label”>
<label for=”jacid”>JAC ID:</label>
<input type=”text” name=”jacid” id=”jacid” value=”” placeholder=”JAC ID”/>
</div>
<div data-role=”fieldcontain” class=”ui-hide-label”>
<label for=”pwd”>Password:</label>
<input type=”password” name=”pwd” id=”pwd” value=”” placeholder=”Password”/>
</div>
<input type=”button” name=”submit” id=”submit” value=”Check Your Balance”/>
<input type=”reset” name=”reset” id=”reset” value=”Reset”/>
</form>
<a href=”http://www.jmu.edu/cardctr/&#8221; target=”_blank”>Visit JMU Cards Services</a>
<sup>For more information, please click this link.</sup>

</div><!– /content –>
</div>
</div><!– /page –>

<div data-role=”page” id=”userinfo”>
<div data-role=”header”>

<h1>Your Dining Dollars Balance</h1>
<center>
<img border=”0″ src=”https://lh6.googleusercontent.com/-9eRq95vUTJY/T49Nu56rWrI/AAAAAAAAAAk/1arc8Ho1DaY/w500-h319-k/JMU_Duke_Dog.jpg
alt=”Duke Dog” width=”304″ height=”228″/>
</center>
</div>
<div style=”background-color:yellow;”>
<div data-role=”content”>
<h2 id=”name”></h2>
<h3 id=”balance”></h3>
</div>

</div>
<input type=”button” value=”Back” onclick=”history.go(-1);” />
</div>

</body>
</html>

 

JavaScript

jQuery( document ).ready( function( $ ) {
// when the document is ready, do all the stuff inside here

// function to create the database if it hasn’t been done already
var createDB = function( tx ) {
tx.executeSql(
‘CREATE TABLE IF NOT EXISTS users ‘ +
‘( jacid PRIMARY KEY, fname, lname, pwd, dollars )’
);
};

var createDBSuccess = function() {
// populate the db with some data
db.transaction( populateDB );
};

var createbackgroundImage = function()
{
document.body.style.backgroundColor=”#f3f3f3″;
document.body.style.backgroundImage=”url(‘http://farm6.staticflickr.com/5029/5607682613_de2dd03a7f.jpg&#8217;)”;
};

// populate the db
var populateDB = function( tx ) {
console.log( ‘populating…’ );
tx.executeSql(
‘INSERT INTO users ( jacid, fname, lname, pwd, dollars ) ‘ +
‘VALUES ( “100036356”, “Morgan”, “Benton”, “letmein”, “$25.00” )’
);
tx.executeSql(
‘INSERT INTO users ( jacid, fname, lname, pwd, dollars ) ‘ +
‘VALUES ( “107374868”, “Susan”, “Xayavongsa”, “letmein”, “$250.00” )’
);
tx.executeSql(
‘INSERT INTO users ( jacid, fname, lname, pwd, dollars ) ‘ +
‘VALUES ( “108102514”, “Anthony”, “Pham”, “letmein”, “$75.00” )’
);
tx.executeSql(
‘INSERT INTO users ( jacid, fname, lname, pwd, dollars ) ‘ +
‘VALUES ( “105937494”, “Jackson”, “Snarr”, “letmein”, “$80.00” )’
);
};

// get the dining info for a user
var getDiningInfo = function( tx ) {
// get the username and password from the form
var un = $( ‘#jacid’ ).val();
var pw = $( ‘#pwd’ ).val();

tx.executeSql(
‘SELECT * FROM users WHERE jacid = “‘ + un + ‘” AND pwd = “‘ + pw + ‘”‘,
[],
gdiSuccess,
gdiError
);
};

// handle successful getDiningInfo queries
var gdiSuccess = function( tx, result ) {
// display the user’s balance to him/her
var user = result.rows.item(0);
$( ‘#name’ ).html( user.fname + ‘ ‘ + user.lname );
$( ‘#balance’ ).html( user.dollars );
$.mobile.changePage( “#userinfo”, { transition: “slideup” } );
return false;
};

// handle database errors
var gdiError = function( err ) {

};

// create a variable to access the database
var db = window.openDatabase( ‘jacapp’, ‘1.0’, ‘JAC App Database’, 500000 );

// create the database if it hasn’t been done already
db.transaction( createDB, null, createDBSuccess );

// handle the submit button click
$( ‘#submit’ ).click( function() {
// try to query the database to get the info about that user
db.transaction( getDiningInfo );
});
});

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s




%d bloggers like this: