Énoncé 1 : Création de l’environnement

Introduction

Durée

2 heures 05

Mots-clés

Environnement de développement, distribution, serveur web, HTML, JavaScript, CSS, JSON

Objectifs

La création de l’environnement de développement est le point de départ de cette série de TP : réussir l’installation de l’environnement AMP (pour Apache, MySQL, PHP, ces composants sont distribués avec WampServer), configurer l’environnement de développement intégré. Ensuite, démarrer la construction du site et réaliser ses premières lignes en PHP !

Prérequis

Pour valider les prérequis nécessaires, avant d’aborder le TP, répondez aux questions ci-après :

1.	Quels sont les services à installer pour faire fonctionner des sites web PHP ?
	a.	Un serveur web HTTP type Apache
	b.	Un serveur d’applications Tomcat
	c.	Un serveur de base de données Oracle
	d.	Un serveur Linux
2.	Sur quels OS s’exécute PHP ?
	a.	Sur Linux
	b.	Sur Windows
	c.	Sur Android et iOS
	d.	Sur l’OS du navigateur
3.	Quelle est la syntaxe pour insérer du code PHP dans une page ?
	a.	{$ }
	b.	<%echo %>
	c.	<?php ?>
4.	Quelle est l’URL pour atteindre la page PHP appelée index et située à la racine du serveur web local ?
	a.	http://local/index
	b.	http://localhost/index.php
	c.	php://localhost@index
5.	Comment rattacher à une page HTML 5 une feuille de style CSS ?
	a.	À l’aide d’une balise <stylesheet>
	b.	Avec une balise <link rel="css">
	c.	Avec une balise <link rel="stylesheet">
	d.	Avec un tag <css>
6.	Parmi les propositions suivantes, quelle syntaxe est valide pour injecter du code JavaScript présent dans une bibliothèque util.js ?
	a.	<script url="util.js"/>
	b.	<script>util.js</script>
	c.	<script source="util.js" />
	d.	<script src="util.js"></script>

Énoncé 1.1 L’environnement de développement

Durée estimative : 30 minutes

Le développement de sites web PHP requiert l’installation de plusieurs services indispensables tels que le moteur Zend ou le serveur web. Il est également recommandé d’utiliser un environnement de développement intégré pour faciliter la saisie du code source, le débogage, les tests et l’archivage du projet.

Pour faciliter l’installation de l’environnement de développement, les TP de cet ouvrage ont été réalisés avec WampServer, une distribution gratuite qui rassemble notamment Apache, PHP, MySQL et phpMyAdmin. Bien entendu, il est tout à fait possible de procéder à l’installation séparée des composants, sous différents OS tels que Windows ou Linux.

Téléchargez la distribution d’Eclipse PHP Development Tools, puis décompressez l’archive dans un répertoire ad-hoc.

Créez un raccourci vers l’exécutable Eclipse (soit eclipse.exe sous Windows). Lancez l’application et confirmez la création du workspace.

Sous Windows, téléchargez et installez WampServer. Choisissez comme racine du serveur web C:\wamp64\www.

Sous Linux, installez Apache, PHP, MySQL et phpMyAdmin.

Inspectez le fichier de configuration...

Énoncé 1.2 Structure du site

Durée estimative : 30 minutes

Les étapes de ce TP consistent à mettre en place les répertoires du site sur lequel les autres exercices vont s’articuler. Des pages de test serviront à vérifier la bonne installation de cette base.

Créez le projet PHP nommé teamup dont le répertoire source coïncide avec la racine d’un répertoire virtuel Apache.

Cette consigne correspond à la fin du TP précédent.

Créez une page web index.php avec un message de bienvenue. Vérifiez dans un navigateur que l’accès à la page est fonctionnel.

L’URL doit ressembler à http://localhost/teamup/index.php.

Depuis Eclipse, créez dans le projet un dossier comfpl dans lequel seront copiés les fichiers sources du framework FPL (le framework PHP Léger est mis en œuvre et étudié dans cet ouvrage).

Depuis Eclipse, créez dans le projet un dossier application dans lequel seront implémentées les pages du site teamup.

