Blog ENI : Toute la veille numérique !
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
  1. Livres et vidéos
  2. PHP et MySQL
  3. Corrigé 1
Extrait - PHP et MySQL Entraînez-vous à développer une application collaborative
Extraits du livre
PHP et MySQL Entraînez-vous à développer une application collaborative Revenir à la page d'achat du livre

Corrigé 1

Prérequis

1.

a.

Pour faire fonctionner un site web, parmi les propositions, seul le serveur web HTTP est indispensable. Si l’on emploie principalement Apache, d’autres solutions sont envisageables comme IIS. En revanche, Tomcat est un serveur d’applications pour faire fonctionner des applications Java. Une base de données n’est pas à proprement parler nécessaire au fonctionnement d’un site web PHP. Enfin, Linux n’est pas le seul OS supportant PHP.

2.

a. et b.

PHP s’exécute sur l’OS du serveur : Windows, Linux, autre Unix… Même si l’on pouvait porter le moteur sous IOS ou Android, cela n’aurait pas grand intérêt, car ce sont des OS clients.

3.

c.

La seule syntaxe correcte est <?php ?>, les deux autres ne sont pas valables pour insérer du PHP.

4.

b.

Une URL indique un protocole (HTTP par exemple), un hôte ou une adresse IP, un chemin et une ressource. La deuxième réponse est donc la seule qui soit valable http://localhost/index.php.

5.

c.

C’est la troisième proposition qui convient. La première ne sert pas à rattacher une feuille de style, mais à définir des directives CSS dans la page web. Les propositions b et d sont fausses.

6.

d.

La dernière proposition est correcte, les autres sont fausses.

Corrigé 1.1 L’environnement de développement

 La distribution est disponible sur le site : https://www.eclipse.org/pdt/

images/C01TP01.png

La machine virtuelle Java (JRE) doit être installée pour qu’Eclipse fonctionne.

 Au lancement, Eclipse demande la confirmation du workspace à utiliser ou créer :

images/C01TP02.png

 Sous Windows, le package d’installation complet se télécharge depuis http://www.wampserver.com/. L’installation est entièrement automatisée.

 Sous Linux (Ubuntu dans notre cas), il faut exécuter les commandes suivantes.

Créez un utilisateur lu (pour lamp user) afin d’exécuter Apache :

sudo adduser lu 

Choisissez un mot de passe pour cet utilisateur lu :

sudo gpassw -a lu sudo 

Installez le serveur web Apache :

sudo apt-get update 
sudo apt-get install apache2 

Installez le serveur de base de données MySQL :

sudo apt-get install mysql-server 

Installez PHP :

sudo apt-get install php libapache2-mod-php 

Installez phpMyAdmin, l’utilitaire de gestion de base de données pour MySQL :

sudo apt-get install phpMyAdmin apache2-utils 

 Le menu principal de WampServer donne facilement accès au fichier php.ini :

images/C01TP04a.png

Sous WampServer, le fichier php.ini est situé dans le répertoire bin du serveur Apache.

images/C01TP04b.png

Cette configuration est spécifique à cet environnement, le fichier php.ini se trouve...

Corrigé 1.2 Structure du site

 Commencez par créer un répertoire virtuel dans Apache, le plus simple étant un dossier sous la racine www (ou htdocs selon la configuration) :

images/C01TP17.png

Utilisez ensuite l’assistant d’Eclipse comme au TP précédent pour installer le projet :

images/C01TP18.png

Utilisez la commande New - PHP File :

images/C01TP19.png

Le script est minimaliste :

<html> 
<head> 
<title>Team up - Index</title> 
</head> 
<body> 
    <h2>Bienvenue dans Team Up</h2> 
</body> 
</html> 

La commande Run As - PHP Web Application (activée par le raccourci-clavier [Alt][Shift] X, W) attend la confirmation de l’URL de la page :

images/C01TP20.png

Eclipse affiche la page web dans une vue de navigateur intégré :

images/C01TP21.png

 Utilisez la commande New - Folder en indiquant le nom du dossier à créer :

images/C01TP22.png

 Voici la structure du projet après création du dossier application :

images/C01TP23.png

 Il est utile d’adapter légèrement le script de la page index située à la racine du projet pour distinguer cette page de celle créée à la deuxième étape :

<html> 
<head> 
<title>Team up - Index</title> 
</head> 
<body> 
   <h2>Bienvenue dans Team Up</h2> 
   <p>Page...

Corrigé 1.3 Intégrer Bootstrap et définir des modèles de page

 Utilisez la commande New - PHP File pour ajouter la page dans le répertoire application/views :

images/C01TP35.png

Le chemin d’inclusion du fichier main.php est inchangé :

