finally get to combine what you\'ve learned over the course to create a reasonably well- featured website.

INSTRUCTIONS TO CANDIDATES

ANSWER ALL QUESTIONS

The time has come! You finally get to combine what you've learned over the course to create a reasonably well- featured website. Revisiting A1, the premise is your own personal website. This time, you will extend it using newer concepts in the class, including registering/forms, dynamic design, security, and databases. The informal requirements are as such:

 

You're making a site with multiple pages. There should be common elements (notions of theming, banners, etc.) across the site. There will be several primary pages: a Home page, displaying basic information about yourself (background, research/academic interests); a Courses page, which displays a list of courses you are currently taking (or a longer list of all courses you have taken); an About me, which provides a deeper summary of you and your interests (they may even be hobbies!), a CV page, which displays the latest version of your CV (this may be just a pretty and high resolution image of a CV you already have, or you can format it as textual display on the webpage itself).

 

Now, as additional pages (these one naturally may not always be expected from a personal webpage, so feel free to remove these later when completing your own professional pages), you will have a Past Projects page, in which you may include links to past projects you have completed, but must, crucially, include links to your past four assignments in our class.

 

On your website, you will have a sign-up and log-in button (can be alongside the menu that takes you to the mentioned sections of your website), which allows users on your website to sign-up/log- in in order to access the content in your Past Projects page. In addition, if the user is not currently logged in, your Past Projects page will always succeed a login form (otherwise they will be directed to it automatically), where the user must enter a valid (i.e., registered) username and password to access the page. If they fail, they are prompted with some error and may retry. I’m asking you to use asynchronous communication for this. The other pages don’t need to be shown only to logged-in users. If the user is already logged in, the sign-up and log-in buttons should not show.

 

On the footer of the website, you must add a delete account button, and can make this in smaller font (to mimic how difficult social media websites make it for us to delete their account). Upon pressing the button, the user can enter their username and password (similar to the sign-up page), which, if they exist in the database, will delete the username and password of the user, and will prompt them if this is successful, and will inform them if the username and password doesn’t exist.

 

Database: To store, manipulate, access, and check username and passwords necessary during sign- up and login, you must use SQLite, which is a serverless, zero-configuration, and self-contained version of SQL that you can immediately use in PHP 5.3.0 as well as python, given you’ve installed sqlite, and provide an import statement. Programmatically, SQLite works very similarly to SQL, but instead of saving the database to the server, each command you run with SQLite writes directly to your disk. A complete documentation for its use in PHP, and Python, respectively, is provided here:

 

PHP: https://www.tutorialspoint.com/sqlite/sqlite_php.htm

 

Python: https://www.tutorialspoint.com/sqlite/sqlite_python.htm

 

Security: We don’t want the user to need to log-in every time they want to visit your Past Projects.

As shown in lecture 18, this can easily be accomplished by passing the username and password to

this page, after having logged in once, with the magic of PHP and hidden forms. However, this isn’t very secure as this information will be transferred through packets upon every request; I am therefore wanting you to also store the username and password locally on the client side using session storage (and not web storage) in order for it to neither be transferred nor be permanent. Find this in lecture 18.

 

You should not use this template of mine as a copying mechanism, and I’m asking the TAs to pay attention to that, but you can use my personal webpage here as an aesthetic example of what a themed personal webpage could look like: http://cosc.brocku.ca/~aemami/. Obviously, it doesn’t abide by a lot of the requirements for this assignment.

 

Your webpage should also be responsive – again, responsive design means that your webpage must work on different display sizes. Your web page must work, as a minimum, on cellphone, tablet and desktop display sizes. The TA will test this by reducing the browser window size on their PC. The TA will not actually test on a cellphone or a tablet.

 

BONUS (see rubric): Now, what if I asked you to do this all in a single .html file (a single page)? You may also see this as having 1 .html file and 1 .php file, or a single .php file. Also, what if you stored a ticket (randomly generated string) for each username/password pair in session storage?

 

Requirements and tips

