Einführung

Dies ist eine Fortsetzung der Serie "Erstellen einer EC-Site mit Rails 5 ④" (https://qiita.com/GreenFingers_tk/items/58e04fbaf754fe33e294), die eine EC-Site erstellt, auf der Sie in einer fiktiven Bäckerei einkaufen können. Schließlich werden wir mit der Implementierung der Funktion beginnen. Zunächst in der Reihenfolge der Funktionen rund um das übergeordnete Modell des Kundenstandorts ... Dieses Mal konzentrieren wir uns also auf die CRUD des Kundenmodells.

Quellcode

https://github.com/Sn16799/bakeryFUMIZUKI

Controller entwickeln

Ich konnte kein neues bei devise registrieren, und als ich mich fragte, warum, stellte sich heraus, dass ich der Controller-Seite keine Parameterberechtigung erteilte.

`app/controllers/customers/registrations_controller.rb`


class Customers::RegistrationsController < Devise::RegistrationsController

  before_action :authenticate_customer!
  before_action :configure_permitted_parameters, if: :devise_controller?

  protected

  def after_sign_up_path_for(resource)
    customer_top_path
  end

  def configure_permitted_parameters
    devise_parameter_sanitizer.permit(:sign_up, keys: [:is_active, :first_name, :first_name_kana, :family_name, :family_name_kana, :post_code, :address, :tel])
  end

  protected
  def update_resouce(resource, parans)
    resource.update_without_password(params)
  end

end

Sessions_controller hat übrigens auch das Übergangsziel nach dem An- und Abmelden angegeben.

`app/controllers/customers/sessions_controller.rb`


class Customers::SessionsController < Devise::SessionsController

  protected

  def after_sign_in_path_for(resource)
    customer_top_path
  end

  def after_sign_out_path_for(resource)
    customer_top_path
  end

end

Aktivieren Sie den Bootstrap-Flash

Mit Bootstrap können Sie eine übersichtliche Flash-Nachricht verwenden, indem Sie einfach die Klasse angeben. Es ist praktisch, eine Teilvorlage zu erstellen, damit Sie sie mit Render aufrufen können.

`app/controllers/application_controller.rb`


add_flash_types :success, :danger, :info

`app/helpers/application_helper.rb`


def flash_class_for flash_type
  case flash_type
    when 'success' then 'alert-success'
    when 'danger' then 'alert-danger'
    when 'info' then 'alert-info'
  end
end

`html:app/views/layouts/_flash.html.erb`


<% flash.each do |type, msg| %>
  <div class="alert <%= flash_class_for(type) %> row" role="alert">
    <a class="close" data-dismiss="alert">×</a>
    <%= msg %>
  </div>
<% end %>

`html:app/views/layouts/application.html.erb`


<body>
  <%= render 'layouts/header' %>
  <div class="container-fluid">
    <%= render 'layouts/flash', flash: flash %>
    <div class="row">
      <%= yield %>
    </div>
  </div>
  <%= render 'layouts/footer' %>
</body>

Controller Viele Funktionen sind grundlegende CRUD, aber nur der Auszahlungsprozess ist anders.

Klicken Sie im Bearbeitungsbildschirm auf die Schaltfläche "Abbestellen" (Aktion "Anruf zurückziehen").
↓
Übergang zum Auszahlungsbestätigungsbildschirm
↓
Klicken Sie auf die Schaltfläche "Abbestellen" (Warnung wird angezeigt)
↓
Wenn Sie "Ja" drücken, wird der Auszahlungsvorgang ausgeführt (Auszahlung)_Aktionsaufruf erledigt)

Der Durchfluss ist wie oben. Darüber hinaus ist der Auszahlungsprozess nicht das Löschen von Kundendaten, sondern das Ändern der Spalte is_active von true in false.

`app/controllers/customers_controller.rb`


class CustomersController < ApplicationController

  before_action :authenticate_customer!
  before_action :set_customer
  before_action :baria_customer

  def edit
  end

  def show
  end

  def update
    @customer = current_customer
    if @customer.update(customer_params)
      redirect_to customer_path(@customer), success: 'Kundeninformationen wurden aktualisiert!'
    else
      flash[:danger] = 'Die Kundeninformationen konnten nicht aktualisiert werden. Gibt es Leerzeichen?'
      render :edit
    end
  end

  def withdraw
  end

  def withdraw_done
    @customer = current_customer
    @customer.update(is_active: false)
    reset_session
    redirect_to customer_top_path, info: 'Vielen Dank. Wir freuen uns auf ein Wiedersehen.'
  end

  private

  def customer_params
    params.require(:customer).permit(:is_active, :first_name, :first_name_kana, :family_name, :family_name_kana, :post_code, :address, :email, :tel, cart_items_attributes: [:_destroy])
  end

  def set_customer
    @customer = current_customer
  end

  #Wenn Sie versuchen, auf die Seite einer anderen Person zuzugreifen, kehren Sie zur vorherigen Seite zurück
  def baria_customer
    if params[:id].to_i != current_customer.id
      redirect_back(fallback_location: root_path)
    end
  end
