Site avec une base de données en MYSQL

Qu'est-ce qu'une base de données ?

Les variables sont des données éphémères ; les variables simples durent le temps d'affichage du document PHP. les variables de session durent le temps d'une visite d'un site ; les cookies peuvent durer plus longtemps sauf si l'internaute les supprime.

On peut bien sûr stocker de façon permanente dans un fichier texte mais ces données sont en vrac, sans aucune structure ; pour en savoir davantage sur la manipulation des fichiers en PHP

Une base de données relationnelle est un ensembles structuré de données permanentes : plusieurs tables et pour chaque table plusieurs enregistrements. Tous les enregistrements d'une même table ont la même structure.
La base de données est dite relationnelle car deux tables peuvent être reliées entre elles via un champ commun : champ de jointure.

Un site dynamique

Un site adossé à une base de données devient dynamique. En effet l'apparence des pages évolue en fonction des insertions, suppressions et modifications dans la base de données ; mises à jour effectuées par l'administrateur et les utilisateurs autorisés.

SGBD

MySQL
PostgresSQL
Oracle
MS SQL Server
SQLite

MySQL est un SGBDR fort utilisé ; il est libre et gratuit et surtout il est inclus dans le pack WAMP ! Par ailleurs il est contient un outil d'administration très pratique : PHPMyAdmin.
Grâce à cet outil il n'est pas nécessaire d'être un as de SQL pour administrer une base de données ; il suffit d'utiliser les menus de cette interface (menus qui génèrent des requêtes SQL).
SQL (Structured Query Language) est le langage de manipulation des bases de données relationnelles.

Structure d'une base de données

Une base de données a un nom et comprend une ou plusieurs tables.
Un table c'est comme un tableau à double entrées : des lignes et des colonnes.

Imaginons que vous êtes chargé de créer le site pour une association. On vous demande que ce site doit contenir une page "infos".
On vous précise qu'il peut y avoir plusieurs "news" chaque semaine !
Si vous ne voulez pas recourir à une base de données adossée au site, vous devrez modifier plusieurs fois par semaine le code HTML de la page "infos". Ce sera très très fastidieux et de plus la maintenance devra être faite par une personne compétente en HTML & CSS.
Par contre si vous créez un site avec base de données et en particulier une table "infos" il suffira d'ajouter une ligne dans cette table et forcément la page "infos" ayant pour source la table "news" tiendra compte de cet ajout.
Cet ajout à la table "news" pourra être effectué par un administrateur de site même ignorant des standards du web (HTML & CSS); il lui suffira de remplir un formulaire auquel il a accès.
Grâce à une base de données votre site est devenu dynamique !.

Présentation de la table "infos"

Cette table sera un tableau avec 4 colonnes et autant de lignes (ou enregistrements) que d'infos.

ID	date_new	titre	message
1	2035-01-20	convocation AG	Blabla ....
2	2025-02-10	convocation bureau	Blabla ....
3	2025-03-20	compte rendu AG	Blabla ....
4	2025-03-30	compte rendu réunion bureau	Blabla ....

Ci-dessus la table ne comprend que trois lignes (ou 3 enregistrements) car il n'y a pour l'instant que trois "infos".

