Programming Question

Course: PROG 2435Course Name: Programming: Mobile Applications 1
Assignment 3
Topic:
Enhance the prototype created in Assignment 2 with database implementation. Incorporate Database,
Tables and all CRUD operations. This iteration will complete the project.
Before you begin:
You must complete Assignment 2 before proceeding. You should make sure that your
assignment 2 is Working all good according to the specifications that was provided to you for
assignment 2.
• You must know how to search and use the online jQuery Mobile Docs to enhance your mobile
app.
• Make yourself familiarize with the hands-on examples done in the lab during class time.
• Make sure to view the screenshots in color, as you will be required to match the color themes
used exactly.
• The assignment specification and screenshots are made assuming a student’s name Kevin
Peterson (and initial is KP). Replace Kevin Peterson with your full name, KP with your own
initial. Also replace xx with your own initials.
• Make sure to fulfill all programming and assignment standards. The Standards Summary is
available
• All JavaScript files must have your initial as prefix.
• See EventsDB-Iteration Full hands-on program in details.
•
Course: PROG 2430
Course Name: Programming: Mobile Applications 1
Problem Specification:
Task 1: Create Assignment 3 project
• Create an empty project and name it: XXReviewA3 (where XX is your initials).
Copy all the files and folders from your assignment 2 project except. idea folder (.
idea is a hidden folder created by WebStorm.)
Task 2: Create database and tables
• Check “Introduction to Foreign Key Constraints” section of
https://www.sqlite.org/foreignkeys.html for more info about foreign key. Also: SQL
FOREIGN KEY Constraint (w3schools.com)
•
In the xxdatabase.js create your database for this application in a function named
createDatabase(). (Using global object is recommended). Database should be named as
xxReviewDB.
 Create 2 tables: ‘state’ and ‘review’ in a function named createTables() 
Read the next step before creating these tables.
“CREATE TABLE IF NOT EXISTS state( ”
+ “id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,”
+ “name VARCHAR(20) NOT NULL);”;
“CREATE TABLE IF NOT EXISTS review( ” +
“id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,” +
“restaurantName VARCHAR(30) NOT NULL,” +
“restaurantId VARCHAR(20) NOT NULL,” +
“stateId INTEGER NOT NULL,” +
“reviewerEmail VARCHAR(30),” +
“reviewerComments TEXT,” +
“hasRating VARCHAR(1),” +
“rating1 INTEGER,” +
“rating2 INTEGER,” +
“rating3 INTEGER,” +
“FOREIGN KEY(stateId) REFERENCES state(id));”;
•
•
•
•
Note: very important: Table ‘state’ is a lookup. Once the table is created you must initialize it
by inserting 5 records with ‘Ontario’, ‘British Columbia’, ‘Alberta’, ‘Nova Scotia’ and
‘Manitoba’. The order is not important (primary key of each of the records may be different
based on the order you use). This table will be linked to the dropdown ‘State’ in both add and
modify pages.
This initialization will take place when the program starts.
After that, the review table will be empty, and state table will have 5 records. If you do not take
precaution, every time you reload the program, it will insert 5 more records resulting in
duplicates.
By following the following sequence while every time loading your application you may avoid
this issue:
 Drop ’state’ table,
 recreate it,
 insert 5 records.
 Please note that there are other ways, but the process mentioned above is the
easiest to implement. See some hints below:
Task 3: Drop Tables
• Make a function named dropTables() that will drop both ‘state’ and ‘review’ tables. This
function will be called when ‘Clear Database’ button under ‘Settings’ page is clicked. Note,
both tables can be dropped with a single transaction.
• Look into EventsDB hands on program posted in eConestoga.
Task 4: Include CRUD operations
• In the xxDAL file create CRUD functions for
 ‘review’ table: insert, select, selectAll, update, delete 
‘state’ table: insert, selectAll
Task 5: Modify ‘Home’ page
• Update the headers and home page to indicate Assignment 3. See the screenshot below:
Figure 1: Home Page
Task 6: Modify ‘Add Review’ page
•
In xxglobal.js add an event handler for Add Review pages’s ‘pageshow’ event.
•
•
•
•
In this event handler function load the default email address from local storage and show it in
the Reviewer Email textbox. Hint: You may assume that, after the program runs, your
instructor will go to the Settings page and save the default email. The same email is expected to
show up on the Add page.
The ‘State’ dropdown will be automatically populated from ‘state’ table when the page is
shown. Make sure the items are not coming from hard coded ‘’ in the html file.
 Make a function named ‘updateStatesDropdown’ in xxfacade.js file and execute it when
Add page is shown. In this function:
 Call the ‘selectAll’ CRUD of ‘state’ table  Append each item
to the “State” dropdown  Make ‘Ontario’ as selected by
default.
 HINTS: Consider using id of state table as the value of each
element. It will be helpful while adding a new
record to ‘review’ table.
Clicking the ‘Save’ button, the record will be inserted to ‘review’ table after validating.
 Please see the methods that you have already implemented in assignment 2 for
validating add review form.
 Make sure to include ‘Food Quality’, ‘Service’ and ‘Value’ when ‘Do you want to add
your ratings’ checkbox is checked. If it is unchecked, ‘Food Quality’, ‘Service’ and
‘Value’ will be 0. Check the screenshots below for clarification.
 Anytime if ‘Do you want to add your ratings’ checkbox is unchecked the ratings block
will hide. When the checkbox is checked it will show the ratings block with 0 for all
fields. This applies for Add and Modify pages.
Any time if we visit Add a Review page from any other page (hint: ‘pageshow’ event) the
following initialization will take place to the Add form:
 Business Name will be empty
 Business Id will be empty
 State will be ‘Ontario’
 Reviewer email will be filled with the defaultEmail from local storage.
 Reviewer Comments will be empty.
 ‘Do you want to add your ratings’ checkbox will be unchecked and ‘Food Quality’,
