The High School Stats Helper is back on the Google Play Store!
Category: PhoneGap
HSSH Update
I updated the High School Stats Helper app for Android and uploaded it to the Google Play Store for review. The ETA is 4/19/2020. I will be updating this app more consistently until it is finished.
I have a work-in-progress version of the app available at statsassistant.com.
High School Stats Helper
I published my first Android app (“High School Stats Helper“) on the Google Play Store today. The app will have at least 30 stats functions when it is completed; this version has four.
The app serves two purposes:
- Give my statistics students a free tool for checking their work.
- Give my Math Support students a model of what I expect them to produce for their end-of-semester project.
Web SQL – Append Options to a Select Menu
This is a continuation of the example from the previous post in which we append options to a select menu then populate a text area based on changes in the selected option.
Suppose your page contains the following select menu and text area:
<label for="selectFirst">Select the first name:</label> <select name="selectFirst" id="selectFirst"> </select> <p>The last name will automatically populate the text area below when you select a first name above:</p> <textarea name="textareaLast" id="textareaLast"></textarea>
Open the database and select all records from the names table:
$(document).ready(function(){ mydb = window.openDatabase("names_db", "0.1", "A Database of Names", 1024 * 1024); loadData(); $('#selectFirst').change(function () { var $this = $(this); var listVal = $this.val(); $('#textareaLast').val(listVal); }); }); function loadData() { if(mydb) { mydb.transaction(function(t) { t.executeSql("SELECT * FROM names", [], updateSelectListsView); }); } }
In the excerpt above, the following code updates the text area whenever the selected option changes:
$('#selectFirst').change(function () { var $this = $(this); var listVal = $this.val(); $('#textareaLast').val(listVal); });
Append the options to the select menu:
function updateSelectListsView(tx, result) { var options = ""; var rows = result.rows; for(var x=0; x< rows.length; x++){ var id = result.rows[x].id; var fname = result.rows[x].first; var lname = result.rows[x].last; options += '<option value ="' + lname + '">'+ fname +'</option>'; } $('#selectFirst').append(options); }
Web SQL – Open Database, Create Table, Insert/Select/Delete Records
WebSQL is an application programming interface (code that allows an asynchronous, transcational interface to SQLite) for storing data in client-side databases that can be queried using a variant of SQL. WebSQL is only supported in Chrome and Safari (and Android and iOS by extension). Since 2010, it has been deprecated in favor of IndexedDB.
Suppose you want to create a client-side database containing first and last names that the user enters in the following text input fields:
<div data-role="fieldcontain"> <label for="firstName">First Name:</label> <input type="text" id="firstName" /> <br/> </div> <div data-role="fieldcontain"> <label for="lastName">Last Name:</label> <input type="text" id="lastName" /><br /> </div>
Open the database and create a table in the database:
//Test for browser compatibility if (window.openDatabase) { //Create the database the parameters are 1. the database name 2.version number 3. a description 4. the size of the database (in bytes) 1024 x 1024 = 1MB var mydb = openDatabase("names_db", "0.1", "A Database of Names", 1024 * 1024); //create the names table using SQL for the database using a transaction mydb.transaction(function(t) { t.executeSql("CREATE TABLE IF NOT EXISTS names (id INTEGER PRIMARY KEY ASC, first TEXT, last TEXT)"); }); } else { alert("WebSQL is not supported by your browser!"); }
Take the first and last names in the text input fields and insert them into the names table:
//function to add the name to the database function addName() { //check to ensure the mydb object has been created if (mydb) { //get the values of the first and last text inputs var first = document.getElementById("firstName").value; var last = document.getElementById("lastName").value; //Test to ensure that the user has entered both a first and last if (first !== "" && last !== "") { //Insert the user entered details into the names table, note the use of the ? placeholder, these will replaced by the data passed in as an array as the second parameter mydb.transaction(function(t) { t.executeSql("INSERT INTO names (first, last) VALUES (?, ?)", [first, last]); outputNames(); }); } else { alert("You must enter a first and last!"); } } else { alert("db not found, your browser does not support web sql!"); } }
Populate an empty unordered list with first and last names from the names table:
//function to get the list of names from the database function outputNames() { //check to ensure the mydb object has been created if (mydb) { //Get all the names from the database with a select statement, set outputNameList as the callback function for the executeSql command mydb.transaction(function(t) { t.executeSql("SELECT * FROM names", [], updateNameList); }); } else { alert("db not found, your browser does not support web sql!"); } } //function to output the list of names in the database function updateNameList(transaction, results) { //initialise the listitems variable var listitems = ""; //get the name list holder ul var listholder = document.getElementById("namelist"); //clear names list ul listholder.innerHTML = ""; var i; //Iterate through the results for (i = 0; i < results.rows.length; i++) { //Get the current row var row = results.rows.item(i); listholder.innerHTML += "<li>" + row.last + ", " + row.first + " (<a href='javascript:void(0);' onclick='deleteName(" + row.id + ");'>Delete Name</a>)"; } }
Delete records from the names table by clicking on a list item in the unordered list:
//function to remove a name from the database, passed the row id as it's only parameter function deleteName(id) { //check to ensure the mydb object has been created if (mydb) { //Get all the names from the database with a select statement, set outputNameList as the callback function for the executeSql command mydb.transaction(function(t) { t.executeSql("DELETE FROM names WHERE id=?", [id], outputNames); }); } else { alert("db not found, your browser does not support web sql!"); } }
PhoneGap – Basic App Template
The HTML file (index.html) generated by the PhoneGap CLI when you create a new application project using the basic app template is as follows:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title>Blank App</title> </head> <body> <script type="text/javascript" src="cordova.js"></script> </body> </html>