PILOTAGE D'UNE PAGE WEB VIA UNE BASE DE DONNÉES

PRINCIPES et architectures

Stéphane WOUTERS
https://stephanewouters.fr/

Quels sont les langages pour créer une page web ?

https://www.wooclap.com/NUAGELANGAGES

LE NAVIGATEUR ne "comprend" que 3 langages :

  • HTML
  • CSS
  • Javascript

Les autres langages sont toujours transformés dans l'un des 3 langages :

  • PHP, NodeJS, ...                ->           HTML
  • SAAS, Less...                      ->           CSS
  • TypeScript, Angular...     ->           Javascript

SITE WEB DYNAMIQUE

VS.

SITE WEB STATIQUE

SITE WEB STATIQUE

Le site web statique est développé avec les langages de bases : HTML, CSS, Javascript

Pas de PHP, NodeJS, framework...

On dit qu'il est "statique" quand le contenu du site web est le même à tout instant

Le développeur doit modifier lui même le code

source HTML pour modifier le contenu du site web

Exemple : https://stephanewouters.fr/

Quand je veux ajouter un nouveau cours, je dois modifier le code HTML

SITE WEB dynamique

Le code source HTML est généré dynamiquement
à chaque nouvel affichage de la page.
Il peut changer selon l’utilisateur connecté, les préférences…

Exemples (la plupart des sites web...) :

Sites e-commerce, CMS (wordpress), application complexe...

Attention : Des animations visuelles sur un site web ne le définissent pas comme "dynamique"

Exemples de composants dynamiques : Des news, des articles, des produits...

Comment "dynamiser"
un site web ?

dynamiser un site web

Il faut utiliser un langage de programmation côté serveur qui "génère" la page

Son utilisation va plus loin que l’HTML : Déclaration de variables, de fonctions, possibilité d’appeler des API...

Dans ce cours, on se concentrera sur PHP

COMMENT FONCTIONNE PHP

<code html>
<code php>
<code html>
<code html>
<code html>
<code html>

PHP interprète le code PHP et le transforme en HTML

à CHAQUE demande de la page web

fichier .php

fichier .html

<p>

Cette ligne a été écrite entièrement en HTML <br />

<?php echo "Celle-ci a été écrite entièrement en PHP."; ?>

</p>
<p>

Cette ligne a été écrite entièrement en HTML <br />

Celle-ci a été écrite entièrement en PHP.

</p>

Exemple de code PHP

Résultat envoyé au visiteur

COMMENT FONCTIONNE PHP

Salut, je veux voir la page "produits"

PHP génère le code HTML de la page "produit"

Voici la page "produits"

Mais où PHP va chercher les produits ?

BASE DE DONNÉES

BASE DE DONNÉES

Quand on développe un site web dynamique, on peut avoir besoin de stocker des données de manière persistante dans une base de données.


Stocker les comptes utilisateurs, le contenu du site internet (CMS), les produits d’un site e-commerce…

Cette base de données s'interroge avec le langage de programmation serveur.

Définition

Ensemble de données numériques qui possède une structure ; dont l'organisation répond à une logique systématique. On parlera de modèle logique de données pour décrire cette structure.

Base de données

Un site E-cOMMERCE

Base de données

Code HTML généré

Types de bases de données

  • Fichier "plat"
    • Fichier Texte
    • Fichier CSV
  • Plus poussé : un SGBD (système de gestion de BD) :
    • Base de données Microsoft Access
    • Base de données relationnelle (MySql, Oracle, PostgreSQL, …)
    • Base de données No-sql (Mongodb, ...)
    • ...

Quelques types de base de données :

On choisit le type de base de données qui correspond le mieux au besoin.
Chacun a ses avantages et ses inconvénients

FICHIER TEXTE PLAT

Ce sont de simples fichiers textes qu’on modifie avec son propre éditeur de texte

Méthode utilisée naïvement quand on ne connaît pas de SGBD
​
Pas de structuration de données imposée. On structure soi même les données :

"La première ligne c'est le nom de mon produit, la deuxième c'est son prix"

Fichier CSV (excel)

Ficher le plus compréhensible par des non-développeurs


On peut l’ouvrir et le manipuler avec des logiciels déjà connus :
Microsoft Excel par exemple


Inconvénients :

  • Mono entité. Un fichier par entité ? Pénible pour faire des liens (relier des produits à des clients par exemple)
  • Lecture / écriture lente (en cas de milliers d’opérations)

MICROSOFT ACCESS

Il est compris dans la suite Microsoft Office

C’est une sorte d’excel amélioré pour gérer des bases de données

Il offre une interface officielle pour structurer et lire la donnée

On crée le “logiciel utilisateur” sur Microsoft Access :
Formulaires, listes, graphiques…

On diffuse le fichier “bdd.access” à tous les utilisateurs pour qu’ils manipulent la BD

