Chapter 3, 4, 5

Author: dunhhadka

Gemfile

@@ -43,7 +43,9 @@ gem "tzinfo-data", platforms: %i(mingw mswin x64_mingw jruby)
 gem "bootsnap", require: false
 
 # Use Sass to process CSS
-# gem "sassc-rails"
+gem "sassc-rails"
+gem "bootstrap", "~> 5.3.2"
+
 
 # Use Active Storage variants [https://guides.rubyonrails.org/active_storage_overview.html]
 # gem "image_processing", "~> 1.2"

Gemfile.lock

@@ -73,6 +73,8 @@ GEM
     bindex (0.8.1)
     bootsnap (1.16.0)
       msgpack (~> 1.2)
+    bootstrap (5.3.5)
+      popper_js (>= 2.11.8, < 3)
     builder (3.2.4)
     capybara (3.39.2)
       addressable
@@ -90,6 +92,7 @@ GEM
       irb (>= 1.5.0)
       reline (>= 0.3.1)
     erubi (1.12.0)
+    ffi (1.17.2-x86_64-linux-gnu)
     globalid (1.1.0)
       activesupport (>= 5.0)
     i18n (1.14.1)
@@ -136,6 +139,7 @@ GEM
     parser (3.2.2.3)
       ast (~> 2.4.1)
       racc
+    popper_js (2.11.8)
     public_suffix (5.0.3)
     puma (5.6.6)
       nio4r (~> 2.0)
@@ -199,6 +203,14 @@ GEM
       rubocop (>= 1.7.0, < 2.0)
     ruby-progressbar (1.13.0)
     rubyzip (2.3.2)
+    sassc (2.4.0)
+      ffi (~> 1.9)
+    sassc-rails (2.1.2)
+      railties (>= 4.0.0)
+      sassc (>= 2.0)
+      sprockets (> 3.0)
+      sprockets-rails
+      tilt
     selenium-webdriver (4.10.0)
       rexml (~> 3.2, >= 3.2.5)
       rubyzip (>= 1.2.2, < 3.0)
@@ -213,6 +225,7 @@ GEM
     stimulus-rails (1.2.2)
       railties (>= 6.0.0)
     thor (1.2.2)
+    tilt (2.6.1)
     timeout (0.4.0)
     turbo-rails (1.4.0)
       actionpack (>= 6.0.0)
@@ -243,6 +256,7 @@ PLATFORMS
 
 DEPENDENCIES
   bootsnap
+  bootstrap (~> 5.3.2)
   capybara
   debug
   importmap-rails
@@ -253,6 +267,7 @@ DEPENDENCIES
   rubocop (~> 1.26)
   rubocop-checkstyle_formatter
   rubocop-rails (~> 2.14.0)
+  sassc-rails
   selenium-webdriver
   sprockets-rails
   stimulus-rails

README.md

@@ -1,15 +1,47 @@
 # Rails tutorial - Sample App
 
 # 1. Phiên bản cài đặt để chạy được dự án:
+
 - Ruby: 3.2.2
 - Rails: 7.0.7
 - MySQL
 
 # 2. Hướng dẫn cài dự án:
+
 ## 2.1 Cài đặt config(chỉ chạy lần đầu)
+
 - Tạo config database cho dự án: cp config/database.yml.example config/database.yml
 - Chạy lệnh để tạo database: rails db:create
 - Bật server: rails s
-Truy cập đường dẫn http://localhost:3000/ hiển thị Rails là thành công
+  Truy cập đường dẫn http://localhost:3000/ hiển thị Rails là thành công
+
+1. Research gem config
+
+- gem config là gem dùng để quản lý biến cấu hình trong Rails/Ruby một cách gọn gàng, dễ maintain
+- Thay vì hardcode hoặc phụ thuộc ENV, có thể:
+  - Tạo file config/settings.yml hoặc settings.local.yml để lưu cấu hình.
+  - Truy cập dễ dàng qua Settings.api_key hoặc Settings[:api_key]
+
+2. Research I18n, I18n lazy lookup
+
+- I18n (Internationalization) trong Rails cho phép ứng dụng hỗ trợ đa ngôn ngữ.
+- Các chuỗi văn bản được lưu trong config/locales/\*.yml
+- Rails tự động load theo I18n.locale
+
+3. What is Attack CSRF, XSS? and How to prevent them in Rails?
+
+- CSRF : Là tấn công khi attacker giả mạo request của user đã authenticated.
+- Ví dụ: attacker gửi form POST từ site khác, user đang login sẽ thực hiện hành động trái phép.
+
+4. XSS (Cross-Site Scripting)
+
+- Là tấn công chèn script độc hại vào trang web, ví dụ:
+- Ví dụ: <script>alert("Hacked!")</script>
+- Để tránh XSS, sử dụng Rails helper như: sanitize, html_escape, raw
 
+5. Distinguish: nil?, empty?, blank?, present?
+6. Presenting the effect of helper folder, what case of using it
 
+- app/helpers/ chứa các module helper hỗ trợ xử lý logic hiển thị trong view.
+- Tác dụng: tách logic view và controller, dễ maintain, dễ debug,
+  Giúp giữ view gọn gàng, tách biệt logic format ra khỏi template.

app/assets/stylesheets/application.scss

@@ -0,0 +1,4 @@
+/*
+ *= require_tree .
+ *= require_self
+ */

app/assets/stylesheets/custom.scss

@@ -0,0 +1,4 @@
+@import "bootstrap";
+body {
+  padding-top: 60px;
+}

app/controllers/static_pages_controller.rb

@@ -0,0 +1,11 @@
+class StaticPagesController < ApplicationController
+  def home
+  end
+
+  def help
+  end
+
+  def contact
+  end
+
+end

app/helpers/static_pages_helper.rb

@@ -0,0 +1,2 @@
+module StaticPagesHelper
+end

app/views/layouts/application.html.erb

@@ -1,16 +1,30 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>RailsTutorial</title>
-    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title><%= yield(:title) || "Ruby on Rails Tutorial Sample App" %></title>
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
 
     <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
-    <%= javascript_importmap_tags %>
+    <%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>
   </head>
 
   <body>
-    <%= yield %>
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
+      <div class="container">
+        <a class="navbar-brand" href="/">Sample App</a>
+        <div>
+          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+            <li class="nav-item"><a class="nav-link" href="/">Home</a></li>
+            <li class="nav-item"><a class="nav-link" href="/help">Help</a></li>
+            <li class="nav-item"><a class="nav-link" href="/contact">Contact</a></li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+
+    <div class="container">
+      <%= yield %>
+    </div>
   </body>
 </html>

app/views/static_pages/contact.html.erb

@@ -0,0 +1,3 @@
+<% provide(:title, "Contact | Ruby on Rails Tutorial Sample App") %>
+<h1>Contact</h1>
+<p>Hello, YourName</p>

app/views/static_pages/help.html.erb

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Help | Ruby on Rails Tutorial Sample App</title>
+  </head>
+  <body>
+    <h1>Help</h1>
+
+    <p>
+      Get help on the Ruby on Rails Tutorial at the
+      <a href="http://www.railstutorial.org/help">Rails Tutorial help page</a>.
+      To get help on this sample app, see the
+      <a href="http://www.railstutorial.org/book">
+        <em>Ruby on Rails Tutorial</em> book
+      </a>.
+    </p>
+  </body>
+</html>