Bootstrap 4 in rails [Eng]


Télécharger Bootstrap 4 in rails [Eng]

★★★★★★★★★★3.5 étoiles sur 5 basé sur 1 votes.
Votez ce document:

Télécharger aussi :


bootstrap 4 in rails [Eng]

...

Chapitre 1. Introduction au développement d'applications Web dans Rails

Présenter votre application de la meilleure façon possible a toujours été le facteur le plus important pour chaque développeur Web. Dans cette première génération de téléphones mobiles, nous sommes obligés d’agir avec le vent et de rendre notre application compatible avec les mobiles, les tables, les ordinateurs personnels et tous les écrans possibles sur Terre. Bootstrap est la solution unique pour tous les problèmes auxquels les développeurs ont été confrontés. Il crée de beaux designs réactifs sans efforts supplémentaires et sans connaissances avancées en CSS. C'est une véritable aubaine pour tous les développeurs. Dans ce chapitre, et tout au long du livre, nous allons nous concentrer sur la façon d’embellir nos applications Rails à l’aide de Bootstrap. Dans ce chapitre, nous allons créer une application Todo de base avec Rails. Nous allons explorer la structure de dossiers d'une application Rails et analyser quels dossiers sont importants pour la modélisation d'une application Rails. Cela vous sera utile si vous souhaitez revoir rapidement les concepts Rails. Nous verrons également comment créer des vues, les lier et les styler. Le style de ce chapitre se fera traditionnellement à travers les fichiers CSS par défaut de l’application. Enfin, nous verrons comment accélérer le processus de conception à l’aide de Bootstrap.

En bref, nous aborderons les sujets suivants:

Pourquoi Bootstrap with Rails?

Configuration d'une application Todo dans Rails

Analyse de la structure de dossiers d'une application Rails

Créer des vues

Styliser les vues en utilisant CSS

Défis du style traditionnel d'une application Rails

Pourquoi Bootstrap with Rails?

Rails est l’un des frameworks Ruby les plus populaires, qui est actuellement à son apogée, à la fois en termes de demande et de tendance technologique. Avec plus de 3 100 membres contribuant à son développement et des dizaines de milliers d'applications déjà construites à l'aide de ce logiciel, Rails a créé un standard pour tous les autres environnements du Web. Rails a été initialement développé par David Heinemeier Hansson en 2003 pour faciliter son propre processus de développement en Ruby. Plus tard, il est devenu assez généreux pour libérer Rails au sein de la communauté open source. Aujourd'hui, il est communément appelé Ruby on Rails. Rails raccourcit le cycle de vie du développement en mettant l'accent non plus sur la réinvention de la roue, mais sur l'innovation. je

Ceci est basé sur la convention du principe de configuration, ce qui signifie que si vous suivez les conventions de Rails, vous finirez par écrire beaucoup moins de code que ce que vous auriez écrit autrement. Bootstrap, en revanche, est l’un des frameworks de développement frontend les plus populaires. Il a été initialement développé sur Twitter pour certains de ses projets internes. Il facilite la vie d'un développeur Web novice en fournissant la plupart des composants réutilisables déjà construits et prêts à être utilisés. Bootstrap peut être facilement intégré à un environnement de développement Rails via diverses méthodes. Nous pouvons directement utiliser les fichiers .css fournis par le framework, ou bien l'étendre à travers sa version Sass et laisser Rails le compiler.

Remarque

Sass est un préprocesseur CSS qui apporte logique et fonctionnalité au CSS. Il inclut des fonctionnalités telles que des variables, des fonctions, des mixins et autres. L'utilisation de la version Sass de Bootstrap est une méthode recommandée dans Rails. Il offre diverses options pour personnaliser facilement les styles par défaut de Bootstrap. Bootstrap fournit également divers composants JavaScript qui peuvent être utilisés par ceux qui ne possèdent aucune connaissance réelle de JavaScript. Ces composants sont nécessaires dans presque tous les sites Web modernes construits aujourd'hui. Bootstrap with Rails est une combinaison mortelle. Vous pouvez créer des applications plus rapidement et investir plus de temps à réfléchir à la fonctionnalité plutôt qu'à la réécriture des codes.

Configurer une application Todo dans Rails

Étant donné que ce livre est destiné aux développeurs Rails, je suppose que vous avez déjà une connaissance de base du développement de Rails. Vous devriez également avoir Rails et Ruby installés sur votre machine pour commencer.

