Lecture 9. Forms & APIs 1 / 38

Size: px

Start display at page:

Download "Lecture 9. Forms & APIs 1 / 38"

Shauna Allen
5 years ago
Views:

1 Lecture 9 Forms & APIs 1 / 38

2 Final Project Proposal Due November 12th 11:59PM Should include: A summary of your idea A diagram with the db tables you plan to use& the relationships between them You can make this by hand or withn an online tool: DbDesigner, QuickDBD Send via Piazza private post Complete rubric will be on the Syllabus by tomorrow. 2 / 38

3 Final Project Presentations You will demo your project to Sanjana & I during Reading Days Demos usually at Project Fair, not being held this year though 3 / 38

4 How was Homework 7? Vote at PollEv.com/cis / 38

5 Forms 5 / 38

6 HTML Forms Imagine a plain HTML form: <form action="/users" method="post"> <label for="name">name</label> <input type="text" name="name"> <label for=" "> </label> <input type="text" name=" "> <label for="password">password</label> <input type="password" name="password"> <input type="submit" value="create User"> </form> 6 / 38

7 What is an HTML form action? It's just like a controller action It specifies where the form data will be submitted to Vote at PollEv.com/cis / 38

8 What is an HTML form method? It specifies what kind of HTTP request the form should send It's just like a Ruby method Vote at PollEv.com/cis / 38

9 Forms with ERB In Rails, we don't have to write out our forms directly in HTML Rails gives us some form helpers that make our lives a little easier Types of form helpers available: form_with (Our focus) form_for (Pre-Rails 5.1) form_tag (Pre-Rails 5.1) 9 / 38

10 form_with Forms Most of the times we use forms in Rails involve creating/editing a specific instance form_with provides us an easy way to do this form_with also provides us with a simple way to make forms that are not associated with models In previous versions of Rails, we would have to use form_for to do the former and form_tag for the latter Although you can still use these, you should default to form_with in Rails 5.1 Take a look at the form_with documentation 10 / 38

11 form_with URL Example When our form is not associated with a model, we can use form_with and pass a url We use a block argument (generally called form) to build the form It is an instance of FormBuilder FormBuilder has instance methods that generate HTML form tags Like text fields, checkboxes, etc. 11 / 38

12 form_with Search Form Example <%= form_with(url: search_path, local: true) do form %> <div class="field"> <%= form.label :query %> <%= form.text_field :query %> </div> <div class="actions"> <%= form.submit 'Search' %> </div> <% end %> 12 / 38

13 Generates... <form action="/search" accept-charset="utf-8" method="post"> <input name="utf8" type="hidden" value=" "> <input type="hidden" name="authenticity_token" value="ivppd <div class="field"> <label for="query">query</label> <input type="text" name="query"> </div> <div class="actions"> <input type="submit" name="commit" value="search" data-di </div> </form> 13 / 38

14 form_with for Models form_with allows us to pass a model instance with the model parameter This will be used for forms that create/edit a model instance 14 / 38

15 form_with user Model Example <%= form_with(model: user, local: true) do form %> <div class="field"> <%= form.label :name %> <%= form.text_field :name, id: :user_name %> </div> <div class="field"> <%= form.label :password %> <%= form.password_field :password, id: :user_password %> </div> <div class="actions"> <%= form.submit %> </div> <% end %> 15 / 38

16 form_with user Model Example You would typically see the above form in _form.html.erb The same form is used for creating new instances as well as editing existing instances When creating a new instance, the fields will all be empty initially When editing an instance, the fields will be prepopulated with existing values What gets rendered depends on the instance that gets passed to the form 16 / 38

