Web Development with Rails and Git Tutorial

Demo 11: Creating Standard Model-CRUD Pages

▶️ Play from the beginning (~2 hours, 10 minutes)

In this demonstration, I will explain how to use controllers in Rails to implement the fairly standard pages for performing CRUD operations on model objects.

▶️ 1. Displaying All Records

  1. ▶️ Prep: Review a wireframe diagram of the features we aim to build as well as the Rails architecture, giving special attention to the code we’ll need to add/modify.
  2. ▶️ Add a route for an index controller action.
  3. ▶️ Add a controller action index that retrieves all records from a database table (see model class method all) and stores a reference to the collection using an instance variable. This instance variable is automatically available in the rendered view code.
  4. ▶️ Create a view index.html.erb that displays all the records referenced by the instance variable. Display the records in a table, using Bootstrap table styles.
    • Oops! Forget to add main element to view.
  5. ▶️ Test and debug: Run the Rails web server and open the index page in a browser to confirm that it works. Reset the database if necessary (see rails db:reset). Fix any apparent bugs.
  6. ▶️ Update the application.html.erb file to add a navigation bar item for the index page. Test and debug as necessary.
  7. ▶️ Check in changes: Stage, commit, and push these changes to the Git repo (see git add -A, git commit ..., and git push).

▶️ Check-in Changes: changeset, snapshot

▶️ 2. Displaying a Particular Record

  1. ▶️ Prep: Review a wireframe diagram of the features we aim to build as well as the Rails architecture, giving special attention to the code we’ll need to add/modify.
  2. ▶️ Add a route for a show controller action.
  3. ▶️ Add a controller action show that retrieves a particular record by ID from a database table (see model class method find) and stores a reference to the record using an instance variable. The ID of the record is retrieved from the params hash (see params[:id]).
  4. ▶️ Create a view show.html.erb that displays all the records referenced by the instance variable.
    • Oops! Forget to add main element to view.
  5. ▶️ Test and debug: Run the Rails web server and open the show-record page in a browser using a variety of IDs to confirm that it works. Fix any apparent bugs.
  6. ▶️ Update the index page to link to the show-record pages. Test and debug the changes as necessary.
  7. ▶️ Check in changes: Stage, commit, and push these changes to the Git repo (see git add -A, git commit ..., and git push).

▶️ Check-in Changes: changeset, snapshot

▶️ 3. Creating a New Record

