Programming Question

Course: PROG 2435 Course Name: Programming:Mobile Applications I
Assignment 3
Topic:
Incorporate Database, Object stores (tables) and all CRUD operations. This iteration will
complete the project.
Before you begin:
•
•
•
•
•
You must complete Assignment 2 before proceeding.
Make yourself familiarized with the hands on done in the lab during class time.
The assignment specification and screenshots are made assuming a student’s name Jason
Bourne (and initial is JB). Replace Jason Bourne with your full name, JB with your own
initial. Also replace xx and XX with your own initials.
Applying proper initials will be treated as programming standards.
Make sure to fulfill all programming and assignment standards.
All javascript files must have your initial as prefix.
The screenshots below are taken from Chrome browser without using any device
•
skin .
See AvengersDB-iteration2 hands on program in details.
Study material:
•
Please complete AvengersDB-Iteration 3 hands on program before proceeding with this
assignment.
Problem Specification:
Task 1: Create Assignment 3 project
•
•
Create an empty project and name it: XXFeedbackA3 (where XX is your initials).
Copy all the files from your assignment 2 project.
Task 1: Create database and tables
•
•
•
•
•
•
In the xxdatabase.js create your database and two object stores:
o types and o reviews.
types store will hold objects having following field(s): o id,
o name.
Set keypath to id with autoincrement.
reviews store will hold objects having the following fields: o id, o businessName, o
reviewerEmail, o reviewerComments, o reviewDate, o hasRating, o rating1, o rating2,
o rating3, o typeId.
typeId will act as a foreign key referencing the primary key to an object of types store.
Set keypath to id with autoincrement.
Page 1 of 12
Course: PROG 2435 Course Name: Programming:
Mobile Applications I
•
•
•
•
Choose appropriate data types for the stores’ fields .
Follow the instructions about IndexedDB in the in-class hands on program to use
IndexedDB events properly.
Note: very important: store types will be used as lookup. Once the store is created you
must initialize it by inserting 5 records with ‘Others’, ‘Canadian’, ‘Asian’, ‘European’
and ‘Australian’. The order is not important (primary key of each of the records may be
different based on the order you use). This store will be linked to the dropdown ‘Business
Type’ in both add and modify pages.
This initialization will take place when the program starts and the reviews store will be
empty, and the types store will have 5 records (objects).
Task 2: Include CRUD operations
•
•
In the xxDAL file create CRUD functions for o reviews object store: insert,
select, selectAll, update, delete, deleteAll.
o types object store: selectAll.
Look into AvengersDB-Iteration 3 hands on program posted in eConestoga.
Task 3: Modify ‘Home’ page
Update the headers and home page to indicate Assignment 3/A3. See the screenshot
below:
Figure 1: Home page
Task 4: Modify ‘Add Feedback’ page
•
•
You may assume that, after the program runs, your instructor will go to the Settings page
and save the default email (this task was done in Assignment 2).
In xxglobal.js add an event handler for Add Feedback pages’s ‘pageshow’ event.
Page 2 of 12
Course: PROG 2435 Course Name: Programming:
Mobile Applications I
•
•
•
•
In this event handler function, load the default email address (which was saved by your
instructor) from local storage and show it in the Reviewer Email textbox.
The ‘Type’ dropdown will be automatically populated from types store when the page is
shown. ‘Others’ will be selected by default. Make sure the items are not coming from
hard coded . Hint: you need to use selectAll() crud function of types store.
Clicking the ‘Save’ button, the record will be inserted to reviews store after validating.
o Make a function in xxfacade.js file called addFeedback(). This function will do
the validation and call the insert CRUD for on reviews store (defined in Task 2)
while passing the inputs. Call this function in the ‘Save’ button’s click handler.
o 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.
o Anytime if ‘Do you want to add your ratings’ checkbox is unchecked, all fields of
the ratings block will initialize to 0 and hide. When the checkbox is checked it
will show the ratings block with 0 for all fields. This applies to both Add and
Modify pages.
Any time if we visit Add a Feedback page from any other page (hint: ‘pageshow’ event)
the following initialization will take place to the Add form:
o Business Name will be empty. o Type will be ‘Others’. o Reviewer email will be
filled with the defaultEmail from local storage.
o Reviewer Comments will be empty.
o Review date will be empty.
o Do you want to add your ratings checkbox will be unchecked and ‘Food quality’,
‘Service’, ‘Value’, and ‘Overall Rating’ will be hidden.
Page 3 of 12
Course: PROG 2435 Course Name: Programming:
Mobile Applications I
Figure 2: Initial look of add a feedback page.
Figure 3: Save clicked with ratings and alert shown.
Page 4 of 12
Course: PROG 2435 Course Name: Programming:
Mobile Applications I
Figure 4: Save clicked without ratings. Alert shown.
•
Make sure to get the right id of the selected item of Type ComboBox. (hint: can be
obtained from ‘value’ of the dropdown items if they had been initialized with their
id/primary key once created.) Assign it to the typeId field of reviews store.
For example, In the following screenshot, for the 1st record, o id:
1 o businessName: Burger King o typeId: 2
this value is acting as a foreign key in a traditional relational database
sense, and it links to the record ‘Canadian` of types store.
Your id and name fields of types store may be different based on the
order you used to insert the 5 records. In this example 2 is representing
‘Canadian’
o Please check the images below:
Page 5 of 12
Course: PROG 2435 Course Name: Programming:
Mobile Applications I
Figure 5: types data store.
Task 5: ‘Reviews’ Page
•
Make a function named getReviews() in xxfacade.js o Call the CRUD function
selectAll() of reviews store and generate ListView items for each row.
o Include a custom attribute data-row-id and assign the id to it.
o Show only Business name, Reviewer email for all records. Include overall ratings
only if hasRatings flag is true.
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 Feedback’ Page.
Page 6 of 12
Course: PROG 2435 Course Name: Programming:
Mobile Applications I
o
•
Show “No record found” on Reviews page if there is no record in the reviews
store.
Add a ‘pageshow’ event handler in xxglobal.js for ‘Reviews’ page and call the
getReviews() function, so that whenever a user navigates to this page, the ListView is
auto populated.
Figure 7: List of reviews showing 2 items.
Figure 8: List of reviews showing No record found when reviews store is empty.
Task 6: ‘Modify Feedback’ Page
•
Make a function named showCurrentReview() in xxfacade.js file:
o Fetch the id stored in the local storage. o Use that id as the parameter for select
CRUD of reviews store. o Show the values of each of the fields of the returned
record in specific input controls (e.g., Textbox, ComboBox, radio button etc.).
Important:
Page 7 of 12
Course: PROG 2435 Course Name: Programming:
Mobile Applications I
•
•
Make sure to show/hide ratings part based on ‘hasRatings’ value. o
Remember to initialize each rating to 0 if the ratings checkbox is unchecked
while updating a record.
o Make a ‘pageshow’ event handler for ‘Modify Feedback’ page in xxglobal.js and
call showCurrentReview() function.
Make a function named updateFeedback() in xxfacade.js file.
o Call the update CRUD of reviews store after doing validation. Show an alert.
Make a function named deleteFeedback() in xxfacade.js file.
o Call the delete CRUD of reviews store. Use id stored in local storage to delete the
specific item. Show an alert.
o Navigate to ‘Reviews’ page automatically.
Figure 9: Updated with rating removed, alert shown.
Page 8 of 12
Course: PROG 2435 Course Name: Programming:
Mobile Applications I
Figure 11: Reviews page and reviews store after the updates. Notice the ratings part.
Task 7: Update Settings page
•
Make a function named clearReviews() in xxfacade.js file.
o Call the deleteAll CRUD for reviews table.
Page 9 of 12
Course: PROG 2435 Course Name: Programming:
Mobile Applications I
o
Attach a click event handler for ‘Clear all reviews’ button and call
clearReviews() function. Ask user’s permission, and show an alert after
successfully clearing records, only if the user accepts.
Figure 12: Clear all reviews clicked.
Figure 13: All reviews cleared.
Task 8: Test your app
•
•
Please test your program carefully. No screenshot is required.
Page 10 of 12
Course: PROG 2435 Course Name: Programming:
Mobile Applications I
Marking Sheet
Description
Marks Allocated
1
Home page designed as specified
5
2
Database and stores created according to spec
15
3
types store is initialized properly
5
4
CRUD operations are defined in xxDAL file and works properly
15
5
‘Add Feedback’ page: ‘type’ dropdown is populated from database
with ‘others’ as default, default email is placed in ‘reviewer email’,
save button works properly. Façade Functions and event handlers
are defined according to the spec, Form initializes properly, show
hides behaves according to spec
15
6
‘Reviews’ page shows reviews as a ListView dynamically.
Information is shown according to spec. Clicking a review
navigates to ‘Modify page’. Façade functions and event handlers
are defined according to the spec.
15
7
‘Modify page’ shows the selected review (the particular review
clicked on ‘Reviews’ page), ‘Type’ dropdown populated from
types store with correct item selected. Update, delete works
according to the spec. Façade functions and event handlers are
defined according to the spec.
20
8
‘Settings’ page works according to the spec.
5
9
reviews store shows proper foreign key in Developer’s tool
(id of the right object in types store)
5
Marks
Achieved
Deduction
Runtime errors
15 x_______
Assignment Standard (proper project name, see the standard
documents for detail)
5 x ________
Programming Standard
1 x ________
Late Submission (softcopy)
_________days
JavaScript file not prefixed
2 x ________
Bugs (including requirements mentioned in project description)
3-10 based on
severity
Failing to answer to questions during demo
5-10 based on
severity
Page 11 of 12
Course: PROG 2435 Course Name: Programming:
Mobile Applications I
No Demo
60
Total
100
Page 12 of 12