[RUBY] [Rails] J'ai créé une mini-application de calendrier simple avec des spécifications personnalisées.

introduction

Je voulais un calendrier pour mon application, alors je l'ai fait pour que je puisse personnaliser la mini-application Simple Calendar. J'ai fait "Full Calendar" avant, mais je ne semblais pas être capable de brancher les fonctions que je voulais, donc j'aimerais faire "Simple Calendar" qui puisse être implémenté en détail.

Dessin d'achèvement

table des matières

1. Créez une nouvelle application
2. Introduction de simple_calendar
3. Création d'un modèle pour la fonction de calendrier
4. Afficher le calendrier et implémenter la fonction "Ajouter un événement"
5. Ajustez l'apparence

Personne cible

Ceux qui veulent introduire un calendrier Ceux qui peuvent implémenter MVC

Environnement de développement

ruby 2.6.5 rails 6.0.0 Base de données mysql2 0.4.4 simple_calendar 2.0

la mise en oeuvre

Implémentons-le ~

1. Créez une nouvelle application

Tout d'abord, lancez une nouvelle application.

Terminal.

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

La base de données est créée avec mysql.

Terminal.

Created database 'simple_calendar_app_development'
Created database 'simple_calendar_app_test'

Vous avez maintenant une base de données.

2. Introduction de simple_calendar

Gemfile.

gem 'simple_calendar', '~> 2.0'

Terminal.

% bundle install

N'oubliez pas de regrouper l'installation! !!

3. Création d'un modèle pour la fonction de calendrier

Après avoir créé le contrôleur et après avoir visualisé et configuré le routage, créez le modèle. 3.1 Contrôleurs et vues 3.2 Configurer le routage 3.3 Créer un modèle

3.1 Contrôleurs et vues

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

En définissant «index des événements» lors de la création d'un contrôleur, la vue correspondant au contrôleur d'événements et les paramètres de routage seront définis.

3.2 Configurer le routage

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
  #Jusqu'à ce point, il est automatiquement défini lorsque le contrôleur est généré.

  #Cette fois réglé sur
  root to: 'events#index'
  resources :events
end

Cette fois, définissez'events # index'à la racine et utilisez les ressources, supprimez donc la description définie automatiquement.

3.3 Créer un modèle

Terminal.

% rails g model event

Modifiez le fichier de migration qui a été généré automatiquement avec le modèle.

2020XXXXXXX_create_events.rb

class CreateEvents < ActiveRecord::Migration[6.0]
  def change
    create_table :events do |t|
      #Ajoutez ces trois
      t.string :title
      t.text :content
      t.datetime :start_time

      t.timestamps
    end
  end
end

Je le définirai dans la vue après cela, mais il semble qu'il sera affiché dans le calendrier en définissant "t.datetime: start_time". De plus, puisqu'il s'agit d'une mini application, il y a trois colonnes à enregistrer, mais elle doit être personnalisée en fonction de l'application à développer.

Terminal.

%  rails db:migrate

Lorsque vous démarrez le serveur avec des rails, la page de vue générée automatiquement s'affiche.

Tout d'abord, c'est le modèle.

4. Afficher le calendrier et implémenter la fonction "Ajouter un événement"

Ensuite, puisqu'il s'agit d'une mini application, nous implémenterons les trois fonctions minimum requises.

4.1, affichage du calendrier 4.2, ajout d'événements 4.3, afficher des événements supplémentaires sur le calendrier

4.1, affichage du calendrier

Modifiez le contrôleur et affichez-le.

/app/controllers/events_controller.rb

class BlogsController < ApplicationController

  def index
    @events = Event.all #← Ajouter ceci
  end
end

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

<h1>Events#index</h1>
<p>Find me in app/views/events/index.html.erb</p>
<%#Comme il est généré automatiquement jusqu'à présent, il est supprimé%>

<%#Ajoutez ce qui suit%>
<%= month_calendar events: @events do |date, events| %>
  <%= date.day %>
<% end %>

Terminal.

%  rails s

Démarrez le serveur et vérifiez-le une fois.