end

View Sign_up

`html:app/views/customers/registrations/new.html.erb`


<div class='col-lg-6 offset-lg-3 offset-2 space'>
  <div class='row'>
    <h2>Registrierung neuer Mitglieder</h2>
  </div>

  <div class='row'>
    <%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
    <%= render 'devise/shared/error_messages', resource: resource %>


    <div class='form-group row space'>
      <div class='col-lg-4'>
        <h5><%= f.label :Name%></h5>
      </div>
      <div class='col-lg-8'>
        <div class="row">
          <div class="col-lg-6">
            (Nachname)<%= f.text_field :family_name, autofocus: true, autocomplete: 'family_name', class: 'form-control' %>
          </div>
          <div class="col-lg-6">
            (Name)<%= f.text_field :first_name, autofocus: true, autocomplete: 'first_name', class: 'form-control' %>
          </div>
        </div>
      </div>
    </div>

    <div class='form-group row'>
      <div class='col-lg-4'>
        <h5><%= f.label :Frigana%></h5>
      </div>
      <div class='col-lg-8'>
        <div class="row">
          <div class="col-lg-6">
            (Nachname)<%= f.text_field :family_name_kana, autofocus: true, autocomplete: 'family_name_kana', class: 'form-control' %>
          </div>
          <div class="col-lg-6">
            (Mei)<%= f.text_field :first_name_kana, autofocus: true, autocomplete: 'first_name_kana', class: 'form-control' %>
          </div>
        </div>
      </div>
    </div>

    <div class='form-group row'>
      <div class='col-lg-4'>
        <h5><%= f.label :Email%></h5>
      </div>
      <div class='col-lg-8'>
        <%= f.text_field :email, autofocus: true, autocomplete: 'email', class: 'form-control' %>
      </div>
    </div>

    <div class='form-group row'>
      <div class='col-lg-4'>
        <h5><%= f.label :Postleitzahl (ohne Bindestriche)%></h5>
      </div>
      <div class='col-lg-8'>
        <%= f.text_field :post_code, autofocus: true, autocomplete: 'post_code', class: 'form-control' %>
      </div>
    </div>

    <div class='form-group row'>
      <div class='col-lg-4'>
        <h5><%= f.label :Adresse%></h5>
      </div>
      <div class='col-lg-8'>
        <%= f.text_field :address, autofocus: true, autocomplete: 'address', class: 'form-control' %>
      </div>
    </div>

    <div class='form-group row'>
      <div class='col-lg-4'>
        <h5><%= f.label :Telefonnummer (ohne Bindestrich)%></h5>
      </div>
      <div class='col-lg-8'>
        <%= f.text_field :tel, autofocus: true, autocomplete: 'tel', class: 'form-control' %>
      </div>
    </div>

    <div class='form-group row'>
      <div class='col-lg-4'>
        <h5><%= f.label :Passwort (6 Zeichen oder mehr)%></h5>
      </div>
      <div class='col-lg-8'>
        <%= f.password_field :password, autocomplete: 'new-password', class: 'form-control' %>
      </div>
    </div>

    <div class='form-group row'>
      <div class='col-lg-4'>
        <h5><%= f.label :Zur Passwortbestätigung%></h5>
      </div>
      <div class='col-lg-8'>
        <%= f.password_field :password_confirmation, autocomplete: 'new-password', class: 'form-control' %>
      </div>
    </div>

    <div class='row'>
      <div class='col-lg-2 offset-lg-5 actions'>
        <%= f.submit 'Anmelden', class:'btn btn-danger' %>
      </div>
    </div>

    <% end %>
  </div>

  <div class="space">
    <h4>Diejenigen, die sich bereits registriert haben</h4>
    <h5><%= link_to 'Hier', new_customer_session_path  %>Bitte melden Sie sich an von</h5>
  </div>
</div>

Sign_in

`html/app/views/customers/sessions/new.html.erb`