To clarify what's expected of you:

General:

• There is obviously database work here. It's assumed you'll be writing all server-side scripting in Python (and if you so wish, C), but if there are elements you can write in PHP, the choice is yours.

◦ It's certainly easier to stick with one language

◦ Please use SQLite as your database to store username/password info.

• You are not allowed to use WSYWIG (code generating tools).

• Pages should somehow display the current login status.

Signing up:

• Somewhere, you'll need the ability to sign up for a new account

• The user chooses a name and password

◦ That name can't conflict with existing names

General:

• Pages should somehow display the current login status

• Your TAs will be checking out your databases as well.

RUBRIC /36 (without bonus) Site: /6

• 1 for home page

• 1 for courses page

• 1 for about me page

• 1 for CV page

• 1 for past projects page

 

Functional components: /6

• 1 for reasonable use of Ajax, to avoid reloading pages when it isn't necessary.

• 4 for correct sign-up/log-in/delete account logic

◦ Will only registered users be able to access past projects page?

◦ Do you prevent against duplicate usernames?

◦ Does signing up correctly store the required info into SQLite?

◦ Does deleting account correctly remove info from SQLite?

• 1 for login status displayed on pages

Users: /3

• 1 for displaying 'sign out'/'sign in', according to login status (i.e. 1 mark for the client-side work)

• 1 for managing signed-in/out status (deciding what to do/show depending on status on the server)

• 1 for creating/organizing user accounts/profiles, including the 'sign up' page

Aesthetics: /8

• 3 for overall design of the page.

• 2 if the web page seems like a believable, and functional personal webpage (via relevant content, images, etc).

• 3 for responsiveness.

Database: /6

• 2 for correctly storing username + password information in an SQLite database when signing in.

• 2 for correctly checking to see if user and password is valid using the database.

• 2 for correctly deleting username + password information if user deletes account.

Security: /4

• 2 for correctly storing username + password information in session storage.

• 1 users should not be able to access the Past Projects page by just typing the destination into the url without having logged in.

• 1 for no excessively insecure permissions for files in server side (see lecture 16 about chmod).

Additional considerations: /3

• 1 for correctness/unbreakability of server-side content in general

• 1 for correctness/unbreakability of client-side content in general

• 1 for reasonableness of implementation (this is separate from correctness)

Bonus: /15

(Yes, you may end up with >100% on this, which contributes positively to your class grade)

• 10 if you manage to make your webpage a single-page website.

• 2 if you manage to store username/password as tickets.

• 3 for user-selectable colour themes

◦ It's up to you whether it's a server-side account thing, a localStorage thing, a cookie thing, etc 

 

 

Attachments:

Expert's Answer

449 Times Downloaded

Related Questions

. Introgramming & Unix Fall 2018, CRN 44882, Oakland University Homework Assignment 6 - Using Arrays and Functions in C

DescriptionIn this final assignment, the students will demonstrate their ability to apply two ma

. The standard path finding involves finding the (shortest) path from an origin to a destination, typically on a map. This is an

Path finding involves finding a path from A to B. Typically we want the path to have certain properties,such as being the shortest or to avoid going t

. Develop a program to emulate a purchase transaction at a retail store. This program will have two classes, a LineItem class and a Transaction class. The LineItem class will represent an individual

Develop a program to emulate a purchase transaction at a retail store. Thisprogram will have two classes, a LineItem class and a Transaction class. Th

. SeaPort Project series For this set of projects for the course, we wish to simulate some of the aspects of a number of Sea Ports. Here are the classes and their instance variables we wish to define:

1 Project 1 Introduction - the SeaPort Project series For this set of projects for the course, we wish to simulate some of the aspects of a number of

. Project 2 Introduction - the SeaPort Project series For this set of projects for the course, we wish to simulate some of the aspects of a number of Sea Ports. Here are the classes and their instance variables we wish to define:

1 Project 2 Introduction - the SeaPort Project series For this set of projects for the course, we wish to simulate some of the aspects of a number of