Project 6: Dynamic Pages Using Templates

Due: Wednesday, February 18, 2009
15 points

In this project you will use Ruby on Rails to generate dynamic Web pages based on content we have provided in a database. The application is a simple photo-sharing Web site; there are several users, each with a collection of photos, and users can comment on each other's photos. Your application will generate Web pages to display users, photos, and comments.

Step 1: Install Ruby and Rails

If you use a Windows-based computer, click here and follow the instructions for installing InstantRails. This will install everything you need for this class, including the Ruby language, the Rails framework, and the MySQL database.

If you use a Macintosh, click here and follow the installation instructions.

If you are on Linux, check out Installing Ruby on Rails in Linux. The instructions include everything you should need for the project, including MySQL installation. Please note that we have only skimmed this page. We have not tested the instructions! If you have any problems, post on newsgroup so that TA's or other students can help you.

Make sure you have tested your installation as described in the instructions for your machine type.

Step 2: Project Setup

We have created a skeleton for this project that will create the beginnings of a Rails application and set up a database and a collection of photos for your application to use. The skeleton is a zip file available at http://crypto.stanford.edu/cs142/projects/6/p6skeleton.zip.

Windows Instructions

If you use a Windows-based computer, unzip this file in the directory rails_apps under your InstantRails installation. When you're done, make sure that rails_apps contains a folder named project6 and that there is a folder named app within the project6 folder. Now use InstantRails to initialize the database and test the skeleton:

• Start Instant Rails.
• If you click on the "I" box next to the "Apache" box, a menu appears. In this menu, select "Rails Applications -> Manage Rails Applications...".
• In the "Rails Applications" panel that appears, click on "Create New Rails App...". This should open a cmd window in the parent directory of project6 (rails_apps). You aren't really going to create a new Rails application here, but this gets you a cmd window in the right place for the commands below.
• In the cmd window, type the following commands, which will update your Rails installation to include versions even more recent than what's in InstantRails:

  gem update
  gem update --system
  gem update rails --include-dependencies
  

• In the cmd window, invoke the following commands:

  cd project6
  rake db:create
  rake db:migrate
  mysql -u root project6_development < db/project6.sql
  

  These commands will create a database for the project and fill in some initial data for your project to use.
• Go back to the "Rails Applications" panel, select the project6 application, then click "Start with Mongrel". This will start up the skeleton application.
• Go to Firefox and enter the URL http://localhost:3000/test/main. You should see a page saying "Congratulations: you have installed the skeleton for Project 6".
• If a pop-up window appears with the message "The procedure entry point mysql_stmt_row_tell could not be located in the dynamic link library LIBMYSQL.dll" then stop InstantRails and the Mongrel server, go to the top-level directory containing your Instant Rails installation and copy the file mysql/bin/libmySQL.dll to ruby/bin/libmySQL.dll, then restart InstantRails and the Mongrel server and refresh the Web page.

Mac OSX Instructions

• Unzip the project in your home directory: /Users/username/. When unzipped make sure you have have the project6 directory in your home directory and that there is a directory named app within the project6 directory.
• Open up your terminal and run the following commands in your home directory:

  cd project6
  rake db:create
  rake db:migrate
  mysql -u root project6_development < db/project6.sql
  

• Now start the Mongrel server by running the following in the command line:

  script/server
  

• Go to Firefox and enter the URL http://localhost:3000/test/main. You should see a page saying "Congratulations: you have installed the skeleton for Project 6".

Step 3: Create the Application

Your application must support two URLs. The first URL is /pics/allUsers. When this URL is referenced your application must return a Web page that displays a list of all users in the database. The user names must be links: clicking on a user name displays the photos for that user, as described below.

The second URL supported by your application has the form /pics/user/id, where id is the database identifier for a particular user. When this URL is referenced your application must return a web page displaying all of the photos belonging to that user. For each photo you must display the photo itself, the creation time for the photo, and all of the comments for that photo. For each comment you must display the time when the comment was created, the name of the user who created the comment, and the text of the comment. The creator for each comment should be a link that can be clicked to switch to the photos page for that user.

Your implementation should follow the normal MVC structure used for Rails applications. There should be one controller class, PicsController, in file project6/app/controllers/pics_controller.rb, containing one action method for each URL. Each action method should create instance variables containing the data needed for its page (using the model classes described below). Each page should be rendered by a separate view, which uses the global data collected by the controller. The views are in the directory project6/app/views/pics.

The following Rails utility command will create files for the controller and views for this project:

ruby script/generate controller pics allUsers user

Although you don't need to spend a lot of time on the appearance of the pages you generate, they should be neat and understandable. They should have meaningful titles, and the information layout should be clean (e.g., it should be clear which photo each comment applies to). There should be no style information directly in the HTML: use a single CSS stylesheet named project6.css, which should be placed in the directory project6/public/stylesheets.

Model Classes and Data Provided For You

The skeleton for your project includes three model classes User, Photo, and Comment that you can use to access data for your Web pages. These classes correspond to database tables named users, photos, and comments, and we have preloaded the database with records in each of these tables.

The method User.find(:all) will return a collection of User objects, one for each user in the database, and User.find(id) will return a User object for the user whose database identifier is id (if the identifier is invalid then it throws a RecordNotFound exception). Each User object contains the following attributes:

id	Primary key for this user.
first_name	First name of the user.
last_name	Last name of the user.

In addition, each User object contains a photos method that returns a collection of Photo objects, one for each photo that was created by that user. Each Photo object contains the following attributes:

id	Primary key for this photo.
user_id	Identifier for the user who created the photo.
date_time	The date and time when the photo was added to the database.
file_name	Name of a file containing the actual photo (in the directory project6/public/images). The skeleton for the project contains a collection of photos in the images directory.

Finally, each Photo object also contains a comments method that returns a collection of Comment objects, one for each comment that exists for that photo. Each Comment object contains the following attributes:

id	Primary key for this comment.
photo_id	Identifier for the photo which this comment belongs.
user_id	Identifier for the user who created the comment.
date_time	The date and time when the comment was created.
comment	The text of the comment.

Additional Requirements, Hints, etc.

• You must work alone for this project. You may discuss general approaches with other people, and you may ask for help if you get stuck, but you must design your own Web pages and type your own code.
• Your application must generate valid XHTML. You can use http://validator.w3.org to validate your XHTML.
• Any file in the directory project6/public can be accessed from the Web using a URL. For example, the file project6/public/x/y/z corresponds to the URL /x/y/z.
• If a URL for a Rails application has the form /controller/action/number, where controller selects a Controller class and action selects a method within that class, number is assumed to be an identifier selecting a specific object; within the action method you can access number with the variable params[:id].
• If you direct your browser to the root page for your application ( http://localhost:3000/), you will see a Rails information page with links to online documentation for both Rails and Ruby.

Extra Fun (but no extra credit)

If you are having so much fun with this project that you just don't want to stop, here are some additional things you can do:

• Make it pretty: go beyond the minimum requirement for the project to produce a really attractive presentation. We will announce in class the names of the students with the nicest-looking pages, in our opinion.
• On the allUsers page, add an extra link for each user, which will display a new page showing all of the photos with comments by that user. For each photo, display all of the comments by all users, but highlight the comments by the particular user to make them stand out.

Deliverables

Use the standard class submission mechanism to submit your entire project6 directory and its descendents. Please indicate in a README file whether you developed on Windows or a Macintosh (we may need this information in order to test your solution).

Section Material

Here are the section notes.