17 Generated form for new user <form action="/users" accept-charset="utf-8" method="post"> <input name="utf8" type="hidden" value=" "> <input type="hidden" name="authenticity_token" value="5dmx2 <div class="field"> <label for="user_name">name</label> <input id="user_name" type="text" name="user[name]"> </div> <div class="field"> <label for="user_password">password</label> <input id="user_password" type="password" name="user[pass </div> <div class="actions"> <input type="submit" name="commit" value="create User" da </div> </form> 17 / 38

18 Generated form for existing user <form action="/users/3" accept-charset="utf-8" method="post"> <input name="utf8" type="hidden" value=" "> <input type="hidden" name="_method" value="patch"> <input type="hidden" name="authenticity_token" value="ffvalfl <div class="field"> <label for="user_name">name</label> <input id="user_name" type="text" value="desmond" name="use </div> <div class="field"> <label for="user_password">password</label> <input id="user_password" type="password" name="user[passwo </div> <div class="actions"> <input type="submit" name="commit" value="update User" data </div> </form> 18 / 38

19 Hidden Form Fields Every form that we generate will have two hidden fields One will be named utf8 and the other authenticity_token The utf8 field will ensure that browsers submit the form in UTF-8 encoding mode The authenticity_token is used for security purposes 19 / 38

20 What is params? A hash that contains various information about the request A hash that just contains submitted form values Vote at PollEv.com/cis / 38

21 Nested Attributes You'll notice above that the names of the generated form_with model fields are of the form user[name], user[password] This will separate the data inside of params The attributes can be accessed via params through params[:user] { "user" => { "name" => "Jackie" } } 21 / 38

22 Deeper Nesting What we've seen so far has just been one level of nesting, we can nest further For example, assume we have books and pages tables When we create a new book, we want to create a couple of new pages with it We accomplish this with nested attributes 22 / 38

23 Four Steps to Nested Attributes (Not necessarily in this order) 1. Add the nested attributes to the form 2. Configure the book_params method in our controller to permit the new attributes 3. Configure the Book model to accept these parameters 4. Specify the max number of pages that we can create with a book inside of the controller's new action 23 / 38

24 Nested Attributes in _form.html.erb <%= form_with(model: book) do form %>... <%= form.fields_for :pages do page_form %> <div class="field"> <%= page_form.label :text %> <%= page_form.text_area :text %> </div> <div class="field"> <%= page_form.label :number %> <%= page_form.number_field :number %> </div> <% end %>... <% end %> 24 / 38

25 Generates... <form action="/books" accept-charset="utf-8" method="post">... <div class="field"> <label for="book_pages_attributes_0_page_text">text</label> <textarea name="book[pages_attribtues][0][text]"> </div> <div class="field"> <label for="book_pages_attributes_0_page_number">number</labe <input type="number" name="book[pages_attributes][0][number]" </div>... </form> 25 / 38

26 Mass Assignment Every time you scaffold, you get this model_name_params method We've kind of just glossed over it up to this point Mass assignment involves creating or updating an instance of a model with a hash For example: Book.new(params[:book]) The above pattern used to be the norm, until this happened in / 38

27 Strong Params Rails 4 introduced strong params to guard against the mass-assignment vulnerability Allows you to whitelist attributes that your server is allowed to accept This is generally a private method in your controller of the form model_name_params (e.g. book_params) Instead of Book.new(params[:book]), you use Book.new(book_params) 27 / 38

28 Strong Params Implementation This is usually a one-liner It first ensures that the key (:book in this case) is present within params It then specifies the attributes that you are allowed to pass along with the book Any params not permitted will be filtered out def book_params params.require(:book).permit(:title, :author_id, :publisher end 28 / 38

29 Strong Params & Nested Attributes Let's get back to our example of creating pages when we create a book If we want to create page(s) along with a book, we need to permit these attribtues with strong params def book_params params.require(:book).permit(:title, :author_id, :publisher pages_attributes: [:id, :text, :number]) end The id is necessary if we want to be able to edit pages through books later 29 / 38

30 Accept Nested Attributes in Model We need to specify that the Book model should accept_nested_attribtues_for pages This will allow books to edit and create pages that are associated with it Note that you could do the same inside of the Page class, but it doesn't make as much sense class Book < ApplicationRecord has_many :pages, inverse_of: :book, dependent: :destroy accepts_nested_attributes_for :pages, reject_if: :all_blank end 30 / 38

31 Nested Attributes in Controller Action Finally, we need to specify in the new action that the form should be able to create a certain number of pages with the book class BooksController < ApplicationController... def = Book.new 3.times } end... end 31 / 38

32 Using Forms with Nested Routes When you have a model nested under another, the nested model's form will require a tiny modification to work out of the box <%# By default, it'll come like this: %> <%= form_with(model: page, local: true) do form %> <%# You should change it to look like this: %> <%= form_with(model: [book, page], local: true) do form %> 32 / 38

33 Web APIs 33 / 38

34 Web APIs API stands for Application Programming Interface APIs provide endpoints for us to send HTTP requests to If we send a POST/PATCH request, we can create/update data on the API's server If we send a GET request, we can get back data from the API This data is often in the form of XML or JSON 34 / 38

35 Web API Example NASA has a web API that provides an Astronomy Picture of the Day We can send a GET request to: api_key=demo_key Visit this in your web browser to view the JSON that gets returned It might be a good idea to install a JSON formatter to work with this data 35 / 38

36 Authenticating with APIs Some APIs require is to authenticate with them before we can use APIs go about this in different ways, but often we'll have to: Create an account, Get an API key, And send this key with every request that we make The NASA API requires an API key It provides a default DEMO_KEY that we can make a limited number of requests with 36 / 38

37 Connecting to APIs in Ruby We can use Open URI to make requests to APIs in Ruby: require 'open-uri' open(' We can parse the JSON response into a usable Ruby hash: require 'open-uri' res = open(' json = JSON.parse(res.read) p json['date'] #=> " " 37 / 38

38 APIs in Homework 9 In homework 9, you will be connecting to the Spotify API We will use the RSpotify gem instead of directly making requires This is because Spotify requires us to authenticate and this is a little easier We will be able to play music from the Spotify API in this assignment! 38 / 38

Lecture 8. Validations & Sessions 1 / 41

Lecture 8. Validations & Sessions 1 / 41 Lecture 8 Validations & Sessions 1 / 41 Advanced Active Record 2 / 41 More Complex Queries Arel provides us with a number of methods to query our database tables So far, we've only used find which limits