Problématiques de synchronisation, concurrence…
Peu de liberté pour créer une interface agréable

SGBD

SGBD relationnel
S'interroge avec un langage : Le langage SQL

Le plus utilisé pour le développement d’application en entreprise
On développe le logiciel/site web dans le langage de notre choix.
Pour un site web, on pourra utiliser PHP

Exemples de SGBD relationnel :

Base de données orientée documents
SGBD moderne montant en popularité

NOSQL

Exemple :

Créer une page web en PHP qui exploite une base de données constituée de fichiers

EXERCICE

shorturl.at/axW36

Mise en page avec PHP

<h1>Liste de articles</h1>

<div>
  <h2>Article 1</h2>
  <b>Le 13 décembre<b>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Donec et finibus massa, eget posuere nulla.
  </p>
</div>

Écrire l'HTML :

Mise en page avec PHP

<h1><?php echo "Liste de articles"; ?></h1>

<div>
  <h2><?php echo $titre; ?></h2>
  <b><?php echo $date; ?><b>
  <p>
    <?php echo $description ?>
  </p>
</div>

Puis remplacer le contenu par des variables PHP :

"echo" permet d'afficher du texte, ou le contenu d'une variable

Mise en page avec PHP

<?php

$prenom = "Stéphane";

// Affichera "Bonjour Stéphane !"
echo "Bonjour" . $prenom . ' !';

Opérateur de concaténation

Mise en page avec PHP

<h1>Liste de articles</h1>

<div>
   <?php

   echo '<h1>' . $titre . '</h1>';
   echo '<b>' . $date . '</b>';
   echo '<p>' . $description . '</p>';

   ?>
</div>

Autre solution de mise en page avec la concatenation :

Première méthode (la plus simple)

Lire un fichier en PHP

Utiliser la fonction file_get_contents()

<?php

// Je stocke le contenu du fichier "monfichier.txt" dans la variable $contenu_fichier
$contenu_fichier = file_get_contents('./monfichier.txt');

// J'affiche le contenu de la variable sur ma page web
echo $contenu_fichier;

Deuxième possibilité : plus de contrôle

Lire un fichier en PHP

Utiliser les fonctions fopen, fgets, fclose

<?php

// 1. On ouvre le fichier
$fichier = fopen('monfichier.txt', 'r');

// 2. On lit la première ligne du fichier
$ligne = fgets($fichier);

// 3. On ferme le fichier
fclose($fichier);

Il faut appeller la fonction "fgets" autant de fois qu'il y a de lignes dans le fichier

Et si je ne connais pas le nombre de lignes dans mon fichier ?

Il faut créer une boucle :

<?php

// On ouvre le fichier
$fichier = fopen("articles.txt", "r");

// Pour chaque ligne...
while (($ligne = fgets($fichier)) !== false) {
        echo $ligne;
}

// On ferme le fichier
fclose($file);

Lire un fichier CSV

Un fichier CSV représente un tableau.

On sépare les colonnes par un séparateur virgule ","

Nom,Prix
Chocolat au lait,1.20
Chocolat noir et orange,1.20
Caramel au beurre salé,0.80

Lire un fichier CSV en PHP :

<?php

$lignes = array_map('str_getcsv', file('monfichier.csv'));
		
// Pour chaque ligne
foreach ($lignes as $colonnes) {
    // Afficher la première colonne (dans cet exemple le nom du produit)
    echo $colonnes[0];
    // Afficher la deuxième colonne (dans cet exemple le prix)
    echo $colonnes[1];
}

écrire dans un fichier
(.TXT ou .CSV)

Pour ajouter une ligne dans un fichier :

<?php

// Le paramètre FILE_APPEND permet d'ajouter la ligne à la fin du fichier
file_put_contents('monfichier.csv', "Bonjour voici une nouvelle ligne", FILE_APPEND);

Si le fichier n'existe pas, il sera créé

Récupérer le contenu d'un formulaire

Soit le formulaire suivant :

<form action="submit_form.php" method="POST">
  <div>
    <label for="name">Nom du produit</label>
    <input type="text" id="nom_produit" name="nom_produit" placeholder="Nom du produit">
  </div>
  <div>
    <label for="name">Prix du produit</label>
    <input type="text" id="prix" name="prix" placeholder="Prix du produit">
  </div>
  <br>
  <button type="submit">Envoyer</button>
</form>

La valeur de l'attribut "action" permet de rediriger le formulaire vers une page PHP. Ici : "submit_form.php"

Récupérer le contenu d'un formulaire

Côté PHP :

<?php

// Récupére le nom du produit renseigné dans le formulaire
echo $_POST['nom_produit'];

echo $_POST['prix'];

fichier "submit_form.php"

On utilise la variable superglobale $_POST pour récupérer les données du formulaire

Principes et architectures

By doelia

Made with Slides.com

Principes et architectures

WIS 1 / Pilotage d'une page web via une BDD

  • 613

More from doelia