‘Service’ and ‘Value’, and ‘Overall Rating’ will be hidden.
Figure 2: Initial look of Add a Review page
Figure 3: state table
Figure 4: Save clicked with ratings and alert shown
Figure 5: Save clicked without ratings. Alert shown
Figure 6: review table containing 2 records
Task 7: ‘Reviews’ page
•
Make a function named getReviews() in xxfacade.js o Call the CRUD function ‘selectAll’ of
‘review’ table and generate a listview item for each row.
o Include an extra attribute ‘data-row-id’ and assign the ‘id’
o Include only Restaurant Name, Reviewer email, comments and overall ratings in each list
view item.
o You have to recalculate overall ratings only if the ‘hasRatings’ field is true. Attach a click
event handler dynamically for each list view item.
•
o When each list view is clicked save their corresponding ‘data-row-id’ value to local storage
and navigate to ‘Modify Reviews’ Page.
o Show “No record found” on Reviews page if there is no record in the review table.
Add a ‘pageshow’ event handler in xxglobal.js for ‘Reviews’ page and call the getReviews()
function.
Figure 7: List of reviews showing 2 items
Figure 8: List of Reviews showing No record found when review table is empty
Task 8: ‘Modify Review’ Page
•
•
•
•
Make a function named ‘showReviewDetails’ in xxfacade.js file o Fetch the id stored in
local storage
o Use that id as the parameter for ‘select’ CRUD of ‘review’ table
o Show the values of each of the fields of the returned row in specific input controls (e.g.,
textbox, combobox, radiobutton etc.). Important: Make sure to show/hide ratings part
based on ‘hasRatings’ value.
o Remember to set each rating 0 if the ratings checkbox is unchecked while updating a
record.
o Make a ‘pageshow’ event handler for ‘Modify Reviews’ page in xxglobal.js and call
showReviewDetails() function
Make a function named ‘updateReview’ in xxfacade.js file o Call the ‘update’ CRUD of
the ‘review’ table after doing validation. Use id stored in local storage to update the
specific item. Show an alert.
Make a function named ‘deleteReview’ in xxfacade.js file o Call the ‘delete ’CRUD of
‘review’ table. Use id stored in local storage to delete the specific item. Show an alert.
o Navigate to ’Reviews’ page automatically.
Make a function named ‘cancelModification’ in xxfacade.js file o Navigate to ’Home’
page automatically when the ‘Cancel’ button is clicked without any modification to the
review.
Figure 9: Updated review with rating removed alert shown
Figure 10: Updated review, with ratings added, alert shown
Figure 11: review table after the updates. Notice the ratings part.
Figure 12: deleted review, alert shown
Figure 13: review table after the deletion of one review
Task 9: Update Settings Page
•
•
•
•
Change the title of the existing button ‘Save’ to ‘Save Defaults’ in this page.
Add one more button titled ‘Clear Database’ in this page
Save the default reviewer e-mail to the local storage when the ‘Save Defaults’ button is clicked
after validation. Attach a click event handler for ‘Save Defaults’ button and call ‘saveDefaults()’
function. Show an alert.
Drop all the tables (state and review) from the database when the ‘Clear Database’ button is
clicked. Attach a click event handler for ‘Clear Database’ button and call ‘clearDatabase()’
function. Show an alert.
Figure 14: Modified Settings Page
Figure 15: Save Defaults clicked
Figure 16: Clear Database clicked
Figure 17: Database is cleared
Figure 18: All tables have been dropped
Task 10: Test your app
• Please test your program carefully. No screenshot is required. Your program will
•
Check if your application behaves according to this specification.
Task 11: Upload app
• Make a zip file xxAssignment3.zip that will contain o Complete project for your app o After
unzipping, I should be able to run your application without any modification.
• Make a Word document file xxAssignment3Page.docx and copy the contents of all the JavaScript
file in this. JavaScript code should be commented meaningfully. Code pasted as image will
not be considered for evaluation. Do not zip this document.
Task 12: Demo your app
• Demo your app during class time. See the announcement at the beginning of this document.
Marking Sheet
Description
Home Page designed as specified
Database and tables created according to spec
State table is initialized properly
CRUD operations are defined in xxDAL file and
works properly
‘Add Review’ page:
• ‘State’ dropdown is populated from database
with ‘Ontario’ as default
• Default reviewer email is loaded in ‘Reviewer
Email’
• Save button works properly
• Façade Functions and event handlers are
defined according to the spec.
• Form initializes properly and show hides
behaves according to spec.
‘Reviews’ page:
• Shows reviews as a listview dynamically.
Information is shown according to spec.
• Clicking a review navigates to ‘Modify Review’
page.
• Façade functions and event handlers are
defined according to the spec.
‘Modify Reviews’ page:
• Shows the selected review (the review clicked
on ‘Reviews’ page)
• State dropdown populated from ‘state’ table
with correct item selected.
• Update, delete works according to the spec.
• Façade functions and event handlers are
defined according to the spec.
‘Settings’ page:
• This page is re-designed according to the spec
• Save Default button saves the default reviewer
e-mail to the local storage
• Clear Database button clears the database
Review table shows proper foreign key in Developer’s
tool (id of State)
Non submission of Word document file with
commented JavaScript code (Word document should
not be zipped)
Runtime errors
Assignment Standard (proper project name,
etc., see the standard documents for detail)
Programming Standard
Late Submission (softcopy)
Bugs (including requirements mentioned in
this specification)
Failing to answer to questions during demo
No Demo
Total