Vues extérieures et styles à Sinatra

Bien qu'il soit possible de créer un site Web avec Sintra dans un seul fichier c'est vraiment une mauvaise idée, car le problème est que plus notre site est complexe, plus il sera difficile de naviguer dans ce fichier et donc lorsqu'une erreur se produit, plus il sera difficile de la corriger .
L'idée derrière l'utilisation d'un framework comme Sintra c'est de pouvoir simplifier notre travail tout en profitant de tous les outils qui nous sont proposés dans le package, en intégrant également notre façon de travailler, ce qui rend très probable que l'utilisation d'un seul fichier pour tout n'est pas quelque chose qui est dans notre philosophie.
C'est pourquoi nous pouvons commencer à travailler sur des vues et des styles externes, de sorte que chaque vue dont nous avons besoin se trouve dans un fichier séparé avec lequel nous pouvons d'une part pouvoir détecter les erreurs plus facilement et d'autre part organiser de manière beaucoup plus pratique la structure de notre projet .
1- Nous devons d'abord avoir la langue Rubis téléchargé, installé et configuré dans notre environnement de développement.
2- Accès Internet pour pouvoir télécharger certaines des ressources que nous allons indiquer dans les exemples.
3- Autorisations suffisantes pour écrire de nouveaux fichiers et créer des dossiers, en plus de pouvoir exécuter des fichiers avec Rubis.
4- Un éditeur de texte pour pouvoir écrire le code que nous utiliserons pour les fichiers, il peut être Texte sublime ou NotePad ++, mais celui avec lequel nous sommes familiers sert notre objectif.
Le HTML Dans le fichier principal du projet, cela n'est pas recommandé à moins que notre site ne soit statique ou temporaire et que nous devions immédiatement aller sur le marché avec quelque chose, car comme nous l'avons mentionné, cette pratique rend notre code illisible et ne peut pas être maintenu à temps correctement.
Afin de surmonter ce problème qui se pose, Sintra nous offre la possibilité de créer des vues externes, qui ne sont que des fichiers .erb où nous placerons le HTML correspondant à notre point de vue, où Sintra Lors du routage de la vue créée, il recherchera immédiatement ces fichiers et avec cela la réponse pour l'utilisateur sera générée. Voyons dans le code suivant comment nous avons créé une vue externe pour que notre projet montre à l'utilisateur des informations.
Tout d'abord, nous allons créer un fichier appelé principal.rb et là nous créons notre structure de base comme nous le verrons ci-dessous :

 nécessite 'sinatra' get '/' do erb: start end get '/ on' do erb: on end get '/ contact' do erb: contact end

Jusqu'à présent cela ne représente rien de nouveau si nous avons déjà vu le tutoriel des premiers pas avec Sinatra, ici ce que nous faisons est d'importer la bibliothèque avec exiger et enfin on définit les routes que les vues vont retourner, le tout avec la méthode AVOIR HTTP.
Maintenant, nous allons créer un fichier appelé layout.erb et nous allons le placer dans un nouveau dossier appelé vues qui doit être dans le même répertoire où nous avons créé notre fichier principal.rb, voyons le code que contiendra notre fichier layout.erb:

Début
Sur moi
Contact

Maintenant dans le même dossier vues que nous venons de créer nous allons générer un nouveau fichier pour pouvoir tester notre exemple, dans ce cas nous l'appellerons ce fichier home.erb et il porte ce nom car l'un de nos itinéraires définis dans principal.rb porte ce nom, pour finir dans ce fichier nous placerons le code suivant :

Bienvenue sur mon site, nous voyons ici comment fonctionne notre première vue externe Sinatra

Si nous regardons attentivement, nous nous rendons compte que ce n'est rien de plus que HTML. Ceci étant terminé, nous allons maintenant simplement à la console de commande et exécutons notre nouvelle application, pour cela, nous n'avons qu'à exécuter ce qui suit :

 ruby principal.rb

Ce que fait cette commande est d'augmenter le serveur Web de développement intégré WEBrick comme on le voit sur l'image suivante :

Une fois cette action effectuée nous pouvons naviguer vers notre page avec une vue externe, pour cela nous irons à l'adresse hôte local : 4567, ce qui nous donne un résultat comme celui que nous pouvons voir dans l'image suivante :

AGRANDIR

