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 ?
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
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
Principes et architectures
WIS 1 / Pilotage d'une page web via une BDD
- 716