<?php require_once '../comfpl/main.php';?><html> 
<head> 
<title>Team up - Index</title> 
<?php require_once 'phpinclude/commonmeta.php';?> 
<?php require_once 'phpinclude/commoncss.php';?> 
<?php require_once 'phpinclude/theme.php';?> 
<?php require_once 'phpinclude/commonscript.php';?> 
</head> 
<body> 
   <?php require_once 'phpinclude/navbar.php';?> 
   <h3>Bienvenue dans Team Up</h3> 
</body> 
</html> 

 Tout le code HTML disparaît, seul demeure l’appel de la page _layout :

<?php require_once 'views/_layout.php';?> 

 Le bundle est un ensemble de CSS et de scripts ; $bootstrap référence les feuilles de style et les bibliothèques JavaScript pour faire fonctionner le framework de présentation Bootstrap.

/* 
    * bundle bootstrap 
    */ 
   $bootstrap = new bundle(); 
   $bootstrap->css_set=array( 
       new cssItemBundle("https://maxcdn.bootstrapcdn.com/bootstrap/
4.0.0/css/bootstrap.min.css"), 
       new cssItemBundle("http://cdn.phpoll.com/css/animate.css"), 
       new cssItemBundle("https://unpkg.com/gijgo@1.9.13/css/
gijgo.min.css"), 
       new cssItemBundle("https://maxcdn.bootstrapcdn.com/
font-awesome/4.7.0/css/font-awesome.min.css") 
        
   ); 
   $bootstrap->script_set=array( 
       new scriptItemBundle("https://code.jquery.com/
jquery-3.3.1.min.js"), 
       new scriptItemBundle("https://unpkg.com/gijgo@1.9.13/js/
gijgo.min.js"), 
       new scriptItemBundle("https://cdnjs.cloudflare.com/ajax/libs/
popper.js/1.14.7/umd/popper.min.js", ...

Corrigé 1.4 Ajouter un menu défini en JSON

 La variable $menu est un tableau indexé (séquentiel) où chaque élément est un tableau associatif.

$menu = array(); 
$menu[0] = array( 
   "route" => "#", 
   "label" => "Accueil", 
   "tag" => "", 
   "icon" => "home" 
); 
$menu[1] = array( 
   "route" => "#", 
   "label" => "Utilisateurs", 
   "tag" => "", 
   "icon" => "avatar" 
); 
$menu[2] = array( 
   "route" => "#", 
   "label" => "Demandes", 
   "tag" => "", 
   "icon" => "collective" 
); 
$menu[3] = array( 
   "route" => "#", 
   "label" => "Agenda", 
   "tag" => "", 
   "icon" => "calendar" 
); 
$menu[4] = array( 
   "route" => "#", 
   "label" => "T&acirc;ches", 
   "tag" =>...

Corrigé 1.5 Enregistrer le profil utilisateur

 Le plus simple est de dupliquer le formulaire de recherche situé à proximité afin de récupérer les attributs de mise en page Bootstrap.

<form class="form-inline my-2 my-lg-0"> 
   <select id="lst_theme" name="lst_theme" class="form-control"> 
   <option value="0">Th&egrave;me</option> 
   <option value="1">Clair</option> 
   <option value="2">Fonc&eacute;</option> 
   </select> 
</form> 
images/C01TP37.png

Les thèmes de présentation sont répertoriés dans la liste déroulante.

 Dans la syntaxe JavaScript, this désigne le contrôle d’entrée, c’est-à-dire la liste déroulante lst_theme.

<form class="form-inline my-2 my-lg-0" action="index.php" method="post"> 
  <select id="lst_theme" name="lst_theme" class="form-control"  
onchange="this.form.submit()"> 

 Le traitement PHP doit précéder l’affichage dans navbar.php. Il s’intercale entre l’inclusion du fichier de configuration et le rendu de la page. Le calcul de la variable $expiration s’appuie sur la fonction PHP time()...

Corrigé 1.6 Pour aller plus loin : appliquer le thème graphique selon le profil

 Utilisez les commandes d’Eclipse Copy et Paste pour dupliquer le dossier default. Indiquez à Eclipse le nom du dossier à créer : fonce.

images/C01TP39.png

 L’instruction à ajouter est on ne peut plus simple, le thème par défaut étant déjà positionné sur default :

if($theme==="2") 
   FPLGlobal::$theme="fonce"; 

 Utiliser un outil graphique comme Paint.NET s’avère pratique pour choisir une couleur et déterminer son code hexadécimal :

.nbar { 
   background-color: #7C83FF; 
} 

 C’est l’étape la plus simple, en clôture de ce chapitre :

images/C01TP40.png