un numéro unique ou Identifiant (ID)
la date de création de l'info
titre de l'info
le message (contenu de l'info)

Utilisation de PHPMyAdmin

Nous allons utiliser PHPMyAdmin pour créer en local (sur notre ordinateur) une base de données avec la table "news".

PHPMyAdmin est une application écrite en PHP qui permet de gérer une base de données.
Ce programme fait partie du pack Wamp et est aussi proposé par les hébergeurs.
PHPMyAdmin est une interface permettant de générer des requêtes SQL ; il évite donc d'utiliser la console SQL.

Démarrez Wamp puis sélectionnez "PHPMyAdmin"

Premier écran

C'est la page d'accueil de l'application PHPMyAdmin
Pour le champ "utilisateur" il faut saisir "root" et par défaut il n'y a pas de mot de passe.

Deuxième écran

Dans ce deuxième écran vous pouvez attribuer un mot de passe pour se connecter à PHPMyAdmin.
Dans cet écran vous pouvez créer une nouvelle base de données. il suffit de cliquer sur le lien "Nouvelle base de donnée".

Des bases existent déjà dont "MySQL" et "Information_schema". N'y touchez surtout pas car ces bases sont indispensables au bon fonctionnement de l'application PHPMyAdmin.

Créez une nouvelle base et nommez cette dernière test.

Vous voyez que l'on est dans la nouvelle base (test) et cet écran indique que pour le moment cette base est vide de toute table.
L'interface vous propose de créer une table ; Nommez cette table "news" et précisez qu'elle aura 4 colonnes.

Quatrième écran

un nom
un type
une taille éventuellement
d'autres attributs (auto_increment, index, etc.)

La première colonne se nomme ID (comme identifiant). La colonne est de type INT (integer) et j'ai coché A-I (Auto-Increment). Ce qui veut dire qu'à chaque fois qu'un enregistrement sera ajoutée dans la table son champ ID sera rempli automatiquement.
La colonne ID est aussi clé primaire.
Il n'est pas obligatoire de définir une clé primaire dans une table mais c'est fortement conseillé. Comme le champ ID est clé primaire il ne peut y avoir de doublons sur cette colonne ;

La deuxième colonne se nomme "date_new" et est de type date. Elle permet de stocker une date sous la forme AAA-MM-JJ.

Le troisième champ se nomme "titre" et de type varchar. Pour un champ de type varchar il faut préciser la taille. Ici c'est 30. Donc on peut stocker un chaîne ayant 30 caractères maximum. Attention la taille d'un champ de type varchar ne peut dépasser 255.

Donc pour pouvoir stocker un texte long pouvant dépasser 255 caractères il faut il utiliser le type text ; c'est ce que je fais pour le quatrième champ de la table qui se nomme message. C'est bien ce qu'on demande à un identifiant ; qu'il soit unique !

Les différents types de champs MySQL

Nous avons vu les types INT(pour stocker un entier), DATE, VARCHAR et TEXT.

TINYINT pour stocker un petit entier
BIGINT pour stocker un gros entier
DECIMAL pour stocker un réel
TIME pour stocker une heure
DATETIME pour stocker une date et une heure
etc.

Pages d'administration de la base de données

On peut ajouter des lignes (enregistrements) à une table via PHPMyAdmin mais ce n'est pas à la porté de l'internaute lambda et de plus ce serait extrèment dangereux en matière de sécurité des données.

PHPMyAdmin ne doit être utilisé que par l'administrateur du site et pour des tâches exceptionnelles.
Pour les tâches courantes il faut prévoir des interfaces entre l'internaute et la base de données ; concrètment des pages PHP.

L'interface comprendra entre autres une page pour saisir de nouvelles 'news' avec un formulaire de soumission et un script PHP. Le formulaire de soumission, vous connaissez maintenant.

il contrôle la valdité des données soumissionnées (contrôle côté serveur)
il injecte les données validées dans une requête SQL ; la requête crée un nouvel enregistrement dans la table "news".

L'ajout de nouvelles données dans une base pose des problèmes de sécurité aigus. Mais je n'en dis pas plus pour l'instant car c'est prématuré.

Connexion à la base de données

La page destinée à saisir les 'news', comme toutes les pages d'administration, doit comprendre une instruction de connexion à la base.

l'extension MySQL qui ne doit plus être utilsée ; les fonctions sont obsolètes
l'extension MySQLi qui remplace la précédente
L'extension PDO (Php Data Objects) qui est une extension orientée objet et qui permet de se connecter à n'importe quel type de base de données (MYSQL,Oracle, PostGresSQL, etc.)

Nous allons utiliser l'extension PDO !
Pour se connecter à la base de données MYSQL test en local, l'instruction est alors :
$base = new PDO('mysql:host=localhost;dbname=test;charset=utf8', 'root', '');

Cette instruction peut vous paraître étrange si vous n'ètes pas habitué à la POO (Programmation Orientée Objet).
Sachez simplement que PHP est un langage qui autorise la programmation procédurale mais aussi depuis la version 5, la programmation orienté objet.

à une base MYSQL locale (mysql:host)
nommée test
encodage en utf8
login : root
mot de passe : aucun

$base est un objet qui référence la base. On pourra ensuite appliquer à cet objet des méthodes et propriétés.
Attention en PHP la syntaxe est objet->méthode() (alors qu'en JS on utilise la notation pointée).

La page pour afficher les infos : "infos.php"

Attention, la table "infos" a été renommée "news".
Oui, vous verrez plus tard que la structure d'une base n'est pas "gravée dans le marbre". On peut renommer une table, ajouter/supprimer une table, rajouter / supprimer des colonnes d'une table, etc.

Le code

...
<?php
		require("commun.php");
		require("connexion.php"); 
?>
<body><section>
	   	<h1>Les infos du club</h1>
<?php	
	$selection = $bdd->query("SELECT * FROM news ORDER BY id DESC ;") ;
		while($record = $selection->fetch())
		{
			echo "<div>"; 
			$date_new = $record['date_new'];
			$titre = $record['titre'];
			$message = $record['message'];
			echo "<h2>Titre : $titre</h2>";
			echo "<p> info du :  $date_new</p>"; 
			echo "<p>Contenu : $message</p>" ; 
			echo "</div>"; 
		} // fin tant que
?>
<a href ="menu1.php">Retour accueil</a>
</section>
</body></html>
...

Notez les inclusions via la fonction require().
Remarquez l'instruction qui appelle une requête SQL de type sélection :
$selection = $base->query("code de la requête sélection")
Notez la boucle while($record = $selection->fetch()) :
qui permet de boucler tant qu'il y a des enregistrements à traiter.
$record est un 'array' qui correspond à un enregistrement de la sélection.
Je ne commente pas pour le moment la requête SQL SELECT ; il y a tout un chapitre sur les requêtes sélection.
Je ferai simplement remarquer qu'elle est très succincte : SELECT * FROM news ORDER BY id DESC
Les requêtes SQL de type SELECT .

Que contiennent les fichiers d'inclusion ?

Vous avez observé dans le code de la page "info.php" l'inclusion de deux fichiers.

le fichier "commun.php"

<?php
	session_start()
?>
<!DOCTYPE html>
<html lang ='fr'>
<head>
	<title>Ma base</title>
	<meta charset ='utf-8'>
	<meta name="viewport" content="width=device-width, user-scalable=yes" />
	<meta name="robots" content="noindex">
<style>
	body{font-size :18px ; margin :0px ;padding :0px ; }
	section{width : 80% ; margin : 20px auto 20px auto ; background : skyblue ;  }
	div, form {width : 90% ; margin : 10px; border : 1px solid black ; }
	a  {font-size : 120% ; padding-left : 30px ; }
	h3 { width : 80% ; text-align :center ; font-size : 150% ; margin : 10px auto;  }
	h4  {width : 80% ; font-size : 120%; margin : 5px auto; }
	label, input, textarea, button {width : 40% ; height : 30px; margin : 2% ; }
</style>
</head>

Prévoyer toujours l'instruction PHP session_start() afin de pouvoir créer / manipuler si nécesssair des variables de session.
Le fichier "commun.php" contient aussi la feuille de style.

Le fichier "connexion.php"

Il contient l'instruction PHP de connexion à la base de données locale "test".
Cette instruction a déjà été évoquée plus haut ; je n'y reviens pas.

Création de la base de données chez l'hébergeur

Votre base de données fonctionne en local. Il faut maintenant reproduire celle-ci chez l'hébergeur de votre site afin de la rendre publique.
Rassurez-vous, il n'est pas nécessaire de recommencer la même procédure qu'en local ; l'utilitaire PHPMYAdmin va grandement nous aider.

Première étape : produire le script SQL

Il suffit de demander au programme PHPMYAdmin local de générer le script SQL de la base "test".

Dans PHPMyAdmin local, sélectionnez la base "test" puis cliquez sur "exporter".
L'application produit une fichier d'extension .sql que l'on retrouve dans le dossier "téléchargements" de votre ordinateur.

Le script SQL obtenu

une requête pour créer la table "news" (nouveau nom de 'infos')
une requête pour insérer 4 lignes dans cette table (puisque la table 'news' a actuellement 4 enregistrements)

La requête de création de la table "news"

CREATE TABLE `news` 
(
  `id` int(11)AUTO_INCREMENT PRIMARY KEY,
  `date_new` date NOT NULL,
  `titre` varchar(30)NOT NULL,
  `message` text NOT NULL
);

Notez que le champ ID est auto_increment et clé primaire : il ne peut y avoir de doublons dans la colonne "id". Un index est créé sur cette colonne.

Requête pour insérer des lignes dans la table 'news'

Dans la version locale de la base j'avais rempli la table "news" avec sept lignes via l'écran "insertion". Donc le script généré par la commande "export" contient une requête INSERT pour ajouter sept enregistrements. INSERT INTO `news` (`id`, `date_new`, `titre`, `message`) VALUES (1, '2025-10-02', 'Prochaine réunion du bureau ', 'La prochaine réunion du bureau aura lieu le 7 novembre'), (2, '2025-10-05', 'Prochaine AG', 'L\'assemblée générale pour faire le bilan de la saison 2025 \r\naura lieu de 12 novembre'), (3, '2025-10-09', 'Renouvellement du comité', 'Lors de la prochaine AG il faut renouveler le tiers du comité soit \r\n3 membres. \r\nQui est candidat ? '), (4, '2025-10-12', 'Renouvellement du comite - suite ', 'Les candidatures doivent parvenir avant le 7 novembre. \r\nà adresser au pdt.'), (5, '2025-10-15', 'achat d\'un vidéo projecteur ', 'La prochaine AG devra statuer sur l\'achat d\'un vidéo projecteur compte tenu de l\'investissement : 400 €'), (6, '2025-10-20', 'Prochaine AG', 'Seuls les membres à jour de cotisation peuvent participer au vote \r\npour le renouvellement partiel du bureau. '), (7, '2025-10-22', 'tentative malveillante', '<a href ="xvideo.com">Site coquin</a>');

Les requêtes CREATE TABLE & INSERT sont des requêtes de type action.
Pour des explications sur leur syntaxe, un peu de patience ... Les requêtes action.

Deuxième étape : exécuter le script chez l'hébergeur

Souvent l'hébergeur à déjà créé pour votre domaine une base vide. L'hébergeur propose bien sûr l'utilitaire PHPMyadmin.
Il suffit donc d'ouvrir PHPMyAdmin à partir du panneau de configuration de l'hébergeur puis de sélectionner la base existante.
Ensuite il suffit de coller le code de chaque requête dans l'onglet "SQL" de l'interface PHPMyAdmin. N'oubliez pas de cliquer sur le bouton "exécutez".

Etape 3 : adapter le code des pages PHP

Il faut aussi téléverser chez l'hébergeur les pages PHP (et fichiers d'inclusion) qui constituent l'interface entre le visiteur et la base.

Attention la version en ligne du fichier d'inclusion :"connexion.php" sera différente de la version locale.

Rappel : code de ce fichier dans sa version locale était :

	$base = new PDO('mysql:host=localhost;dbname=test;charset=utf8', 'root', '');

Dans la version en ligne le code de "connexion.php" doit devenir :

<?php
try
{
	$bdd = new PDO('mysql:host=... ;dbname=... ;charset=utf8', '... ', '... ');
	// connexion chez one.com
	// j'ai remplacé par des points de suspension les informations sensibles 
}
catch (Exeption $erreur)
{
	die('Erreur : ' .$erreur->getMessage());
}
?>

Vous ne voulez pas que le visiteur voit le mot de passe si une erreur survient. Donc il faut un script qui gère proprement l'erreur (masque des infos sensibles).

Dans le script proposé, PHP essaie d'exécuter l'instruction à l'intérieur du bloc try. Si il y a une erreur (objet PDO mal argumenté) alors PHP exécute l'instruction du bloc catch

Testez vous même !

J'ai installé chez mon hébergeur une base avec deux tables : "news" et "membres".

une page pour lire le contenu de la table "news"
une autre page pour lire le contenu de la table "membres"

La structure et le contenu de la table "membres" vous sera communiquée dans le chapitre suivant.

Je ne vous propose pas de documents PHP pour écrire dans ces tables car je suis du genre prudent ...
Dès que vous autorisez les internautes à écrire dans des tables de votre base vous devez redoubler de vigilance. Il faut empêcher que l'internaute mal intentionné ne puisse injecter du code HTML ou JS malveillant voire du code SQL agressif.
Ces dispositifs de sécurité seront évoqués dans le chapitre sur : les requêtes action

Le rendu

En cliquant sur le lien "Afficher les infos" vous visualisez toutes les "news" mais vous avez du mal à comprendre la date de l'info ; en effet les dates sont au format AAAA MM JJ ; c'est assez déroutant pour un francophone.

La deuxième info est malveillante : insertion d'un lien hypertexte vers un site "coquin".
Heureusement ce code HTML a été rendu non exécutable ; quand vous cliquez dessus rien ne ne passe.

Traduction

Débuter en programmation web - sommaire

Initiation au HTML & CSS

Initiation à PHP & MYSQL

Débuter en programmation web - recherche

L'auteur : Patrick Darcheville