Dans la partie précédente nous avons créé le layout et les partials, nous pouvons désormais créer nos différentes pages en utilisant les mêmes techniques : Slim pour le code, les fichiers datas comme sources de données et Frontmatter pour les données locales.

Création des fichiers

Nous avons sept pages à créer : Accueil, Camp, Equipe, Activités, Réservation, Mentions légales et Conditions générales de vente. La page d'accueil correspond au fichier index.html.erb déjà existant et que l'on va tout de suite renommer en index.html.slim

Pour la page blog qui contient la liste des articles, elle sera créée lors de l'ajout du blog.

# dans le dossier source
$ touch camp.html.slim equipe.html.slim activites.html.slim reservation.html.slim mentions-legales.html.slim cgv.html.slim

Frontmatter et le seo

Dans l'article sur l'organisation des données, on a vu qu'on pourvait utiliser Frontmatter pour les données propres à la page. On va utiliser cette possibilitéé pour imiter le comportement de plugins SEO qu'on trouve sur les CMS et qui permettent de définir pour chaque page et article un autre titre ainsi qu'une meta description.

Contrairement aux plugins, personne ne vous dira si votre titre ou votre description sont trop long, souvenez vous juste que votre éditeur de texte sait compter les lettres :)

Comme vous avez pu le remarquer, chaque page possède une hero-image (grande image dans le header), on va utiliser Frontmatter pour indiquer quelle image utiliser.

Dans chacune de nos pages on va donc coller ce bloc:

---
title:
title_seo:
description:
hero_image:
---

Le fichier layout.slim contient déjà une balise meta description qui utilise la description dans l'en-ête de page. Par contre ce n'est pas le cas pour notre title_seo. On va donc modifier layout.slim et écrire une condition voulant que si il n'y a pas de title_seo on utilise le title sinon on utilise le nom du site. Cette condition viendra remplacer celle déjà existante.

title = current_page.data.title_seo ? current_page.data.title_seo : data.settings.site.title  || data.settings.site.title

Intégration de la page d'accueil

On peut commencer à intégrer les pages ! La page d'accueil est différente des autres au niveau du header : l'hero-image est plus grande et il y a plus de contenu. Comme on veut pouvoir utiliser un partial pour l'affichage de cette image on va ajouter quelques valeurs dans l'en-tête.

# index.slim
---
title: "No Wifi Summercamp, camp de vacances dans les Pyrénées Ariégeoises"
title_seo: "No Wifi Summercamp, camp de vacances dans les Pyrénées Ariégeoises"
description: "Camp de vacances en pleine nature qui privilègie un retour aux sources en éloignant les nouvelles technologies le temps d'un séjour."
hero_image: randonneurs.jpg
slogan: "Reconnectez-vous à vous même"
slogan_sup: "Déconnectez vos téléphones, tablettes et ordinateurs" 
---

Un nouveau partial pour le header

Nous pouvons écrire un partie du partial header qui va être chargé d'afficher le titre de la page, les images seront ajoutées dans la partie sur les CSS. Créez donc un fichier header.html.slim dans le dossier partials/:

/ _header.html.slim
header
  / Check if it's the homepage
  - if current_page.url == '/'
    = image_tag "/images/logo-home.png", alt: "No Wifi Summercamp, camp de vacances en plein air"
    p = current_page.data.slogan_sup
    p = current_page.data.slogan
    h1 = current_page.data.title
  - else
    h1 = current_page.data.title

Le code étant différent selon que l'on soit sur la page d'accueil ou les autres pages, on commence par vérifier si on est sur la page d'accueil en comparant l'url de la page. On pourrait écrire un custom helper pour faire cette vérification mais étant donné qu'on ne la fera qu'une fois, c'est plus rapide de la mettre dans le partial.

retour à la page d'accueil

Voilà donc le code final de la page d'accueil :

