[RUBY] [Rails] Ich habe eine einfache Kalender-Mini-App mit benutzerdefinierten Spezifikationen erstellt.

Einführung

Ich wollte einen Kalender für meine App, also habe ich ihn so erstellt, dass ich die Mini-App für den einfachen Kalender anpassen kann. Ich habe zuvor "Vollständiger Kalender" erstellt, aber ich schien nicht in der Lage zu sein, die gewünschten Funktionen einzubinden. Daher möchte ich "Einfacher Kalender" erstellen, der detailliert implementiert werden kann.

Abschlusszeichnung

Inhaltsverzeichnis

1. Erstellen Sie eine neue Anwendung
2. Einführung von simple_calendar
3. Erstellen einer Vorlage für die Kalenderfunktion
4. Kalender anzeigen und Funktion "Ereignis hinzufügen" implementieren
5. Passen Sie das Erscheinungsbild an

Zielperson

Diejenigen, die einen Kalender einführen möchten Diejenigen, die MVC implementieren können

Entwicklungsumgebung

ruby 2.6.5 rails 6.0.0 Datenbank mysql2 0.4.4 simple_calendar 2.0

Implementierung

Lassen Sie es uns implementieren ~

1. Erstellen Sie eine neue Anwendung

Starten Sie zunächst eine neue Anwendung.

Terminal.

% rails _6.0.0_ new simple_calendar_app -d mysql
% cd simple_calendar_app
% rails db:create

Die Datenbank wird mit MySQL erstellt.

Terminal.

Created database 'simple_calendar_app_development'
Created database 'simple_calendar_app_test'

Sie haben jetzt eine Datenbank.

2. Einführung von simple_calendar

Gemfile.

gem 'simple_calendar', '~> 2.0'

Terminal.

% bundle install

Vergessen Sie nicht, die Installation zu bündeln! !!

3. Erstellen einer Vorlage für die Kalenderfunktion

Erstellen Sie das Modell, nachdem Sie den Controller erstellt und das Routing angezeigt und konfiguriert haben. 3.1 Controller und Ansichten 3.2 Routing einrichten 3.3 Erstellen Sie ein Modell

3.1 Controller und Ansichten

Terminal.

% rails g controller events index

Terminal.

      create  app/controllers/events_controller.rb
       route  get 'events/index'
      invoke  erb
      create    app/views/events
      create    app/views/events/index.html.erb
      invoke  test_unit
      create    test/controllers/events_controller_test.rb
      invoke  helper
      create    app/helpers/events_helper.rb
      invoke    test_unit
      invoke  assets
      invoke    scss
      create      app/assets/stylesheets/events.scss

Durch Festlegen des "Ereignisindex" beim Erstellen eines Controllers werden die dem Ereigniscontroller entsprechende Ansicht und die Routingeinstellungen festgelegt.

3.2 Routing einrichten

ruotes.rb

Rails.application.routes.draw do
  get 'events/index' 
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
  #Bis zu diesem Punkt wird es automatisch eingestellt, wenn der Controller generiert wird.

  #Diesmal eingestellt auf
  root to: 'events#index'
  resources :events
end

Setzen Sie dieses Mal #events # index auf root und verwenden Sie Ressourcen. Löschen Sie daher die automatisch festgelegte Beschreibung.

3.3 Erstellen Sie ein Modell

Terminal.

% rails g model event

Bearbeiten Sie die Migrationsdatei, die automatisch mit dem Modell generiert wurde.

2020XXXXXXX_create_events.rb

class CreateEvents < ActiveRecord::Migration[6.0]
  def change
    create_table :events do |t|
      #Fügen Sie diese drei hinzu
      t.string :title
      t.text :content
      t.datetime :start_time

      t.timestamps
    end
  end
end

Ich werde es danach in der Ansicht definieren, aber es scheint, dass es durch Setzen von "t.datetime: start_time" in den Kalender ausgegeben wird. Da es sich um eine Mini-App handelt, müssen drei Spalten gespeichert werden. Sie muss jedoch entsprechend der zu entwickelnden App angepasst werden.

Terminal.

%  rails db:migrate

Wenn Sie den Server mit Rails s starten, wird die automatisch generierte Ansichtsseite angezeigt.

Zuallererst ist dies die Vorlage.

4. Kalender anzeigen und Funktion "Ereignis hinzufügen" implementieren

Da es sich um eine Mini-App handelt, werden wir als Nächstes die mindestens drei erforderlichen Funktionen implementieren.

4.1, Kalenderanzeige 4.2, Hinzufügen von Ereignissen 4.3, zusätzliche Ereignisse im Kalender anzeigen

4.1, Kalenderanzeige

Bearbeiten Sie den Controller und die Ansicht.

/app/controllers/events_controller.rb

class BlogsController < ApplicationController

  def index
    @events = Event.all #← Fügen Sie dies hinzu
  end
end

/app/views/events/index.html.erb

<h1>Events#index</h1>
<p>Find me in app/views/events/index.html.erb</p>
<%#Da es bisher automatisch generiert wird, wird es gelöscht%>

<%#Fügen Sie Folgendes hinzu%>
<%= month_calendar events: @events do |date, events| %>
  <%= date.day %>
<% end %>

Terminal.

%  rails s

Starten Sie den Server und überprüfen Sie ihn einmal.

Das Standardbild wird angezeigt. Wir werden das Aussehen später korrigieren, aber wir werden zuerst Funktionen hinzufügen.

4.2, Hinzufügen von Ereignissen

Wir werden den Controller bearbeiten und erneut anzeigen. Erstellen Sie vor dem Bearbeiten einen neuen Ordner unter Ansichten> Ereignisse.

