CP3101B Web Programming and Applications
Assignment 1 - HTML5, PHP, CSS, SQL and Page at a time web applications

Due:	Feb 19, 2013, 11:50 PM
Late penalty:	20% penalty for 48 hours late, not excepted after that.
Hand in:	Please do the following for your submission: Include a CREATIVE_ADDITIONS.txt in the root of your submission. This describes any extra features you want us to take into consideration. Include a MEMBERS.txt file with the matriculation numbers of both members of your team. MEMBERS.txt should look like so the following will get your matriculation numbers Include a README.txt which describes how we install your application. and any special considerations/instructions. Include a schema.sql file which we can use to initialize our database with your schema and any sample data. Include a config.inc which should centralize any configuration, so for example, variables for the database user name, database password, etc. With luck, after modifying this file, and loading your schema, we can play with your application. Other than MEMBERS.txt, there should be no identifying information, and no passwords in your submission. We may share your application with the class during a code review. Make sure that file permissions permit the minimum necessary access. See chmod. It should not be possible to browse your sessions directory from the web, nor see your config files etc. Zip your submission so that, when we unzip, we have a single directory with your complete application, CREATIVE_ADDITIONS.txt, MEMBERS.txt, README.txt, ... in it. Do this by executing, on cp3101b-1 Leaving a todo.zip for submission. You can test this on cp3101b-1 via and verifying the contents as well as file permissions. In the above, I am assuming that your application is in ~/public_html/todo and you have no ~/tmp directory. Alter these instructions as appropriate. Please submit here. and compare the output on the screen with only one submission/group.
Marking:	Code quality: simple, clear, concise Code extensability: is it extendable, easy to re-purpose for another application Code documentation: if you have good naming, and your code is clear, you will need minimal documentation. Easy to install: if we can't install it, we can't mark it. Make it easy for us to securely install. Write simple, clear instructions, single config file. Functionality: Does it have the minimal features implemented well. Web site design: Does the application make good use of CSS, for a simple, effective website design. Just a reminder, I mark, essentially, on the following scale. 5/5 Solved, well understood, well comunicated: Evidence of excellent understanding of all tools, concepts and the problem at hand, so much so that the tools are used in simple, effective and creative ways to solve the problem. Example: Simple, clear, concise, reusable code. Well designed, clean webpages, with all features. 4/5 Solved: Evidence of understanding of all tools, concepts and ability to combine them to produce a solution. Example: Correct code with some of the following issues (for example): long, poor naming, hard to read code, poorly documented, hard to re-use the code. Not a great layout, style. 3/5 Solved with serious issues. Evidence that tools and concepts are understood, but could not be combined into a solution. Example: Missing or non-functional features or concepts. Messy, disorganized code. 2/5 Incomplete: A serious attempt to create a solution using the appropriate technologies. The solution does not work, though many requirements are addressed. 1/5 Started: An attempt using the required tools and concepts, with some progress. Evidence of syntactic understanding.
Groups:	Work in teams of size 2
Environment:	We will run your PHP in our virtual machine. It should render correctly in the labs versions of Firefox, Chrome and IE.

Introduction

We have already gone over the GuessGame application, including seeing an sample MVC web architecture for it. It's time for a change. For this assignment, you are to create a ToDo application. This ToDo web application is targeted at tasks that can be broken down into managable, well understood chunks. For example, reading a book, painting a room, studying for a test. The basic version of this application will allow each user to define a list of tasks they wish to finish. For each task, they assign a number of 30 minute work units. Users can see their progress on tasks, they can mark units of work for a task as completed. They can add more tasks. Here is mockup of the content of a minimal All Tasks page, feel free to create a better user interface!

This application should be complete as far as web application features are concerned. You might think of this application in the following way: In the future, when you need to quickly put together a 'page at a time' type web application, you will be able to grab the ToDo application and quickly modify it for your new purposes. You will also see why frameworks, such as CodeIgniter, Django,... exist, and what they try to do for you. You can choose to write another application if you wish, we will be looking at the extent to which your submission is a great web application. Please let us know before you begin though.

Application Description

Your application should consist of a few pages, here are some suggestions. The following are avalable for public viewing.

Login page: allowing users to login. This page links to a signup page. Typically this also has a 'forgot my password' button or link, but email is not enabled on this system. Users are re-directed to the login page if they are not logged in.
Signup page: possibly a variant of the my account page below. This is where the user goes if they do not have an account. Once past this page, they will be sent to the login page or the main page. You should check for things like whether this account already exists etc. Have an interesting form here to practice various html form inputs, and validation.
News page: You can think of something interesting to display here. It is either static content, or summary content for the site.
Contacts page: this can have static content but will use php for structure. Non authenticated users can access this page.

The following are available only to authenticated users.

All Tasks main page: Displaying all of a users ToDos along with a graphical display of progress (for example progress bars). You can manage tasks from here, including marking work as completed. You can add a new task from here as well. For example, the main content (minus header, navigation, footer etc.) of this page could look like
Task Managment page: For a selected task, this page allows you to change details, including the number of units associated with the task. In my mockup, I have links to individual tasks.
My Account page: this should display the users profile in a pre-filled form, allowing the user to update as necessary. Basically, the same information here as in the signup page.

Add in any other pages you feel are necessary. The purpose of some of these pages, ie. contact, news, is to have a reason for website navigation and to have some content for your utilities links. They can be 'static' though probably will be generated by PHP to maintain consistency.

From the point of view of CRUD (Create Read Update Delete), your application is required to support

user: Create, Read, Update
task: Create, Read, Update

Your database schema may have more tables, you should infer the operations on these tables from above.

Web application requirements