Remarque

Lors de la rédaction de ce livre, Ruby 2.1.1 et Rails 4.1.4 ont été utilisés.

Voyons d’abord ce que cette application Todo fera. Notre application nous permettra de créer, mettre à jour et supprimer des éléments de la liste Todo. Nous allons d’abord analyser les dossiers créés lors de l’échafaudage de cette application et lesquels d’entre eux sont nécessaires pour la modélisation de l’application. Alors trempons nos pieds dans l’eau:

  1. Nous devons d’abord sélectionner notre espace de travail, qui peut être n’importe quel dossier de votre système. Créons un dossier nommé Bootstrap_Rails_Project. Maintenant, ouvrez le terminal et accédez à ce dossier.
  2. Il est temps de créer notre application Todo. Ecrivez la commande suivante pour créer une application Rails nommée TODO: rails new TODO
  3. Cette commande exécutera une série d'autres commandes nécessaires à la création d'une application Rails. Donc, attendez un peu avant d’arrêter d’exécuter tous les codes. Si vous utilisez une version plus récente de Rails, cette commande exécutera également la commande bundle install à la fin. La commande Bundle install est utilisée pour installer d'autres dépendances.

La sortie de la commande précédente est la suivante:

Vous devriez maintenant avoir un nouveau dossier dans Bootstrap_Rails_Project nommé TODO, créé par le code précédent. Voici la sortie:

Analyse de la structure de dossiers d'une application Rails

Naviguons vers le dossier TODO pour vérifier la structure de dossiers de notre application:

Laissez-moi vous expliquer quelques-uns des dossiers importants ici:

Le premier est le dossier de l'application, sur lequel nous allons nous concentrer le plus souvent tout au long de ce livre. Tout le contenu de notre application sera présent dans ce dossier.

Le dossier assets du dossier app est l’emplacement pour stocker tous les fichiers statiques comme

JavaScript, CSS et images. Vous pouvez jeter un coup d'œil à l'intérieur pour regarder les différents fichiers.

Le dossier contrôleurs gère diverses requêtes et réponses du navigateur.

Le dossier helpers contient différentes méthodes d'assistance pour les vues et les contrôleurs.

Le dossier suivant des expéditeurs, contient tous les fichiers nécessaires pour envoyer un courrier électronique.

Le dossier modèles contient des fichiers qui interagissent avec la base de données.

Enfin, nous avons le dossier views, qui contient tous les fichiers .erb qui seront compatibles avec les fichiers HTML.

Commençons par le serveur Rails et regardons notre application sur le navigateur.

  1. Accédez au dossier TODO dans le terminal, puis tapez la commande suivante pour démarrer un serveur: serveur serveur Vous pouvez également utiliser la commande suivante: rails s
  2. Vous verrez que le serveur est déployé sous le port 3000. Tapez l'URL suivante pour afficher l'application: http: // localhost: 3000. Vous pouvez également utiliser l'URL suivante: http://0.0.0.0.03000.
  3. Si votre application est correctement configurée, vous devriez voir la page par défaut de Rails dans le navigateur:

Créer des vues

Nous allons utiliser la méthode Rails ’scaffold pour créer des modèles, des vues et d’autres fichiers nécessaires dont Rails a besoin pour rendre notre application active. Voici l’ensemble des tâches que notre application devrait effectuer:

Il devrait lister les éléments en attente

Chaque tâche doit être cliquable et les détails liés à cet élément doivent être vus dans une nouvelle vue.

Nous pouvons modifier la description de cet élément et quelques autres détails

Nous pouvons supprimer cet article

La tâche semble longue, mais tout développeur Rails saurait à quel point il est facile de le faire.

En réalité, nous n’avons rien à faire pour y parvenir. Nous devons simplement passer une commande d'échafaudage unique, et le reste sera pris en charge.

Fermez le serveur Rails en utilisant les touches Ctrl + C puis procédez comme suit:



  1. Accédez d’abord au dossier de projet du terminal. Ensuite, passez la commande suivante: rails g scaffold todo title: description de la chaîne: texte complété: boolean

Cela créera un nouveau modèle appelé todo qui comporte divers champs tels que titre, description et complété. Chaque champ est associé à un type.

  1. Depuis que nous avons créé un nouveau modèle, il doit être reflété dans la base de données. Alors migrons-le: rake db: create db: migrate