Fügen Sie dem Controller zunächst eine neue Methode hinzu.

/app/controllers/events_controller.rb

class EventsController < ApplicationController
  def index
    @events = Event.all
  end
  #Neue Methode hinzugefügt
  def new
    @event = Event.new
  end
end

Fügen Sie als Nächstes der Ansicht eine Schaltfläche hinzu, um zur Seite "Ereignis hinzufügen" zu gelangen.

/app/views/events/index.html.erb

 
<%= link_to 'Ereigniszusatz', new_event_path %> #←link_zum Nachtrag

<%= month_calendar events: @events do |date, events| %>
  <%= date.day %>
<% end %>

Suchen Sie in Schienenrouten nach dem Übergangsziel "new_event_path".

Es ist ein wenig entgleist, aber als ich wissen wollte, welche Ansicht vom URI-Muster unterstützt wird, stellte ich fest, dass sie angezeigt wurde, indem ich den Cursor gedrückt hielt und "Befehl" + Klick drückte.

URI Pattern /events/new Bewegen Sie den Cursor auf ↑ und drücken Sie "Befehl" + Klicken, um zur entsprechenden Ansicht zu gelangen.

Sie können jetzt zur Seite zum Hinzufügen von Ereignissen wechseln.

Bearbeiten Sie dann die zuvor erstellte neue Datei.

/app/views/events/new.html.erb

<h1>Prüfung</h1>

<%= form_with(model: @event, local: true) do |form| %>

  <div class="title">
    <%= form.label :title %>
    <%= form.text_field :title %>
  </div>

    <div class="time">
    <%= form.label :start_time %>
    <%= form.datetime_select :start_time %>
  </div>

  <div class="content">
    <%= form.label :content %>
    <%= form.text_field :content %>
  </div>


  <div class="submit">
    <%= form.submit %>
  </div>

<% end %>

Es sieht aus wie das. Eine Eingabeseite (neue Seite) wurde erstellt!

Bearbeiten Sie den Controller, da er nicht gespeichert werden kann.

/app/controllers/events_controller.rb

class EventsController < ApplicationController

#Kürzung

  def create
    Event.create(event_parameter)
    redirect_to root_path
  end

  private

  def event_parameter
    params.require(:event).permit(:title, :content, :start_time)
  end

end

Sie können es speichern, indem Sie die Methode create hinzufügen.

Wenn Sie das Formular ausfüllen und "Sequel Pro" aktivieren, können Sie sehen, dass es gespeichert ist. Es wird jedoch noch nicht im Kalender angezeigt.

4.3, zusätzliche Ereignisse im Kalender anzeigen

Der zuvor gespeicherte Inhalt wird im Kalender angezeigt (angezeigt). Bearbeiten Sie die Ansicht.

/app/views/events/index.html.erb

<%= link_to 'Ereigniszusatz', new_event_path %>

<%= month_calendar events: @events do |date, events| %>
  <%= date.day %>

<%#Ergänzung von hier%>
  <% events.each do |event| %>
    <div>
      <%= event.title %>
    </div>
  <% end %>
<%#Bis hierher addiert%>
<% end %>

Das gerade hinzugefügte Ereignis wird jetzt im Kalender angezeigt.

5. Passen Sie das Erscheinungsbild an

Da das Erscheinungsbild die Standardeinstellung ist, werde ich es arrangieren.

Von der offiziellen Website von Simple Calendar. https://github.com/excid3/simple_calendar/blob/master/README.md

Terminal.

% rails g simple_calendar:views

Sie erhalten eine Datei, die Ihre Ansicht schnell ordnet.

create  app/views/simple_calendar
create  app/views/simple_calendar/_calendar.html.erb
create  app/views/simple_calendar/_month_calendar.html.erb
create  app/views/simple_calendar/_week_calendar.html.erb

Dies wird durch Hinzufügen des Folgenden zu application.css wiedergegeben.

app/assets/stylesheets/application.css

#Kürzung

 *= require simple_calendar #← Nachtrag
 *= require_tree .
 *= require_self

Abschlusszeichnung

Es wurde abgeschlossen! !! !! Anschließend können Sie durch Hinzufügen von MVC die Bearbeitungs- und Löschfunktion anpassen. Persönlich entwickle ich eine Kundenreservierungsverwaltungsanwendung, daher werde ich sie darauf anwenden.

[Rails] Einführung des einfachen Kalenders in Apps für die persönliche Entwicklung Wird zu einem späteren Zeitpunkt aktualisiert

Zusammenfassung

Dieses Mal habe ich Folgendes in die Mini-App implementiert.

1. Erstellen Sie eine neue Anwendung
2. Einführung von simple_calendar
3. Erstellen einer Vorlage für die Kalenderfunktion
4. Kalender anzeigen und Funktion "Ereignis hinzufügen" implementieren
5. Passen Sie das Erscheinungsbild an

Mit der obigen Implementierung ist es möglich, das hinzugefügte Ereignis im Kalender anzuzeigen.

Dieses Mal haben wir die Mindestfunktionalität implementiert, diese muss jedoch gemäß den einzelnen Spezifikationen angepasst werden.

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. Dieses Mal habe ich es als Aufzeichnung der ersten Arbeit zur persönlichen Entwicklung veröffentlicht. Bis zum nächsten Mal ~

Referenz

offiziell https://github.com/excid3/simple_calendar/blob/master/README.md

Diese beiden Artikel waren sehr hilfreich. Vielen Dank! https://qiita.com/miriwo/items/ca2a64bdf8098beccd28 https://qiita.com/isaatsu0131/items/ad1d0a6130fe4fd339d0