[Ruby on Rails] Erstellen eines Anfrageformulars

Ziel

Erstellen Sie ein solches Anfrageformular. Diesmal handelt es sich um eine Methode zum Senden an Google Mail in der Entwicklungsumgebung. 問い合わせ.png

Entwicklungsumgebung

ruby 2.5.7 Rails 5.2.4.3 OS: macOS Catalina

Annahme

bootstrap4 installiert

[Ruby on Rails] Wie schreibe ich eine Aufzählung auf Japanisch? Dient zur Auswahl des Betreffs Ihrer Anfrage. Hier wird _i18n verwendet.

fließen

1 Mailer erstellen und bearbeiten 2 Erstellen Sie eine Tabelle 3 Bearbeiten Sie config / environment / development.rb 4 Umgebungsvariablen einstellen 5 Controller erstellen 6 Routing bearbeiten 7 Ansicht bearbeiten 8 Ermöglichen Sie den Zugriff auf unsichere Apps mit Ihrem Google-Konto

Mailer erstellen und bearbeiten

Terminal


$ rails g mailer ContactMailer

Geben Sie das Ziel und den Betreff an. ENV ['TOMAIL'] wird später eingestellt.

app/mailers/thanks_mailer.rb


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

Eine Tabelle erstellen

Terminal


$ rails g model Contact

Fügen Sie die gewünschten Spalten hinzu. Ich werde die Einstellung von enum im nächsten Artikel erklären.

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

Bearbeiten von config / environment / development.rb

config/enviroments/development.rb



...

config.action_mailer.raise_delivery_errors = false 
↓ Wechseln Sie zu true
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

Umgebungsvariablen einstellen

Laden Sie diesmal Ihre Adresse und Ihr Passwort nicht auf GitHub hoch Verwenden Sie Edelstein "dotenv-Schienen".

Gemfile


gem "dotenv-rails"

Terminal


$ bundle install

Erstellen Sie als Nächstes eine ENV-Datei in derselben Hierarchie wie die Gem-Datei

.env


TOMAIL=Zieladresse

SMTP_USERNAME=Google Mail-Adresse des Absenders
SMTP_PASSWORD=Kennwort der Google Mail-Adresse des Absenders
Fehlergeschichte [SMTP_USERNAME] Als ich zum ersten Mal versuchte, SMTP_USERNAME auf MAIL zu setzen, Ich habe einen Fehler erhalten, egal wie oft ich es versucht habe. Daher ist es möglicherweise besser, es beim Einstellen so zu schreiben. Ich möchte es nach dem Studium der Namensregeln erneut aktualisieren.

Fügen Sie am Ende der .gitignore-Datei Folgendes hinzu.

.gitignore


/.env

Controller erstellen

Terminal


$ rails g controller contacts

app/controllers/contacts_controller.rb


class Public::ContactsController < ApplicationController
  def new
    @contact = Contact.new
  end
  
  #Wenn Sie einen Bestätigungsbildschirm erstellen möchten, sollten Sie so etwas schreiben.
  #Erhalten Sie Eingaben von einer neuen Aktion
  #Wenn Sie auf die Schaltfläche "Senden" klicken, wird die Aktion "Erstellen" ausgeführt.
  def confirm
    @contact = Contact.new(contact_params)
    if @contact.invalid?
      render :new
    end
  end
 
  #Wenn der Eingabeinhalt fehlerhaft ist
  #Ich denke, es ist natürlich, zur vorherigen Seite zurückzukehren, während der eingegebene Inhalt beibehalten wird.
  #Dies ist möglich, indem eine Rückaktion definiert wird.
  def back
    @contact = Contact.new(contact_params)
    render :new
  end

  #Es ist die Aktion, die tatsächlich gesendet wird.
  #Dies ist das erste Mal, dass Sie Ihre Eingabe speichern.
  #Aus Sicherheitsgründen möchten Sie möglicherweise den eingegebenen Inhalt in einem bestimmten Zeitraum löschen.
  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

  #Bitte verwenden Sie, wenn Sie den Bildschirm zum Abschluss der Übertragung verwenden.
  def done
  end

  private

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

Routing bearbeiten

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'

Ansicht bearbeiten

Unter app / views / contact_mailer send_mail.html.erb Erstellen Sie send_text.html.erb.

  • Ich weiß nicht, warum ich zwei erstellen werde, deshalb möchte ich es mir in Zukunft anvertrauen. .. .. Bitte füllen Sie den gleichen Inhalt aus

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


<%= @contact.name %>Ich erhielt eine Anfrage von Herrn<br>
【Tel】:<%= @contact.phone_number %><br>
【Mail】:<%= @contact.email %><br>
[Bedarf]:<%= @contact.subject_i18n %><br>
【Inhalt der Anfrage】<br>
<span style="white-space: pre-wrap;"><%= @contact.message %></span>

Wir werden das eigentliche Eingabeformular erstellen.

  • Beschreiben Sie nur den Namen und die Nachricht.

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



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

  <div>
    <%= f.submit 'Eingabe bestätigen' %>
  </div>
<% end %>

Schreiben Sie den Code, um vom Bestätigungsbildschirm zum Eingabebildschirm zurückzukehren.

  • Beschreiben Sie nur den Namen und die Nachricht.

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



<table>
  <tbody>
    <tr>
      <td class="text-center" style="width: 30%;">Name</td>
      <td><%= @contact.name %></td>
    </tr>
    <tr>
      <td class="text-center">Botschaft</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 'Senden' %></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 'Kehrt zum Eingabebildschirm zurück' %></div>
<% end %>
Ergänzung [<% = @ contact.name%>] Weil ich zur Bestätigungsaktion in Form des neuen Bildschirms gesprungen bin In params können Sie einen Status erstellen, in dem @contact einen Wert hat. Daher kann es ohne Speichern angezeigt werden.
Ergänzung [Senden] Obwohl es von @contact angezeigt wird, wurde es nicht gespeichert. Wenn Sie zur aktuellen Erstellungsaktion springen, werden Parameter ausgelöst, ohne gespeichert zu werden. Also benutze ich f.hidden_field, ordne jedem Parameter neu zu und überspringe zum Erstellen.
Ergänzung [Zurück zum Eingabebildschirm] Dies ist der gleiche Grund wie beim Senden. Überprüfen Sie daher bitte die obigen Angaben Obwohl es von @contact angezeigt wird, wurde es nicht gespeichert.

Ermöglichen Sie den Zugriff auf unsichere Apps mit Ihrem Google-Konto

So aktivieren Sie den Zugriff auf unsichere Google-Apps Dieser Artikel war leicht zu verstehen, bitte beziehen Sie sich darauf.

Referenz

Zusammenfassung

Weil es sich um persönliche Adressen und Telefonnummern handelt Ich denke, es ist wichtig, die Datenschutzrichtlinien und Informationen regelmäßig zu löschen. Ich denke jedoch, dass die Möglichkeit, E-Mails automatisch an die andere Partei zu senden, in verschiedenen Fällen eine hohe Priorität hat. Vielleicht möchten Sie es gut verstehen.

Auf Twitter werden auch Technologien und Ideen hochgeladen, die nicht auf Qiita hochgeladen wurden Ich wäre Ihnen dankbar, wenn Sie mir folgen könnten. Klicken Sie hier für Details https://twitter.com/japwork

Recommended Posts