Créez dans le dossier application une page index.php affichant un message de bienvenue.

Modifiez la page index.php située à la racine du projet pour effectuer une redirection vers la page application/index.php à l’aide de la fonction PHP header().

Lancez le navigateur...

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

Durée estimative : 20 minutes

La présentation du site Team Up est harmonisée à l’aide de modèles de page qui définissent les feuilles de style, la position du menu, les bibliothèques de scripts… Cet exercice utilise des bundles (jeux de scripts et de CSS), c’est un premier pas dans l’utilisation du framework FPL.

Ajoutez une page _layout.php dans le répertoire application/views et recopiez-y le contenu de la page index.php.

Modifiez la page index.php, effacez tout son contenu, et incluez à l’aide d’une instruction PHP la page _layout.php. Vérifiez que le rendu de la page index.php reste inchangé dans le navigateur.

Ouvrez le fichier config.php et analysez la constitution du bundle $bootstrap. Combien de CSS et de scripts sont référencés dans ce bundle ?

Modifiez index.php de façon à inclure une seule fois le fichier config.php.

Modifiez l’en-tête de _layout.php de façon à appeler les CSS et les scripts du bundle $bootstrap.

Utilisez les commandes FPLGlobal::render_bundle_css() et FPLGlobal::render_bundle_script().

Contrôlez le rendu de la page index.php dans le navigateur.

Récupérez dans les sources en téléchargement le contenu...

Énoncé 1.4 Ajouter un menu défini en JSON

Durée estimative : 15 minutes

JSON (JavaScript Object Notation) s’est imposé comme format d’échange de données et de configuration. Il est moins verbeux que XML et également plus facile à décoder. Ce court TP illustre comment utiliser JSON pour un menu.

Créez un projet PHP chapitre1_utils ainsi qu’un fichier PHP menu-util.php. Depuis le projet teamup, ouvrez le fichier phpinclude/navbar.php et recopiez l’extrait de code définissant le menu $menu dans menu-util.php.

Utilisez la commande PHP json_encode pour afficher le tableau $menu encodé au format JSON.

Reportez le flux JSON dans le fichier phpinclude/menu.json.

Modifiez navbar.php pour initialiser $menu à partir du fichier menu.json. Vérifiez que le menu s’affiche bien dans le navigateur.

Analysez le code de navbar.php et identifiez l’extrait de code qui génère le menu sous forme de balises HTML à partir du tableau $menu.

Énoncé 1.5 Enregistrer le profil utilisateur

Durée estimative : 20 minutes

Les utilisateurs de Team Up peuvent choisir entre plusieurs présentations du site. Les coloris et les images sont déclinés dans des thèmes. Cet exercice permet à l’utilisateur de choisir le thème à appliquer. Ce choix fait partie du profil utilisateur, lequel est mémorisé sous la forme d’un cookie.

Dans navbar.php, à droite de la zone de recherche, ajoutez un formulaire qui comprend une liste déroulante lst_theme contenant les valeurs Thème|0, Clair|1 et Foncé|2.

Définissez l’action du formulaire sur index.php et la méthode sur POST. Utilisez l’événement JavaScript onchange pour déclencher la soumission du formulaire.

À l’aide d’un script PHP dans la page index.php, testez si la requête HTTP est un POST. Si c’est bien un POST, récupérez la sélection de la liste dans la variable $theme. Vous devez émettre un cookie appelé user_profile expirant après 1 heure (pour tester) et qui indique le thème défini par l’utilisateur.

En dehors de la condition POST, récupérez le cookie appelé user_profile. Si la valeur est définie, initialisez la variable $theme à partir de ce cookie....

Énoncé 1.6 Appliquer le thème graphique selon le profil

Durée estimative : 10 minutes

Dupliquez le thème default sous la forme d’un dossier fonce.

Dans la page index.php, modifiez la variable FPLG::$theme en fonction de la variable $theme.

Modifiez la couleur de fond du bandeau supérieur dans la feuille de style master.css.

Vérifiez que le thème s’applique bien dans le navigateur.