<div class='col-lg-6 offset-lg-4 offset-1 space'>
  <div class="row">
    <h3>
      <span style="display: inline-block;">Für Mitglieder</span>
      <span style="display: inline-block;">Melden Sie sich von hier aus an</span>
    </h3>
  </div>

  <div class="row">
    <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
    <%= render 'devise/shared/error_messages', resource: resource %>

    <div class="form-group row space">
      <div class="col-lg-4">
        <h5><%= f.label :Email%></h5>
      </div>
      <div class="col-lg-8">
        <%= f.text_field :email, autofocus: true, autocomplete: "email", class: 'form-control' %>
      </div>
    </div>

    <div class="form-group row">
      <div class="col-lg-4">
        <h5><%= f.label :Passwort%></h5>
      </div>
      <div class="col-lg-8">
        <%= f.password_field :password, autocomplete: "current-password", class: 'form-control' %>
      </div>
    </div>

    <div>
      <%= link_to "=>Wenn Sie Ihr Passwort vergessen haben, klicken Sie hier", new_password_path(resource_name) %>
    </div>

    <div class="form-group row space">
      <div class="col-lg-2 offset-lg-5">
        <%= f.submit "Einloggen", class:"btn btn-danger" %>
      </div>
    </div>

    <% end %>
  </div>

  <div class="space">
    <h4>Diejenigen, die sich nicht registriert haben</h4>
    <h5><%= link_to "Hier", new_customer_registration_path  %>Bitte registrieren Sie sich von.</h5>
  </div>

</div>

Bearbeiten

`html:app/views/customers/edit.html.erb`


<div class='col-lg-10 offset-lg-1 space'>
  <div class='row'>
    <h2>Registrierungsinformationen bearbeiten</h2>
  </div>

  <div class='row'>
    <%= form_with(model: @customer, local: true, class: 'container') do |f| %>

    <div class='form-group row'>
      <div class='col-lg-4'>
        <h5><%= f.label :Name%></h5>
      </div>
      <div class='col-lg-8'>
        <span style='display: inline-block;'>
          (Nachname)<%= f.text_field :family_name, autofocus: true, autocomplete: 'family_name', class: 'form-control' %>
        </span>
        <span style='display: inline-block;'>
          (Name)<%= f.text_field :first_name, autofocus: true, autocomplete: 'first_name', class: 'form-control' %>
        </span>
      </div>
    </div>

    <div class='form-group row'>
      <div class='col-lg-4'>
        <h5><%= f.label :Frigana%></h5>
      </div>
      <div class='col-lg-8'>
        <span style='display: inline-block;'>
          (Nachname)<%= f.text_field :family_name_kana, autofocus: true, autocomplete: 'family_name_kana', class: 'form-control' %>
        </span>
        <span style='display: inline-block;'>
          (Mei)<%= f.text_field :first_name_kana, autofocus: true, autocomplete: 'first_name_kana', class: 'form-control' %>
        </span>
      </div>
    </div>

    <div class='form-group row'>
      <div class='col-lg-4'>
        <h5><%= f.label :Email%></h5>
      </div>
      <div class='col-lg-8'>
        <%= f.text_field :email, autofocus: true, autocomplete: 'email', class: 'form-control' %>
      </div>
    </div>

    <div class='form-group row'>
      <div class='col-lg-4'>
        <h5><%= f.label :Postleitzahl (ohne Bindestriche)%></h5>
      </div>
      <div class='col-lg-8'>
        <%= f.text_field :post_code, autofocus: true, autocomplete: 'post_code', class: 'form-control' %>
      </div>
    </div>

    <div class='form-group row'>
      <div class='col-lg-4'>
        <h5><%= f.label :Adresse%></h5>
      </div>
      <div class='col-lg-8'>
        <%= f.text_field :address, autofocus: true, autocomplete: 'address', class: 'form-control' %>
      </div>
    </div>

    <div class='form-group row'>
      <div class='col-lg-4'>
        <h5><%= f.label :Telefonnummer (ohne Bindestrich)%></h5>
      </div>
      <div class='col-lg-8'>
        <%= f.text_field :tel, autofocus: true, autocomplete: 'tel', class: 'form-control' %>
      </div>
    </div>

    <div class="form-group row">
      <div class="col-lg-4 offset-lg-8">
        <%= f.submit 'Speichern Sie Ihre Änderungen', class:'btn btn-danger' %>
        <%= link_to 'Abheben', customer_withdraw_path(@customer), class:'btn btn-danger'  %>
      </div>
    </div>
    <% end %>
  </div>
</div>

Einzelheiten

`html:app/views/customers/show.html.erb`