Le code précédent créera une nouvelle table dans une nouvelle base de données avec les champs associés.

  1. Analysons ce que nous avons fait. La commande scaffold a créé de nombreuses pages HTML ou vues nécessaires à la gestion du modèle de tâche. Alors, regardons notre application. Nous devons redémarrer notre serveur: rails s
  2. Accédez à la page localhost http: // localhost: 3000 au numéro de port 3000.
  3. Vous devriez toujours voir la page par défaut de Rails. Maintenant, tapez l'URL: http: // localhost: 3000 / todos.
  4. Vous devriez maintenant voir l'application, comme indiqué dans la capture d'écran suivante:

  1. Cliquez sur New Todo, vous serez redirigé vers un formulaire qui vous permettra de remplir différents champs que nous avions précédemment créés. Créons notre première tâche et cliquez sur Soumettre. Il sera affiché sur la page de liste:

C'était facile, n'est-ce pas? Nous n'avons encore rien fait. C’est le pouvoir de Rails, dont les gens sont fous.

Mise en forme des vues à l'aide de CSS Évidemment, l'application n'a pas l'air géniale.

Le tableau présenté est extrêmement déroutant et nécessite un certain style CSS. Commençons donc par dénommer notre application Rails. Nous allons utiliser le fichier CSS par défaut de l’application pour ajouter et modifier les styles:

  1. Ouvrez Bootstrap_Rails_Project.
  2. Ouvrez le dossier TODO. allez dans le dossier de l'application. Accédez au dossier des actifs. Vous y trouverez un dossier nommé stylesheets.

Ce dossier contient tous les fichiers CSS de l'application.

Actuellement, vous trouverez trois fichiers différents: application.css, scaffold.css.scss et todos.css.scss. Le premier fichier est un fichier CSS au niveau de l'application. Tout ce que vous écrivez à l'intérieur sera appliqué à l'ensemble de l'application. Les deux fichiers suivants sont des fichiers Sass. Rails utilise

SASS pour appliquer des styles à l'application. Ces fichiers SASS sont compilés dans les fichiers CSS et inclus dans l’application lors de vos déplacements.

Nous utiliserons un fichier CSS normal sans SASS pour appliquer des styles à notre application Todo. Commençons d’abord et analysons le code source HTML de notre application. La capture d'écran est la suivante:

Vous pouvez voir que tous les fichiers CSS sont chargés alphabétiquement ici. Cela peut être un problème grave en ce qui concerne le remplacement de CSS. Nous voulons que notre fichier CSS soit à la fin. Cela nous permettra de remplacer les styles de niveau d'application à certains endroits dans le futur.

Alors, réorganisons les fichiers CSS ici. Pour ce faire, suivez les étapes indiquées:

  1. Ouvrez le fichier application.css à l'aide d'un éditeur de texte. Là, vous pouvez voir des lignes de code avec require_ comme préfixe. Nous devons les ajuster

La commande require_self inclut le fichier application.css dans l'application. Si nous inspectons le fichier source HTML maintenant, nous devrions voir qu'il n'y a que deux fichiers CSS inclus: application.css et styles.css. Par conséquent, nous sommes maintenant en sécurité pour écrire des styles CSS pour l'application.

Refonte de l'application Todo

Dans cette section, nous écrirons tous les fichiers CSS afin de les revoir sans utiliser de framework. Cela nous aidera à mieux comprendre la quantité de code CSS que nous devons écrire à la fin pour le style des liens simples et d’autres éléments HTML.

Nous allons redéfinir notre application Todo existante pour qu'elle ressemble à la capture d'écran suivante:

La capture d'écran précédente affiche la version repensée de la page d'accueil. Comme vous pouvez le constater, la liste des activités TODO s’affiche correctement au centre de l’écran, dans une structure de type tableau. Même les liens d'action (Afficher, Éditer et Détruire) ont été repensés pour ressembler à des boutons 3D. Regardons la version remaniée:

La capture d'écran précédente affiche la version repensée de la page New Todo. Le formulaire a été repensé et une couleur d'arrière-plan y a été appliquée, comme suit:

La capture d'écran précédente montre la version repensée de l'écran Edit TODO, identique à l'écran New Todo. La seule différence ici est la fonctionnalité de remplissage automatique qui remplit les champs selon les données disponibles dans la base de données. Les champs de saisie sont plus spacieux avec une taille de police plus grande pour afficher correctement le texte qu'ils contiennent. Voyons la capture d’écran de la page View Todo:

