[RUBY] Améliorons l'application

Ajout de la fonction de commentaire

Commentaire de l'échafaudage Scaffold le nom de l'auteur du commentaire, le corps du commentaire et la relation avec la table Idea (`reference`). `rails generate scaffold comment user_name:string body:text idea:reference`

Faites une migration. rails db:migrate

Ajouter une relation au modèle Informez Rails de la connexion entre l'Idea et l'objet de commentaire

app/models/idea.rb

class Idea < ApplicationRecord
has_many :comments

app/models/comment.rb

class Comment < ApplicationRecord
belongs_to :idea

Afficher et modifier le formulaire de commentaire

app/views/ideas/show.html.erb

<p>
  <strong>Picture:</strong>
  <%= image_tag(@idea.picture_url, width: 600) if @idea.picture.present? %>
</p>

<h3>Comments</h3>
<% @comments.each do |comment| %>
  <div>
    <strong><%= comment.user_name %></strong>
    <br />
    <p><%= comment.body %></p>
    <p><%= link_to 'Delete', comment_path(comment), method: :delete, data: { confirm: 'Supprimer Voulez-vous vraiment?' } %></p>
  </div>
<% end %>
<%= render 'comments/form', comment: @comment %>

app/controllers/ideas_controller.rb

def show
  @comments = @idea.comments.all
  @comment = @idea.comments.build
end

app/views/comments/_form.html.erb

<div class="field">
  <%= form.label :body %>
  <%= form.text_area :body %>
</div>

<%= form.hidden_field :idea_id %>

Enfin, supprimez la ligne suivante:

app/views/comments/_form.html.erb

<div class="field">
  <%= form.label :idea_id %>
  <%= form.number_field :idea_id %>
</div>

Concevons en utilisant HTML et CSS

Appliquer la mise en page de l'application

app/assets/stylesheets/application.css

body { padding-top: 100px; }

Réécrivez la ligne ci-dessus comme suit.

app/assets/stylesheets/application.css

body { padding-top: 60px; }

Enfin, supprimez ʻapp / assets / stylesheets / scaffolds.scss`.

Améliorons la navigation Affichez toujours le bouton "Nouvelle idée" dans la navigation.

app/views/layouts/application.html.erb

<li class="active"><a href="/ideas">Ideas</a></li>
<li><%= link_to 'New Idea', new_idea_path %></li>

Conception de la liste d'idées

Réécrivez comme suit.

app/views/ideas/index.html.erb

<h1>Listing ideas</h1>

<% @ideas.in_groups_of(3) do |group| %>
  <div class="row">
    <% group.compact.each do |idea| %>
      <div class="col-md-4">
        <%= image_tag idea.picture_url, width: '100%' if idea.picture.present? %>
        <h4><%= link_to idea.name, idea %></h4>
        <%= idea.description %>
      </div>
    <% end %>
  </div>
<% end %>

<h2>Concevoir une page de détail pour Idea</h2>

Réécrivez comme suit.


#### **`app/views/ideas/show.html.erb`**

<%= notice %>

Affichage des miniatures à l’aide de Carrierrwave

Installez ImageMagick Exécutez `brew install imagemagick`,

gem 'carrierwave'

en dessous de,

gem 'mini_magick'

Ajouter. Exécutez ensuite la commande suivante. bundle

Créer une miniature lorsque vous téléchargez une image

app/uploaders/picture_uploader.rb

 # include CarrierWave::MiniMagick

version :thumb do
  process :resize_to_fill => [50, 50]
end

Supprimez le «#» ci-dessus.

Créer une miniature

app/views/ideas/index.html.erb

<%= image_tag idea.picture_url, width: '100%' if idea.picture.present? %>

Est modifié comme suit.

app/views/ideas/index.html.erb

<%= image_tag idea.picture_url(:thumb) if idea.picture.present? %>

Ajouter une fonction d'authentification avec Decice

Ajouter une gemme de devise

gem 'devise'

Ajouter. Exécutez ensuite la commande suivante dans le terminal. bundle

Configurer un appareil sur votre application Exécutez la commande suivante.

rails generate devise:install

Paramètres d'environnement du périphérique Ajoutez l'option d'URL par défaut au fichier d'environnement.

config/environments/development.rb

config.action_mailer.default_url_options = { host: 'localhost:3000' }

Ajouter avant ʻend`.

