Programming Question

This is assignment 1Task 1: Create your mobile app project
•
•
•
Project/ Folder name: xxFeedbackA1, where xx is your initials.
Add the required library files. The required library files for jQuery and jQuery mobile are
available at
lib.zip
Unzip and copy css, img and js folders to the project root.
Task 2: Application image
•
•
Create your own app image (xx-image.png, where xx is your initials).
Please do not choose the same image used in the screenshot below. Check
http://www.iconarchive.com to get your free image.
Task 3: Build your prototype
•
•
•
•
•
•
•
•
•
Create an html file, if viewed on a browser will match EXACTLY the screen shots provided,
except:
o Anything related to Jason Bourne; replace them with your own information
Name the file as index.html. NO need to add prefix to the name of this file.
The html file will contain 5 pages.
For each page add 3 sections: header, content, and footer
Header and footer sections are fixed; they will always be in sight when scrolling a lengthy page.
For each header section, the title must match the current action (e.g., List of
Reviews is displayed when the Reviews tab is selected)
For navigation bar tab selection must persist and change the color showing the tab is currently
selected.
This assignment is all about user interfaces. Your objective will be to match the look and feel,
color schemes exactly as the screenshots. DON’T USE YOUR OWN IMAGINATION.
Provide name and id attributes for the following items in your project. Missing id and name will
result in deduction of marks (Check the marking sheet – the last page of the document). These
requirements will be considered as Standards in this course.
List/Combobox
Textarea
√
√
Checkbox
√
√
Button
√
√
Radiobutton
√
√
√
√
Table 1: Id and Name requirement
Task 4: Home Page
•
•
•
•
Set the page’s id to xxHomePage, where xx is your initials.
Set the template data to match the design layout including the title and header (XX Feedback A1)
similar to the screenshots below.
Use any image (e.g., image.png) to display the image aligned center horizontally. Use your own
Student Name instead of Jason Bourne and your own initial instead of JB and xx.
The 3 buttons at the bottom are actually links. Use anchor tag and make them look like buttons.
Figure 1: Home page – scrolled up.
Figure 2: Home page scrolled down.
Task 5: Add Feedback Page
•
•
Set the page’s id to xxAddFeedbackPage, where xx is your initials.
Add the template data to match the design layout including the header (Add a Feedback) similar
to the screenshot shown below.
Add a form with id and name that it unique (i.e.,
•
•
•
•
frmAdd)
Business name and Reviewer email are text input fields
Reviewer
Comments is a textarea input field.
Rating is a numeric input field
Save button is a “Button” not an
All input controls (textbox, buttons, textarea etc.) must have proper id and name. See Table 2: Id
and Name requirement.
No form validation is needed, save button does not do anything in this assignment.
Figure 3: Add feedback page.
Task 6: List of Reviews Page
•
•
Set the page’s id to xxViewFeedbackPage, where xx is your initials.
Add the template data to match the design layout including the header (List of Reviews) similar to
the screenshot shown below.
•
•
•
•
Provide your own sample realistic data. DO NOT USE “My Coffee Shop” and “My Burger Shop”
as your template data.
Assign listview id that it unique (i.e., lstViewFeedback)
Both items will have a link to the same xxModifyFeedbackPage (next task).
This is just a prototype. The two items have static data. In future assignments you will require to
provide dynamic data.
reviews page.
Figure 4: List of
Task 7: Modify Feedback Page
•
•
•
•
•
•
•
Set the page’s id to xxModifyFeedbackPage.
Add the template data to match the design layout including the header (Modify Feedback) similar
to the screenshot shown below.
Match the default data to the first item of Task 6 (your own sample data).
This page is similar to the xxAddFeedbackPage except for the header and buttons (Cancel,
Delete, Update) and some static values in the input fields.
Give ids and names for all input controls (textbox, buttons etc.). See Table 3: Id and Name
requirement.
Cancel, Delete, Update are “Buttons”, not
This is a prototype. The buttons do not need to work.
Figure 5: Modify feedback page.
Task 8: Settings Page
•
Set the page’s id to xxSettingsPage.
•
Add the template data to match the design layout including the header (Settings) similar
to the screenshot below.
•
All input controls will have id and names. See Table 4: Id and Name requirement.
•
The buttons (not ) in this page do not need to work.
Figure 6: Settings page.
Task 9: Test your app
•
Go to Developer Tool of chrome. Click toggle device toolbar icon located on the upper
left side of the Developer Tool window. Choose any phone (preferably Pixel 2(XL)/Pixel 3(XL))
as your device screen.
•
Check if your application pages look exactly the same as screen shots provided in this
specification document.
Task 1: Create Assignment 2 project
• Create an empty project and name it: XXFeedbackA2 (where XX is your initials).
Copy all the files and folders from your assignment 1 project except the folder called .idea (.idea is a
hidden folder created by WebStorm. If you use any other IDE, the .idea folder will not exist).
• Add the following Javascript files under js folder: o xxdatabase.js o xxDAL.js o xxfacade.js o xxutil.js
o xxglobal.js
• Add the following Stylesheet file under css folder: o xxmystyle.css
• Include all of them to index.html.
• Add ready event to xxglobal.js file. All the event handlers must be defined in xxglobal.js file.
• Provide name and id attributes for the following items in your project. Missing id and name will result
in deduction of marks (Check the marking sheet – the last page of the document). These requirements
will be considered as Standards in this course.
List/Combobox
Textarea
Checkbox
Button
Radiobutton
√
√
√
√
√
Table 1: id and name requirement chart
√
√
√
√
√
Task 2: Update ‘Home’ page
Update the headers to indicate Assignment 2 (Replace A1 with A2). Also replace other references
to A1 with A2 in the page content. See the screenshot below. Rest of the home page will be the
same as your assignment 1.
Figure 1: Screenshot of Home page for Assignment 2
Task 3: Update ‘Add Feedback’ page
•
•
•
•
Update the page according to the following screenshot.
Add a “Type” ComboBox containing “Other”, “Asian” and “Canadian”. “Other” will be shown
by default. Please check Figure 2.
If ‘Do you want to add your ratings’ checkbox is checked then 4 rating TextBoxes (Food Quality,
Service, Value (Hint: input type=”number”) and Overall Rating (Calculated) (Hint: input
type=”text”) will be visible. Otherwise, they will be hidden. Check Figure 3 and Figure 4.
When the page is shown, ‘Do you want to add your ratings’ checkbox will be unchecked by
default. Check Figure 3
Overall Rating textbox is Read-only.
•
The 3 rating textboxes will be initialized with 0 whenever they become visible.
(note: hide and show will reset the textboxes to 0 as well) Check Figure 5.
• Any change in the 3 rating text boxes will automatically update the overall Rating (calculated)
Textbox (Show average will follow the formula: o (quality + service + value) * 100/15 . o Add a
% symbol. o Check Figure 4
• Implement the show/hide feature in xxglobal.js file. Hint: put the 4 Textboxes in a div, show and
hide the div if the check box is
checked/unchecked, respectively. See jQuery built in function show(), hide()
(https://www.w3schools.com/jquery/jquery_hide_show.asp)
Figure 2: ComboBox content
Figure 3: Screenshot of Add Feedback page – Do you want to add your ratings unchecked.
Figure 4: Screenshot of Add Feedback page – Do you want to add your ratings checked.
Figure 5: Ratings are initialized with 0 when they become visible (by selecting Do you want to add your ratings checkbox)
Task 4: Update ‘Modify Feedback’ Page
•
•
Update the ‘Modify Feedback’ page in the same way as ‘Add Feedback’ page.
‘Do you want to add your ratings’ checkbox will behave in the same way. Check the following
screenshot(s) Figure 6 and Figure 7
Figure 6: Screenshot of Modify Feedback page – Do you want to add your ratings unchecked.
Figure 7: Screenshot of Modify Feedback page – Do you want to add your ratings checked.
Task 5: Implement validation
•
•
Include jQuery validation Javascript (available in eConestoga->Content>Resources->_lib.zip) to
the index.html file.
Define your validation logic in xxutil.js file.
Add the following styles to xxmystyle.css file:
label.error{ color: #F00; font-weight:
bold;
} input.error, select.error, textarea.error {
border: 1px red solid;
}
• Both ‘Add a Feedback’ and ‘Modify Feedback’ pages will have similar validation
(defined in xxutil.js file). Hint: You need to implement 2 validation
functions; one for each form. However, it is also possible to make a parameterized validation function
accepting references to the form.
• The validation will get triggered and show necessary messages below input fields when:
o
•
Save button is clicked on Add Feedback page.
Print “Add Form is valid” if all inputs are valid and “Add Form is invalid” if
there are invalid inputs. o Update button is clicked on Modify Feedback page.
Print “Modify Form is valid” if all inputs are valid and “Modify Form is invalid”
if there are invalid inputs.
Validation rules:
o You may specify your own error message string. o Business Name: Required and length
must be 2-20 characters long.
o Reviewer Email: Required and valid email address
Any valid email will be sufficient. Making only Conestoga email valid will result
in deduction of marks. o Review Date: Required o If ‘Do you want to add your
ratings?’ checkbox is checked o Food Quality, Service and Value: Value must be
0-5
Note: don’t use required, min and max attributes for input controls in the html
file, rather define your own rules and messages for them in xxutil.js file. I should
be able to input any number, valid or invalid. The validation will show error
message in case of invalid input.
In case of invalid input in any of the ratings, Overall Rating (calculated) will be
updated according to the usual formula mentioned in Task 3. No special checking
is necessary.
o Check the following screen shot carefully.
Figure 8: Example Validation 1 – error message shown when “Save” button is clicked on Add Feedback page. Note console window beside the form.
Also note how the Overall Rating is calculated.
Figure 9: Example Validation 2 – error message shown when “Update” button is clicked on Modify Feedback page. Note console window beside the
form.
Figure 10: Example Validation 3 – no error message shown when “Update” button is clicked on Modify Feedback page with valid input. Note console
window beside the form.
Task 6: Update Settings page
•
•
Settings page will show up with “Default Reviewer Email” filled with your own email address.
Check Figure 11. Use your own Conestoga email address as initial email when the page is shown.
‘Save Defaults’ button will save the ‘Default reviewer Email’ to local storage and show a message
through alert. Check Figure 12.
Figure 11: Setting page (Default reviewer email is auto filled with your own email address)
Figure 12: Alert shown when Save Defaults is clicked.
Figure 13: Screen shot of Chrome Developers Tools (Application tab) showing Local Storage
Task 7: Test your app
•
Open Developer Tool of chrome. You may use normal browser mode to test your application.
•
•
Check if your application pages look exactly the same as screen shots provided in this
specification document.
Check if your application behaves according to this 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.
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.
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
o
o
o
Business Name will be empty. o Type will be ‘Others’. o Reviewer email will be filled
with the defaultEmail from local storage.
Reviewer Comments will be empty.
Review date will be empty.
Do you want to add your ratings checkbox will be unchecked and ‘Food quality’,
‘Service’, ‘Value’, and ‘Overall Rating’ will be hidden.
Figure 2: Initial look of add a feedback page.
Figure 3: Save clicked with ratings and alert shown.
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:
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.
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:
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.
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.
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.