• 20 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Itération 1 : affichage de la liste des articles

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Le but de cette itération est d'écrire la toute première version de notre application web d'exemple. Conformément aux principes de l'agilité, nous commençons par réaliser ce qui apporte le plus de "valeur" à notre CMS : la page d'accueil qui affiche la liste de tous ses articles.

Création de la base de données

Le rôle principal de notre CMS est de gérer des articles. Tous les articles sont sauvegardés dans une base de données relationnelle nommée microcms. Le SGBDR utilisé est MySQL dans notre contexte. Un utilisateur MySQL nommé microcms_user a tous les droits sur la base microcms. Il est utilisé pour se connecter à MySQL depuis notre application web.

Un article est caractérisé par son titre (art_title) et son contenu (art_content). On modélise un article sous la forme d'un enregistrement dans une table nommée t_article. Le champ art_id est la clé primaire de cette table.

Table t_article
Table t_article 

Un premier script database.sql va nous permettre de créer la base microcms qui hébergera toutes nos données persistantes, ainsi que l'utilisateur microcms_user utilisé pour s'y connecter depuis notre code PHP.

create database if not exists microcms character set utf8 collate utf8_unicode_ci;
use microcms;

grant all privileges on microcms.* to 'microcms_user'@'localhost' identified by 'secret';

Voici le script SQL structure.sql qui permet de créer la structure de la base.

drop table if exists t_article;

create table t_article (
art_id integer not null primary key auto_increment,
art_title varchar(100) not null,
art_content varchar(2000) not null
) engine=innodb character set utf8 collate utf8_unicode_ci;

On ajoute dans cette table un petit jeu de données de test contenant quelques articles. Voici le script SQL content.sql associé.

insert into t_article values
(1, 'First article', 'Hi there! This is the very first article.');
insert into t_article values
(2, 'Lorem ipsum', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut hendrerit mauris ac porttitor accumsan. Nunc vitae pulvinar odio, auctor interdum dolor. Aenean sodales dui quis metus iaculis, hendrerit vulputate lorem vestibulum. Suspendisse pulvinar, purus at euismod semper, nulla orci pulvinar massa, ac placerat nisi urna eu tellus. Fusce dapibus rutrum diam et dictum. Sed tellus ipsum, ullamcorper at consectetur vitae, gravida vel sem. Vestibulum pellentesque tortor et elit posuere vulputate. Sed et volutpat nunc. Praesent nec accumsan nisi, in hendrerit nibh. In ipsum mi, fermentum et eleifend eget, eleifend vitae libero. Phasellus in magna tempor diam consequat posuere eu eget urna. Fusce varius nulla dolor, vel semper dui accumsan vitae. Sed eget risus neque.');
insert into t_article values
(3, 'Lorem ipsum in french', "J’en dis autant de ceux qui, par mollesse d’esprit, c’est-à-dire par la crainte de la peine et de la douleur, manquent aux devoirs de la vie. Et il est très facile de rendre raison de ce que j’avance. Car, lorsque nous sommes tout à fait libres, et que rien ne nous empêche de faire ce qui peut nous donner le plus de plaisir, nous pouvons nous livrer entièrement à la volupté et chasser toute sorte de douleur ; mais, dans les temps destinés aux devoirs de la société ou à la nécessité des affaires, souvent il faut faire divorce avec la volupté, et ne se point refuser à la peine. La règle que suit en cela un homme sage, c’est de renoncer à de légères voluptés pour en avoir de plus grandes, et de savoir supporter des douleurs légères pour en éviter de plus fâcheuses.");

Démarrez les serveurs Apache et MySQL, puis importez successivement les scripts database.sql,  structure.sql et content.sql en utilisant votre outil d'administration MySQL favori (phpMyAdmin par exemple). Notre base de données est maintenant prête à être utilisée.

Affichage de la liste des articles

Page d'accueil PHP

À présent, écrivons le fichier source index.php qui affiche la liste de tous les articles. Nous allons travailler directement dans le répertoire servi par votre serveur web local. Son emplacement dépend de votre installation. Voici quelques emplacements possibles :

  • c:\xampp\htdocs avec XAMPP sous Windows.

  • /var/www sous Linux.

  • /Applications/MAMP/htdocs avec MAMP sous Mac.

Créez dans ce répertoire un sous-répertoire nommé MicroCMS qui sera le répertoire racine de notre application web. Déplacez-vous dans ce répertoire puis créez un fichier texte nommé index.php. Ensuite, copiez-collez le code source ci-dessous dans ce fichier.

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <link href="microcms.css" rel="stylesheet" />
    <title>MicroCMS - Home</title>
</head>
<body>
    <header>
        <h1>MicroCMS</h1>
    </header>
    <?php
    $bdd = new PDO('mysql:host=localhost;dbname=microcms;charset=utf8', 'microcms_user', 'secret');
    $articles = $bdd->query('select * from t_article order by art_id desc');
    foreach ($articles as $article): ?>
    <article>
        <h2><?php echo $article['art_title'] ?></h2>
        <p><?php echo $article['art_content'] ?></p>
    </article>
    <?php endforeach ?>
    <footer class="footer">
        <a href="https://github.com/bpesquet/OC-MicroCMS">MicroCMS</a> is a minimalistic CMS built as a showcase for modern PHP development.
    </footer>
</body>
</html>

Ce code source mérite quelques commentaires :

  • Il utilise la norme HTML5 et emploie certaines nouvelles balises, comme <article> ;

  • Il emploie la syntaxe alternative pour la boucle foreach ;

  • Il utilise l'extension PDO de PHP afin d'interagir avec la base de données.

Pour le reste, il s'agit d'un exemple assez classique d'utilisation de PHP pour construire une page dynamique affichée par le navigateur client.

Feuille de style CSS

Afin d'améliorer la présentation, nous utilisons une feuille de style nommée microcms.css.

.footer {
    border-top: 1px solid #ccc;
    padding-top: 10px;
    text-align: center;
}

Créez cette feuille de style dans le même répertoire que le fichier index.php.

Enfin, créez dans le répertoire MicroCMS un sous-répertoire db et copiez-y les trois scripts SQL utilisés plus haut.

Affichage obtenu

Après avoir vérifié que votre serveur web est bien démarré, lancez votre navigateur web favori et tapez l'URL http://localhost/microcms. Vous devez voir s'afficher la liste des articles.

Le code source associé à cette itération est disponible sur une branche du dépôt GitHub.

Bilan

La toute première version (très simpliste) de notre application Web est maintenant opérationnelle. Elle nous a permis d'initialiser la structure de l'application. La prochaine itération consistera à améliorer son architecture.

Exemple de certificat de réussite
Exemple de certificat de réussite