app/views/layouts/application.html.erb

<% if notice %>
  <p class="alert alert-success"><%= notice %></p>
<% end %>
<% if alert %>
  <p class="alert alert-danger"><%= alert %></p>
<% end %>
<%= yield %>

Ajoutez la ligne ci-dessus.

Supprimez également les éléments suivants:

app/views/ideas/show.html.erb

<p id="notice"><%= notice %></p>

De même, supprimez-le dans ʻapp / views / comments / show.html.erb. Parce que j'ai ajouté la même ligne à ʻapp / views / layouts / application.html.erb.

Configuration du modèle utilisateur

Utilisez le script de générateur fourni pour créer un modèle utilisateur.

rails generate devise User
rails db:migrate

Inscrivez-vous et ajoutez un lien de connexion Ajoutez le lien ou les instructions appropriés auxquels les utilisateurs peuvent se connecter dans le coin supérieur droit de la barre de navigation.

app/views/layouts/application.html.erb

<p class="navbar-text pull-right">
  <% if user_signed_in? %>
    Logged in as <strong><%= current_user.email %></strong>.
    <%= link_to 'Edit profile', edit_user_registration_path, class: 'navbar-link' %> |
    <%= link_to "Logout", destroy_user_session_path, method: :delete, class: 'navbar-link'  %>
  <% else %>
    <%= link_to "Sign up", new_user_registration_path, class: 'navbar-link'  %> |
    <%= link_to "Login", new_user_session_path, class: 'navbar-link'  %>
  <% end %>
</p>
<ul class="nav navbar-nav">
  <li class="active"><a href="/ideas">Ideas</a></li>
</ul>

Rendez impossible la vérification du contenu enregistré lorsque vous n'êtes pas connecté en dernier.

app/controllers/application_controller.rb

  before_action :authenticate_user!

Ajouter avant ʻend`.

Ajouter une photo de profil avec Gravatar

Ajouter une gemme Gravtastic

gem 'gravtastic'

Ajoutez ceci sous devise.

Dans Terminal, exécutez la commande suivante:

bundle

Configurer Gravatar Ajoutez ce qui suit sous la dernière ligne:

app/models/user.rb

include Gravtastic
gravtastic

Réglez Gravatar.

app/views/layouts/application.html.erb

<% if user_signed_in? %>

Dans, réécrivez comme suit.

app/views/layouts/application.html.erb

<% else %>
<%= image_tag current_user.gravatar_url %>

Concevons plus

conception de l'en-tête

app/assets/stylesheets/application.css

nav.navbar {
  min-height: 38px;
  background-color: #f55e55;
  background-image: none;
}

.navbar a.brand { font-size: 18px; }
.navbar a.brand:hover {
  color: #fff;
  background-color: transparent;
  text-decoration: none;
}

conception de la table Réécrivez comme suit.

app/views/ideas/index.html.erb

<table class="table">

Utilisez le code ci-dessous pour redimensionner l'image.

<%= image_tag(idea.picture_url, width: 600) if idea.picture.present? %>

Ajoutez ce qui suit à la fin de ʻapp / assets / stylesheets / ideas.scss`.

app/assets/stylesheets/ideas.scss

.container a:hover {
  color: #f55e55;
  text-decoration: none;
  background-color: rgba(255, 255, 255, 0);
}

Ajouter un style au pied de page

app/assets/stylesheets/application.css

footer {
  background-color: #ebebeb;
  padding: 30px 0;
}

Ajouter un style au bouton

app/assets/stylesheets/ideas.scs

.container input[type="submit"] {
   height: 30px;
   font-size: 13px;
   background-color: #f55e55;
   border: none;
   color: #fff;
 }