TD 3 : PHP/MySQL - Base de données
Prérequis : TD 1 HTML + TD 2 CSS
Objectif :
- Développer les fonctionnalités en PHP permettant de visualiser les données de la base de données
- Bien comprendre le mécanisme des pages WEB dynamiques.
0. Tests préliminaires d'accès au serveur HEI
Vérification d'une connexion au serveur d'applications (WEB et MySQL)
- Vérifier que votre portable est connecté au Wifi d'HEI
- Vérifier votre accès au site http://10.34.1.75
- Vérifier votre accès à votre espace web personnel : http://10.34.1.75/hxxxxx (hxxxxx est votre login)
- Vérifier votre accès à votre base de données par le lien http://10.34.1.75/phpmyadmin et que vous visualisez correctement votre base de données nommée "hxxxxx"
- Télécharger le logiciel FTP* FileZilla. Ce logiciel FTP* vous permet effectuer le transfert de vos pages web de votre portable vers le serveur.
- Regarder la vidéo de démonstration d'utilisation de FileZilla dans les annexes
On vérifie maintenant que vous pouvez utiliser FileZilla et que PHP est fonctionnel sur le serveur
- Créer la page web suivante (test.php) dans le répertoire "pages"
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<h1>Je suis un fichier de test de fonctionnement du PHP</h1>
<?php
$i = 0 ;
while ($i < 10)
{
echo "<h2>Tirage d'un nombre aléatoire : " . rand(0,100). "</h2>";
$i = $i + 1 ;
}
?>
<p>*********************************************</p>
<?php
echo "<p align='center'>Today is " . date("l d F Y") . "</p>" ;
?>
</body>
</html>
Voir
- Envoyer cette page sur le serveur dans le sous-dossier pages du répertoire html du serveur et tester-la à l'adresse suivante :
http://10.34.1.75/hxxxxx/pages/test.php
(hxxxxx est votre login)
-----------------------------------
*FTP : File Transfer Protocol
1. Création de la base de données du site
Pour éviter toute erreur de création de la base de données du site, nous vous fournissons un fichier qui s'en charge. Il contient les requêtes nécessaires à la création des tables (annonces, categories) et au remplissage des données.
- Télécharger le fichier td_PhpMysql.sql
- Dans phpmyadmin, sélectionner votre base de données
- Cliquer sur l'onglet "Importer" et faire l'import du fichier téléchargé. Vous pouvez également coller le contenu de ce fichier dans la fenêtre d'exécution des requêtes SQL
2. Test de visualisation des annonces (fichier extract.php)
Créer à partir de la page "modèle" dans le répertoire pages, une page nommée extract.php avec les éléments suivants:
- Mettre les éléments minimum PHP pour la connexion au serveur de base de données et la sélection de la base
- Créer la requête d'extraction (SELECT) permettant de récupérer tous les titres des annonces
- Afficher alors le résultat brut dans la page WEB
3. Présentation du résultat dans un tableau
(fichier tableau.php)
Dupliquer la page extract.php en tableau.php. Le but maintenant est de modifier cette nouvelle page WEB pour présenter l'affichage des résultats dans un tableau.
On souhaite maintenant visualiser un résultat plus complet de l'extraction sous forme d'un tableau créé dynamiquement comme celui-ci:
| Catégorie |
Date |
Titre |
Annonce |
| Autre |
2016-10-11 |
Baptême de l'air |
Je vous propose de survoler... |
| Logement |
2016-09-01 |
Cherche Studio quartier Vauban |
Je recherche... |
| ... |
|
... |
... |
| Véhicule |
2015-12-25 |
Pièces de moto Harley |
Harley Sportster custom 1200... |
- Créer la requête permettant d'extraire toutes les annonces (Catégorie, Date, Titre, Annonce) par ordre de catégorie et de titre
- Mettre en forme le résultat de l'extraction sous forme d'un tableau créé dynamiquement (le nombre de lignes du tableau n'est pas connu puisqu'il est fonction du nombre d'annonces dans la base)
Influence des modifications effectuées dans la base de données
- Ajouter directement des annonces dans la base (par le biais de phpmyadmin) et rafraichir la page web pour constater que la page web est bien une page dynamique qui se nourrit de la base de données
La colonne "visible" (booléen) dans la table annonce peut être utilisée pour afficher ou non des annonces suivant la valeur du booléen (vrai/faux).
- Cibler au hasard des annonces de votre choix et modifier le champ "visible" pour avoir un échantillon d'annonces visibles et non visibles
- Créer le sélecteur CSS pour que la page web affiche maintenant les annonces non visibles en couleur orange et en italique.
- Modifier le code PHP pour que le tableau affiche le résultat en tenant compte du caractère visible ou non de l'annonce.
| Catégorie |
Date |
Titre |
Annonce |
| Autre |
2016-10-11 |
Baptême de l'air |
Je vous propose de survoler... |
| Logement |
2016-09-01 |
Cherche Studio quartier Vauban |
Je recherche... |
| ... |
|
... |
... |
| Véhicule |
2015-12-25 |
Pièces de moto Harley |
Harley Sportster custom 1200... |