Homework for 9

Exercise: Fill in the blanks app

  1. Clone (git clone) this app to your local drive
  2. cd into fill_in_the_blanks and run bundle
  3. Oh no! One of your gems has gone rogue! Find it and remove it. While you're there, add the pry-rails gem to your app. Which group block does this gem go inside?
  4. Run bundle again
  5. Run rails server
  6. Navigate to localhost:3000 in your browser. What does the error indicate?
  7. Run the proper command to resolve the error.
  8. Run rails server again, is localhost:3000 working? Read the new error then continue on to step 9...
  9. There's a controller already made for you (not application_controller), navigate to that controller and inspect the name, what's wrong with it? (Think convention) Find the problem and correct it.
  10. Navigate to your routes and fix the code there to resolve the error from your browser (Hint: It has to do with your root).
  11. Your controller has all of your CRUD actions and a private method for whitelisting, but they're empty. We'll fill them out as we move through the following steps, use the comments inside of the actions as guidelines.
  12. Create corresponding views for each of your actions.
  13. Which actions do we not create views for? Why?
  14. Navigate to localhost:3000/posts/new in your browser
  15. Oh no, we get an error! What does the error indicate? How can we fix it?
  16. Create routes for your posts. Does the error go away?
  17. We have some seeded data already in the app, where is it located? What command do we run to seed the data?
  18. Run the seed command in your terminal.
  19. Now we have some seed data, how can we get that data to display on our index view?
  20. Fill in the code to have our posts display properly.
  21. We want to add some more posts, edit your new view and the corresponding _form partial to allow creation of new posts via a form.
  22. What other files do we need to fill in before the new form will work properly? Be sure to add validations to the Post model.
  23. Go back to your posts_controller and fill in the corresponding actions to allow creation and viewing of a Post.
  24. Now we want to go back and edit one of our existing posts. Fill in the corresponding view and actions to make this work.
  25. Almost done! Add a button next to each Post that allows us to destroy that post.

BONUS:

Your app should:

Push this app to a new repo in your GitHub called fill_in_the_blanks then submit the link via Piazza

Lekker Plekke

So far our app doesn't do much, so let's make it a bit more interesting by adding in comments. Use your newly acquired knowledge to build in a second model and an appropriate association!

  1. Create a new model called Comment which will handle comments on places. Each comment needs to have the name of the person posting (commenter), the text of the comment (text), as well as a reference to the place. What are the datatypes of these attributes? (Hint: refer to the weblog app. Speficially, how do you associate comments to a place?).

Don't forget to run your migration! (Bonus: What happens after you run rake db:migrate?)

  1. Add in the appropriate associations in the Comment and Places model. What is the relationship between the two? (Bonus: How is this represented in the schema?)

  2. Add in your appropriate routes for comments. This is what you call a "nested resource". (Bonus: How many more routes are created?)

  3. Now let's add a comments controller. Define and fill in a method for create. Don't forget about comment_params!

  4. Concept Question: Where do we want our comments to show up? Ideally we want all comments associated with a specific place to be displayed on the bottom of that place's specific page. Which view is that? What is the url the view maps to?

We will first create a partial for the comments form, and then render that partial onto the aforementioned view.

  1. Create a file called _comment.html.erb under `app/views/comments/_comments.html'. What does the underscore mean? Why do we use these?

  2. In that file, create two paragraph elements. In the first element, display the comment's commenter, and in the second, display the comment's text. Add any supporting text you'd like to help a potential user navigate the form (ie "Commenter: " or "Comment: ").

  3. Navigate to app/views/places/show.html.erb, which is the view for any specific place (Checkpoint: was this the view you were thinking of earlier?). Add code to display all comments and also a form to add new comments. (BONUS: How can we refactor our current code in our form to make it better? Why is that better?)

Lekker!!

BONUS: Judge a Book by its Cover

Let's add some styling. An easy way of making your web apps look instantly better is to use Bootstrap. Bootstrap provides you with custom CSS, Javascript, and some other fun things that you can use once installed into your app. For example, Bootstrap pre-defines CSS classes to make your HTML elements look a certain way. To make your site match, you can just add the same CSS class to your HTML. To read more, you can check out this resource.

For our purposes, we just need to install the css into our rails app. To install: 1. Go to your Gemfile 2. Add gem "twitter-bootstrap-rails" to the list. 3. Run bundle install. 4. Run rails generate bootstrap:install static

Some background on gems: you can view gems as libraries or plug-ins specifically made for rails apps. It's some functionality (ie styling, passwords) that you install to fill a specific need. Gems are super powerful, and you should definitely use them in your final project!

Voila! Play around with adding certain CSS classes to your HTML elements! You can refer to the css page of Bootstrap for reference.

BONUS BONUS: Extensions

Think like a product manager. What are some other cool features you can add to Lekker Plekker? Try to think of a few and then see if you can implement them.

Some ideas to get you started: 1. users 2. countries 3. likes/dislikes (from the bonus yesterday) 4. favorite places 5. activities per place