Puis nous devons créer un fichier modèle sous blog/app/modèles…
article.rb
<<< MAI 2019 MISE À JOUR DE L’AUTEUR >>>
Au lieu d’utiliser l’éditeur de texte visuel, vous pouvez également créer le fichier via le terminal :
cd app/models
touch article.rb
<<< END UPDATE >>
De retour dans l’éditeur de texte visuel et à l’intérieur de l’article.rb…
class Article < ActiveRecord::Baseend
Etape 7 : A l’intérieur de la console Rails
Maintenant, nous pouvons sauter à l’intérieur de la console rails et tester la connexion à la table…
$ rails c
Puis appeler tous les articles…
$ Article.all
Vous devriez voir une requête SQL qui ressemble à….
(Si vous avez navigué dans la ligne de commande à travers le répertoire du blog, vous pouvez obtenir une erreur ici. Assurez-vous de revenir dans le répertoire app ou votre commande Article.all ci-dessous retournera une erreur.)
Taper juste ‘Article’ vous donnera tous les attributs de la table…
Plus de commandes…
article = Article.new
Créera un nouvel article stocké à l’intérieur de la variable ‘article’ avec les attributs :
Maintenant, nous pouvons ajouter un titre et une description manuellement via la console rails….
Maintenant, nous devons sauvegarder ces données..
article.save
Cette commande va générer une requête SQL pour insérer ces nouvelles valeurs dans la table des articles…
Nous pouvons créer un autre article en une seule fois en utilisant « affectation de masse »…
article = Article.new(title: "This is my second article", description: "This is my second description")
De nouveau, nous devons sauvegarder l’article….
article.save
Walah…
Nous pouvons le faire d’une troisième façon en utilisant la méthode de création…
Article.create(title: "This is my third title", description: "This is my third description")
Et cela sauvegardera automatiquement l’article…
Maintenant, supposons que nous voulions modifier un de ces articles… D’abord, nous devons saisir l’article…
article = Article.find(2)
Puis nous pouvons éditer l’article et enregistrer l’article…
article.title = "This is an edited second article"
Et ensuite enregistrer…
article.save
Générera la requête SQL nécessaire…
Maintenant, nous allons supprimer un article… D’abord, prenez l’article…
article = Article.find(3)
Puis supprimer…
article.destroy
Walah…
Etape 8 : Ajouter des validations pour appliquer des contraintes sur les articles
Dans l’article.rb…
class Article < ActiveRecord::Base
validates :title, presence: trueend
Cela exigera que tous les nouveaux articles contiennent un titre. Nous pouvons tester cela dans la console rails (n’oubliez pas de redémarrer la console rails après avoir mis à jour le modèle ! Merci à Mike Boyd et Andrew Linck pour les rappels)…
article = Article.new
puis essayer de sauvegarder sans mettre à jour le titre…
article.save
boom…
Nous pouvons faire la même chose pour la description….
class Article < ActiveRecord::Base
validates :title, presence: true
validates :description, presence: trueend
Et cela vous empêchera de créer un article sans description même s’il a un titre… (encore une fois, assurez-vous de redémarrer la console rails après avoir mis à jour le modèle.)
Vous pouvez vérifier vos erreurs avec ces commandes…
article.errors.any?
article.errors.full_messages
A la suite, nous allons ajouter des validations de longueur…
Cool.
Puis, nous voulons que les utilisateurs puissent effectuer ces mêmes actions dans le navigateur, donc nous devrons mettre en place des routes, des contrôleurs et des vues pour la création et la sauvegarde des articles !
Etape 9 : Ajouter la possibilité de créer des articles depuis le navigateur
Le cycle de vie d’un nouvel article….
Revoir le cours Udemy les 2 premières minutes de la section 4, conférence 63 pour un aperçu complet…
D’abord, attaquons nos routes…
Dans les routes.rb, ajoutez cette ligne …
resources :articles
Cela nous donne toutes sortes de chemins pour mettre à jour, supprimer, créer, montrer, etc.
Vérifiez les nouveaux chemins avec… MAIS ATTENDEZ, avant de vérifier les chemins assurez-vous que vous êtes de retour hors de la console rails en entrant:
exit
then,
$ rake routes
Cool.
Maintenant, nous avons besoin d’un nouveau contrôleur… Créez ce fichier sous app/controllers.
touch articles_controller.rb#or just create the file using the visual text editor
Et ensuite à l’intérieur du nouveau fichier de contrôleur…
class ArticlesController < ApplicationControllerend
Maintenant, nous devons créer un nouveau dossier sous les vues pour enregistrer nos fichiers de vues d’articles… Le dossier devrait s’appeler ‘articles’
<<< MISE À JOUR DE L’AUTEUR >>>
Essayez d’utiliser la ligne de commande au lieu de l’éditeur de texte visuel :
cd views
mkdir articles
cd articles
<<< END UPDATE >>>
Maintenant, nous allons créer un nouveau fichier sous ‘articles’ appelé…
touch new.html.erb# or create using the visual text editor
Et ensuite nous devons mettre à jour notre articles_controller.rb:
class ArticlesController < ApplicationController
def new
end
end
Save.
Dans cette nouvelle page.html.erb, nous allons stocker notre formulaire pour capturer le titre et la description.
Mais d’abord, vérifions que la page fonctionne… Ajouter:
<h1>Create an article</h1>
Et ensuite charger le serveur…
Nous donne…
Génial. Cela fonctionne.
Maintenant, créons le formulaire adossé à un modèle. Rails fournit des méthodes d’aide pour le formulaire ici.
Dans le fichier new.html.erb…
<h1>Create an Article</h1><%= form_for @article do |f| %><% end %>
Et nous avons initié une variable d’instance, donc maintenant nous devons créer la variable dans notre contrôleur…
class ArticlesController < ApplicationControllerdef new
@article = Article.new
endend
Génial. Tout fonctionne bien…
Maintenant, collectons quelques données…
<h1>Create an Article</h1><%= form_for @article do |f| %>
<p>
<%= f.label :title %>
<%= f.text_field :title %>
</p><% end %>
Et chargeons la page pour voir ce que nous avons fait…
Génial. Ca marche…
Maintenant, finissons le formulaire…
Génial. Tout ce dont nous avons besoin…
Maintenant, nous devons créer une action ‘create’ dans le contrôleur…
class ArticlesController < ApplicationControllerdef new
@article = Article.new
enddef create
render plain: params.inspect
endend
Lorsque vous remplissez le formulaire et que vous le soumettez, vous verrez ces données :
Mais nous voulons que ces données soient sauvegardées dans la base de données…
Mais ce n’est pas suffisant… Nous voulons aussi montrer l’article….
Nous allons utiliser un chemin que nous avons déjà créé, et passer dans la variable d’instance pour le nouvel article…
redirect_to articles_show(@article)
Tout le code…
Mais ce n’est pas suffisant, n’est-ce pas ? Nous voulons refactoriser ce code pour donner un avis si l’article a été créé avec succès:
Et maintenant nous allons nous assurer que nos messages flash peuvent être vus dans toutes les pages…
Dans le corps du fichier application.html.erb…
<% flash.each do |name, msg| %>
<ul>
<li><%= msg %></li>
</ul>
<% end %>
Et maintenant nous voulons nous assurer que les erreurs sont affichées aussi…
Dans le fichier new.html.erb…
Génial. Maintenant, il va nous montrer les erreurs dans l’URL articles/nouveaux :
Maintenant assurez-vous que l’action show a été créée…
def show
@article = Article.find(params)
end
Maintenant nous devons créer une page pour montrer l’information sur…
Nous allons appeler ce fichier…
show.html.erb
Dans cette page…
<h1>Showing selected article</h1><p>
Title: <%= @article.title %>
</p><p>
Description: <%= @article.description %>
</p>
Et cela rendra…
(Vous avez une erreur ? Voici la solution à une erreur courante : créer le fichier show.html.erb au mauvais endroit)
Hurrah. Ensuite, nous allons travailler sur l’édition des articles…
Etape 10 : Édition des articles
Nous devons créer l’action d’édition dans le contrôleur… Quel contrôleur ? Le contrôleur des articles bien sûr !
def edit
end
Et nous devons créer le modèle d’édition dans les vues… Sous quel dossier ? Le dossier des vues des articles bien sûr!
edit.html.erb
Maintenant nous devons construire un formulaire pour éditer…
Nous pouvons en fait copier/coller depuis le formulaire new.html.erb. Nous utiliserons le même formulaire pour mettre à jour un article actuel que celui que nous avons utilisé pour créer un nouvel article.
Maintenant, complétons notre action d’édition dans le contrôleur…
def edit
@article = Article.find(params)
end
Maintenant, nous devons ajouter une action de mise à jour…
Etape 11 : Ajouter une liste d’index des articles, et ajouter des liens d’édition/affichage
Ajouter une action d’index dans articles_controller.rb…
def index
@articles = Article.all
end
Puis nous devons créer le modèle… Dans quel répertoire de vues placerons-nous ce fichier ?
index.html.erb
Et à l’intérieur de ce fichier…
Cela nous donne…
Cool. Maintenant, ajoutons les liens d’édition et d’affichage pour chaque article…
<td><%= link_to 'Edit', edit_article_path(article) %></td>
<td><%= link_to 'Show', article_path(article) %></td>
Le code ressemble à…
Cela nous donne….
Maintenant, ajoutons des liens ‘Retour’ à la page d’édition, d’affichage et à la nouvelle page… Allez-y et sautez dans les pages respectives et ajoutez les nouveaux liens comme ceci :
<%= link_to 'Back', articles_path %>
J’ai ajouté les miens tout en bas de chaque fichier.
Et ajoutons un lien d’édition sur la page d’exposition…
<%= link_to "Edit", edit_article_path(@article) %>
Etape 12 : Refactoriser les formulaires en un seul partiel
Créer un nouveau fichier dans les vues/articles directement.
_form.html.erb
Copier/coller les données du formulaire dans ce fichier…
Puis rendre le formulaire dans la nouvelle page et la page d’édition…
<%= render 'form' %>
Vous devriez avoir mis au rebut toutes les anciennes informations du formulaire et ajouté l’extrait de code à propos de la nouvelle page et de la page d’édition afin que chacune ressemble à quelque chose comme ceci :
<h1>Edit Article</h1><%= render 'form' %><%= link_to 'Back', articles_path %>
Maintenant, nous allons ajouter l’action de destruction…
Etape 13 : Ajouter l’action de destruction
Dans le contrôleur…
Quel contrôleur ? Vous le savez déjà.
Maintenant, nous devons ajouter les liens vers les pages à partir desquelles nous voulons être en mesure de supprimer. En utilisant le lien ci-dessous…
<%= link_to 'Delete', article_path(article), method: :delete, data: {confirm: "Are you sure?"} %>
…ajoutez aux pages où vous voudriez que l’utilisateur puisse supprimer.
Si j’ajoute à notre page d’index, cela ressemblera à…
Ajouter si nous ajoutons à notre page de spectacle, nous devrons modifier le lien destroy juste légèrement pour imiter la structure du lien edit. Vous voyez ce que je veux dire ?
Ceci:
<%= link_to 'Delete', article_path(@article), method: :delete, data: {confirm: "Are you sure?"} %>
A la place de ça:
<%= link_to 'Delete', article_path(article), method: :delete, data: {confirm: "Are you sure?"} %>
Etape 14 : Refactor Articles Controller
Un des principes du développement est DRY.
Vous savez peut-être déjà ce que cela signifie : « NE PAS SE RÉPÉTER »
Nous nous répétons assez souvent, alors faisons un peu de refactoring.
Cette ligne de code apparaît dans toutes nos actions…
@article = Article.find(params)
Donc, nous allons créer une méthode privée et y stocker cette ligne…
def set_article
@article = Article.find(params)
end
Puis, supprimer la ligne de code des actions….
Elle est incluse dans destroy, show, update, edit…
Juste en dessous de la première ligne du contrôleur…
before_action :set_article, only:
Le fichier contrôleur mis à jour ressemblera à :
Etape 15 : Installer Bootstrap
Ajouter le gemfile de la page github…
gem 'bootstrap-sass', '~> 3.4.1'
gem 'sassc-rails', '>= 2.1.0'
Puis dans la ligne de commande, en s’assurant d’être dans le répertoire app et non dans un des sous-répertoires, installer….
$ bundle install
Vous devrez également créer un nouveau fichier CSS… Le nom du fichier pourrait ressembler à ceci ci-dessous et vous le créerez sous app/assets/stylesheets
custom.css.scss
Et ajoutez…
Puis, dans l’application.js sous app/assets/javascripts…
//= require jquery
//= require bootstrap-sprockets
Et, si vous utilisez Rails 5, installez la gemme jQuery…
gem 'jquery-rails'
Vous ne savez pas quelle version vous utilisez ? Exécutez ce qui suit dans le terminal:
$ rails -v
Maintenant vous le savez. Si vous avez besoin d’installer jquery, ajoutez la gemme ci-dessus au gemfile et bundle install.
$ bundle install
Étape 16 : Installer la barre de navigation
Créer un partiel sous le dossier layouts…
_navigation.html.erb
Maintenant, allez sur la page d’accueil de bootstrap…
Reprenez le code de la barre de navigation par défaut… C’est le premier exemple et il ressemble à quelque chose comme ça :
Et coller dans votre partiel _navigation… Enregistrer.
Maintenant rendez le partiel à l’intérieur du <head> </head> de l’application.html.erb…
<%= render 'layouts/navigation' %>
L’ensemble du fichier ressemble maintenant à quelque chose comme ceci :
Redémarrez le serveur (sur un mac : contrôle + c) parce que vous avez récemment ajouté quelques nouvelles gemmes, puis redémarrez-le :
$ rails s
Et ensuite, lorsque vous rafraîchissez votre serveur local, vous verrez :
Niiiiiiice….. Ça a l’air bien, non ?
Maintenant, commençons à styliser ! Ou plutôt, débarrassons-nous très rapidement du stylisme pour pouvoir rester concentrés sur la construction de l’application plutôt que sur le stylisme de l’application 🙂
Dans le fichier custom.css.scss copier/coller puis enregistrer :
Etape 17 : Ajouter des liens à la barre de navigation
Maintenant, attaquons-nous à la barre de navigation et assurons-nous que les liens de la barre de navigation pointent vers les endroits où nous voulons qu’ils pointent !
Ce…
<a class="navbar-brand" href="#">Alpha Blog</a>
devient ceci:
<%= link_to "Alpha Blog", root_path, class: "navbar-brand", id: "logo" %>
Rafraîchissez votre page et voyez :
Et maintenant sur n’importe quelle page, vous pouvez naviguer vers le root_path (la page d’index) en cliquant sur ALPHA BLOG.
Puis, ajoutons un lien vers la page d’index des articles:
A la place du premier « Lien » dans la barre de navigation:
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
Ajouter:
<li><%= link_to "Articles", articles_path %></li>
Et à la place du second « Lien » dans la barre de navigation:
<li><a href="#">Link</a></li>
Ajouter:
<li><%= link_to "Create Article", new_article_path %></li>
Maintenant, nous pouvons supprimer l’autre lien vers « Créer un article » dans le fichier index.html.erb. Il suffit de le retrouver et de le supprimer.
Je vais également supprimer la barre de recherche. Nous ne l’utiliserons pas.
Supprimez tout ce qui se trouve en dessous :
Nous n’avons pas besoin du premier menu déroulant non plus, alors sortez-le. Trouvez juste ceci et supprimez-le :
Enregistrez le fichier. Rafraîchissez votre serveur localhost et vous verrez:
Étape 18 : styliser le modèle de formulaire
Vous pouvez trouver le code sur bootstrap ici.
Nous allons mélanger embedded ruby avec bootstrap pour obtenir le résultat que nous voulons.
Dans le _form.html.erb partiel, changez ceci…
en ceci…
Notez un changement important que nous avons fait au début de l’instruction do du formulaire…
<%= form_for(@article, :html => {class: "form-horizontal", role: "form"}) do |f| %>
Et notez la syntaxe à l’intérieur des éléments du formulaire…
<%= f.text_field :title, class: "form-control", placeholder: "Title of article", autofocus: true %>
Étape 19 : styliser les messages &Réfactoriser en partiels
Mettons maintenant aussi à jour le style des messages d’erreur. Mettez à jour le style de…
à:
Ce qui change les messages d’erreur en:
Maintenant nous allons extraire vers un partiel..
Créer un nouveau dossier sous les vues appelé ‘shared’…
Créer un nouveau fichier appelé _errors.html.erb…
Copier/coller le message d’erreur dans ce fichier… Sauvegarder.
Maintenant, supprimez le message d’erreur de _form.html.erb, et remplacez le code par:
<%= render 'shared/errors' %>
Créons également un fichier _messages.html.erb et stockons-le sous le dossier partagé. À l’intérieur de ce fichier, ajoutez le code des messages flash :
<% flash.each do |name, msg| %>
<ul>
<li><%= msg %></li>
</ul>
<% end %>
Enregistrez ce fichier. Assurez-vous de remplacer le code dans le fichier layouts/application.html.erb par:
<%= render 'shared/errors' %>
Le fichier entier ressemble actuellement à:
Puis, nous allons styliser les messages flash…
Dans le partiel _messages.html.erb partiel, changez ceci…
<% flash.each do |name, msg| %>
<ul>
<li><%= msg %></li>
</ul>
<% end %>
en ceci:
Nous aurons également besoin de changer tout le flash dans le fichier articles_controller.rb en flash pour compléter cette étape.
Etape 20 : Mettre à jour les variables d’instance d’article pour travailler pour les utilisateurs
Ceci est un peu prématuré car nous n’avons même pas encore créé d’utilisateurs ou d’actions d’utilisateurs pour notre blog, mais nous allons créer des utilisateurs et nous voudrons que nos messages d’erreur fonctionnent pour les utilisateurs comme ils fonctionnent pour les articles. Vous voyez ce que je veux dire ?
Nous avons toutes ces fonctions qui fonctionnent pour les articles : la création de nouveaux articles, l’édition d’anciens articles, et les messages d’erreur flash qui nous font savoir ce qui s’est mal passé… Nous voulons que ces messages d’erreur flash nous communiquent lorsque nous essayons de créer un nouvel utilisateur ou d’éditer un utilisateur actuel.
Nous allons accomplir cela en mettant à jour la variable d’instance @article en une qui fonctionnera pour les articles ou les utilisateurs…
Dans le fichier shared/_errors.html.erb, mettez à jour la variable d’instance @article en une variable d’instance @obj…
Maintenant, nous devons mettre à jour la déclaration de rendu partiel… Celle de articles/_form.html.erb
Il était…
<%= render 'shared/errors' %>
et maintenant il doit se lire…
<%= render 'shared/errors', obj: @article %>
Puis, nous allons travailler sur la vue « show »…
Etape 21 : styliser la page « Show Article »
Mettre à jour la page views/articles/show.html.erb pour…
Ceci rendra :
Puis, nous allons ajouter un peu de ‘simple_format’…
Modifiez ceci…
<%= @article.description %>
à ceci…
<%= simple_format(@article.description) %>
Puis, un peu plus de style pour les boutons…
<%= link_to "Edit", edit_article_path(@article), class: "btn btn-xs btn-primary" %> |
<%= link_to 'Back', articles_path, class: "btn btn-xs btn-success" %>
Cela nous donnera de beaux petits boutons…
Ajouter ensuite un bouton de suppression…
Un joli bouton de suppression coloré…
Le bloc de code entier ressemble à ceci maintenant :
Étape 22 : Style de la page d’index des listes d’articles
Nous allons mettre à jour cette page à l’aspect horriblement branlant…
La page index.html.erb doit être remplacée par le code suivant:
Style pour le corps de l’article:
.article-body {
border-top: 1px solid #eaeaea;
padding-top: 15px;
padding-bottom: 15px;
}
Style pour le titre de l’article:
.article-title {
font-weight: bold;
font-size: 1.5em;
}
Votre page ressemblera maintenant à ceci:
Merveilleux.
Étape 23 : création d’utilisateurs + création d’une branche de fonctionnalité dans Github
A la suite, nous allons créer des utilisateurs ! Cool. Notre modèle pour les utilisateurs sera appelé « User ». Vous trouverez ci-dessous un tableau utile qui explique comment le tableau des utilisateurs sera formaté et quelles seront les différentes structures de nommage des fichiers :
Nous avons déjà construit des articles. Nous pouvons créer, lire, modifier et supprimer des articles.
Mais actuellement, toute personne qui accède au blog peut lire, modifier et supprimer n’importe quel autre article.
Nous voulons que seuls les utilisateurs qui se sont inscrits puissent faire ces fonctions, et nous voulons qu’ils puissent uniquement modifier et supprimer les articles qu’ils ont créés.
Nous avons donc besoin d’utilisateurs bien sûr, et nous avons également besoin d’un moyen de suivre les utilisateurs qui créent des articles. Cela peut être fait en ayant l’id utilisateur pour l’utilisateur créant l’article stocké dans la table article dans la ligne article. Il s’agit d’une association de clé étrangère:
Ajouter la colonne user_id à la table des articles nous donnera la possibilité de « v-lookup » au reste des informations de l’utilisateur.
Un article sur lequel plusieurs personnes travaillent serait une association many-to-many….
Un article sur lequel une personne travaille, où une personne peut créer de nombreux articles, est une association un-à-plusieurs…
Les catégories d’articles, si nous les créons, seraient une association plusieurs-à-plusieurs.
Ok, assez de jib-jab, créons la table de l’utilisateur…