[Ruby on Rails] Création d'un formulaire de demande

Cible

Créez un formulaire de demande comme celui-ci. Cette fois, c'est une méthode à envoyer à gmail dans l'environnement de développement. 問い合わせ.png

Environnement de développement

ruby 2.5.7 Rails 5.2.4.3 OS: macOS Catalina

supposition

bootstrap4 installé

[Ruby on Rails] Comment écrire enum en japonais Utilisé pour sélectionner le sujet de votre demande. C'est là que _i18n est utilisé.

couler

1 Créer et modifier un mailer 2 Créer une table 3 Modifiez config / environnements / development.rb 4 Définition des variables d'environnement 5 Création d'un contrôleur 6 Routage Modifier 7 Modifier la vue 8 Autorisez l'accès aux applications non sécurisées avec votre compte Google

Créer et modifier un mailer

Terminal


$ rails g mailer ContactMailer

Spécifiez la destination et le sujet. ENV ['TOMAIL'] sera défini plus tard.

app/mailers/thanks_mailer.rb


class ContactMailer < ApplicationMailer
  def send_mail(contact)
    @contact = contact
    mail to:   ENV['TOMAIL'], subject: '【Nous contacter】' + @contact.subject_i18n
  end
end

Créer une table

Terminal


$ rails g model Contact

Ajoutez les colonnes dont vous avez besoin. J'expliquerai le paramétrage de enum dans le prochain article.

db/migrate/xxxxxxxxxxxxx_create_contacts.rb


class CreateContacts < ActiveRecord::Migration[5.2]
  def change
    create_table :contacts do |t|
      t.string :name, null: false
      t.string :email, null: false
      t.string :phone_number, null: false
      t.integer :subject, default: 0, null: false
      t.text :message, null: false

      t.timestamps
    end
  end
end

Modification de config / environnements / development.rb

config/enviroments/development.rb



...

config.action_mailer.raise_delivery_errors = false 
↓ Changer en vrai
config.action_mailer.raise_delivery_errors = true

...

config.action_mailer.delivery_method = :smtp
  config.action_mailer.smtp_settings = {
      port: 587,
      address: 'smtp.gmail.com',
      domain: 'smtp.gmail.com',
      user_name: ENV['SMTP_USERNAME'],
      password: ENV['SMTP_PASSWORD'],
      enable_starttls_auto: true
  }
end

Définition des variables d'environnement

Ne téléchargez pas votre adresse et votre mot de passe sur GitHub cette fois Utilisez le gem "dotenv-rails".

Gemfile


gem "dotenv-rails"

Terminal


$ bundle install

Ensuite, créez un fichier .env dans la même hiérarchie que le Gemfile

.env


TOMAIL=Adresse de destination

SMTP_USERNAME=Adresse Gmail de l'expéditeur
SMTP_PASSWORD=Mot de passe de l'adresse Gmail de l'expéditeur
Récit d'échec [SMTP_USERNAME] La première fois que j'ai essayé de définir SMTP_USERNAME sur MAIL, J'ai eu une erreur, peu importe le nombre de fois que j'ai essayé. Par conséquent, il peut être préférable de l'écrire comme ceci lors du réglage. Je voudrais le mettre à jour à nouveau après avoir étudié les règles de dénomination.

Ajoutez ce qui suit au bas du fichier .gitignore.

.gitignore


/.env

Créer un contrôleur

Terminal


$ rails g controller contacts

app/controllers/contacts_controller.rb


class Public::ContactsController < ApplicationController
  def new
    @contact = Contact.new
  end
  
  #Si vous souhaitez créer un écran de confirmation, vous devez écrire quelque chose comme ceci.
  #Recevoir les commentaires d'une nouvelle action
  #Lorsque vous appuyez sur le bouton d'envoi, l'action de création est exécutée.
  def confirm
    @contact = Contact.new(contact_params)
    if @contact.invalid?
      render :new
    end
  end
 
  #S'il y a une erreur dans le contenu d'entrée
  #Je pense qu'il est naturel de revenir à la page précédente tout en conservant le contenu d'entrée,
  #Ceci est possible en définissant une action arrière.
  def back
    @contact = Contact.new(contact_params)
    render :new
  end

  #C'est l'action qui est réellement envoyée.
  #C'est la première fois que vous enregistrez votre entrée.
  #Pour des raisons de sécurité, vous souhaiterez peut-être supprimer le contenu d'entrée dans un certain laps de temps.
  def create
    @contact = Contact.new(contact_params)
    if @contact.save
      ContactMailer.send_mail(@contact).deliver_now
      redirect_to done_path
    else
      render :new
    end
  end

  #Veuillez utiliser lors de l'utilisation de l'écran de fin de transmission.
  def done
  end

  private

  def contact_params
    params.require(:contact)
          .permit(:email,
                  :name,
                  :phone_number,
                  :subject,
                  :message
                 )
  end
