DY

DelahayeYourself

modules / S1103 /

TP13: PHP & HTML

Dans les TPs précédents nous avons découvert PHP, sa syntaxe et ses structures de données. Avant cela nous avions découvert le couple HTML/CSS qui nous permet de créer des pages statiques. Nous allons découvrir dans ce tp comment générer nos pages html grâce à PHP.

Rappel

Comme nous l'avons déjà vu si nous n'encapsulons pas notre code PHP entre les balises <?php et ?> l'interpréteur PHP renverra notre code comme du simple texte. Cela peut être très pratique pour rendre nos pages html dynamiques.

Par exemple:

<p>Nombre d'articles dans votre panier: <?php echo $nb_articles; ?></p>

Quelques données

Dans un fichier data.php créez un tableau arr_articles contenant plusieurs articles:

<?php
    $arr_articles = array();
    $arr_articles[0] = array(
        'title' => 'Useless title',
        'description' => 'Description ..',
        'author' => 'John Doe',
    );

Notre page d'accueil

Nous allons inclure le fichier data.php via l'instruction include dans notre fichier index.php

En utilisant vos connaissances vous pouvez désormais générer l'ensemble d'articles de votre page d'accueil.

Il peut vous être utile de connaître la syntaxe alternative des structures de contrôle en PHP. Le principe est de remplacer l'accolade d'ouverture par deux points (:) et l'accolade de fermeture par endif; , endwhile; , endfor; , endforeach; , ou endswitch; .

Par exemple:

<ul>
    <?php for($i=0; $i<10; $i++): ?>
        <li><?php echo $i; ?></li>
    <?php endfor; ?>
</ul>

L'intéret de cette syntaxe est de rendre votre mélange de PHP et d'HTML plus lisible.

Rappel HTML5

Squelette de base HTML5

<!DOCTYPE html>
<html>
    <head>
        <title>..</title>
        <meta charset='utf-8' />
    </head>
    <body>
        <header>
        </header>
        <main>
        </main>
        <footer>
        </footer>
    </body>
</html>

Squelette de base d'un article en HTML5

<article>
    <h3>..</h3>
    <img src='..' alt='..' />
    <p>..</p>
    <a href='..' title='..'>Lire la suite</a>
</article>