DY

DelahayeYourself

modules / LP Web Dynamique /

TP07: Jurassic Park

InGen

La société InGen; spécialisée dans la création de créatures préhistoriques génétiquement modifiées; souhaite créer un site pour son dernier projet.

IngenLogo

La majeure partie de son activité consiste à faire naı̂tre des dinosaures et à les présenter au sein de Jurassic Park. John Hammond, le PDG de l'entreprise InGen, travaille à la création d'un parc d'attractions sur Isla Nublar, une île qu'il possède au large du Costa Rica. Le parc comporte des animaux disparus tels que les dinosaures, comme attractions. Les créatures ont été clonés dans des installations spéciales à proximité sur Isla Sorna et amenés au parc.

Énoncé

Le but de ce TP est de contrôler votre acquisition de connaissances par un simple exercice. Il convient de mettre en application les notions vues en cours et durant les TPs précédents.

En appliquant les notions vues sur Python, pipenv, Flask, Jinja et requests durant les TPs du module de développement web dynamique, vous réaliserez un site web basique présentant les différents dinosaures du parc. Les données vous sont pour cela fournit via l'API REST suivante API Dinosaurs.

Résultat attendu

Page d'accueil listant l'ensemble des dinosaures

Page de détails sur un dinosaure

Quelques conseils ?

Quelques templates ?

Voici le fichier base.html

<!DOCTYPE html>
<html>
    <head>
        <title>{%block title %}{% endblock %}Jurassic Park</title>
        <meta charset="utf8" />
        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/reset.css') }}" />
        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/style.css') }}" />
        <link href="https://fonts.googleapis.com/css?family=Montserrat|Staatliches" rel="stylesheet"> 
    </head>
    <body>
        <header>
            <a href="/">
                Jurassic Park
            </a>
            <nav>
                <a href="/">Home</a>
            </nav>
        </header>
        <main>
            {% block main %}{% endblock %}
        </main>
        <footer>
            <img src="{{ url_for('static', filename='img/logojp.png') }}" alt="Jurassic Park" />
        </footer>
    </body>
</html>

Et le template HTML pour la liste des dinosaures:

<!-- Héritage de template ? Block(s) ? -->
<section>
    <h2>The world of Jurassic Park</h2>

    <!-- iterate here ? -->
        <a href="">
            <figure>
                <img src="" alt="" />
                <figcaption>Discover the Brachiosaurus</figcaption>
            </figure>
        </a>
</section>

Ainsi que le template d'un dinosaure:

<!-- Héritage de template ? Block(s) ? -->
<div class="grid">
    <article>
        <h2>Discover the Brachiosaurus</h2>

        <div class="description">
            Lorem ispum
        </div>

        <div class="card">
            <img src="" alt="" />
            <dl>
                <dt>Name</dt>
                <dd>Brachiosaurus</dd>
                <dt>Name meaning</dt>
                <dd>Brachiosaurus</dd>
                <dt>Diet</dt>
                <dd>Brachiosaurus</dd>
                <dt>Height</dt>
                <dd>Brachiosaurus m.</dd>
                <dt>Length</dt>
                <dd>Brachiosaurus m.</dd>
                <dt>Weight</dt>
                <dd>Brachiosaurus kg.</dd>
            </dl>
        </div>
    </article>

    <aside>
        <h3>Top rated dinosaurs</h3>
        <!-- iterate here ? -->
            <a href="">
                <figure>
                    <img src="" alt="" />
                    <figcaption>Discover the Brachiosaurus</figcaption>
                </figure>
            </a>
    </aside>
</div>