<div class="col-lg-6 offset-lg-3 space">
  <div class="container">
    <h2>Meine Seite</h2>
  </div>
  <!--Kundeninformation-->
  <div class="container space">
    <div class="row">
      <div class="col-lg-5"><h3>Kundeninformation</h3></div>
      <div class="col-lg-2">
        <%= link_to 'Bearbeiten', edit_customer_path, class: 'btn-sm btn-danger' %>
      </div>
      <div class="col-lg-4">
        <%= link_to 'Passwort ändern', new_customer_password_path, class: 'btn-sm btn-danger' %>
      </div>
    </div>

    <div class="row">
      <div class="col-lg-3">
        <h4>Vollständiger Name</h4>
      </div>
      <div class="col-lg-9">
        <%= @customer.full_name %>
      </div>
    </div>

    <div class="row">
      <div class="col-lg-3">
        <h4>Kana</h4>
      </div>
      <div class="col-lg-9">
        <%= @customer.family_name_kana %> <%= @customer.first_name_kana %>
      </div>
    </div>

    <div class="row">
      <div class="col-lg-3">
        <h4>Postleitzahl</h4>
      </div>
      <div class="col-lg-9">
        〒 <%= @customer.post_code %>
      </div>
    </div>

    <div class="row">
      <div class="col-lg-3">
        <h4>Adresse</h4>
      </div>
      <div class="col-lg-9">
        <%= @customer.address %>
      </div>
    </div>

    <div class="row">
      <div class="col-lg-3">
        <h4>Telefonnummer</h4>
      </div>
      <div class="col-lg-9">
        <%= @customer.tel %>
      </div>
    </div>

    <div class="row">
      <div class="col-lg-3">
        <h4>Email</h4>
      </div>
      <div class="col-lg-9">
        <%= @customer.email %>
      </div>
    </div>
  </div>

  <!--Andere Links-->
  <div class="container space">
    <div class="row">
      <div class="col-lg-3">
        <h4>Lieferanschrift</h4>
      </div>
      <div class="col-lg-9">
        <%= link_to 'Liste anzeigen', addresses_path, class: 'btn btn-danger' %>
      </div>
    </div>

    <div class="row">
      <div class="col-lg-3">
        <h4>Bestellverlauf</h4>
      </div>
      <div class="col-lg-9">
        <%= link_to 'Liste anzeigen', orders_path, class: 'btn btn-danger' %>
      </div>
    </div>
  </div>
</div>

Auszahlungsbestätigung

`html:app/views/customers/withdraw.html.erb`


<div class="col-lg-10 offset-lg-1 space">
  <div class="row space">
    <h2>Möchten Sie sich wirklich abmelden?</h2>
  </div>

  <div class="row space">
    <h4>Wenn Sie von der Mitgliedschaft zurücktreten, werden die Registrierungsinformationen für die Mitgliedschaft und
      <br>Sie können Ihre Kaufhistorie nicht anzeigen.
      <br>Klicken Sie zum Abbestellen auf "Abbestellen".
    </h4>
  </div>

  <div class="row space">
    <%= link_to "Nicht zurückziehen",customer_path(current_customer),class: "btn btn-danger" %>
    <%= link_to "Abheben", customer_withdraw_done_path(current_customer), method: :put, "data-confirm" => "Möchten Sie sich wirklich abmelden?", class: "btn btn-danger" %>
  </div>
</div>

SCSS

`app/assets/stylesheets/application.scss`


// initialize
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  color: #120136;
}

a{
  text-decoration: none;
}

.space {
  padding: 50px 0 30px;
}

Nachtrag

Diesmal ist die Funktion selbst nicht schwierig, aber es hat viel Zeit gekostet, den Bildschirm ansprechbar zu machen. Ich habe vor, die Schaltflächen später in die Themenfarbe zu ändern, und im Moment habe ich sie alle rot gemacht. Weil es auffällt. Auch der Link, den ich in die View-Datei geschrieben habe, funktioniert vorerst, aber da ich auf der Seite, zu der ich gesprungen bin, nichts geschrieben habe, wird im Beispiel nur der Wortlaut "Find me in ..." angezeigt.

Wenn Sie den Hauptbildschirm erstellen, sieht er schließlich wie eine Site aus. Es gibt noch viele Funktionen, aber wir werden sie in Zukunft implementieren. Als ich mit dem IK fortfuhr ● Eine Farbe, auf die ich neugierig war, begann ich zu denken: "Ist das nicht eine Ameise?" Vielleicht bist du nur daran gewöhnt.

Ich glaube, wenn Sie ein Foto posten, wird es sicherlich zu einer Bäckerei. Weiter zum nächsten Mal!

Referenz

Flash-Nachricht mit Twitter Bootstrap in Rails

Dies ist praktisch, wenn Sie bei der Registrierung von Daten keinen geeigneten Namen oder eine geeignete Adresse finden können. "Taro Fumizuki" schmeckt nicht gut, also ... Automatischer Generator für japanische Namen Zufälliger japanischer Ortsnamengenerator

[RUBY] Erstellen Sie eine EC-Site mit Rails5 ⑤ ~ Kundenmodell ~

Einführung

Quellcode

Controller entwickeln

app/controllers/customers/registrations_controller.rb

app/controllers/customers/sessions_controller.rb

Aktivieren Sie den Bootstrap-Flash

app/controllers/application_controller.rb

app/helpers/application_helper.rb

html:app/views/layouts/_flash.html.erb

html:app/views/layouts/application.html.erb

app/controllers/customers_controller.rb

html:app/views/customers/registrations/new.html.erb

html/app/views/customers/sessions/new.html.erb