All submitted work must be your own PHP, CSS, HTML5, postgresql SQL, or supplied code, appropriately modified. You will learn little if you use html/css generating tools, or a framework. Your submission should exercise at least the following.

Good usability: Site ID and tag line, navigation, uniform look to website, use of conventions both internal and external, clear visual hierarchy, good user interface. Keep the number of different layouts for your website to a minimum, choose a few colours for your site and stick with them. The login page may have a slightly different layout since many of the navigation and utilities functions will not be available. Most of the rest should be similar.
Login, including guarding pages against unauthorized access (redirect to login). Hint: Have a little stub of code at the top of protected pages and redirect to the login page if something is not in the session. See the php header function. Alternatively, use a front controller.
PHP, form variables, session variables.
PHP use of include/require as a way to maintain a consistent look and feel. Hint: Include navigation, page header and footer HTML in all pages.
Using a SQL backend. Good SQL schema, good use of SQL. Where possible, Use single, powerful queries to interact with the database, instead of fetching multiple rows. Get the database to do lots of the work for you. Example: Say I want to know how many parts there are in the parts table: Use prepared statements to prevent SQL injection (the Postgresql statements with the $1, $2, ...) in them. Hint: See posted sample code.
Validating form inputs and posting back error messages. Hint: Start out simple, have all pages post back to themselves. At the start of each page, determine if this is a postback, if so, check field input and then optionally redisplay the form with error messages, or the result of submitting the form.
CSS, including a global css style. Hint: CSS is actually very powerful, for example, by placing the navigational elements inside a particular class, you can cause particular navigational elements to display differently, and so, highlight which page you are currently on. See the bottom of the CSS tutorial. Also, colors and fonts should be setup here. Finally, you can setup a printable version of a webpage in CSS. See for example How to setup a print style sheet.
HTML5 and use of semantic elements. Hint: Use label, nav, header, footer.
Page lifecycle: first view of a page, display error messages, redisplay a form with pre-filled data, display results of a form submission.
Preventing corruption via page links and reloads: Hint: You can do this by including a HIDDEN form variable with a random value, stored in the users session. Check it's value when the form is sent in. If the HIDDEN variable does not have the expected value, you might redirect to a page with an 'expired' message. Do this only for pages where this is appropriate.
Context sensitive navigation. Hint: Your navigation should reflect the choices available to you at the current page. For example, possibly no navigation on the Login page.
Utilities. Hint: You might have My account, logout, help, contact us
Social media links (ie Facebook, twitter, pinterest etc.). Hint: These applications make it easy for you to place their links on your pages. You simply place some HTML/Javascript supplied by the particular social media site on your pages.
Website appearance: Choose a few different colours and fonts/sizes and stick with them for the entire website. Maintain consistent use of fonts, their weight and size. Similarly for colours. Hint: An Introduction To Colour Theory For Web Designers, How to select fonts for your website, or Choosing the right font, fonts and sizes and stick with them. Fonts and colours should be set in CSS.
Whenever your scripts accept user input, you should validate the input and, on invalid input, give the user appropriate feedback. You might want to consider how to re-populate form variables when invalid input is sent in. Also mark required form fields appropriately. Hint: You might always pre-populate form fields with $_REQUEST[...].
Make appropriate use of different input types. Hint: Grab users birthdays with appropriate inputs. Try to make use of a few different inputs, select, checkbox, text, ... See if you can figure out how to pre-populate them when the user asks to see their profile. Checkboxes are tricky.
Your website should be simple and uncluttered. Forms should lay out nicely and be consistent across pages. Please require a few interesting fields for user signup, inlcuding a required password (entered twice).
Applications typically have a 'lost my password' link on the login page, we won't be able to do this, since email is disabled on the server.
Security: Use https, especially on the first visit to your web page, before sending passwords. Sanitize the inputs, to prevent against XSS and SQL injection. Use method=post on your password forms (so the form variables do not appear in the URL). Use the input type="password" for the password field, etc.

Creative Additions (the 10%)

These are ideas only, feel free to come up with different additions. By the way, more is not necessarily better. A few well thought out, interesting additions to keep the application simple is better than many features making the application confusing and ugly.

Allow assigning of notes to tasks or units of work.
Estimate completion date for each task, for all tasks.
Come up with some interesting displays for work progress.
Allow cancelling of a task.
In case a user accidentially marked a unit of work as completed, allow them to unmark it.
Allow users to define the order the tasks appear in the All Tasks page.

References

Best of Web Design 2013

Questions and Answers

Question:: What do you mean by sanitize inputs?
Answer:: I will answer a broader question: How should I secure my application? Answer: Understand what is going into and out of your application.
For in, make sure things are of the right type and length, whitelist. Use prepared statements for SQL (stuff going into your db). For out, make sure that what the user recieves is not misinterpreted, escape all strings sent to you by the user, going back onto webpages. to prevent XSS. Use https to prevent session hijacking. Don't place ids on the webpage. Understand the difference between GET and POST and make sure to use them appropriately (think passwords). Do you want plaintext passwords in the database?
Question:: Do I have to work in a team?
Answer:: No, but if you want a team member, let me know.
Question:: How can I make it easy for the TAs to evaluate my work?
Answer:
Question:: What would a config file look like?
Answer:: Other php scripts can require 'config.inc'; at the start.
Question:: What is DDL?
Answer:: Data definition language. Like
Question:: Can I use Javascript, Flash, ...
Answer:: No, this is about page at a time web applications. Javascript is later.
Question:: Will appearance be marked?
Answer:: Some part of it will go to design and some part to usability. For colors, you might want to take a look at colorschemedesigner.com, for example. Put these in your css and there you have it.