/ index.html.slim
---
title: "No Wifi Summercamp, camp de vacances dans les Pyrénées Ariégeoises"
title_seo: "No Wifi Summercamp, camp de vacances dans les Pyrénées Ariégeoises"
description: "Camp de vacances en pleine nature qui privilégie un retour aux sources en éloignant les nouvelles technologies le temps d'un séjour."
hero_image: randonneurs.jpg
slogan: "Reconnectez-vous à vous même"
slogan_sup: "Déconnectez vos téléphones, tablettes et ordinateurs"
---
div role="main"

  = partial "partials/header"

  h2 Débranchez !
  p Le temps d’un week-end, d’une semaine ou d’un mois, oubliez votre téléphone, votre tablette, votre ordinateur, les réseaux sociaux, les emails, les jeux en lignes, l’information en continue...

  p Mettez de côté  toute technologie qui tend à devenir de plus en plus encombrante dans votre vie et ne vous laisse jamais un instant pour vous reposer l’esprit.

  p Rejoignez le No Wi-fi Summercamp pour vous reconnecter avec vous même au travers de nombreuses activités en pleine nature, de vie en communauté, et de loisirs loin de tout écran et toute connexion internet.

  h3 Le camp
  = image_tag "/images/accueil/camp.jpg"
  p Situé aux abords du parc naturel régional des Pyrénées Ariégeoises, à proximité de lacs, de rivières et de nombreux départ de randonnées, le camp vous accueille d’avril à octobre  pour la durée que vous souhaitez.
  = link_to "Découvrir le camp", "/camp.html"

  h3 L'équipe
  = image_tag "/images/accueil/equipe.jpg"
  p Notre équipe, constituée de personnes venant de tout horizon est  pour vous accompagner dans les activités, vous transmettre leur savoir-faire et vous divertir autour des nombreux feux de camps
  = link_to "Découvrir l'équipe", "/equipe.html"

  h3 Les activités
  = image_tag "/images/accueil/activites.jpg"
  p Pas le temps de vous ennuyer, il y a de quoi faire sur le camp ! Activités nautiques, sports en plein air,  randonnées, atelier de fabrication ou restauration d’objets, apprentissage de la permaculture.
  = link_to "Découvrir l'équipe", "/activites.html"

  = partial "partials/gallery", locals: {gallery: data.galleries.homepage}

  h2 Ils ont adoré leur séjour !
  ul
    - data.testimonials.persons.each do |testimonial|
      li
        = image_tag "/images/accueil/#{testimonial.picture}"
        p
          span = testimonial.name
          ' ,
          span = testimonial.age
          ' ,
          span = testimonial.town
        p = testimonial.message

  = partial "partials/call-to-action"

Vous remarquerez l'appel au partial gallery en lui passant une variable contenant les images pour la homepage. Pour les témoignages d'anciens participants, on retrouve une boucle similaire à celle pour afficher les images. On récupère la liste des personnes dans testimonials.yml et on affiche les propriétés qu'on a déclaré.

Intégration de la page camp

La page camp est celle qui contiendra le plus de code puisqu'elle fait peu appel aux fichiers datas. On fait juste attention à envoyer la bonne galerie au partial gallery. En bas de page, on utilise le service cartosm.eu pour ajouter une carte OpenStreetMap.

/ camp.html.slim
---
title: "Un camp en pleine nature dans les Pyrénées Ariégeoises"
title_seo: "No Wifi Summercamp, camp de vacances en plein nature"
description: "Camp de vacances en pleine nature en Ariège proposant divers types d'hébergements, de la tente, à la yourte en passant par la roulotte."
hero_image: vallee-ariege.jpg
---
div role="main"

  = partial "partials/header"

  h2 Un cadre privilégié
  p Situé sur la commune de Rimont, en Ariège, il faut s’éloigner un peu des routes et des villages pour trouver le camp. Suffisamment proche pour accéder aux activités hors camp et aux commerces mais suffisamment éloigné pour garantir calme et dépaysement.

  p Toute la saison et en fonction des conditions météo, nous proposons des départs randonnées en montagne, à la journée ou en bivouac, des descentes de rivière en canoé ou de l’équitation avec les chevaux du camp.

  p Nous essayons de tendre vers l’autonomie énergétique et alimentaire, les résidents sont encouragés à prendre part à la production d’énergie et à l’entretien de nos jardins en permaculture.

  = image_tag "/images/camp/tente-bivouac.jpg"

  h2 Dedans ou dehors
  p Nous vous proposons différents types d’hébergements, à vous de choisir en fonction de vos envies. Le terrain est vaste et vous trouverez certainement un endroit à l’ombre avec un joli panorama pour planter votre tente.

  p Vous pouvez également profitez de nos dortoirs de 6 ou 8 personnes dans le bâtiment principal ou si vous avez besoin de plus d’intimité de nos roulottes ou de nos yourtes.

  p Au cœur de camp, et proche du bâtiment principal se trouvent la plupart des ateliers auxquels vous pouvez participer. C’est aussi à cet endroit qu’ont lieu les repas en extérieur sous le grand préau ainsi que les veillées nocturnes quotidiennes autour du feu.

  = image_tag "/images/camp/tente-yourte.jpg"

  = partial "partials/gallery", locals: {gallery: data.galleries.camp}

  h2 Comment venir ?
  p Nous sommes situés dans le sud de le France, très proche de la frontière espagnole. Vous avez plusieurs possibilités pour venir nous rejoindre :

  p Par la route : Nous sommes entre les autoroutes A66 et A64, le long de la D117. Vous pouvez nous rejoindre facilement depuis des villes comme Toulouse, Tarbes ou Perpignan.

  p En train : La gare la plus proche est celle de Varhile. Nous organisons des navettes le week-end pour aller chercher ou reconduire nos résidents.

  p En avion : Les aéroports les plus proches sont ceux de Toulouse ou de Perpignan.

  <iframe width="400" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://cartosm.eu/map?lon=1.2840194354718&lat=42.985386332963&zoom=14&width=400&height=350&mark=true&nav=true&pan=true&zb=inout&style=default&icon=down"></iframe>

  = partial "partials/call-to-action"

Intégration des pages équipe et activités.

Ces deux pages vont avoir un code similaire puisqu'on va simplement faire une boucle pour afficher dans l'une tous les membres de l'équipe et dans l'autre toutes les activités.