▶️ 3.1. Displaying a New Record Form

  1. ▶️ Prep: Review a wireframe diagram of the features we aim to build as well as the Rails architecture, giving special attention to the code we’ll need to add/modify.
  2. ▶️ Add a route for a new controller action that will render the form.
  3. ▶️ Add a controller action new that will instantiate a new empty model object (referenced by an instance variable) and will render the form.
  4. ▶️ Create a view new.html.erb that generates the form using the form_with form helper (see API docs with the empty model object. Style the form using Bootstrap form styles.
    • Oops fixed! Added missing main elements to views.
    • Oops! Forgot some </div> closing tags.
    • Oops! Forgot local: true argument for form_with.
  5. ▶️ Test and debug: Run the Rails web server and open the form page in a browser to test that it works. Fix any apparent bugs.
    • Oops fixed! Added the missing </div> tags.
    • Oops! Giving label and input elements the CSS style display: block made the radio button in the interactive form from last demo look bad. Fixed next demo.

▶️ 3.2. Processing Submission of a New Record Form

  1. ▶️ Add a route for a create controller action that will process the form submission.
  2. ▶️ Add a controller action create that saves a record to the database based on the submitted form data, responds with an HTTP redirect to the show-record page, and displays a flash notice or alert as appropriate.
    • Oops fixed! Added local: true argument to form_with.
  3. ▶️ Test and debug: Run the Rails web server and test out the form page in a browser to confirm that it works. Fix any apparent bugs.
  4. ▶️ Update the index page to link to the new-record form. Test and debug the changes as necessary.
  5. ▶️ Check in changes: Stage, commit, and push these changes to the Git repo (see git add -A, git commit ..., and git push).

▶️ Check-in Changes: changeset, snapshot

▶️ 4. Updating an Existing Record

▶️ 4.1. Displaying an Edit Record Form

  1. ▶️ Prep: Review a wireframe diagram of the features we aim to build as well as the Rails architecture, giving special attention to the code we’ll need to add/modify.
  2. ▶️ Add a route for an edit controller action that will display the form.
    • Oops! Introduced typo in route’s URL pattern.
  3. ▶️ Add a controller action edit that will retrieve the record to be updated and render the form.
  4. ▶️ Create a view edit.html.erb that displays the form using the form_with form helper (see API docs with the retrieved model object. Style the form using Bootstrap form styles.
    • Oops! Forgot to updated form submit button text.
  5. ▶️ Test and debug: Run the Rails web server and open the form page in a browser to confirm that it works. Fix any apparent bugs.
    • Oops fixed! Fixed typo in route’s URL pattern.
    • Oops fixed! Updated form submit button text.

▶️ 4.2. Processing Submission of a Edit Record Form

  1. ▶️ Add a route for an update controller action that will process the form submission.
  2. ▶️ Add a controller action update that retrieves the record to be updated, updates the record based on the submitted form data, responds with an HTTP redirect to the show-record page, and displays a flash notice or alert as appropriate.
  3. ▶️ Test and debug: Run the Rails web server and test out the form page in a browser to confirm that it works. Fix any apparent bugs.
  4. ▶️ Update the index page with links to the Edit forms. Test and debug the changes as necessary.
  5. ▶️ Check in changes: Stage, commit, and push these changes to the Git repo (see git add -A, git commit ..., and git push).

▶️ Check-in Changes: changeset, snapshot

▶️ 5. Deleting a Record

  1. ▶️ Prep: Review a wireframe diagram of the features we aim to build as well as the Rails architecture, giving special attention to the code we’ll need to add/modify.
  2. ▶️ Add a route for a destroy controller action that will delete a record.
  3. ▶️ Add a controller action destroy that retrieves the record to be deleted, deletes it, and responds with an HTTP redirect to the index page.
  4. ▶️ Update the index page with links to the Destroy action, using HTTP Delete requests.
  5. ▶️ Test and debug: Run the Rails web server and test out the destroy links in a browser to confirm that they work. Fix any apparent bugs.
  6. ▶️ Check in changes: Stage, commit, and push these changes to the Git repo (see git add -A, git commit ..., and git push).

▶️ Check-in Changes: changeset, snapshot

▶️ 6. Refactoring Code Clones

  1. ▶️ Prep: Review the new.html.erb and edit.html.erb views, giving special attention to the identical code they both contain.
  2. ▶️ Refactor the new.html.erb and edit.html.erb views to make use of a form partial _form.html.erb (see render 'form', ...).
  3. ▶️ Test and debug: Run the Rails web server and test out the form page in a browser to confirm that it works. Fix any apparent bugs.
  4. ▶️ Check in changes: Stage, commit, and push these changes to the Git repo (see git add -A, git commit ..., and git push).

▶️ Check-in Changes: changeset, snapshot

▶️ 7. Providing Detailed Form Error Messages

  1. ▶️ Prep: Review the error messages that are produced when a form submission fails, giving special attention to how uninformative they are.
  2. ▶️ Add detailed error messages to the _form.html.erb partial form fields (see model methods errors.any? and errors.full_messages_for, API docs. Use the Bootstrap form validation styles.
  3. ▶️ Test and debug: Run the Rails web server and test out the form page in a browser to confirm that it works. Fix any apparent bugs.
  4. ▶️ Check in changes: Stage, commit, and push these changes to the Git repo (see git add -A, git commit ..., and git push).

▶️ Check-in Changes: changeset, snapshot

▶️ 8. Displaying Page-Specific Titles in Browser Tabs

  1. ▶️ Prep: Review the wireframe diagrams, giving special attention to the text in the tabs.
  2. ▶️ Update the application.html.erb file to set the title element body to the result of yield(:title).
  3. ▶️ Add embedded Ruby to the top of each view page file that sets the value to be associated with yield symbol :title (see provide(:title, ...), API docs.
  4. ▶️ Test and debug: Run the Rails web server and test out the various pages in a browser to confirm that they now have page-specific tab titles. Fix any apparent bugs.
  5. ▶️ Check in changes: Stage, commit, and push these changes to the Git repo (see git add -A, git commit ..., and git push).

▶️ Check-in Changes: changeset, snapshot

© Scott D. Fleming 2018 • Made with GitHub Pages and Markdown