(Giri) A local government employee in his twenties works on a Rails tutorial [Chapter 5]

Premise

・ Rails tutorial is the 4th edition ・ This study is the 3rd lap (2nd lap after Chapter 9) ・ The author is a beginner who has done all of Progate.

Basic policy

・ If you read it, you will not understand it. ・ Search and summarize terms that you do not understand (at the bottom of the article, glossary). ・ Dive into what you do not understand. ・ Work on all exercises. ・ Do not copy chords as much as possible.

Now Chapter 5. This is the full-scale development phase. Click here for today's song. Luby Sparks "Pop.1979" Ruby difference. I can't wait to hear the sound of this initial impulse.

As I foretold in Chapter 1, I didn't do the Sass course of Progate, so I finished it quickly. It's a notation to eliminate duplication of code, make writing easier, and make it easier to respond to changes.

[5.1.1 Navigation memos and exercises]

Bootstrap is here. The outline is This article may be easy to understand. In short, it is for facilitating web development by calling the one whose behavior is defined in advance. Effortlessly supports responsive design.

There are so many cat images on the Web that you can say that a Web page is a cat image. Let's download the cat image in Figure 5.3 using the command in Listing 5.4 8. → Just download with the following command. (The cat is cute, isn't it?)

$ curl -OL cdn.learnenough.com/kitten.jpg

2. Use the mv command to move the downloaded kitten.jpg file to the appropriate asset directory (reference: 5.2.1). → Go to the images directory with the following command

$ mv kitten.jpg app/assets/images

Try to display the kitten.jpg image using image_tag (Fig. 5.4). → It is OK if you add the following to the end of home.

`ruby:home.html.erb`


<%= link_to image_tag("kitten.jpg ", alt: "cute kitten") %>

[5.1.2 Bootstrap and custom CSS memos and exercises]

I'm still not sure about CSS, so it will take some time, but let's check the operation each time you enter it. It's easier than copying everything and commenting it out one by one. And since it's annoying, I'm going to do something that can be nested at this point. I think I was nesting somewhere after this. Let's do it first and then go with the answers later.

Refer to Listing 5.10 and comment out the cat image used in 5.1.1.1. Also, use your browser's HTML Inspector feature to make sure it disappears from the HTML source when you comment it out. → Just follow the instructions. Disappear Kitun! !! !! !! !!

2. Add the code in Listing 5.11 to custom.scss and try hiding all the images. Hopefully the Rails logo image will disappear from your Home page. Use the Inspector feature as before to see that this time the HTML source code remains and only the image is no longer displayed. → That's right. I just hide it with CSS. I'll just do this, so I'll omit the details.

[5.1.3 Partial memos and exercises]

Partial = partial. It may be easier to understand if you imagine a partial refrigerator. The image of storing it separately from the gashacon over there. If you cut out the parts that are used on other pages or the ones that are commonly used on all pages and save them individually. Is it a render when needed?

Try replacing the head tag part that Rails generates by default with render as shown in Listing 5.18. Tip: If you simply delete it, you will need to rewrite the partial from scratch later, so save it somewhere before deleting it. → For the time being, evacuate appropriately and fill in as instructed.

2. I haven't made a partial like Listing 5.18 yet, so the test should be red at this point. Let's actually run the test and check it. → Sora RED.

3. Create a partial for the head tag in the layouts directory, write the code you saved earlier, and finally check that the test returns to green. → Create the following file and partial! (The test is also GREEN)

`ruby:_rails_default.html.erb`


<%= csrf_meta_tags %>
<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

[5.2.1 Asset Pipeline Memo]

An asset pipeline that I think is difficult to understand. Is this one sentence important? "You don't have to worry about'whether to focus on development efficiency or load time'. Keep it organized for programmers in the development environment, and use Asset Pipeline in the production environment to minimize files. You just have to. " In short, is it an image of passing scattered things through one thin tube? In the process, he wants to organize the files, eliminate unnecessary things, and minimize them.

[5.2.2 Style sheet memos and exercises with wonderful syntax]

Looking at the LESS variable list, @ gray-light is lighten (@ gray-base, 46.7%) instead of # 777. But is it a version difference? It's okay because the actual colors don't seem to change (are the other default colors the same)? 。

Let's manually convert the footer CSS as suggested in 5.2.2. Specifically, try converting the contents of Listing 5.17 one by one to look like Listing 5.20. → It has been practiced since it was first written. It was right. (I thought it was easy to see, so I put a line break in the nest)

`custom.scss`


/* footer */

footer {
  margin-top: 45px;
  padding-top: 5px;
  border-top: 1px solid $gray-medium-light;
  color: $gray-light;
  
  a {
    color: $gray;
    
    &:hover {
      color: $gray-darker;
    }
  }
  
  small {
    float: left;
  }
  
  ul {
    float: right;
    
    li {
      float: left;
      margin-left: 15px;
    }
  }
}

[5.3 Layout and link]

At first, the named route (○○ _path) didn't look right, but it's customary to write it like this because rails has such a function and it's easy to respond to changes. That and understanding. When it becomes possible to use it by setting the routing.

[5.3.2 Rails root URL memo and exercise]

〇〇_path: Returns the character string below the root URL. Basically use this 〇〇_url: Returns the full URL string. Used only for redirects.

Actually, the named route can be changed using the as: option. Try changing the named route on the Help page to helf, following the famous Far Side cartoon (Listing 5.29). → Added as:'helf' as shown in Listing 5.29.

2. Make sure that the test is red due to the previous change. Please update the routing as shown in Listing 5.28 to make the test green. → Naturally RED. If you change the test to helf_path, it will be GREEN.

