[RUBY] [Rails] Führen Sie einen einfachen Kalender ein und fügen Sie in zusätzliche Ereignisse einen "Bestätigungsbildschirm" ein
Einführung
Einführung des Kalenders in die Reservierungsverwaltungsanwendung unter persönlicher Entwicklung. Wir haben auch einen Bildschirm implementiert, der beim Hinzufügen eines Ereignisses einmal überprüft wird.
Klicken Sie hier, um einen einfachen Kalender zu erstellen und einen "Bestätigungsbildschirm" zu erstellen. Bitte nehmen Sie Bezug darauf.
[Rails] Ich habe versucht, eine Mini-App von Simple Calendar mit benutzerdefinierten Spezifikationen zu erstellen https://qiita.com/AKI3/items/109d54a35c98328d9155
[Schienen] "Eingabe" -> "Bestätigungsbildschirm" -> "Speichern" -> "Ansicht" https://qiita.com/AKI3/items/cbdd77d604fe6aeb47d8
Inhaltsverzeichnis
- Einführung eines einfachen Kalenders (Erstellung von CRUD und MVC)
- Bildschirm zum Hinzufügen von Ereignissen
- Bestätigungsbildschirm
- Speichern und anzeigen
- Reflektieren Sie die Reservierungsdetails im Kalender
Entwicklungsumgebung
ruby 2.6.5 rails 6.0.0 simple_calendar 2.0
Implementierung
Lassen Sie es uns implementieren ~
1. Einführung eines einfachen Kalenders (Erstellung von CRUD und MVC)
Terminal.
gem 'simple_calendar', '~> 2.0'
Terminal.
bundle install
Terminal.
rails g controller events index new create show edit update destroy
Alle CRUD-Aktionen werden automatisch in der Steuerung beschrieben und die Ansicht wird ebenfalls automatisch generiert.
Es wurde automatisch generiert.
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
Starten Sie vorerst den Server und überprüfen Sie ihn.
Terminal.
rails s
http://localhost:3000/events/index
Erstellen Sie ein Modell
Terminal.
rails g model event
Migrationsdatei bearbeiten
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
Sie haben jetzt eine Ereignistabelle.
Routing-Einstellungen
config/routes.rb
root to: 'events#index'
resources :events
Contrailer und Ansicht bearbeiten
app/contorollers/events_controller.rb
class EventsController < ApplicationController
def index
@events = Event.all
end
#Kürzung
html:app/views/users/index.html.erb
<%= month_calendar events: @events do |date, events| %>
<%= date.day %>
<% end %>
Überprüfen Sie einmal, ob der Kalender angezeigt wird.
http://localhost:3000/
Zum Schluss passen Sie das Erscheinungsbild an.
Terminal.
rails g simple_calendar:views
app/assets/stylesheets/application.css
#Kürzung
*= require simple_calendar #← Nachtrag
*= require_tree .
*= require_self
Die grundlegende Erstellung des Kalenderbildschirms ist abgeschlossen.
2. Bildschirm zum Hinzufügen von Ereignissen
Erstellen Sie ein Antragsformular (Ereigniszusatzformular).
Controller-Bearbeitung
app/contorollers/events_controller.rb
class EventsController < ApplicationController
def index
@events = Event.all
end
def new
@event = Event.new
end
#Kürzung
Ansicht bearbeiten
html:app/views/users/new.html.erb
<h1>Anmeldeformular</h1>
<%= form_with(model: @event, url:confirm_events_path, local: true) do |form| %>
<div class="plan">
<%= form.label :Kurs%>
<%= form.text_field :plan %>
</div>
<div class="number">
<%= form.label :Die Anzahl der Teilnehmer%>
<%= form.text_field :number %>
</div>
<div class="plan_day">
<%= form.label :Gewünschtes Datum%>
<%= form.date_select :start_time %>
</div>
<div class="name">
<%= form.label :Name des Vertreters%>
<%= form.text_field :name %>
</div>
<div class="tel">
<%= form.label :Telefonnummer%>
<%= form.text_field :tel %>
</div>
<div class="submit">
<%= form.submit "Zum Bestätigungsbildschirm", class:"#" %>
</div>
<% end %>
Das Antragsformular (Ereigniszusatzformular) wurde erstellt.
3. Bestätigungsbildschirm
Details werden hier erklärt. Wenn Sie interessiert sind, beziehen Sie sich bitte darauf.
[Schienen] "Eingabe" -> "Bestätigungsbildschirm" -> "Speichern" -> "Ansicht" https://qiita.com/AKI3/items/cbdd77d604fe6aeb47d8
Routing-Einstellungen
config/routes.rb
Rails.application.routes.draw do
root to: 'events#index'
resources :events do
collection do
post :confirm
end
end
end
Controller-Bearbeitung
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
#Kürzung
Ansicht bearbeiten
html:app/views/users/confirm.html.erb
<h1>Bestätigungsbildschirm</h1>
<div class="#">
<p>Kurs: <%= @event.plan.name %></p>
</div>
<div class="#">
<p>Die Anzahl der Teilnehmer: <%= @event.num.name %></p>
</div>
<div class="#">
<p>Gewünschtes Datum: <%= @event.start_time %></p>
</div>
<div class="#">
<p>Name des Vertreters: <%= @event.name %></p>
</div>
<div class="#">
<p>Telefonnummer: <%= @event.tel %></p>
</div>
<div class="#">
<p>Gebühr: <%= @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 "eine Reservierung machen" %>
<%= f.submit "Rückkehr", name: :back %>
<% end %>
Die Erstellung des Bestätigungsbildschirms ist abgeschlossen.
4. Speichern und anzeigen
Nach dem Speichern werden die Reservierungsdetails angezeigt.
Controller-Postskriptum
app/contorollers/events_controller.rb
#Kürzung
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
#Kürzung
private
def event_params
params.require(:event).permit(:plan_id, :num_id, :start_time, :name, :tel, :price)
end
Ansicht bearbeiten
html:app/views/users/show.html.erb
<h1>Ihre Reservierung ist abgeschlossen.</h1>
<p>Kurs: <%= @event.plan.name %></p>
<p>Die Anzahl der Teilnehmer: <%= @event.number %></p>
<p>Gewünschtes Datum: <%= @event.start_time %></p>
<p>Name des Vertreters: <%= @event.name %></p>
<p>Telefonnummer: <%= @event.tel %></p>
<p>Gebühr: <%= @event.price %></p>
<%= link_to "Zurück zur Kalenderseite" root_path %>
Die Implementierung zum Speichern / Anzeigen ist abgeschlossen.
5. Reflektieren Sie die Reservierungsdetails im Kalender
Schließlich werden die gespeicherten Inhalte im Kalender angezeigt.
Zur Ansicht hinzufügen
html:app/views/users/index.html.erb
<%= month_calendar events: @events do |date, events| %>
<%= date.day %>
#Ergänzung von hier
<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 %>
Das hinzugefügte Ereignis wird jetzt im Kalender angezeigt.
erledigt! !!
Zusammenfassung
Das Obige ist der Bestätigungsbildschirm, der in das zusätzliche Ereignis des einfachen Kalenders eingefügt wird.
Wir werden auch eine Zahlungsfunktion implementieren. Wenn Sie interessiert sind, beziehen Sie sich bitte darauf. [JavaScript] Eine Funktion zum asynchronen Anzeigen und Abrechnen von Preisen wurde implementiert Wird zu einem späteren Zeitpunkt veröffentlicht
Schließlich
Ich bin ein Anfänger in der Programmierung, aber ich poste einen Artikel in der Hoffnung, dass er Menschen hilft, die ähnlich in Schwierigkeiten sind. Bis zum nächsten Mal ~
Referenz
・ Einfacher Kalender offiziell https://github.com/excid3/simple_calendar/blob/master/README.md
[Rails] Ich habe versucht, eine Mini-App von Simple Calendar mit benutzerdefinierten Spezifikationen zu erstellen https://qiita.com/AKI3/items/109d54a35c98328d9155
[Schienen] "Eingabe" -> "Bestätigungsbildschirm" -> "Speichern" -> "Ansicht" https://qiita.com/AKI3/items/cbdd77d604fe6aeb47d8
Recommended Posts