Depuis que nous avons créé notre première vue externe, nous avons encore des choses à expliquer, et c'est la structure du projet, puisque par défaut Sintra attendez-vous à une structure que si nous la suivons, nous ne devrions rien faire d'autre, mais si cela ne nous convient pas, nous pouvons la changer.
Structure de baseLa structure de base est un fichier principal dans lequel le framework est inclus et les routes sont créées, puis nous avons deux dossiers supplémentaires, l'un appelé vues qui est celui que nous utilisons pour stocker nos fichiers .erb qui correspondent aux vues et à un dossier Publique c'est là que nous allons stocker les différents fichiers statiques comme .css ou .js.
Si nous voyons l'image suivante, nous pouvons apprécier la structure de base que nous avons générée pour l'application de l'exemple précédent :

Ici, nous voyons que le dossier principal de notre projet s'appelle sintra, alors à la racine de ceci nous avons notre fichier principal.rb, et enfin nous avons les deux dossiers que nous avons mentionnés, avec le dossier vues affiché pour montrer les deux fichiers que nous avons créés dans l'exemple précédent.
Maintenant, que faire si nous ne voulons pas utiliser les noms par défaut de Sintra car pour une raison quelconque notre application doit avoir d'autres dossiers, comme nous l'indiquons simplement dans le fichier principal.rb comme suit:
set: public_folder, 'statiqueAvec cette instruction, nous disons Sintra que maintenant au lieu de chercher un dossier Publique, vous devez rechercher un dossier nommé Static.
set: vues, 'modèlesAvec cette instruction, nous disons à Sinatra qu'au lieu de chercher vues rechercher des modèles.
Avec cela, nous avons déjà écrasé la manière dont le framework gère ces fichiers, nous donnant plus de liberté sur notre projet.
Maintenant que nous comprenons comment fonctionne la structure de notre application, nous allons inclure les styles, pour cela nous pouvons appliquer plusieurs approches, cependant la plus recommandée est de créer un fichier général qui s'applique à toutes les vues. Bien que nous puissions appliquer l'approche de la création de notre CSS manuellement, nous allons expliquer dans cet exemple comment ajouter Bootstrap et ainsi avoir un point de départ plus solide.
Tout d'abord, nous devons télécharger le cadre de Amorcer et enregistrez le dossier résultant dans notre répertoire Publique ou alors statique dans le cas où nous avons suivi les instructions pour le changement de nom dans l'explication de la structure des dossiers. Puis dans notre dossier disposition Nous allons modifier un peu le contenu de l'étiquette pour pouvoir inclure les bibliothèques nécessaires au fonctionnement de Amorcer, voyons les modifications appliquées :

Une fois que nous avons inclus les bibliothèques de Amorcer nous allons modifier notre HTML Pour lui donner une structure plus en phase avec le framework, avec cela on peut remarquer plus directement le changement de styles sur notre site :

Début
Sur moi
Contact

Si nous regardons, nous avons changé certaines choses, tout d'abord dans l'étiquette, nous avons inclus les bibliothèques de Amorcer, nous avons créé un style qui ne s'applique qu'à l'intérieur layout.erb pour les éléments qui ont l'id style, dans le cas de cet exemple nous l'appliquons à l'élément et enfin en utilisant les composants de Amorcer on ajoute la classe nav nav-onglets pour afficher notre menu sous forme d'onglets.
Nous redémarrons notre serveur à partir de WEBrick et nous entrons dans le chemin fourni dans lequel notre application s'exécute, qui devrait ressembler à ceci avec les modifications appliquées :

Comme nous pouvons le voir, nous avons effectivement appliqué un style sur notre application Web faite avec SintraBien sûr, il reste encore beaucoup de travail à faire pour que cette application soit plus en phase avec un environnement de production, cependant avec cette base il est beaucoup plus facile d'expérimenter et d'ajouter des fonctionnalités qui nous donneront un développement beaucoup plus complet.
Ainsi, nous terminons ce tutoriel, avec lequel nous avons appris à organiser notre projet en utilisant des vues externes définissant une structure de dossiers et rendant notre application beaucoup plus attrayante en incorporant des styles, mais pas seulement du CSS simple, mais nous avons incorporé le framework Amorcer ce qui nous aide à créer des interfaces utilisateur beaucoup plus attrayantes sans trop de maux de tête.Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif