2020/5/13 2020 Web Application Project Specification: Web and Database Computing (2207_7207 Combined)
2020 Web Application Project
Speci cation
Contents
Aims
Project Summary
Part 1 – Designing your website
Part 2 – Planning your Routes and Database Milestone 1 Submission:
Part 3 – Building your website
Part 4 – Client-server integration
Part 5 – Database Schema
Milestone 2 Submission:
Part 6 – Server Completion
Part 7 – Demonstration
Final Submission
References needed
Aims
1. Understand principles of designing user friendly websites.
2. Write standards compliant websites in HTML & CSS.
3. Develop dynamic, client-side web content using Javascript.
4. Understand the interactions between the client-side and server-side components of web
applications.
5. Design and build AJAX calls to a server and handle responses.
6. Use third party APIs in web applications.
7. Use E-R Modeling to design a database structure.
8. Understand the role of databases in web applications.
9. Plan & integrate a database into a web application.
10. Understand and mitigate security issues faced by web applications.
Project Summary Description
https://myuni.adelaide.edu.au/courses/54385/pages/2020-web-application-project-specification 1/9
2020/5/13 2020 Web Application Project Specification: Web and Database Computing (2207_7207 Combined)
Your web application project for the Semester is to design and develop a task/chore roster system
for shared spaces that allows managers to set tasks, notifies users of their tasks, and allows users to mark tasks as complete.
Upon loading the system should display
Current tasks that need to be done today
The user who is assigned that task
Users should be able to sign up and log in so they can
View their scheduled tasks
Manage their profile/user information
Manage their availability
Manage the types of tasks they can/want to do.
Managers should be able to sign up and log in to: Manage their profile/manager information Create and manage different tasks.
Group tasks.
Assign tasks or groups of tasks to users.
Users/managers should be able to choose to link a social media/email/other account, allowing login via that platform, to make logging in easier.
One of the following two special features must also be present:
Email notifications
Users can request that an email notifications be sent to them for current/upcoming tasks. Users should be able to choose when email notifications are sent
Users should be able to set multiple notifications and/or different notifications per task.
~ OR ~
Calendar Reminder
Users can connect their online calendar to the system (Google Calendar/Outlook) Tasks automatically added and updated on users’ online Calendars.
Software Requirements
The web application must developed and run in the CS50 IDE.
You should also make regular (at least weekly backups/downloads of your work)
The web application must use NodeJS, Express, and AJAX .
The database must be a SQL database.
Your markup/code must pass W3C Validation and ESLint linting.
You may use other libraries/frameworks not addressed in this course, however your implementation must still demonstrate your understanding of the concepts taught in this course.
Submission
This is a big project and can’t be completed at the last minute so to keep you on track we’ve set three(3) milestones; one at the end of week 9, another at the end of week 12, and the last one at the end of Week 15. Be aware that there are no extensions on the Week 15 submission.
https://myuni.adelaide.edu.au/courses/54385/pages/2020-web-application-project-specification 2/9
2020/5/13 2020 Web Application Project Specification: Web and Database Computing (2207_7207 Combined)
Your files will be submitted to MyUni, and you will also be expected to provide markers access to your CS50 IDE Environment for additional review.
At the end of the project you will also submit a brief video demonstration showcasing the features of your web application.
Assessment
This project is to be completed individually. Completing this project in groups or sharing parts of your implementation is not permitted.
This project is worth a total of 65% of your final course grade and is NOT a hurdle requirement. Detailed marking rubrics will be available on the MyUni submission page for each part.
Milestone
Due
Weight
Milestone 1
Site Design Feature plan Data Plan E-R model
11:59 pm Friday Week 9
15%
Milestone 2
Client-side Implementation Server route skeleton Database SQL Schema
11:59 pm Friday Week 12
15%
Final Submission
All progress continuing from Milestones 1 & 2 , plus
11:59 pm Friday Week 15
35%
Database Implementation Server Implementation Login System & Security
TOTAL
65%
Workshop Sessions
Weekly workshop sessions are a great opportunity to ask questions and get feedback from the lecturers and tutors before the submission deadline.
You are welcome to attend sessions that you are not enrolled in as needed to seek help.
Part 1 – Designing your website
https://myuni.adelaide.edu.au/courses/54385/pages/2020-web-application-project-specification 3/9
2020/5/13 2020 Web Application Project Specification: Web and Database Computing (2207_7207 Combined)
Think about and explore web pages. What might a task roster website look like? What information might users be required to supply? How will they log in? How will tasks display? How will users mark them complete? What should managers be able to do? You are encouraged to think about additional features for this application; we have outlined the minimum.
Research existing websites to get ideas for your web application.
Record any pages you find that are good examples of what your site could look like. What parts work well. What parts don’t work well?
Also record any examples you find of features you might want to include in your site.
Once you decide what a user will be able to do, then you need to think about how they will do each task and how you will make those tasks visible on your site – keeping in mind the articles and lectures on design and usability.
Draw (don’t code) what your site will look like.
It should be obvious from the drawing what each part of the site does.
Be sure to include any dimensions – if the window is resized, how do elements change? How might the site look on a phone vs desktop?
Thinking about the features in the description section, start to plan how each of these features of your site will function, plus any additional features that you might like to have.
Where does this feature appear and how does the user interact with it?
What happens when a user performs one of these interactions?
If a change occurs to the page/site following an interaction, clarify what that will be and draw if necessary.
Describe these for each feature.
Don’t forget to decide which special feature you’ll implement:
Email notifications ~OR~
Calendar Reminder
Once you have a basic design, you now need to review and tweak it for usability and accessibility.
Review your design.
How does it minimise kinematic and cognitive load?
Does it meet the standards & heuristics referenced in lectures and on MyUni?
Have 2 other students review your website design and perform basic usability testing. Which parts of your site were clear. Which weren’t?
Record the feedback from the other group and any findings.
Record any updates to your design made as a result of the above testing and review.
As you learn more about implementing web applications throughout this course, your design will likely change; that’s okay, but be sure that as those changes creep in, you continue to review your site for usability and accessibility. We will be assessing you for this in your final presentation.
https://myuni.adelaide.edu.au/courses/54385/pages/2020-web-application-project-specification 4/9
2020/5/13 2020 Web Application Project Specification: Web and Database Computing (2207_7207 Combined)
Your week 7 workshop time is a great opportunity to ask questions, get feedback, and compare your design with other students before the deadline.
Part 2 – Planning your Routes and Database
Now that you have a solid design and basic client side implementation, you can start thinking about the content that your web application will be dealing with, and how.
For each of the features in your website, create a data plan that lists the different pieces of content/information that your web application will be dealing with & determine where it should be stored, what format, and where it should be processed.
Where does the information come from?
What form should it take?
If the information is on the server, what will the client need to send to retrieve that data? If the information is on the client, how will it be sent to the server?
Does all information need to be stored on the server?
What processing needs to be done to make the data useful?
Once you have an idea of the different pieces of data that you’ll need to be working with, you can start thinking about how you’ll store that data on your server.
Using the methods outlined in lectures and pracs, create an Entity-Relationship diagram for your web application’s data.
Milestone 1 Submission:
Submit all work done so far from Parts 1 & 2 to the MyUni Milestone Submission page before the deadline, 11:59pm Friday Week 9. This should include:
Your research, design, feedback, review and changes from Part 1 Your data plan and E-R model from Part 2
Submit your work as a single ZIP file;
Be sure to include all your work in the ZIP file.
If you have your files organised in folders/directories, be sure to keep this structure when adding them to your ZIP file.
This submission is worth 15% of your final course grade
A detailed mark rubric will be available on the submission page closer to the deadline. Your mark will be available in the MyUni gradebook within 2 weeks of the deadline unless otherwise noted.
https://myuni.adelaide.edu.au/courses/54385/pages/2020-web-application-project-specification 5/9
2020/5/13 2020 Web Application Project Specification: Web and Database Computing (2207_7207 Combined)
Late submission penalties apply! (see course outline)
Part 3 – Building your website
Now that you have a solid design, it’s time to start coding it! You should now have a firm grasp on these languages and be able to implement ALL of the static elements of your website.
Use HTML and CSS to implement all of the parts of your site. Follow best practices as outlined in lectures and exercises.
Ensure CSS is used appropriately to provide a consistent and maintainable style across all your pages.
Ensure your implementation passes validation.
As you build your website, begin to add interactive features using JavaScript and Vue.
Use JavaScript and Vue to further build your design.
Start to add client-side code for users and managers to interact with tasks & manage their settings
Use test data/variables to simulate client-server interactions as needed and to help you
test your code.
Follow best practices as outlined in lectures and exercises.
Ensure JavaScript files are used appropriately to provide a consistent and maintainable code across all relevant pages.
Ensure your implementation still passes validation after modifications.
Ensure your JavaScript and Vue passes linting.
Part 4 – Client-server integration
It’s time to set up the server so your website can be accessed on other computers!
Following the lecture notes and documentation on MyUni, set up an Express server and migrate your website to it.
Test to ensure all parts of your website are working as expected now that they are being served by the Express server.
You’re now ready to start handling data on the server.
Using a combination of GET/POST methods and AJAX, modify your website and server to implement the calls needed to handle the content/information for each of your features as identified in your data plan from Part 2.
The routes don’t need to be functionally complete at this stage, but you will want to set them up with dummy responses to ensure that your client side code is working as expected.
https://myuni.adelaide.edu.au/courses/54385/pages/2020-web-application-project-specification 6/9
2020/5/13 2020 Web Application Project Specification: Web and Database Computing (2207_7207 Combined)
Part 5 – Database Schema & Queries
Now that you’ve designed your database, you can set it up and begin writing queries.
Convert your E-R diagram into a SQL Schema.
Setup your SQL database and tables.
Write down the queries needed to store and retrieve data in your database.
Milestone 2 Submission:
Submit all work done so far from Parts 3 – 5 to the MyUni Milestone 2 Submission before the deadline, 11:59pm Friday Week 12. This should include:
Your implementation from Parts 3 & 4 Your SQL schema from Part 5
Submit your work as a single ZIP file;
Be sure to include all your work in the ZIP file.
If you have your files organised in folders/directories, be sure to keep this structure when adding them to your ZIP file.
Do not include your node_modules folder in your submission, but do ensure you include any other server files.
You will also need to provide the markers access to your CS50 IDE
This will allow us to test your work if files are missing from your submission, and review your progress.
Further details will be listed on the submission page.
This submission is worth 15% of your final course grade
A detailed mark rubric will be available on the submission page closer to the deadline. Your mark will be available in the MyUni gradebook within 2 weeks of the deadline unless otherwise noted.
Late submission penalties apply! (see course outline)
Part 6 – Server implementation & integration
Modify your server routes to perform the tasks and data queries needed to complete your web application.
Implement and populate your Database
Complete your server routes from part 4 with full functionality, integrating the Database queries from Part 5.
https://myuni.adelaide.edu.au/courses/54385/pages/2020-web-application-project-specification 7/9
2020/5/13 2020 Web Application Project Specification: Web and Database Computing (2207_7207 Combined)
Referring to the appropriate APIs and documentation, finish your implementation of your chosen special feature:
For Email Notifications we recommend using the Nodemailer API
For Calendar Reminders we recommend using Google Calendar or Outlook APIs Implement and Secure your login system if you haven’t already
Integrate OpenID into your web application’s login system.
Ensure OpenID authentication is verified correctly
You can use any identity provider or any combination of providers.
The main functionality of your web application should now be almost complete.
Review and test your web application for functionality and bugs.
Test the security of your web application, ensuring it is not prone to SQL Injection, XSS, XSRF, and that its authentication cannot be easily bypassed.
Part 7 – Demonstration
Record a video of at most 3 minutes duration in which you demonstrate the features of your web application.
You will not be assessed on presentation skills/delivery/preparation; only on the functionality of your web application.
This will help your markers to ensure they don’t miss anything.
Zoom includes recording capabilities.
Final Submission
To prepare for your final submission:
Review this document
Make sure all main dot-points are covered
Submit your work as a single ZIP file;
Be sure to include all your work in the ZIP file.
Be sure to include your demonstration video in the ZIP file
If you have your files organised in folders/directories, be sure to keep this structure when adding them to your ZIP file.
Do not include your node_modules folder in your submission, but do ensure you include any other server files.
You will also need to provide the markers access to your CS50 IDE
This will allow us to test your work if files are missing from your submission, and review your progress.
Further details will be listed on the submission page.
https://myuni.adelaide.edu.au/courses/54385/pages/2020-web-application-project-specification 8/9
2020/5/13 2020 Web Application Project Specification: Web and Database Computing (2207_7207 Combined)
This submission is worth 15% of your final course grade
A detailed mark rubric will be available on the submission page closer to the deadline. Your mark will be available in the MyUni gradebook within 2 weeks of the deadline unless otherwise noted.
Late submissions will NOT be accepted.
References needed
Notes from lectures.
Notes and code from practical exercises Resources linked on MyUni
https://myuni.adelaide.edu.au/courses/54385/pages/2020-web-application-project-specification 9/9