introduction

Il s'agit d'une suite de la série "Créer un site EC avec Rails 5 ④" (https://qiita.com/GreenFingers_tk/items/58e04fbaf754fe33e294), qui crée un site EC sur lequel vous pouvez faire vos achats dans une boulangerie fictive. Enfin, nous commencerons à implémenter la fonction. Tout d'abord, dans l'ordre des fonctions autour du modèle parent du site client ... Donc, cette fois, nous allons nous concentrer sur le CRUD du modèle Client.

Code source

https://github.com/Sn16799/bakeryFUMIZUKI

contrôleur de conception

Je n'ai pas pu en enregistrer un nouveau avec le dispositif, et quand je me suis demandé pourquoi, il s'est avéré que je n'avais pas donné l'autorisation de paramètre au côté contrôleur.

`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

À propos, sessions_controller a également spécifié la destination de la transition après la connexion et la déconnexion.

`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

Activer le flash d'amorçage

Avec Bootstrap, vous pouvez utiliser un message flash bien agencé simplement en spécifiant la classe. Il est pratique de créer un modèle partiel pour pouvoir l'appeler avec render.

`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 De nombreuses fonctionnalités sont des CRUD de base, mais seul le processus de retrait est différent.

Appuyez sur le bouton "Se désabonner" sur l'écran d'édition (action de retrait d'appel)
↓
Transition vers l'écran de confirmation de retrait
↓
Appuyez sur le bouton "Se désabonner" (une alerte apparaît)
↓
Si vous appuyez sur «Oui», le processus de retrait sera effectué (retrait)_appel à l'action terminé)

Le flux est comme ci-dessus. De plus, le processus de retrait n'est pas le processus de suppression des données client, mais le processus de changement de la colonne is_active de true à 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: 'Les informations client ont été mises à jour!'
    else
      flash[:danger] = 'Les informations client n'ont pas pu être mises à jour. Y a-t-il des blancs?'
      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: 'Merci beaucoup. Nous avons hâte de vous revoir.'
  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

  #Lorsque vous essayez d'accéder à la page d'une autre personne, vous revenez à la page précédente
  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>Inscription des nouveaux membres</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 :Nom%></h5>
      </div>
      <div class='col-lg-8'>
        <div class="row">
          <div class="col-lg-6">
            (Nom de famille)<%= f.text_field :family_name, autofocus: true, autocomplete: 'family_name', class: 'form-control' %>
          </div>
          <div class="col-lg-6">
            (Nom)<%= 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">
            (Nom de famille)<%= 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 :Code postal (sans tirets)%></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 de rue%></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 :Numéro de téléphone (sans tiret)%></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 :Mot de passe (6 caractères ou plus)%></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 :Pour la confirmation du mot de passe%></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 's'inscrire', class:'btn btn-danger' %>
      </div>
    </div>

    <% end %>
  </div>

  <div class="space">
    <h4>Ceux qui se sont déjà inscrits</h4>
    <h5><%= link_to 'Ici', new_customer_session_path  %>Veuillez vous connecter depuis</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;">Pour les membres</span>
      <span style="display: inline-block;">Connectez-vous ici</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 :mot de passe%></h5>
      </div>
      <div class="col-lg-8">
        <%= f.password_field :password, autocomplete: "current-password", class: 'form-control' %>
      </div>
    </div>

    <div>
      <%= link_to "=>Si vous avez oublié votre mot de passe, cliquez ici", new_password_path(resource_name) %>
    </div>

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

    <% end %>
  </div>

  <div class="space">
    <h4>Ceux qui ne se sont pas inscrits</h4>
    <h5><%= link_to "Ici", new_customer_registration_path  %>Veuillez vous inscrire à partir de.</h5>
  </div>

</div>

Éditer

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


<div class='col-lg-10 offset-lg-1 space'>
  <div class='row'>
    <h2>Modifier les informations d'inscription</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 :Nom%></h5>
      </div>
      <div class='col-lg-8'>
        <span style='display: inline-block;'>
          (Nom de famille)<%= f.text_field :family_name, autofocus: true, autocomplete: 'family_name', class: 'form-control' %>
        </span>
        <span style='display: inline-block;'>
          (Nom)<%= 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;'>
          (Nom de famille)<%= 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 :Code postal (sans tirets)%></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 de rue%></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 :Numéro de téléphone (sans tiret)%></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 'Enregistrez vos modifications', class:'btn btn-danger' %>
        <%= link_to 'Se désister', customer_withdraw_path(@customer), class:'btn btn-danger'  %>
      </div>
    </div>
    <% end %>
  </div>
</div>

Détails

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


<div class="col-lg-6 offset-lg-3 space">
  <div class="container">
    <h2>Ma page</h2>
  </div>
  <!--Informations client-->
  <div class="container space">
    <div class="row">
      <div class="col-lg-5"><h3>Informations client</h3></div>
      <div class="col-lg-2">
        <%= link_to 'Éditer', edit_customer_path, class: 'btn-sm btn-danger' %>
      </div>
      <div class="col-lg-4">
        <%= link_to 'Changer le mot de passe', new_customer_password_path, class: 'btn-sm btn-danger' %>
      </div>
    </div>

    <div class="row">
      <div class="col-lg-3">
        <h4>Nom complet</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>Code postal</h4>
      </div>
      <div class="col-lg-9">
        〒 <%= @customer.post_code %>
      </div>
    </div>

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

    <div class="row">
      <div class="col-lg-3">
        <h4>numéro de téléphone</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>

  <!--Autres liens-->
  <div class="container space">
    <div class="row">
      <div class="col-lg-3">
        <h4>Adresse de livraison</h4>
      </div>
      <div class="col-lg-9">
        <%= link_to 'Afficher la liste', addresses_path, class: 'btn btn-danger' %>
      </div>
    </div>

    <div class="row">
      <div class="col-lg-3">
        <h4>Historique des commandes</h4>
      </div>
      <div class="col-lg-9">
        <%= link_to 'Afficher la liste', orders_path, class: 'btn btn-danger' %>
      </div>
    </div>
  </div>
</div>

Confirmation de retrait

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


<div class="col-lg-10 offset-lg-1 space">
  <div class="row space">
    <h2>Voulez-vous vraiment vous désinscrire?</h2>
  </div>

  <div class="row space">
    <h4>Lorsque vous vous retirez de l'adhésion, les informations d'inscription et
      <br>Vous ne pourrez pas consulter l'historique de vos achats.
      <br>Pour vous désinscrire, cliquez sur «Se désabonner».
    </h4>
  </div>

  <div class="row space">
    <%= link_to "Ne pas retirer",customer_path(current_customer),class: "btn btn-danger" %>
    <%= link_to "Se désister", customer_withdraw_done_path(current_customer), method: :put, "data-confirm" => "Voulez-vous vraiment vous désinscrire?", 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;
}

Postscript

Cette fois, la fonction en elle-même n'est pas difficile, mais il a fallu beaucoup de temps pour rendre l'écran réactif. Je prévois de changer les boutons en couleur de thème plus tard, et pour l'instant, je les ai tous rendus rouges. Parce qu'il se démarque. De plus, le lien que j'ai écrit dans le fichier View fonctionne pour le moment, mais comme je n'ai rien écrit sur la page à laquelle j'ai sauté, j'obtiens simplement le libellé "Find me in ..." dans l'exemple.

En faisant l'écran principal, il ressemble enfin à un site. Il existe encore de nombreuses fonctionnalités, mais nous les implémenterons dans le futur. En procédant avec l'IK ● Une couleur qui m'intéressait, j'ai commencé à penser: "N'est-ce pas une fourmi?" Peut-être que vous y êtes habitué.

Je crois que si vous postez une photo, elle deviendra sûrement un site de boulangerie. Continuez à la prochaine fois!

référence

Message flash utilisant Twitter Bootstrap dans Rails

Ceci est pratique lorsque vous ne pouvez pas trouver un nom ou une adresse approprié lors de l'enregistrement des données. "Taro Fumizuki" n'a pas bon goût, alors ... Générateur automatique de nom japonais Générateur de noms de lieux japonais aléatoires

[RUBY] Créer un site EC avec Rails5 ⑤ ~ Modèle client ~

introduction

Code source

contrôleur de conception

app/controllers/customers/registrations_controller.rb

app/controllers/customers/sessions_controller.rb

Activer le flash d'amorçage

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