Record d'apprentissage Ruby on rails-2020.10.07 ①

Présentation de Bootstrap aux rails Gemfile fixe

gem 'bootstrap-sass', '~> 3.3.6'


gem 'sass-rails', '~> 5.0

Exécuter la commande $ bundle install

Correction de scss

"App / assets / stylesheets / application.css" remplacé par "app / assets / stylesheets / application.css.scss"

app/assets/stylesheets/application.css.scss


@import 'bootstrap-sprockets';
@import 'bootstrap';

/* universal */

body {
  padding: 60px 15px 0;
}

Modifier le fichier js

app/assets/javascript/application.js


//= require bootstrap-sprockets

Allouer le conteneur

app/views/layouts/application.html.erb


<body>
    <div class='container'>
        <%= yield %>
    </div>
</body>

Conception réactive avec Bootstrap Modifier la table de liste

app/views/shops/index.html.erb


<table class='table table-striped table-hover'>
・ ・ ・
</table>

Ajouter un bouton au lien

app/views/shops/index.html.erb


<%= link_to 'New Shop', new_shop_path, class: 'btn btn-primary' %> | <%= link_to 'Show category list', categories_path %>

Modification du formulaire

app/views/shops/_form.html.erb


<%= form_for(shop, html: {class: 'form-horizontal', role: 'form'}) do |f| %>

app/views/shops/_form.html.erb


<div class='form-group'>
  <%= f.label :category_id, class: 'col-sm-2 control-label' %>
  <div class='col-sm-10'>
    <%= f.select :category_id, Category.all.map{|o| [o.name, o.id]} %>
  </div>
</div>

<div class='form-group'>
  <%= f.label :name, class: 'col-sm-2 control-label' %>
  <div class='col-sm-10'>
    <%= f.text_field :name %>
  </div>
</div>

<div class='form-group'>
  <%= f.label :address, class: 'col-sm-2 control-label' %>
  <div class='col-sm-10'>
    <%= f.text_field :address %>
  </div>
</div>

app/views/shops/_form.html.erb


<div class='actions'>
  <div class='form-group'>
    <div class='col-sm-offset-2 col-sm-10'>
      <%= f.submit 'Submit', class: 'btn btn-success' %>
    </div>
  </div>
</div>

Rapport de largeur de grille </ b> Organisez les éléments auxquels "col-sm-3" est appliqué et les éléments auxquels "col-sm-9" est appliqué. → Le rapport de largeur sera de 3: 9

Créer l'écran pour les smartphones Ajouter une barre de navigation

app/views/layouts/application.html.erb


<!-- Fixed navbar -->
<nav class='navbar navbar-inverse navbar-fixed-top'>
  <div class='container'>
    <div class='navbar-header'>
      <button type='button' class='navbar-toggle collapsed' data-toggle='collapse' data-target='#navbar' aria-expanded='false' aria-controls='navbar'>
        <span class='sr-only'>Toggle navigation</span>
        <span class='icon-bar'></span>
        <span class='icon-bar'></span>
        <span class='icon-bar'></span>
      </button>
      <%= link_to 'Lunch Map', root_path, class: 'navbar-brand' %>
    </div>
    <div id='navbar' class='collapse navbar-collapse'>
      <ul class='nav navbar-nav'>
       <li><%= link_to 'Shop', shops_path %></li>
       <li><%= link_to 'Category', categories_path %></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>

Cliquez sur une ligne dans la liste pour afficher la page de détails

app/views/shops/index.html.erb


<td><%= link_to shop.category.name, shop, class: 'widelink' %></td>
<td><%= link_to shop.name, shop, class: 'widelink' %></td>
<td><%= link_to shop.address, shop, class: 'widelink' %></td>

app/assets/stylesheets/application.css.scss


/* table row for link */
a.widelink {
   display: block;
   width: 100%;
   height: 100%;
   text-decoration: none;
}

Supprimer chaque bouton de liste de la liste

app/views/shops/index.html.erb


<table class='table table-striped table-hover'>
  <thead>
    <tr>
      <th>Category</th>
      <th>Name</th>
      <th>Address</th>
    </tr>
  </thead>

Ajuster la carte à l'écran

app/views/shops/show.html.erb


<%= content_tag(:iframe,
    'map',
    src:'https://www.google.com/maps/embed/v1/place?key=AIzaSyCJBgcuCowQa5-V8owXaUCHhUNBN8bfMfU&amp;q=' + @shop.address,
    width: '100%',
    height: 320,
    frameborder: 0) %>

Bouton ajouté à la page de détail

app/views/shops/show.html.erb


<%= link_to 'Delete', @shop,
                    method: :delete, data: { confirm: 'Are you sure?' }, class: 'btn btn-danger' %>
<%= link_to 'Edit', edit_shop_path(@shop), class: 'btn btn-primary' %>
<%= link_to 'Back', shops_path, class: 'btn btn-default' %>

Ajout d'un bouton pour revenir à la page d'inscription

app/views/shops/_form.html.erb


<div class='actions'>
  <div class='form-group'>
    <div class='col-sm-offset-2 col-sm-10'>
      <%= f.submit 'Submit', class: 'btn btn-success' %>
      <%= link_to 'Back', :back, class: 'btn btn-default' %>
    </div>
  </div>
