In Module 3, you will learn about MySQL, a web application database.

This article contains your assignments for Module 3.

== Individual Assignments ==

You will create a simple grades database containing four tables.

'''IMPORTANT:''' The individual assignment is to be done by writing queries by hand. (You can use phpMyAdmin to run the queries, but '''do not let phpMyAdmin write your queries for you!''') Writing your own queries gives you a greater understanding of the underlying mechanisms and databases in general. Additionally, having SQL knowledge and experience is a very marketable trait.

=== Install MySQL and phpMyAdmin ===

Before you start, '''you need to install MySQL''' on your EC2 instance. You may also install phpMyAdmin, a web frontend to MySQL, if you choose to do so.

You may find the following article to be very helpful: [[Introduction to MySQL]]

=== Set Up a Database ===

You may find the following article to be very helpful: [[Introduction to MySQL]]

# Create a database named '''wustl'''
# Create a user named '''wustl_inst''' and give them the password '''wustl_pass'''

=== Create Tables ===

You may find the following article to be very helpful: [[MySQL Schema and State]]

When creating tables, keep the following items in mind:

* You should create all tables such that they use the InnoDB storage engine, since we wish to make use of its support of foreign keys. In other database engines, foreign key constraints are not enforced. (If you mess up, you can use ALTER TABLE to change the storage engine.)
* Where it is appropriate, you should take advantage of the ability to define fields NOT NULL so that you do not inadvertently insert incomplete data for a row.

Create the following tables:

# Create a table named '''students''' with the following fields:
#* '''id''' of an appropriately-sized unsigned integer type (we will never need to process more than a million students)
#* '''first_name''' of type '''VARCHAR(50)'''
#* '''last_name''' of type '''VARCHAR(50)'''
#* '''email_address''' of type '''VARCHAR(50)'''
#: The primary key should be on the '''id''' field.
# Create a table named '''departments''' with the following fields:
#* '''school_code''' of type '''ENUM''' (e.g. "L" for ArtSci and "E" for Engineering). The options are as follows:
#*: 'L', 'B', 'A', 'F', 'E', 'T', 'I', 'W', 'S', 'U', 'M'
#* '''dept_id''' of an appropriately-sized unsigned integer type (in the foreseeable future there will never be more than 200 departments in a school)
#* '''abbreviation''' of type '''VARCHAR(9)''' (e.g. CSE, ChemE, etc)
#* '''dept_name''' of type '''VARCHAR(200)''' (e.g. Computer Science and Engineering)
#: The primary key should be on two fields: '''school_code''' and '''dept_id'''
#: '''Note:''' Why not just use the department ID? The ID numbers are sometimes reused across schools. For instance, department 33 in The School of Arts and Sciences is Psychology while department 33 in The School of Engineering and Applied Sciences is Energy, Environmental and Chemical Engineering. Thus we must also include the school code to differentiate them such that the record for E33 is distinct from that of L33.
# Create a table named '''courses''' with the following fields:
#* '''school_code''' of type '''ENUM'''
#*: This should have the same letters in the same order as the '''school_code''' '''ENUM''' field in the '''departments''' table.
#* '''dept_id''' of the same size of integer as in the '''departments''' table
#* '''course_code''' of type '''CHAR(5)''' (this will hold course codes; e.g., '330S', '131', '2960')
#* '''name''' of type '''VARCHAR(150)'''
#: The appropriate fields in this table should make a foreign key reference to the corresponding fields in '''department'''.
#: In addition, it is up to you to determine the field(s) for the primary key.
#: '''Note:''' If you are unsure which fields to make the foreign keys and feel the need to beg your friends or the TAs to give you the answer, bang your head on your desk whilst repeating "I WILL EXERCISE REASON AND COMMON SENSE AND I WILL CURTAIL MY DESIRE TO BLINDLY FOLLOW DIRECTIONS"
#: ''Disclaimer: don't actually bang your head on your desk, the resulting head trauma may in fact make it harder for you to determine which fields should have associated foreign keys.''
# Create a table named '''grades''' with the following fields:
#* '''pk_grade_ID''' of an appropriately-sized unsigned integer type (should be larger than the one you chose for the '''students''' table)
#*: You should declare this field to be '''auto_increment''' and make it the primary key.
#*: This is called a ''surrogate key'' as opposed to a ''natural key'' because it doesn't arise "naturally" from the data; that is to say that it is not derived from application data. The use of surrogate keys vs. natural keys is a polemic issue amongst database designers. For a decently unbiased take on the issue, see this page: http://www.agiledata.org/essays/keys.html#Comparison
#*: '''Food for thought:''' Aside from simply exposing you to the concept, can you think of any reasons why a surrogate key might be preferable for this table? Alternatively, what attributes, if any, could you use as a natural key, and what might be the drawbacks of doing so?
#* '''student_id''' of the same integer (unsigned) type that you chose in the '''students''' table
#* '''grade''' of type '''decimal'''
#* '''school_code''' of type '''ENUM'''
#*: Can you guess what entries to use for the enum?
#* '''dept_id''' of the same integer type that you've used for this field in other tables
#* '''course_code''' of the same type you chose for the course code in the '''courses''' table
#: The '''grades''' table should have foreign keys to both the '''students''' table and the '''courses''' table.