La capture d'écran précédente affiche la version repensée de la page View Todo. Nous avons gardé cette page simple et claire pour une meilleure lisibilité. Dans toutes les pages, nous avons centré le contenu du site.

Oh! C’est beaucoup de design! Ne t'inquiète pas. Nous allons passer à travers facilement.

Il est généralement considéré comme une bonne pratique d’organiser le processus de conception avant de s’y lancer. Dans notre application Todo, nous avons trois vues différentes:

Page d'accueil pour lister tous les Todos: Ceci est à http: // localhost: 3000 / todos

Nouveaux formulaires Todo et Modifier les formulaires Todo: ils constituent tous les deux la même vue, accessible via deux types d'URL différents.

Show View Todo: affiche des détails TODO particuliers

Commençons par dénommer la page d’accueil:

  1. Ouvrez styles.css, que nous avons récemment créé. Tous les styles que nous allons écrire doivent être écrits dans ce fichier.
  2. Nous allons d'abord effacer la marge et le remplissage par défaut du navigateur à l'aide de l'universel

sélecteur en CSS (*). Donc, notre CSS pour cela sera:

* {

marge: 0;

rembourrage: 0

}

  1. Commençons par appeler le titre de la page. Si vous extrayez le code source HTML de la page, vous verrez qu'il s'agit d'un élément H1. Donc, notre CSS pour cela sera:

h1 {

rembourrage: 20px;

text-align: center;

couleur: # 5093C2;

}

Le code précédent fait apparaître le titre au centre de la page. Il ajoute également une couleur bleu clair. Nous avons également créé un espace autour de celui-ci en utilisant la propriété padding de CSS. Actualisez votre page pour le vérifier.

  1. Il est temps de décorer l’élément de la table. Notre CSS pour ce sera:

table{

largeur: 800px;

marge: auto;

text-align: center;

}

Le code précédent place la table au centre du navigateur. Nous lui avons d'abord appliqué une largeur de 800 pixels, puis une marge auto-positionnée.

Puisque le navigateur connaît maintenant la largeur de l'élément de table, il divisera automatiquement l'espace supplémentaire de chaque côté. Cela rendra notre table centrée sur l'écran du navigateur. La dernière propriété text-align est utilisée pour aligner le texte présent dans la table.

  1. Appliquons quelques styles supplémentaires aux éléments présents dans le tableau:

td, th {

rembourrage: 10px;

bordure: solide 1px # 888888;

}

Dans le code CSS précédent, nous avons appliqué des styles aux éléments td et th de l'élément table. Nous avons créé un espace autour du texte en utilisant un remplissage. Nous avons également appliqué une bordure à chaque cellule. C'est une bordure solide de largeur 1px et couleur # 888888.



  1. Il est temps de concevoir les liens de l’application. Nous allons essayer de les faire apparaître comme un bouton pour qu'il apparaisse plus cliquable. Notre CSS pour ce sera:

une{

bloc de visualisation;

texte-décoration: aucun;

largeur: 100px;

marge: auto 10px;

rembourrage: 5px;

text-align: center;

arrière-plan: #ccc;

couleur: # 444;

taille de police: 20px;

box-shadow: 4px 4px 0px # 888;

poids de police: gras;

}

Les liens sont des éléments HTML intégrés. Par conséquent, dans la première ligne, nous l’avons fait ressembler à un élément de niveau bloc en utilisant la propriété display. Maintenant, nous pouvons lui appliquer la largeur et la marge. Tout comme nous avons fait à notre élément de table; nous allons également appliquer une largeur particulière et faire en sorte que tous les liens apparaissent centrés sur leurs éléments parents. Nous avons également appliqué un remplissage de 5 pixels pour créer un espace autour du texte du lien.

Pour colorer les liens, nous avons appliqué un arrière-plan à celui-ci, et pour rendre le texte plus distinct dans cet arrière-plan, nous lui avons appliqué une propriété color. Nous avons également joué avec l'ombre du bouton pour le rendre plus 3D.

Assurez-vous d'actualiser l'écran du navigateur pour voir les modifications que nous appliquons en permanence.

J'espère que vous appréciez le processus de conception de l'application.

Nous avons enfin conçu l'écran d'accueil. Le formulaire n'est toujours pas stylé! Faisons-le maintenant:

  1. Cliquez sur le fichier New Todo et laissez-le styler:

