[RUBY] [Rails] Introduisez un calendrier simple et insérez un "écran de confirmation" dans les événements supplémentaires
introduction
Introduction du calendrier à l'application de gestion des réservations en développement personnel. Nous avons également mis en place un écran pour vérifier une fois lors de l'ajout d'un événement.
Voici comment créer un calendrier simple et comment créer un "écran de confirmation". Veuillez vous y référer.
[Rails] J'ai créé une mini application pour Simple Calendar avec des spécifications personnalisées. https://qiita.com/AKI3/items/109d54a35c98328d9155
[Rails] "Entrée" -> "Écran de confirmation" -> "Enregistrer" -> "Afficher" https://qiita.com/AKI3/items/cbdd77d604fe6aeb47d8
table des matières
- Introduction d'un calendrier simple (création de CRUD et MVC)
- Écran d'ajout d'événement
- Écran de confirmation
- Enregistrer et afficher
- Refléter les détails de la réservation sur le calendrier
Environnement de développement
ruby 2.6.5 rails 6.0.0 simple_calendar 2.0
la mise en oeuvre
Implémentons-le ~
1. Introduction d'un calendrier simple (création de CRUD et MVC)
Terminal.
gem 'simple_calendar', '~> 2.0'
Terminal.
bundle install
Terminal.
rails g controller events index new create show edit update destroy
Toutes les actions CRUD sont automatiquement décrites dans le contrôleur et la vue est également générée automatiquement.
Il a été généré automatiquement.
config/routes.rb
Rails.application.routes.draw do
get 'events/index'
get 'events/new'
get 'events/create'
get 'events/show'
get 'events/edit'
get 'events/update'
get 'events/destroy'
# For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
end
app/contorollers/events_controller.rb
class EventsController < ApplicationController
def index
end
def new
end
def create
end
def show
end
def edit
end
def update
end
def destroy
end
end
Pour le moment, démarrez le serveur et vérifiez-le.
Terminal.
rails s
http://localhost:3000/events/index
Créer un modèle
Terminal.
rails g model event
Modifier le fichier de migration
2020XXXXXXX_create_events.rb
class CreateEvents < ActiveRecord::Migration[6.0]
def change
create_table :events do |t|
t.string :plan
t.integer :number
t.string :option
t.date :plan_day
t.string :name
t.string :tel
t.integer :price
t.timestamps
end
end
end
Terminal.
rails db:migrate
Vous avez maintenant un tableau des événements.
Paramètres de routage
config/routes.rb
root to: 'events#index'
resources :events
Modifier Contrailer et afficher
app/contorollers/events_controller.rb
class EventsController < ApplicationController
def index
@events = Event.all
end
#réduction
html:app/views/users/index.html.erb
<%= month_calendar events: @events do |date, events| %>
<%= date.day %>
<% end %>
Vérifiez une fois si le calendrier est affiché.
http://localhost:3000/
Enfin, ajustez l'apparence.
Terminal.
rails g simple_calendar:views
app/assets/stylesheets/application.css
#réduction
*= require simple_calendar #← Addendum
*= require_tree .
*= require_self
La création de l'écran de base du calendrier est terminée.
2. Écran d'ajout d'événement
Créez un formulaire de candidature (formulaire d'ajout d'événement).
Édition du contrôleur
app/contorollers/events_controller.rb
class EventsController < ApplicationController
def index
@events = Event.all
end
def new
@event = Event.new
end
#réduction
Voir la modification
html:app/views/users/new.html.erb
<h1>Formulaire de candidature</h1>
<%= form_with(model: @event, url:confirm_events_path, local: true) do |form| %>
<div class="plan">
<%= form.label :cours%>
<%= form.text_field :plan %>
</div>
<div class="number">
<%= form.label :Le nombre de participants%>
<%= form.text_field :number %>
</div>
<div class="plan_day">
<%= form.label :Date souhaitée%>
<%= form.date_select :start_time %>
</div>
<div class="name">
<%= form.label :Nom du représentant%>
<%= form.text_field :name %>
</div>
<div class="tel">
<%= form.label :numéro de téléphone%>
<%= form.text_field :tel %>
</div>
<div class="submit">
<%= form.submit "Vers l'écran de confirmation", class:"#" %>
</div>
<% end %>
Le formulaire de candidature (formulaire d'ajout d'événement) a été créé.
3. Écran de confirmation
Les détails sont expliqués ici, donc si vous êtes intéressé, veuillez vous y référer.
[Rails] "Entrée" -> "Écran de confirmation" -> "Enregistrer" -> "Afficher" https://qiita.com/AKI3/items/cbdd77d604fe6aeb47d8
Paramètres de routage
config/routes.rb
Rails.application.routes.draw do
root to: 'events#index'
resources :events do
collection do
post :confirm
end
end
end
Édition du contrôleur
app/contorollers/events_controller.rb
class EventsController < ApplicationController
def index
@events = Event.all
end
def new
@event = Event.new
end
def confirm
@event = Event.new(event_params)
render :new if @event.invalid?
end
#réduction
Voir la modification
html:app/views/users/confirm.html.erb
<h1>écran de confirmation</h1>
<div class="#">
<p>cours: <%= @event.plan.name %></p>
</div>
<div class="#">
<p>Le nombre de participants: <%= @event.num.name %></p>
</div>
<div class="#">
<p>Date souhaitée: <%= @event.start_time %></p>
</div>
<div class="#">
<p>Nom du représentant: <%= @event.name %></p>
</div>
<div class="#">
<p>numéro de téléphone: <%= @event.tel %></p>
</div>
<div class="#">
<p>Frais: <%= @event.price %></p>
</div>
<%= form_with(model: @event, id: 'charge-form', local: true) do |f| %>
<%= f.hidden_field :plan_id %>
<%= f.hidden_field :num_id %>
<%= f.hidden_field :start_time %>
<%= f.hidden_field :name %>
<%= f.hidden_field :tel %>
<%= f.hidden_field :price %>
<%= f.submit "faire une réservation" %>
<%= f.submit "Revenir", name: :back %>
<% end %>
La création de l'écran de confirmation est terminée.
4. Enregistrer et afficher
Après la sauvegarde, les détails de la réservation seront affichés.
Post-scriptum du contrôleur
app/contorollers/events_controller.rb
#réduction
def create
@event = Event.new(event_params)
if params[:back]
render :new
else @event.save!
redirect_to @event
end
end
def show
@event = Event.find_by(id: params[:id])
end
#réduction
private
def event_params
params.require(:event).permit(:plan_id, :num_id, :start_time, :name, :tel, :price)
end
Voir la modification
html:app/views/users/show.html.erb
<h1>Votre réservation est terminée.</h1>
<p>cours: <%= @event.plan.name %></p>
<p>Le nombre de participants: <%= @event.number %></p>
<p>Date souhaitée: <%= @event.start_time %></p>
<p>Nom du représentant: <%= @event.name %></p>
<p>numéro de téléphone: <%= @event.tel %></p>
<p>Frais: <%= @event.price %></p>
<%= link_to "Revenir à la page du calendrier" root_path %>
La mise en œuvre de l'enregistrement / affichage est terminée.
5. Refléter les détails de la réservation sur le calendrier
Enfin, le contenu enregistré est affiché sur le calendrier.
Ajouter à la vue
html:app/views/users/index.html.erb
<%= month_calendar events: @events do |date, events| %>
<%= date.day %>
#Ajout d'ici
<ul class="event-list">
<% events.each do |event| %>
<li class="list">
<%= link_to edit_event_path(event.id) do %>
<%= event.plan %>
<%= event.name %>
<% end %>
</li>
</ul>
<% end %>
<% end %>
L'événement ajouté est maintenant reflété dans le calendrier.
terminé! !!
Sommaire
Ce qui précède est l'écran de confirmation inséré dans l'événement supplémentaire du calendrier simple.
Nous mettrons également en place une fonction de paiement, donc si vous êtes intéressé, veuillez vous y référer. [JavaScript] Implémentation d'une fonction pour afficher les prix de manière asynchrone et régler Sera publié à une date ultérieure
finalement
Je suis un débutant en programmation, mais je publie un article dans l'espoir qu'il aidera les gens qui sont également en difficulté. A la prochaine fois ~
référence
・ Simple calendrier officiel https://github.com/excid3/simple_calendar/blob/master/README.md
[Rails] J'ai créé une mini application pour Simple Calendar avec des spécifications personnalisées. https://qiita.com/AKI3/items/109d54a35c98328d9155
[Rails] "Entrée" -> "Écran de confirmation" -> "Enregistrer" -> "Afficher" https://qiita.com/AKI3/items/cbdd77d604fe6aeb47d8
Recommended Posts