iblash-appdev/photogram-gui

Photogram GUI

In this project, we'll practice populating our pages with data from our tables.

We'll also build forms and links to finally allow our users to CRUD data into our tables, instead of relying on rails console, /rails/db, rails sample_data, etc.

Target

Here's our target.

Starting point

If you look at the config/routes.rb file, or navigate to /rails/info, you'll see that there aren't any routes defined yet. We have to build them all ourselves.

However, we're not starting competely from scratch. Navigate to /rails/db and you'll see that the database exists already; it's the structure that we designed way back in Weeks 1 & 2.

Also, crucially, the models already exist; and within the models, I've already defined the "association accessor" methods that we practiced writing together. These methods make it much easier to actually use the foreign keys and join tables that we painstakingly planned out in our domain model, rather than having to write cumbersome .where queries all over the place.

Spend some time reading the methods in the models; particularly the ones in app/models/user.rb. There are a lot, because in a social network there are so many important relationships between entities, and the whole point of the application is to query these relationships.

Once you're comfortable with the methods, let's proceed to building the interface. Having these methods at our fingertips is going to make our job a lot easier.

Domain model

For a quick overview of your database, there's an ERD located in the root-level folder of the application, erd.png.

You can also always look at the comments at the top of each of your models in app/models to remind yourself of what columns it has.

Tasks

The required tasks are:

• /users should
  • display all the users
  • a link to get to details for each user
  • a form to add a new user
• /users/[USERNAME] should
  • display the username of the user
  • the photos posted by the user
• /photos should have a form to add a new photo
• /photos/[ID] should
  • display the details of a photo
  • displays the comments that have been made on the photo
  • have a form to add a comment to the photo

Workflow

1. As often as you like, reset your database with sample data: rails sample_data
2. Start the web server: bin/server
3. Always Be Committing at /git
4. Check out your database visually at /rails/db
5. Run rails grade as often as you like to see how you are doing, but test whatever you're working on manually first to make sure it matches the target's behavior. Don't debug using rails grade; that is a terribly slow feedback loop.

Things to keep in mind

• I added some validations, rules to try and help prevent bogus data from entering your tables, to your models. If your record is mysteriously not saving, then a validation is failing (or you just forgot to call .save, which I do all the time).

• Don't be alarmed by the number of automated tests. Most of them are there as hints to help you structure your forms correctly.

• It's okay to View Source on the target to get hints on what HTML we used.

• When you make forms, don't forget to add a <label> for every form control (<input>, <textarea>, etc). The <label> should have a for="" attribute that matches the id="" attribute of the input. For example,

  <label for="zebra">Fan</label>
  <input id="zebra" type="text" name="qs_fan_id">

Specs

Click here to see names of each test

/users has a functional Route Controller Action View

Home page is the same page as the /users page

/users displays each User record in a tr html element

/users displays a link to each User's details page

/users has one form to add a new User

/users has a label with the text 'Username'

/users has a button with the text 'Add user'

/users displays the usernames of all users

/users Add user form creates a user record when the form is submitted

/users Add user form saves the username when submitted

/users Add user form redirects to /users/[USERNAME] page when submitted

/users/[username] has a functional Route Controller Action View

/users/[username] displays the username of the user

/users/[username] has a label for 'Username', with text: 'Username'

/users/[username] has a button with text, 'Update user'

/users/[username] has username prepopulated in an input element

/users/[USERNAME] displays the photos images posted by the user and the captions of those photos

/users/[USERNAME] Update user form updates username when submitted

/users/[USERNAME] Update user form redirects to /users/[USERNAME] page

/photos has a functional Route Controller Action View

/photos has a form

/photos has a label for 'Image' with text: 'Image'

/photos has two input elements (one for image and owner id)

/photos has a label with text 'Caption'

/photos has one textarea element (for Caption)

/photos has a button with text 'Add photo'

/photos creates a Photo when 'Add photo' form is submitted

/photos saves the caption when 'Add photo' form is submitted

/photos saves the image URL when 'Add photo' form is submitted

/photos 'Add photo' form redirects to /photos/[PHOTO ID] when submitted

/photos/[ID] displays the caption of the photo

/photos/[ID] displays the username of the poster of the photo

/photos/[ID] displays the comments that have been made on the photo

/photos/[ID] displays the usernames of the commenters of the photo

/delete_photo/[PHOTO ID] removes a record from the Photo table

/delete_photo/[PHOTO ID] redirects to /photos

/photos/[ID] has at least one form

/photos/[ID] has all required forms (Edit Photo and New Comment)

/photos/[ID] has a label with text 'Image'

/photos/[ID] has a label with text 'Caption'

/photos/[ID] has two textareas (for caption and comment)

/photos/[ID] has a button with text 'Update photo'

/photos/[ID] 'Update photo' form has image url prepopulated in an input element

/photos/[ID] 'Update photo' form has caption prepopulated in a textarea element

/photos/[ID] 'Update photo' form updates caption when submitted

/photos/[ID] 'Update photo' form updates the Photo's image column when submitted

/photos/[ID] 'Update photo' form redirects to the photo's details page when updating photo

/photos/[ID] — Add comment form has a label with text 'Author ID'

/photos/[ID] — Add comment form has a label with text 'Comment'

/photos/[ID] — Add comment form has a textarea for the comment

/photos/[ID] — Add comment form has a button with text 'Add comment'

/photos/[ID] — Add comment form creates a new comment record when submitted

/photos/[ID] — Add comment form redirects to /photos/[ID] when creating new comment