08 Jurassic Park ~ Flight Php ~ DelahayeYourself

08 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. Cet exercice sera réalisé et noté durant la séance de cours.

En appliquant les notions vues sur PHP, composer, les frameworks, etc. durant les TPs du module de développement web, 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.

Création de deux pages différentes (accueil et détails sur un dinosaure),
Mise en oeuvre du TDD (Test Driven Development),
Versionning sous Git (pensez à versionner votre projet au fur et à mesure de votre avancé),
Les données sont disponibles via l'API Dinosaurs,
Les fichiers css, d'images, etc. sont disponibles ici,
Les templates HTML vous sont fournis dans la suite de cet énoncé,
Quelques conseils également,
Vous devrez rendre pour la fin de l'heure l'url de votre dépôt Git (pensez à le passer en public après la fin du TP) via l'ent de l'iut.

Résultat attendu

Page d'accueil listant l'ensemble des dinosaures

L'url de cette page devra être la racine de votre site (/),
Les données seront récupérer depuis l'API Dinosaurs.

Page de détails sur un dinosaure

L'url de cette page devra être sous la forme /dinosaur/<slug du dinosaure>/ (où le slug correspond au slug retourné par l'API Dinosaurs);
Les données d'un seul dinosaure peuvent être récupérées via l'API Dinosaurs, par exemple https://medusa.delahayeyourself.info/api/dinosaurs/brachiosaurus permet de récupérer les informations du brachiosaure;
Les « Top Rated Dinosaurs » sont une récupération aléatoire de trois dinosaures parmis les septs retournées par l'API Dinosaurs, l'utilisation de la fonction PHP array_rand vous est vivement conseillé.

Quelques conseils ?

Créer d'abord votre projet sous Gitlab et pensez directement à le cloner;
Récupérer les fichiers d'assets et placer les dans un répertoire assets à la racine de votre projet;
Penser à faire un composer require de toutes les libs;
L'approche TDD vous aidera grandement, quelles sont les fonctions que je vais devoir développer et les T.U associés, les pages et les T.I associées;
Avancer par étape, d'abord la récupération de tous les dinosaures (test ?) puis la page d'accueil, puis la page de détail et enfin les « Top Rated Dinosaurs »;
Respirer c'est important;
Aller c'est cadeau un petit exemple de la fonction array_rand (par contre la grande question demeure .. comment recréer un tableau à partir des clés d'un autre tableau ?):

<?php
$colors = array("red","green","blue","yellow","brown");
$random_keys = array_rand($colors, 3); // On récupére trois clés aléatoires
echo $colors[$random_keys[0]];
echo $colors[$random_keys[1]];
echo $colors[$random_keys[2]];
?>

Quelques templates ?

Voici le fichier base.twig

<!DOCTYPE html>
<html>
    <head>
        <title>{%block title %}{% endblock %}Jurassic Park</title>
        <meta charset="utf8" />
        <link rel="stylesheet" type="text/css" href="/assets/css/reset.css" />
        <link rel="stylesheet" type="text/css" href="/assets/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="/assets/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>