・ 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.
・ 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.
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.
$ 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
ruby:home.html.erb
<%= link_to image_tag("kitten.jpg ", alt: "cute kitten") %>
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.
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.
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?
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' %>
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.
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)? 。
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;
}
}
}
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.
〇〇_path: Returns the character string below the root URL. Basically use this 〇〇_url: Returns the full URL string. Used only for redirects.
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.
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.
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
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
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.
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
・ 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
・ 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
Recommended Posts