L'image par défaut s'affiche. Nous corrigerons l'apparence plus tard, mais nous ajouterons d'abord des fonctionnalités.

4.2, ajout d'événements

Nous éditerons le contrôleur et le visionnerons à nouveau. Avant de modifier, créez un nouveau dossier sous vues> événements.

Tout d'abord, ajoutez une nouvelle méthode au contrôleur.

/app/controllers/events_controller.rb

class EventsController < ApplicationController
  def index
    @events = Event.all
  end
  #Nouvelle méthode ajoutée
  def new
    @event = Event.new
  end
end

Ensuite, ajoutez un bouton à la vue pour passer à la page "Ajouter un événement".

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

 
<%= link_to 'Ajout d'événement', new_event_path %> #←link_au post-scriptum

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

Recherchez la destination de transition "new_event_path" dans les itinéraires de rails.

C'est un peu déraillé, mais quand je voulais savoir quelle vue était prise en charge à partir du modèle URI, j'ai trouvé qu'elle était affichée en maintenant le curseur et en appuyant sur "commande" + clic.

URI Pattern /events/new Déplacez le curseur sur ↑ et appuyez sur "commande" + clic pour passer à la vue correspondante.

Vous pouvez maintenant accéder à la page d'ajout d'événement.

Ensuite, modifiez le nouveau fichier créé précédemment.

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

<h1>tester</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 %>

Ça ressemble à ça. Une page d'entrée (nouvelle page) a été créée!

Puisqu'il ne peut pas être sauvegardé tel quel, modifiez le contrôleur.

/app/controllers/events_controller.rb

class EventsController < ApplicationController

#réduction

  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

Vous pouvez l'enregistrer en ajoutant la méthode create.

Si vous remplissez le formulaire et cochez "Sequel Pro", vous pouvez voir qu'il est enregistré. Cependant, il n'est pas encore affiché sur le calendrier.

4.3, afficher des événements supplémentaires sur le calendrier

Le contenu enregistré précédemment sera affiché (reflété) sur le calendrier. Modifiez la vue.

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

<%= link_to 'Ajout d'événement', new_event_path %>

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

<%#Ajout d'ici%>
  <% events.each do |event| %>
    <div>
      <%= event.title %>
    </div>
  <% end %>
<%#Ajouté jusqu'à ici%>
<% end %>

L'événement que vous venez d'ajouter est maintenant affiché dans le calendrier.

5. Ajustez l'apparence

Puisque l'apparence est la valeur par défaut, je vais l'arranger.

Sur le site officiel de Simple Calendar. https://github.com/excid3/simple_calendar/blob/master/README.md

Terminal.

% rails g simple_calendar:views

Vous obtiendrez un fichier qui organisera rapidement votre vue.

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

Cela sera reflété en ajoutant ce qui suit à application.css.

app/assets/stylesheets/application.css

#réduction

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

Dessin d'achèvement

C'était terminé! !! !! Après cela, en ajoutant MVC, vous pouvez personnaliser la fonction d'édition et la fonction de suppression. Personnellement, je développe une application de gestion des réservations clients, je vais donc l'appliquer à cela.

[Rails] Introduction de Simple Calendar dans les applications de développement personnel Sera mis à jour à une date ultérieure

Sommaire

Cette fois, j'ai implémenté ce qui suit dans la mini application.

1. Créez une nouvelle application
2. Introduction de simple_calendar
3. Création d'un modèle pour la fonction de calendrier
4. Afficher le calendrier et implémenter la fonction "Ajouter un événement"
5. Ajustez l'apparence

Avec l'implémentation ci-dessus, il est possible d'afficher l'événement ajouté sur le calendrier.

Cette fois, nous avons implémenté la fonctionnalité minimale, mais nous devons la personnaliser en fonction de chaque spécification.

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é. Cette fois, je l'ai posté comme un enregistrement du premier travail de développement personnel. A la prochaine fois ~

référence

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

Ces deux articles ont été très utiles. Merci! https://qiita.com/miriwo/items/ca2a64bdf8098beccd28 https://qiita.com/isaatsu0131/items/ad1d0a6130fe4fd339d0