---
title: "Tutoriel - Ajouter du contenu dynamique dans une page web statique générée avec Cecil"
description: "Découvrez comment ajouter un appel vers une API externe depuis votre page web statique"
url: https://docs.ovhcloud.com/fr/guides/web-cloud/web-hosting/static-website-installation-cecil-api-call
lang: fr
lastUpdated: 2023-01-16
---
# Tutoriel - Ajouter du contenu dynamique dans une page web statique générée avec Cecil

## Objectif

Ce tutoriel vous décrit comment utiliser le générateur de site [Cecil](https://cecil.app/fr/) pour afficher le contenu d’une page dynamique. Le tout en appelant une API pour récupérer et afficher des informations sur une page générée via **Cecil**.

**Découvrez comment ajouter un appel vers une API externe depuis votre page web statique.**

:::warning
OVHcloud met à votre disposition des services dont la configuration, la gestion et la responsabilité vous incombent. Il vous revient de ce fait d’en assurer le bon fonctionnement.

Si vous éprouvez des difficultés à suivre les étapes de ce tutoriel, nous vous recommandons de faire appel à un [prestataire spécialisé](https://partner.ovhcloud.com/fr/directory/) . En effet, nous ne serons pas en mesure de vous fournir une assistance. Plus d’informations dans la section [« Aller plus loin »](#go-further) de ce guide.
:::

## Prérequis

- Disposer d’une [offre d’hébergement web OVHcloud](https://www.ovhcloud.com/fr/web-hosting/) incluant un accès SSH. Cet accès permet d’installer, en ligne de commande, une ou plusieurs solutions alternatives à celles proposées par défaut dans nos offres d’hébergement web.
- Être familiarisé à la saisie en ligne de commande.
- Avoir installé et configuré l’application **Cecil** sur votre hébergement (reportez-vous à notre tutoriel sur [l’installation et la configuration de Cecil](/fr/guides/web-cloud/web-hosting/static-website-installation-cecil.md)).

## En pratique

L’exemple choisi consiste à utiliser l’une des API d’un service fournissant des données météorologiques. Ceci en fonction d’une ville saisie par l’utilisateur.

Les étapes sont les suivantes :

- créer une nouvelle page sur Cecil et ajouter cette page au menu du site web ;
- créer un compte et récupérer la clé permettant de faire des requêtes sur l’API météo ;
- modifier le fichier `.md` créé en ajoutant du code HTML ;
- ajouter des `assets` (JavaScript et CSS) ;
- générer et tester la solution.

### Créer une nouvelle page

Préparez votre environnement en vous connectant en SSH sur votre hébergement web et reportez-vous au tutoriel « [Installer et configurer Cecil](/fr/guides/web-cloud/web-hosting/static-website-installation-cecil.md) » pour installer votre application **Cecil** dans un répertoire dédié.

Créez un répertoire et placez-vous dedans :

```bash
mkdir myWebSite
cd myWebSite
```

### Utilisation de l’API OpenWeather

Pour ce tutoriel, nous allons utiliser une API fournie par le site [OpenWeather](https://openweathermap.org/). Elle permet de connaître les informations météorologiques en fonction du nom d’une ville.

Créez un compte sur [https://home.openweathermap.org/users/sign_up](https://home.openweathermap.org/users/sign_up)


Une fois votre compte validé (par envoi d’un e-mail de confirmation), rendez-vous sur le menu « My API keys ». Une clé a été générée par défaut, récupérez-la et conservez-la pour la suite de ce tutoriel.
![Open Weather API key](/images/assets/screens/other/browsers/web-pages/static-website-installation-cecil-api-call01.png)
### Ajout du code HTML

Créez une nouvelle page avec la commande suivante :

```bash
php cecil.phar new:page weather.md
```

Éditez ensuite la page générée :

```bash
nano pages/weather.md
```

Modifiez l’en-tête du fichier pour que la page apparaisse dans le menu :

```
---
title: "Weather"
date: 2022-11-28
published: true
menu: main
---
```

Après l’en-tête, ajoutez le code HTML pour afficher la ville choisie, les températures renvoyées par l’API et un bouton pour changer de paramètre :

```html
---
title: "Weather"
date: 2022-11-28
published: true
menu: main
---
<h1>Weather</h1>
<div>
    <span id="city">Roubaix</span>
    <div id="temperature"><span id="temperatureValue"></span> °C</div>
    <div id="modify">Change city</div>
</div>
```

Générez la page HTML avec la commande suivante :

```bash
php cecil.phar build
```

Vérifiez le résultat dans votre navigateur et cliquez sur le lien « Weather » qui a été ajouté dans le menu principal :

![Test new page](/images/assets/screens/other/browsers/web-pages/static-website-installation-cecil-api-call02.png)
### Ajouter le code JavaScript

Il est impossible d’ajouter une balise `<script>` dans un fichier Markdown. Vous devrez modifier le template fourni par défaut.

#### Modifier le template

Les templates sont disposés dans le répertoire `layouts`. Vous pouvez les visualiser avec la commande suivante :

```bash
ls -la layouts
```

Le fichier contient un répertoire `blog` et un fichier `index.html.twig` :

![layouts directory](/images/assets/screens/other/web-tools/terminal/static-website-installation-cecil-api-call03.png)
Ouvrez le fichier `index.html.twig` :

![Cecil layouts index file](/images/assets/screens/other/web-tools/terminal/static-website-installation-cecil-api-call04.png)
Le fichier fait référence à un template qui n’est pas présent dans le répertoire. Ce fichier (et d’autres) sont en réalité dans le fichier `cecil.phar`. Les extensions `.phar` désignent des archives de fichiers PHP qui sont manipulables sans être décompressées.
Décompressez les fichiers de cette archive pour les rendre visibles :

```bash
php cecil.phar util:extract
```

Affichez à nouveau le contenu du répertoire `layouts` :

![Cecil layouts directory including uncompressed files](/images/assets/screens/other/web-tools/terminal/static-website-installation-cecil-api-call05.png)
Modifiez le template par défaut pour insérer une balise `<script>` qui contiendra le code permettant l’appel à l’API :

```bash
nano layouts/_default/page.html.twig
```

Cette balise et son contenu sont à placer avant la balise fermante `</body>` en bas de page :

```twig
    </footer>
    {%- include 'partials/googleanalytics.js.twig' with {site} only ~%}
    {% block javascript %}
    <script src="{{ asset('script.js', {minify: true}) }}"></script>
    {% endblock %}
  </body>
</html>
```

Quand un ou plusieurs fichiers `assets` sont modifiés, reconstruisez le cache avec la commande suivante :

```bash
php cecil.phar cache:clear:assets
```

Si les modifications ne sont pas effectives sur votre navigateur internet, videz le cache de celui-ci.
Vous pouvez également supprimer les fichiers générés sur votre hébergement web :

```bash
php cecil.phar clear
```

Reconstruisez ensuite votre solution à l’aide de la commande ci-dessous :

```bash
php cecil.phar build
```

#### Ajouter le fichier JavaScript

Les fichiers JavaScript, comme les fichiers CSS, doivent être placés dans le répertoire `assets`. Vous pouvez les organiser dans différents répertoires.

Créez le fichier `script.js` mentionné précédemment à la racine du répertoire `assets` :

```bash
nano assets/script.js
```

Remplacez la valeur de la variable `apiKey` par la clé récupérée précédemment sur le site [OpenWeather](https://openweathermap.org/).

```javascript
let apiKey = '123456789'; // Remplacez cette valeur
let city = 'Roubaix'; // Indiquez ici la ville par défaut qui sera affichée sur la page météo
getTemperature(city);  // Appel de la fonction appelant l'API avec le paramètre 'city'

// Ajout d'un événement sur le click du bouton « Change city »
let button = document.querySelector('#modify');
button.addEventListener('click', () => {
    city = prompt('Choose a city');
    getTemperature(city);
});

// Fonction d'appel à l'API en utilisant un objet XMLHttpRequest pour une requête asynchrone
function getTemperature(city) {
    let url = 'https://api.openweathermap.org/data/2.5/weather?q=' + city + '&appid=' + apiKey + '&units=metric';
    let xhrQuery = new XMLHttpRequest();
    xhrQuery.open('GET', url);
    xhrQuery.responseType = 'json';
    xhrQuery.send();

    xhrQuery.onload = function() {
        if (xhrQuery.readyState === XMLHttpRequest.DONE) {
            if (xhrQuery.status === 200) {
                let city = xhrQuery.response.name;
                let temperature = xhrQuery.response.main.temp;
                document.querySelector('#city').textContent = city;
                document.querySelector('#temperatureValue').textContent = temperature;
            } else {
                alert('A problem has occurred, please come try later.');
            }
        }
    };
}
```

### Tests

Consultez maintenant votre site web via un navigateur Internet :

![Web page with JavaScript running](/images/assets/screens/other/browsers/web-pages/static-website-installation-cecil-api-call06.png)
Cliquez sur « Changez de ville » et saisissez le nom d’une commune :

![Select a new city](/images/assets/screens/other/browsers/web-pages/static-website-installation-cecil-api-call07.png)
![Page updated](/images/assets/screens/other/browsers/web-pages/static-website-installation-cecil-api-call08.png)
### Conclusion

Ce tutoriel vous présente un exemple d’intégration de données dynamiques récupérées sur des sources externes par le biais d’APIs. Construisez et faites vivre un site web en modifiant manuellement le contenu de ces pages ou créez-en de nouvelles. Le tout en enrichissant leur contenu depuis d’autres sites web.

## Aller plus loin

- Quelques API à tester sur votre site web
  - [Numbers API](https://numbersapi.com/#42)
  - [NASA](https://api.nasa.gov/)
  - [News API](https://newsapi.org/)
  - [Polygon.io](https://polygon.io/)
  - une liste d’[API publiques](https://github.com/public-api-lists/public-api-lists)
- Les [commandes Cecil](https://cecil.app/documentation/commands/).

Pour des prestations spécialisées (référencement, développement, etc), contactez les [partenaires OVHcloud](https://partner.ovhcloud.com/fr/directory/).

Si vous souhaitez bénéficier d’une assistance à l’usage et à la configuration de vos solutions OVHcloud, nous vous proposons de consulter nos différentes [offres de support](https://www.ovhcloud.com/fr/support-levels/).

Échangez avec notre [communauté d’utilisateurs](https://community.ovhcloud.com/).