forme{

largeur: 300px;

marge: auto;

arrière-plan: #ccc;

rembourrage: 20px;

bordure: 1px solide # 444;

}

Nous avons appliqué une largeur appropriée au formulaire et l'avons fait apparaître au centre de l'écran.

Nous lui avons également donné une couleur de fond décente. Le rembourrage et la bordure sont également appliqués pour lui donner un aspect plus spacieux et plus plat.

  1. Ensuite, nous devons concevoir les étiquettes et les champs de saisie. Si vous extrayez la source HTML de cette page, vous verrez que chaque étiquette, ainsi que son champ de saisie associé, est encapsulée dans un div ayant une classe de champ. N'oubliez pas que ces classes et les structures HTML ne sont pas écrites par nous. Celles-ci ont été générées automatiquement par Rails. Nous travaillons juste avec le fichier CSS.
  2. Nous allons maintenant utiliser la classe de champ pour appliquer un style aux éléments présents dans la vue Nouveau. Ici, nous allons concevoir l’étiquette, le champ de saisie et l’élément textarea:

.champ{

remplissage: 10px 0;

}

.field label {

poids de police: gras;

}

Entrée .field, .field textarea {

rembourrage: 8px;

bordure: 1px solide #ccc;

border-radius: 5px;

taille de police: 18px;

largeur: 280px;

}

Nous avons appliqué un espace décent à l'intérieur du champ avec un élément div. Ici, nous avons donné deux valeurs différentes à la propriété padding. La première valeur sert à créer des espaces en haut et en bas, tandis que la valeur suivante sera utilisée pour les côtés gauche et droit.

  1. Ensuite, nous avons appliqué le style à l'élément label de l'élément field. Nous l'avons fait apparaître en gras à l'aide de la propriété font-weight. Enfin, nous avons donné aux mêmes champs de saisie et textarea le même ensemble de styles CSS. Nous leur avons donné l'air spacieux en utilisant un rembourrage. Une propriété de bordure est appliquée pour supprimer la bordure par défaut du navigateur entourant les éléments input et textarea. Nous avons également appliqué border-radius pour rendre les coins un peu arrondis. Enfin, nous avons fixé la largeur des éléments textarea et input afin qu’ils apparaissent correctement alignés.
  2. Il est temps de concevoir le dernier élément de cette page HTML, le bouton Créer une tâche:

.actions input {

rembourrage: 8px;

bordure: 1px solide #CCC;

border-radius: 5px;

taille de police: 18px;

largeur: 280px;

arrière-plan: # 83B5D8;

couleur: # 444;

}

La plupart des styles CSS que nous avons appliqués ici sont similaires à ceux que nous avons appliqués à l'élément input et textarea. Ici, nous avons ajouté deux propriétés supplémentaires, l’arrière-plan et la couleur, pour que l’apparence soit différente et se démarque correctement dans le formulaire.

  1. Nous avons conçu avec succès les pages Nouveau Todo et Éditer Todo. Il ne nous reste plus que la page Afficher les tâches. Alors, sans plus tarder, voyons d’abord la page. Cliquez sur le lien Afficher.

La plupart du contenu est déjà stylé par nous. Il ne nous reste plus qu'à concevoir le texte sur cette page, le code est le suivant:

p {

largeur: 350px;

taille de police: 20px;

marge: auto;

remplissage: 10px 0;

couleur: # 444;

}

p # notice {

couleur: # 76a3da;

}

Nous avons appliqué une largeur fixe à l'élément p et l'avons fait apparaître au centre de l'écran à l'aide de la propriété margin. Nous leur avons également appliqué une taille de police décente. Maintenant, séparons-les les uns des autres en utilisant les propriétés margin et padding.

Cette page est également affichée après les pages New Todo ou Edit Todo avec un avis en haut.

Cet élément a un élément id, utilisé pour afficher le statut, si une nouvelle tâche a été créée avec succès ou si une tâche existante a été mise à jour avec succès. En utilisant CSS, nous lui avons appliqué du style. Assurez-vous de ne pas laisser d'espace entre p et #notice dans le code CSS précédent. Nous ciblons la balise p, qui a un identifiant, #notice, donc les espaces ne doivent pas être présents entre les sélecteurs.

Félicitations! Nous avons terminé avec succès la conception de toute l'application



8