end

Modifier le routage

config/routes


resources :contacts, only: [:new, :create]
post 'contacts/confirm', to: 'contacts#confirm', as: 'confirm'
post 'contacts/back', to: 'contacts#back', as: 'back'
get 'done', to: 'contacts#done', as: 'done'

Modifier vue

Sous app / views / contact_mailer send_mail.html.erb Créez send_text.html.erb.

  • Je ne sais pas pourquoi j'en créerai deux, alors j'aimerais me le confier à l'avenir. .. .. Veuillez remplir le même contenu

erb:app/views/contact_mailer/send_mail.html.erb,send_text.html.erb


<%= @contact.name %>J'ai reçu une demande de M.<br>
【Tel】:<%= @contact.phone_number %><br>
【Mail】:<%= @contact.email %><br>
[Exigences]:<%= @contact.subject_i18n %><br>
【Contenu de la demande】<br>
<span style="white-space: pre-wrap;"><%= @contact.message %></span>

Nous allons créer le formulaire de saisie réel.

  • Décrivez uniquement le nom et le message.

erb:app/views/contacts/new.html.erb



<%= form_for(@contact, url: confirm_path) do |f| %>
  <div class="form-group">
    <%= f.label :name, 'Nom*' %>
    <%= f.text_field :name, autofocus: true, class: 'form-control' %>
  </div>
    
  <div class="form-group">
    <%= f.label :message, 'message*' %>
    <%= f.text_area :message, size: '10x10', class: 'form-control' %>
  </div>

  <div>
    <%= f.submit 'Confirmer l'entrée' %>
  </div>
<% end %>

Écrivez le code pour revenir à l'écran de saisie à partir de l'écran de confirmation.

  • Décrivez uniquement le nom et le message.

erb:app/views/contacts/confirm.html.erb



<table>
  <tbody>
    <tr>
      <td class="text-center" style="width: 30%;">Nom</td>
      <td><%= @contact.name %></td>
    </tr>
    <tr>
      <td class="text-center">message</td>
      <td style="white-space: pre-wrap;"><%= @contact.message %></td>
    </tr>
  </tbody>
</table>

<%= form_for(@contact) do |f| %>
  <%= f.hidden_field :name %>
  <%= f.hidden_field :email %>
  <%= f.hidden_field :phone_number %>
  <%= f.hidden_field :subject %>
  <%= f.hidden_field :message %>
  <div><%= f.submit 'Envoyer' %></div>
<% end %>
<%= form_for @contact, url: back_path do |f| %>
  <%= f.hidden_field :name %>
  <%= f.hidden_field :email %>
  <%= f.hidden_field :phone_number %>
  <%= f.hidden_field :subject %>
  <%= f.hidden_field :message %>
  <div><%= f.submit 'Revient à l'écran de saisie' %></div>
<% end %>
Supplément [<% = @ contact.name%>] Parce que j'ai sauté à l'action de confirmation sous la forme du nouvel écran Dans les paramètres, vous pouvez créer un état où @contact a une valeur. Par conséquent, il peut être affiché sans enregistrer.
Supplément [Send] Bien qu'il soit affiché par @contact, il n'a pas été enregistré. Si vous passez à l'action de création telle quelle, les paramètres seront lancés sans être enregistrés. J'utilise donc f.hidden_field, réaffecte les paramètres à chacun et saute pour créer.
Supplément [Retour à l'écran de saisie] C'est la même raison que l'envoi, veuillez donc vérifier ce qui précède Bien qu'il soit affiché par @contact, il n'a pas été enregistré.

Autorisez l'accès aux applications non sécurisées avec votre compte Google

Comment activer l'accès aux applications non sécurisées de Google Cet article était facile à comprendre, veuillez donc vous y référer.

référence

Résumé

Parce qu'il traite des adresses personnelles et des numéros de téléphone Je pense qu'il est essentiel de supprimer régulièrement la politique de confidentialité et les informations. Cependant, je pense que pouvoir envoyer automatiquement des courriels à l'autre partie est une priorité élevée dans divers cas. Vous voudrez peut-être bien le comprendre.

De plus, sur Twitter, les technologies et les idées qui n'ont pas été téléchargées sur Qiita sont également téléchargées, donc Je vous serais reconnaissant si vous pouviez me suivre. Cliquez ici pour plus de détails https://twitter.com/japwork

Recommended Posts