</div>

Ajout de nouveaux boutons de page et d'actualisation

app/views/shops/edit.html.erb


<h1>Editing Shop</h1>

<%= render 'form', shop: @shop %>

<!-- <%= link_to 'Show', @shop %> | -->
<!-- <%= link_to 'Back', shops_path %> -->

app/views/shops/new.html.erb


<h1>New Shop</h1>

<%= render 'form', shop: @shop %>

<!-- <%= link_to 'Back', shops_path %> -->

Localisation japonaise des rails Contrôleur fixe pour basculer pour correspondre aux options d'URL

app/controllers/application_controller.rb


class ApplicationController < ActionController::Base
  before_action :set_locale
  protect_from_forgery with: :exception

  def set_locale
    I18n.locale = params[:locale] || I18n.default_locale
  end

  def default_url_options(options = {})
    { locale: I18n.locale }.merge options
  end
end

Copiez ja.yml et corrigez $ cp -a config/locales/en.yml config/locales/ja.yml

/config/locale/ja.yml


ja:
  hello: "Monde de Hello, tout le monde"

Incorporer les mots-clés de traduction sur la page d'accueil

app/views/welcome/index.html.erb


<h1>Lunch Map</h1>
<p>Tasty meal on your place!!</p>
<p><%= t('hello') %></p>
<p><%= link_to 'Show shop list', shops_path %></p>

Incorporer les mots-clés de traduction dans la liste des magasins

app/views/shops/index.html.erb


<h1><%= t('shops') %></h1>

<th><%= t('category') %></th>
<th><%= t('name') %></th>
<th><%= t('address') %></th>

Enregistrer des mots anglais dans en.yml

/config/locale/en.yml


en:
  hello: 'Hello world'
  shops: 'Shops'
  category: 'Category'
  name: 'Name'
  address: 'Address'

Enregistrer le japonais dans ja.yml

/config/locale/ja.yaml


ja:
  hello: 'Monde de Hello, tout le monde'
  shops: 'Liste de la boutique'
  category: 'Catégorie'
  name: 'Nom du magasin'
  address: 'adresse de rue'

Ajouter des données à ja.yml pour le formulaire

/config/locale/ja.yaml


ja:
  hello: 'Monde de Hello, tout le monde'
  shops: 'Liste de la boutique'
  category: 'Catégorie'
  name: 'Nom du magasin'
  address: 'adresse de rue'

  activerecord:
    models:
      shop:boutique

    attributes:
      shop:
        category_id:Catégorie
        name:Nom du magasin
        address:adresse de rue

Recommended Posts

Record d'apprentissage de Ruby on rails -2020.10.03
Record d'apprentissage de Ruby on rails -2020.10.05
Record d'apprentissage de Ruby on rails -2020.10.09
Record d'apprentissage Ruby on rails-2020.10.07 ②
Record d'apprentissage Ruby on rails-2020.10.07 ①
Record d'apprentissage de Ruby on rails -2020.10.06
Ruby on Rails élémentaire
Principes de base de Ruby on Rails
Association Ruby On Rails
Création de portfolio Ruby on Rails
[Ruby on Rails] Debuck (binding.pry)
Annuler la migration de Ruby on Rails
Résumé de la validation Ruby on Rails
Mémorandum de base Ruby on Rails
Ruby apprentissage 4
Ruby apprentissage 5
Ruby apprentissage 3
Ruby apprentissage 2
Ruby on Rails5 Guide pratique d'apprentissage rapide 5.2 Chapitre compatible3
Ruby apprentissage 6
Ruby apprentissage 1
[Ruby on Rails] Read try (: [] ,: key)
Variables Ruby on Rails, résumé constant
Installation de Ruby + Rails sur Ubuntu 18.04 (rbenv)
[Ruby on Rails] Introduction de la fonction de pagination
Connaissance de base de Ruby on Rails
Progatez Ruby on Rails
Comment utiliser Ruby on Rails
Ruby on Rails compatible japonais-anglais i18n
(Ruby on Rails6) "Effacer" le contenu publié
[Ruby on Rails] Fonction de sortie CSV
Mémo de construction de l'environnement Ruby on Rails 6.0
[Ruby on Rails] Création de la page de confirmation
Ruby On Rails conçoit un conflit de routage
[Ruby on Rails] DM, fonction de chat
[Ruby on Rails] Méthode d'aide pratique
[Ruby on Rails] Arrêtez de "boucler jusqu'à ce que ..."
Recherche d'enregistrements Ruby on Rails, création sinon méthode find_or_create_by
[Ruby on Rails] Introduction des données initiales
[Ruby on Rails] Fonction de recherche (non sélectionnée)
[Rails] Ajout de la fonction de commentaire Ruby On Rails
Ruby on Rails6 Guide pratique cp13 ~ cp15 [Mémo]
[Ruby on Rails] Afficher le test avec RSpec
[Ruby on Rails] Vérification du code à l'aide de Rubocop-airbnb
[Ruby on Rails] 1 modèle CRUD (routage principal)
Méthode d'installation de Ruby on Rails [édition Mac]
Modèle [Ruby on Rails], commande de terminal de contrôleur