Module 2

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

This article contains your assignments for Module 2.

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.

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

Okay, so you've set up your server and are ready to start writing HTML, CSS, PHP, Python, and Ruby. How can you do it?

It is essential that you set up a workflow that suits your needs. Reading this article will make your life 10× easier for the rest of the semester.

Step 1: Choose Your Interface

You first need to choose how you want to approach file editing. You have a few choices:

1. You can use a command-line text editor, like emacs, vi, or nano.
2. You can use a GUI text editor, like Notepad++ or TextWrangler.
3. You can use a full-scale integrated development environment (IDE), like Eclipse.

The most important aspect to consider is what you are most comfortable using. In particular, you don't have to keep using command-line text editors for this class. The graphical user interface was invented for a reason. Don't feel like using vi or emacs will make you a good programmer, because I promise: it doesn't. If you like emacs or vi, that's great, but know that there are other equally powerful options.

Step 2: Set Up Your Editor

This section covers how to configure your editor of choice to be most efficient at web development.

Command Line Text Editors

The communities behind command-line text editors are strong, and so there are plugins available to make your editor of choice more well suited to programming in HTML, CSS, PHP, and other web languages. Here are some links to tutorials that will show you how to set up your command line text editor of choice:

• Emacs: http://emacswiki.org/emacs/PhpMode
• Vim: http://net.tutsplus.com/sessions/vim-essential-plugins/
• Nano: http://www.nublue.co.uk/blog/tuning-nano-for-web-development-syntax-highlighting/

Graphical Text Editors

Notepad++ and TextWrangler are free GUI text editors for Windows and Mac OS X, respectively. You can download them from here:

• Notepad++: http://notepad-plus-plus.org/ (you might want to save it to your H: drive)
• TextWrangler: Available from the Mac App Store or from http://www.barebones.com/products/TextWrangler/

There are tools available for both to speed up your web development routine. Here are some helpful web sites:

• Notepad++: http://adamzwakk.com/?p=512
• TextWrangler: http://magp.ie/2011/01/10/tidy-and-format-your-php-and-meet-wordpress-standards-on-coda-and-textwrangler/

Integrated Development Environment

Aptana is a web development toolkit that can be installed as a plugin to Eclipse or as a separate application. Web site: http://www.aptana.com/

Follow these instructions to install Aptana as a plugin to Eclipse.

1. In Eclipse, go to Install New Software...
2. Add the following URL: http://update.aptana.com/update/studio/
3. Load the packages and install Aptana Studio.
4. Restart Eclipse.
5. In the Aptana Studio welcome screen, go to Plugins
6. Install the Aptana Studio PHP plugin
7. Restart Eclipse again.

Step 3: Saving Your Project

If you edit your files directly on the server using a command-line text editor, you can use them right away. However, if you do, you are in danger of accidentally losing your code because you don't have it backed up anywhere. It is easy to destroy your entire project by pressing the wrong key in vim/emacs/nano! CSE330 students in past semesters have lost days worth of work because they used vim/emacs/nano to edit their files but didn't commit them to SVN.

If you edit your files on your desktop, you will always have a second copy, so this is less of an issue. However, since SVN is a version control system, you should still backup your files to SVN at the end of the day.

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 svn update to pull the changes down. This works best if you have 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 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 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.

To reiterate: It is highly recommended, although not required, to backup files using SVN no matter how you edit and save them.

Grading

Due Date: Monday September 24th, by 1 PM (both individual and group)

Assignment	Points
Birthday Card Content	1
Birthday Card Validation	1
Calculator 1	1
Calculator 2	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