=== Populate Tables ===

Now, populate the tables by downloading the text files given below and loading them into the appropriate tables.

'''Note:''' Do not insert all the values manually; instead, use the MySQL's ability to load in data from text files.

You may find the following article to be very helpful: [[MySQL Schema and State]]

The files containing the data are:

* students: https://docs.google.com/file/d/0ByHgvetJ0GJyMGFjMWI4MzAtMzljYy00Yjk3LTllMWItZjZkYmU1NzU3NWU0/edit
* courses: https://docs.google.com/file/d/0ByHgvetJ0GJyMGY1NGYzYmUtNGQwYi00MTY3LTkzMjgtMDYwOTM3NDNjZTg4/edit
* departments: https://docs.google.com/file/d/0ByHgvetJ0GJyZWY2OWE4ZWEtYzVmMC00YjBiLWEzZjgtYzdhMDczODAyNDli/edit
* grades: https://docs.google.com/file/d/0ByHgvetJ0GJyZmJjNzllNjAtMzdhZC00MzU5LTg3MDYtMTRmMjE5MDE2MzY2/edit

=== Insert More Data ===

Insert the following data into the tables that you have created and populated:

# Insert an entry for CSE 330
#: ''If you don't know CSE's department code, how can you find out using the tables in the database?''
# Insert the grades given for the students named below. You may choose to make the entries for whichever classes you like, with the one condition that all of the students must have a grade for CSE 330 (who wouldn't want to take that class: I hear the professor and TAs are amazing!)
#* '''Ben Harper'''
#** E-mail: '''bharper@ffym.com'''
#** Student ID: '''88'''
#** Grades:
#*** 5.5
#*** 0
#*** 20
#* '''Matt Freeman'''
#** E-mail: '''mfreeman@kickinbassist.net'''
#** Student ID: '''202'''
#** Grades:
#*** 100
#*** 90.5
#*** 94.8
#* '''Marc Roberge'''
#** E-mail: '''mroberge@ofarevolution.us'''
#** Student ID: '''115'''
#** Grades:
#*** 15
#*** 37
#*** 45.5
#: You may choose any 3 classes you'd like for them to be enrolled in, with at least one class, "CSE 330S", in which they are all enrolled.

=== Querying Your Database ===

Now that you have a fully-functional, populated database, let's do some queries on it!

Write the following '''select''' queries and then run them for a TA:

# Select the entire grades table.
# Select all fields describing the courses offered in the school of arts and sciences (school code L).
# The names, student IDs, and grades of the students who are in CSE330.
# The names and e-mails of any student with an average below 50 so that the dean can send them an email notification that they are now on academic probation.
#: ''You should be able to do this in only one query, without making any temporary tables. You will need to use aggregation functions and the '''having''' keyword.''
# An individual report card for Jack Johnson, consisting of two tables (these can be done using separate queries):
## His student ID, e-mail address, and average grade.
##: ''Again, you should be able to do this in just one query, using the correct combination of aggregation functions and joins.''
## The classes he is in and his grades for those classes. To give you an idea, one row in the table should look like this:
##: <code>E 81 400 Independent Study 98.5</code>

== Group Project ==

You will work in pairs on this project. You may work with the same partner from Module 2, or change to someone else.

'''Important Reminder:''' frequently commit your work to your subversion repository as a backup!

=== Simple News Web Site ===