/ equipe.html.slim
---
title: "Une équipe merveilleuse pour vous encadrer, vous divertir"
title_seo: "L'équipe merveilleuse du No Wifi Summercamp dans les Pyrénées Ariégeoises"
description: "Lors de votre séjour dans le camp de vacances, vous ferez la connaissance de notre équipe chargée de vous encadrer et de vous divertir."
hero_image: equipe-saut.jpg
---
div role="main"

  = partial "partials/header"

  ul
    - data.members.each do |member|
      li
        h2 = member.name
        = image_tag "/images/equipe/#{member.picture}"
        p = member.description

  = partial "partials/call-to-action"
/ activites.html.slim
---
title: "De nombreuses activités à partager sur le camp et aux alentours"
title_seo: "Activités de plein air au No Wifi Summercamp dans les Pyrénées Ariégeoises"
description: "Découvrez les nombreuses activités du camp : randonnée, équitation, canoé, rafting, lutherie, poterie, escalade..."
hero_image: activites.jpg
---
div role="main"

  = partial "partials/header"

  ul
    - data.activities.each do |activity|
      li
        h2 = activity.name
        = image_tag "/images/activites/#{activity.picture}"
        p = activity.description

  = partial "partials/call-to-action"

Intégration de la page réservation

La page réservation contient un formulaire qui sera chargé de nous envoyer un email avec les informations entrées par le visiteur. Le problème avec notre site statique c'est que nous n'avons pas de moyen de traiter le formulaire côté serveur. Plusieurs possibilités s'offrent à nous pour palier à ce problème, pour le tutoriel, nous allons voir comment intégrer rapidement et simplement un service tiers qui fera tout le travail pour nous : getsimpleform

Getsimpleform.com

Ce service web gratuit permet de traiter le formulaire pour vous et de vous mailer son contenu. Il existe différents services similaires, certains permettant de créer directement des formulaires complexes dans leur application. Getsimpleform fait uniquement le traitement, vous codez votre formulaire vous même, dans votre page, ce qui évite de l'appeler via une iframe ou en Javascript.

Si vous ne voulez pas passer par un tiers, vous pouvez facilement copier Getsimpleform sur Heroku, jetez un œil sur ces dépôts : fwdform et middleman-contact-form.

Se créer un compte sur Getsimpleform est très simple, aller sur le site, entrez l'email de réception et il vous donne un exemple de code de formulaire contenant votre token de sécurité, c'est cette partie qui sera utile dans notre formulaire.

/ reservation.html.slim
---
title: "Réservez votre séjour"
title_seo: "Réservation de séjour, No Wifi Summercamp"
description: "Réserver votre séjour au No Wifi Summercamp"
hero_image: randonneurs.jpg
---
div role="main"

  = partial "partials/header"

  p Pour réserver votre séjour, c’est très simple, remplissez le  formulaire ci dessous et nous vous enverrons rapidement une documentation avec les tarifs et les disponibilités.

  p Vous pouvez également nous joindre par téléphone au 02 86 54 96 30

  = form_tag "https://getsimpleform.com/messages?form_api_token=votre_token_simpleform", method: "post" do

    input type="hidden" name="redirect_to" value="http://nowifisummercamp.github.io/merci.html"

    - field_set_tag do

      p 
        = label_tag :nom
        = text_field_tag :nom, placeholder: "Dujardin"

      p
        = label_tag :prenom
        = text_field_tag :prenom, placeholder: "Pierre"

      p
        = label_tag :email
        = text_field_tag :email, placeholder: "pierredujardin@monemail.fr"

      p 
        = label_tag :telephone
        = telephone_field_tag :telephone, placeholder: "06 12 34 56 78"

      p
        = label_tag :message
        = text_area_tag :message, placeholder: "Quelques lignes pour nous demander ce que vous voulez."

      p
        = submit_tag "envoyer mon message"

Le formulaire utilise les form helpers de middleman, qui rendent la syntaxe beaucoup plus lisible. Dans le form_tag, on place le bout de code fournit par Getsimpleform avec notre token. On voit ensuite un champ input caché qui va nous permettre de faire une redirection après l'envoi du formulaire. Cela va juste nous permettre de signaler au visiteur que le message à bien été envoyé.

On peut tout de suite tester si cela fonctionne en remplissant le formulaire.

Cette solution est simple mais reste assez basique, pas de validation des données envoyées, redirection qui utilise une page pour un simple message, pas d'anti-spam, autant de choses qui pourront faire l'objet d'améliorations.

Retrouvez tous les fichiers de cette partie dans ce gist pour faciliter le copier/coller.

Nos pages sont terminées, l’absence de CSS les font apparaitre très dépouillées pour le moment mais on y vient rapidement. Juste après la partie blog que l'on va ajouter dans la partie suivante du tutoriel.

Article précédent : Tutoriel Middleman, utiliser les layouts et partials
Article suivant : Tutoriel Middleman, ajouter un blog

Je suis disponible pour des missions longues / CDD / CDI Cliquez pour en savoir plus