3. Use the comparison operator == to check that the objects created in the above two tasks are the same. → Let's put it back.

[5.3.3 Named route exercise]

Create a helf routing as shown in Listing 5.29 and try updating the layout links.
As with the previous exercise, use the editor's Undo function to undo the changes made in this exercise. → I like helf. Add as:'helf' to the root, set help_path in the header to helf_path, and you're done! And bring it back! (Do you need this exercise?)

[5.3.4 Link test memos and exercises]

Introducing the integration test. “Integration testing allows you to simulate and test your application's end-to-end behavior.” Let's write while thinking about the flow of operation. For testing, the Rails docs (https://railsdoc.com/test) may be helpful. (The link is for Rails 6) Although assert_select is flexible, it's wise to limit it to testing HTML elements (such as links) that change frequently in your layout. You also covered it in Glossary of Chapter 3. Oops, is there an error here? When I looked it up, the link destination was something like'root_path'. Since 〇〇_path is a method,'' is unnecessary. It was a simple oversight.

Try changing about_path in the footer partial to contact_path and see if the test catches the error correctly. → It will tell you that there is no element that matches / about.

2. As shown in Listing 5.35, it is convenient to make the full_title helper used in the Application helper available in the test environment as well. That way, you can test the correct title with code like Listing 5.36. However, this is not a perfect test. For example, a typo in the base title, such as "Ruby on Rails Tutoial," wouldn't be found in this test. To solve this problem, we need to write a test for the full_title helper. So, create a file to test the Application helper and replace the FILL_IN part in Listing 5.37 with the appropriate code. Tip: In Listing 5.37, we used assert_equal , , but internally we compare the expected and actual values with the == operator to see if they are correct. I'm testing. → I finally feel that the content has been changed on the third lap. First, include the Application helper (full_title method) so that it can be used in the test environment. You can easily test whether the page title matches with the layout integration test. However, I can't find any typographical errors, so I'm going to test the Application helper itself. The part of FILL_IN is as follows. The test is GREEN.

`test/helpers/application_helper_test.rb`


require 'test_helper'

class ApplicationHelperTest < ActionView::TestCase
  test "full title helper" do
    assert_equal full_title,         "Ruby on Rails Tutorial Sample App"
    assert_equal full_title("Help"), "Help | Ruby on Rails Tutorial Sample App"
  end
end

[5.4.1 Users controller exercise]

Please modify Listing 5.41 with reference to Table 5.1 so that you can use signup_path instead of users_new_url.
Make sure that the test turns red due to the changes you made earlier. Note that this exercise aims to create the red / green rhythm described in Test Driven Development (Column 3.3). This test will be modified to be green in the next 5.4.2. → Just change users_new_url in users_controller_test.rb to signup_path. Naturally it will be RED. It's flying, but how do you make signup_path available? You need to set up the routing. It should match below. The test is now GREEN.

`routes.rb`


Rails.application.routes.draw do
  get 'users/new'

  root 'static_pages#home'
  get '/help',    to: 'static_pages#help'
  get '/about',   to: 'static_pages#about'
  get '/contact', to: 'static_pages#contact'
  get '/signup',  to: 'users#new'
end

The next time I read it, it was right.

[5.4.2 User registration URL exercise]

If you haven't started the exercise in 5.4.1.1, first change it as shown in Listing 5.41 so that you can use the named route signup_path. Also, make sure the test is green at this point, as the named route is now available in Listing 5.43. → I did it a while ago.

2. To confirm that the previous test is working correctly, comment out the signup root part and check that the test is red. If you can confirm it, uncomment it and return it to the green state. → Just try it.

3. Add the code to access the signup page to the integration test in Listing 5.32 (using the get method). After adding the code, run the test and make sure the result is correct. Tip: Try using the full_title helper introduced in Listing 5.36. → Maybe I don't want to, but I also added a test to see if there is a Sing up link. I will also do what I need to do to confirm my knowledge.

`site_layout_test.rb`


require 'test_helper'

class SiteLayoutTest < ActionDispatch::IntegrationTest
  
  test "layout links" do
    get root_path
    assert_template 'static_pages/home'
    assert_select "a[href=?]", root_path, count: 2
    assert_select "a[href=?]", help_path
    assert_select "a[href=?]", about_path
    assert_select "a[href=?]", contact_path
    assert_select "a[href=?]", signup_path
    get contact_path
    assert_select "title", full_title("Contact")
    get signup_path
    assert_select "title", full_title("Sign up")
  end
  
end

Chapter 5 Summary

・ Bootstrap is convenient, but I hear that it is not overused. ・ Cats are universal and cute. ・ Sass is convenient. The code is refreshing. -Partial and clean appearance. ・ Asset Pipeline optimizes assets (images, CSS, JS, etc.) without permission. -If you set the routing, you can use 〇〇_path and 〇〇_url. -Integration test can test the operation such as page-to-page movement. Let's simulate the operation.

Chapter 5 is over. On the third lap, I was finally able to grasp the contents. happy. In Chapter 6, we will create a user model.

⇨ Go to Chapter 6! ⇦ Click here for Chapter 4 Click here for premise and author status for learning

A glossary that somehow captures the image

・ Conditional comment A conditional statement in the HTML source code that you can use to pass or hide code to Microsoft Internet Explorer. It has been abolished since IE10.

・ Responsive (web) design A design in which the display format changes depending on the terminal / browser to be displayed. Even on the same website, the size of characters and content may change between smartphones and PCs. The one that is often said to be responsive.

・ Assert_template Test if the template specified in the action is depicted.

・ Assert_equal Assert_equal Test if both values are equal in the form of , .