'''Examples:'''
* http://digg.com/
* http://slashdot.org/

You should use '''PHP''' unless you get permission to use another web technology from the instructor. You may also use phpMyAdmin to help set up databases.

You may find this wiki article helpful: [[PHP and MySQL]]

==== Requirements ====

* Users can register for accounts and then log in to the website.
* Accounts should have both a username and a ''secure'' password. '''NEVER store plaintext passwords in a database!'''
*: For more information on password security, refer to [[Web Application Security, Part 2#Password Security|the Web Application Security guide]].
* Registered users can submit stories: either a link with summary or news text.
*: You do not have to make a distinction between the two types of stories, although if you want to, you could do something with this for the creative portion of your project.
* Registered users can comment on any story.
* Administrator users can delete stories and comments.
* Unregistered users can only view stories and comments.
* Registered users can edit their stories and can delete their comments.
* All data must be kept in a MySQL database (user information, stories, comments, and categories).

=== Web Security and Validation ===

Your project needs to demonstrate that thought was put into web security and best practice. For more information, see this week's Web Application Security guide: [[Web Application Security, Part 2]]

In particular:

* '''Your application needs to be secure from SQL injection attacks'''. If you are using prepared queries, you should already be safe on this front.
* '''All of your output needs to be sanitized using htmlentities()'''.

You shouldn't forget the practices you learned last week:

* '''You should pass tokens in forms''' to prevent CSRF attacks.
* '''Your page should validate''' with no errors through the W3C validator.

== Grading ==

<span style="font-size:2em; line-height:2em;">'''Due Date: _____ (both individual and group)'''</span>

{|
!Assignment
!Points
|-
|Tables Correct
|2
|-
|Data Queries Correct
|2
|-
!colspan="2"|Group Portion:
|-
|User Authentication
|1
|-
|User Registration
|1
|-
|Secure Password
|2
|-
|Main page displays all stories (or most recent stories)
|1
|-
|Page with individual story and comments
|1
|-
|Story Submission
|1
|-
|Comment System
|1
|-
|Administrator Deletion of Stories/Comments
|1
|-
|User Edit of Story/Comment
|2
|-
|Protect Against SQL Injection Attack
|1
|-
|Sanitize Output
|1
|-
|Older Web Security Practices and Validation
|1
|-
|Creative Portion
|2
|-
|}

[[Category:Module 3]]
[[Category:Modules]]

Module 3

2012-09-21T15:23:05Z

Marc: /* Group Project */

In Module 3, you will learn about MySQL, a web application database.

This article contains your assignments for Module 3.

== Individual Assignments ==

You will create a simple grades database containing four tables.

'''IMPORTANT:''' The individual assignment is to be done by writing queries by hand. (You can use phpMyAdmin to run the queries, but '''do not let phpMyAdmin write your queries for you!''') Writing your own queries gives you a greater understanding of the underlying mechanisms and databases in general. Additionally, having SQL knowledge and experience is a very marketable trait.

=== Install MySQL and phpMyAdmin ===

Before you start, '''you need to install MySQL''' on your EC2 instance. You may also install phpMyAdmin, a web frontend to MySQL, if you choose to do so.

You may find the following article to be very helpful: [[Introduction to MySQL]]

=== Set Up a Database ===

You may find the following article to be very helpful: [[Introduction to MySQL]]

# Create a database named '''wustl'''
# Create a user named '''wustl_inst''' and give them the password '''wustl_pass'''

=== Create Tables ===

You may find the following article to be very helpful: [[MySQL Schema and State]]

When creating tables, keep the following items in mind:

* You should create all tables such that they use the InnoDB storage engine, since we wish to make use of its support of foreign keys. In other database engines, foreign key constraints are not enforced. (If you mess up, you can use ALTER TABLE to change the storage engine.)
* Where it is appropriate, you should take advantage of the ability to define fields NOT NULL so that you do not inadvertently insert incomplete data for a row.

Create the following tables:

# Create a table named '''students''' with the following fields:
#* '''id''' of an appropriately-sized unsigned integer type (we will never need to process more than a million students)
#* '''first_name''' of type '''VARCHAR(50)'''
#* '''last_name''' of type '''VARCHAR(50)'''
#* '''email_address''' of type '''VARCHAR(50)'''
#: The primary key should be on the '''id''' field.
# Create a table named '''departments''' with the following fields:
#* '''school_code''' of type '''ENUM''' (e.g. "L" for ArtSci and "E" for Engineering). The options are as follows:
#*: 'L', 'B', 'A', 'F', 'E', 'T', 'I', 'W', 'S', 'U', 'M'
#* '''dept_id''' of an appropriately-sized unsigned integer type (in the foreseeable future there will never be more than 200 departments in a school)
#* '''abbreviation''' of type '''VARCHAR(9)''' (e.g. CSE, ChemE, etc)
#* '''dept_name''' of type '''VARCHAR(200)''' (e.g. Computer Science and Engineering)
#: The primary key should be on two fields: '''school_code''' and '''dept_id'''
#: '''Note:''' Why not just use the department ID? The ID numbers are sometimes reused across schools. For instance, department 33 in The School of Arts and Sciences is Psychology while department 33 in The School of Engineering and Applied Sciences is Energy, Environmental and Chemical Engineering. Thus we must also include the school code to differentiate them such that the record for E33 is distinct from that of L33.
# Create a table named '''courses''' with the following fields:
#* '''school_code''' of type '''ENUM'''
#*: This should have the same letters in the same order as the '''school_code''' '''ENUM''' field in the '''departments''' table.
#* '''dept_id''' of the same size of integer as in the '''departments''' table
#* '''course_code''' of type '''CHAR(5)''' (this will hold course codes; e.g., '330S', '131', '2960')
#* '''name''' of type '''VARCHAR(150)'''
#: The appropriate fields in this table should make a foreign key reference to the corresponding fields in '''department'''.
#: In addition, it is up to you to determine the field(s) for the primary key.
#: '''Note:''' If you are unsure which fields to make the foreign keys and feel the need to beg your friends or the TAs to give you the answer, bang your head on your desk whilst repeating "I WILL EXERCISE REASON AND COMMON SENSE AND I WILL CURTAIL MY DESIRE TO BLINDLY FOLLOW DIRECTIONS"
#: ''Disclaimer: don't actually bang your head on your desk, the resulting head trauma may in fact make it harder for you to determine which fields should have associated foreign keys.''
# Create a table named '''grades''' with the following fields:
#* '''pk_grade_ID''' of an appropriately-sized unsigned integer type (should be larger than the one you chose for the '''students''' table)
#*: You should declare this field to be '''auto_increment''' and make it the primary key.
#*: This is called a ''surrogate key'' as opposed to a ''natural key'' because it doesn't arise "naturally" from the data; that is to say that it is not derived from application data. The use of surrogate keys vs. natural keys is a polemic issue amongst database designers. For a decently unbiased take on the issue, see this page: http://www.agiledata.org/essays/keys.html#Comparison
#*: '''Food for thought:''' Aside from simply exposing you to the concept, can you think of any reasons why a surrogate key might be preferable for this table? Alternatively, what attributes, if any, could you use as a natural key, and what might be the drawbacks of doing so?
#* '''student_id''' of the same integer (unsigned) type that you chose in the '''students''' table
#* '''grade''' of type '''decimal'''
#* '''school_code''' of type '''ENUM'''
#*: Can you guess what entries to use for the enum?
#* '''dept_id''' of the same integer type that you've used for this field in other tables
#* '''course_code''' of the same type you chose for the course code in the '''courses''' table
#: The '''grades''' table should have foreign keys to both the '''students''' table and the '''courses''' table.

=== Populate Tables ===

Now, populate the tables by downloading the text files given below and loading them into the appropriate tables.

'''Note:''' Do not insert all the values manually; instead, use the MySQL's ability to load in data from text files.

You may find the following article to be very helpful: [[MySQL Schema and State]]

The files containing the data are:

* students: https://docs.google.com/file/d/0ByHgvetJ0GJyMGFjMWI4MzAtMzljYy00Yjk3LTllMWItZjZkYmU1NzU3NWU0/edit
* courses: https://docs.google.com/file/d/0ByHgvetJ0GJyMGY1NGYzYmUtNGQwYi00MTY3LTkzMjgtMDYwOTM3NDNjZTg4/edit
* departments: https://docs.google.com/file/d/0ByHgvetJ0GJyZWY2OWE4ZWEtYzVmMC00YjBiLWEzZjgtYzdhMDczODAyNDli/edit
* grades: https://docs.google.com/file/d/0ByHgvetJ0GJyZmJjNzllNjAtMzdhZC00MzU5LTg3MDYtMTRmMjE5MDE2MzY2/edit

=== Insert More Data ===

Insert the following data into the tables that you have created and populated:

# Insert an entry for CSE 330
#: ''If you don't know CSE's department code, how can you find out using the tables in the database?''
# Insert the grades given for the students named below. You may choose to make the entries for whichever classes you like, with the one condition that all of the students must have a grade for CSE 330 (who wouldn't want to take that class: I hear the professor and TAs are amazing!)
#* '''Ben Harper'''
#** E-mail: '''bharper@ffym.com'''
#** Student ID: '''88'''
#** Grades:
#*** 5.5
#*** 0
#*** 20
#* '''Matt Freeman'''
#** E-mail: '''mfreeman@kickinbassist.net'''
#** Student ID: '''202'''
#** Grades:
#*** 100
#*** 90.5
#*** 94.8
#* '''Marc Roberge'''
#** E-mail: '''mroberge@ofarevolution.us'''
#** Student ID: '''115'''
#** Grades:
#*** 15
#*** 37
#*** 45.5
#: You may choose any 3 classes you'd like for them to be enrolled in, with at least one class, "CSE 330S", in which they are all enrolled.

=== Querying Your Database ===

Now that you have a fully-functional, populated database, let's do some queries on it!

Write the following '''select''' queries and then run them for a TA:

# Select the entire grades table.
# Select all fields describing the courses offered in the school of arts and sciences (school code L).
# The names, student IDs, and grades of the students who are in CSE330.
# The names and e-mails of any student with an average below 50 so that the dean can send them an email notification that they are now on academic probation.
#: ''You should be able to do this in only one query, without making any temporary tables. You will need to use aggregation functions and the '''having''' keyword.''
# An individual report card for Jack Johnson, consisting of two tables (these can be done using separate queries):
## His student ID, e-mail address, and average grade.
##: ''Again, you should be able to do this in just one query, using the correct combination of aggregation functions and joins.''
## The classes he is in and his grades for those classes. To give you an idea, one row in the table should look like this:
##: <code>E 81 400 Independent Study 98.5</code>

== Group Project ==

You will work in pairs on this project. You may work with the same partner from Module 2, or change to someone else.

'''Important Reminder:''' frequently commit your work to your subversion repository as a backup!

=== Simple News Web Site ===

'''Examples:'''
* http://digg.com/
* http://slashdot.org/

You should use '''PHP''' unless you get permission to use another web technology from the instructor. You may also use phpMyAdmin to help set up databases.

You may find this wiki article helpful: [[PHP and MySQL]]

==== Requirements ====

* Users can register for accounts and then log in to the website.
* Accounts should have both a username and a ''secure'' password. '''NEVER store plaintext passwords in a database!'''
*: For more information on password security, refer to [[Web Application Security, Part 2#Password Security|the Web Application Security guide]].
*: You need to implement your own authentication system for this module; that is, you may not use something like OpenID. You may, however, use OpenID in future modules.
* Registered users can submit stories: either a link with summary or news text.
*: You do not have to make a distinction between the two types of stories, although if you want to, you could do something with this for the creative portion of your project.
* Registered users can comment on any story.
* Administrator users can delete stories and comments.
* Unregistered users can only view stories and comments.
* Registered users can edit their stories and can delete their comments.
* All data must be kept in a MySQL database (user information, stories, comments, and categories).

=== Web Security and Validation ===

Your project needs to demonstrate that thought was put into web security and best practice. For more information, see this week's Web Application Security guide: [[Web Application Security, Part 2]]

In particular:

* '''Your application needs to be secure from SQL injection attacks'''. If you are using prepared queries, you should already be safe on this front.
* '''All of your output needs to be sanitized using htmlentities()'''.

You shouldn't forget the practices you learned last week:

* '''You should pass tokens in forms''' to prevent CSRF attacks.
* '''Your page should validate''' with no errors through the W3C validator.

== Grading ==

<span style="font-size:2em; line-height:2em;">'''Due Date: _____ (both individual and group)'''</span>

{|
!Assignment
!Points
|-
|Tables Correct
|2
|-
|Data Queries Correct
|2
|-
!colspan="2"|Group Portion:
|-
|User Authentication
|1
|-
|User Registration
|1
|-
|Secure Password
|2
|-
|Main page displays all stories (or most recent stories)
|1
|-
|Page with individual story and comments
|1
|-
|Story Submission
|1
|-
|Comment System
|1
|-
|Administrator Deletion of Stories/Comments
|1
|-
|User Edit of Story/Comment
|2
|-
|Protect Against SQL Injection Attack
|1
|-
|Sanitize Output
|1
|-
|Older Web Security Practices and Validation
|1
|-
|Creative Portion
|2
|-
|}

[[Category:Module 3]]
[[Category:Modules]]

Module 2

2012-09-21T15:21:07Z

Marc: /* Uploading Files to Your Server */

In Module 2, you will learn about HTML, CSS, and PHP.

This article contains your assignments for Module 2.

<span style="font-size:1.2em; line-height:1.2em;">'''DO NOT WAIT UNTIL THE LAST MINUTE TO START ON THIS (or any) MODULE!''' The most common reason students perform poorly in this class is due to procrastination. You have been warned.</span>

== Individual Assignments ==

=== Learning HTML and CSS ===

You need to become familiar with HTML and CSS. Read the HTML and CSS guide to get started: [[HTML and CSS]]

=== Write a Birthday Card ===

'''Write a birthday card to a friend or family member using HTML and CSS.''' Use HTML do define the content of the card (like the headings and the paragraphs), and use CSS to define the appearance. Some ideas:

* Make the background-color of the page baby blue and use purple ink to write a card to a little boy
* Make the text big and red, and include pictures of hearts
* Use a boxy font with text shadows to make your card look urban (more advanced)

Remember that you're in a computer science class (not an art class), so we don't care if your card looks ugly. The main thing is that you learn HTML and CSS and use them appropriately.

'''Hint:''' For tips on editing files, see [[#Tips on Editing Files]] farther down on this page.

=== Validation ===

Your birthday card must pass the W3C Validator with no errors. For more information see the HTML and CSS guide: [[HTML and CSS#Validation]]

=== Installing PHP ===

You need to '''install PHP on your EC2 server'''. Instructions are at the top of the PHP guide: [[PHP]]

You need to '''configure PHP to show errors'''. Instructions are immediately below installation in the PHP guide.

=== Learning the PHP Language ===

Before you can continue, you will need to make yourself acquainted with PHP language components. Read the PHP guide for an overview: [[PHP#PHP Language Components]]

=== Calculator 1 ===

'''Make a calculator that uses PHP to multiply two variables provided in the URL and displays the result on a page.'''

=== Calculator 2 ===

'''Make a second calculator. This one should have an HTML form for the two inputs.''' It can either POST back to the same page, or to a different result page. In addition to multiplication, this page should support addition, subtraction, and division, by means of a radio button group on the page.

== Group Project ==

You will work in pairs (that means you and one other person) on this project.

'''Important Reminder:''' frequently commit your work to your subversion repository as a backup!

=== Simple File Management Site ===

You will be making a simple file management site that supports uploading, viewing, and deleting files associated with various usernames. Details:

* You should have a file named '''users.txt''' stored in a secure place on your filesystem. It should have one username per line.
* Users need to specify their username before they can sign into your site. You should check to see if their username is present in '''users.txt'''. (Passwords add an extra layer of complexity that we will cover in a later module.)
* Use PHP Session variables to keep track of the user who is logged in.
* Once in the system, you will present the available files for that user. The user then can delete these files, display/open them, or upload new files.
* A user should be able to see only his/her own files.
* When a user logs out, all files should be inaccessible until logging back in.
* You need to support at least 3 different users.
** Registering new users is NOT necessary (although you may do so for part of the creative portion)
* The url should NOT reveal internal file structure (including file names, so don't just link to the actual file on the web page!)
** Example of what not to do: http://www.example.com/download.php?file=/home/paul/file.txt
** Another bad example: http://www.example.com/~user/file.txt
*: In general, don't reveal any internal information about the site.
* Food for thought: Given that Apache processes (with the exception of the main process) do not run as root, but rather as the user apache, how can you allow both your user account and the php scripts to read and write the necessary files?
* Creative portion: add an extra function to the site.
** It must be non-trivial, and involve learning outside the instructions provided in the class materials
** This idea needs to be approved by the TAs/Professor. Discuss it with at least one TA or the professor before proceeding.
** Note that the creative portion is worth double the points of a regular task. Creative portions will not be given full credit if they are too simple, or are simply rehashed things that you've already done (whether it be in this or previous modules).

You will probably find the PHP guide on this wiki to be helpful: [[PHP#Other PHP Tips]]

=== Web Security and Validation ===

Your project needs to demonstrate that thought was put into web security and best practice. For more information, see this week's Web Application Security guide: [[Web Application Security, Part 1]]

In particular:

* '''Your application needs to be safe from CSRF attacks'''. That is, '''you should pass tokens when uploading and deleting files''' in order to prevent request forgeries.
* '''Your project must pass the W3C Validator with no errors'''. For more information, see the HTML and CSS guide: [[HTML and CSS#Validation]]

== Tips on Editing Files ==

You have several choices when it comes down to actually editing files on your web site.

* You can use a command-line text editor, like '''emacs''', '''vi''', or '''nano'''
* You can use a GUI text editor, like Notepad++ or TextWrangler
* You can use a full GUI IDE, like Eclipse
* You can also edit files directly using WinSCP or FIleZilla, or other SFTP programs (see following section).

The choice is really what you prefer. Using the GUI certainly has numerous advantages over a command-line interface, but it's sometimes simpler to edit files directly on your server. Either way, you should frequently commit changes to your repository.

See [[#Uploading Files to Your Server]] for tips on editing files on your desktop and then uploading them to your server.

If you use an IDE, you should consider using the Aptana Studio plugin for Eclipse. Aptana Studio gives you tools for developing in HTML, CSS, JavaScript, and PHP. To install it in Eclipse:

# In Eclipse, go to '''Install New Software...'''
# Add the following URL: http://update.aptana.com/update/studio/
#: If that doesn't work, you can try directly downloading Aptana from http://aptana.com/products/studio3/download
# Load the packages and install Aptana Studio.
# Restart Eclipse.
# In the Aptana Studio welcome screen, go to Plugins
# Install the Aptana Studio PHP plugin
# Restart Eclipse again.

If you don't want to use Eclipse, there are other free text editors that you can use on your computer. Notepad++ is a good choice for Windows, and TextWrangler is a good choice for Mac OS X.

* You may want to download Notepad++ and save it to your H: drive. Link: http://notepad-plus-plus.org/
* You can download TextWrangler from here (or just get it from the Mac App Store): http://www.barebones.com/products/TextWrangler/

=== Uploading Files to Your Server ===

If you edit files on your desktop, there are several ways to upload those files to your server.

* If you edit the files in Eclipse, just commit changes to your repository, and on your server, run <code>svn update</code> to pull the changes down. This works best if you have [[Web Server Configuration#Pointing Apache to your Repository|configured Apache to point to your SVN repository]].
* You can use as SSH filesystem client to make local files automatically update on your server. For instructions, see [[Web Server Configuration#SSHFS|the Web Server Configuration guide]] from Module 1.
* You can use an SFTP client like FileZilla (universal) or WinSCP (if on Windows) to upload files to your server. For instructions, see [[Web Server Configuration#SFTP|the Web Server Configuration guide]] from Module 1.

If you need help setting up an SSH filesystem or an SFTP client, you may ask a TA. Once everything is up and running, you will be able to easily upload files to your server for the remainder of this course.

'''Note:''' It is recommended, although not required, to backup files using SVN.

== Grading ==

<span style="font-size:2em; line-height:2em;">'''Due Date: Monday September 24th, by 1 PM (both individual and group)'''</span>

{|
!Assignment
!Points
|-
|Birthday Card Content
|1
|-
|Birthday Card Validation
|1
|-
|Calculator 1
|1
|-
|Calculator 2
|2
|-
!colspan="2"|Group Portion:
|-
|Multi-User Login
|1
|-
|Logout Mechanism
|1
|-
|Can't Access Other Users' Files
|1
|-
|Can't See File/Directory Structure
|1
|-
|Can Upload New Files
|1
|-
|Can View/Download Files
|1
|-
|Can Delete Files
|1
|-
|Cross-Site Request Forgery Safe
|1
|-
|Validation
|1
|-
|Creative Portion
|2
|}

[[Category:Module 2]]
[[Category:Modules]]