AP3.1: Découverte de la programmation PHP (sites internet)

Transcription

STI2D
Option SIN
Première
AP3.1: Découverte de la programmation
PHP (sites internet)
Informatique
Durée prévue : 4h.
Problématique : découverte de la programmation PHP
Compétences visées
Être capable de mettre en œuvre une page web
simple en PHP
Savoirs associés
Plan de l’étude
Partie 1 : découverte du langage PHP
Partie 2 : gestion d'un petit site de 2 pages en PHP
Partie 3 : application au site de la section STI 2D – SIN
Remarque
Principe, variables et test IF
Inclusion, passage de données, Switch
Un vrai site ! (optionnel)
Logiciels
Notepad++
Mozilla Firefox
Wamp
Matériels
Ordinateur
Mode de distribution
Format numérique
les balises HTML5.pdf
les propriétés CSS3.pdf
Dossier technique associé
Dossier ressource associé
concevez-votre-site-web-avec-php-et-mysql.pdf
Pour utiliser PHP, il faut connaître au préalable les langages HTML et CSS.
Un compte-rendu est à rendre au professeur (sous forme informatique ou papier). La forme
informatique est à privilégier car elle permet d'intégrer les codes des pages réalisées.
Partie 1 : découverte du langage PHP
I. Introduction :
Le langage PHP a été conçu pour créer des sites "vivants" (on parle de sites dynamiques en comparaison aux
sites créés en HTML qui sont dit « statiques »). En effet, HTML n'étant pas un langage de programmation
mais un langage de description, la page html créée est la même quelque soit l'utilisateur. Seul le webmaster
peut modifier les pages du site ce qui n'est pas très pratique quand un site peut être mis à jour régulièrement
et par plusieurs utilisateurs. De plus avec PHP, la page affichée va pouvoir être différente suivant la personne
qui la visualise (par exemple un abonné n'aura pas la même page qu'un non abonné, la langue ne sera peut
être pas la même, …).
A partir du document « concevez-votre-site-web-avec-php-et-mysql.pdf » (lire pages 9, 10 et 11), répondre
aux questions suivantes :
1. Sur internet, les ordinateurs peuvent être classés en 2 catégories. Donner leur nom et expliquer le rôle de
chaque type d'ordinateur.
2. Dans le cas d'un site statique expliquer comment fonctionne la génération de la page web.
3. Dans le cas d'un site statique, compléter le dessin suivant mettant en évidence la génération de la page
web :
4. Dans le cas d'un site web statique, donner le nom du langage utilisé.
5. Dans le cas d'un site dynamique expliquer comment fonctionne la génération de la page web.
6. Dans le cas d'un site dynamique, compléter le dessin suivant mettant en évidence la génération de la page
web :
7. Dans le cas d'un site web dynamique, donner le nom du langage utilisé.
AP3.1_eleves.odt
2/12
II. Transformation de votre ordinateur en serveur local
Le programme qui va transformer votre ordinateur en serveur s'appelle WAMP. Il va installer le serveur
(Apache), la base de donnée (MySql) et tous les éléments permettant de se comporter comme un serveur.
Vous allez créer un répertoire travail que vous appellerez « test_votre nom de famille ». Pour ce faire, ouvrez
l'explorateur Windows et rendez-vous dans le dossier où WAMP a été installé, puis dans le sous-dossier
intitulé www. Créez votre répertoire « test_votre nom de famille » (normalement : c :\wamp\www\ ).
Lancer maintenant le programme WAMP (WampServeur). Si l’icône du
logiciel (dans la barre du bas ou cliquer sur l’icône « afficher les icônes
cachées ») est verte cela signifie que tout fonctionne.
Si ce n'est pas le cas, cliquer (clic de gauche) sur l’icône du logiciel et lancer
les application (« start all » service ou
« démarrer les services »).
Pour vérifier que tout fonctionne, dans la barre d'adresse de Mozilla tapez « http://localhost/ ». La fenêtre de
gestion de notre serveur local doit apparaître ainsi que votre dossier de travail (rubrique « vos projets »).
III. Premiers programmes en PHP
Nous allons utiliser à nouveau l'éditeur Nodepad++. Il faudra choisir le type de fichier dans le menu
« Langage » (lettre « P » puis PHP) et ensuite enregistrer notre fichier sous la forme : « nom.php » dans notre
répertoire c:\wamp\www\test_ votre nom de famille\
1. Comment signaler que ce qu'on écrit est en langage php ?
En fait, chaque partie en PHP doit être signalée au serveur. En effet les fichiers .php vont mélanger dans la
joie et la bonne humeur les balises HTML avec son CSS et les instructions PHP. Il faut donc un moyen de
signaler tout ça pour que le serveur sache quoi faire.
L'instruction qui marque le début du PHP est : <?php
L'instruction qui marque la fin du PHP est : ?>
Entre ce 2 marqueurs, tout est en PHP.
2. L'instruction « echo »
Cette instruction permet d'afficher un texte à l'écran. Oui on commence par quelque chose de facile !
Application 1:
Soit la page PHP/Html suivante :
<?php
echo "Ceci est du texte";
?>
Si on le rentre dans Notepad++ on doit obtenir :
AP3.1_eleves.odt
3/12
Taper ce petit programme, nommez-le « essai1.php » et enregistrez le dans votre répertoire de travail sur le
serveur local.
1. Par quels éléments doit-être entouré le texte que l'on veut afficher ?
2. Quel signe de ponctuation termine l'instruction PHP ? Cela vous rappelle-t-il quelque chose ?
Pour l'essayer il faut taper dans l'adresse du navigateur : localhost/test_votre nom de famille/essai1.php
3. Que se passe-t-il ? Est-ce ce que l'on voulait ?
Application 2:
Soit la page PHP/Html suivante:
<!DOCTYPE html PUBLIC>
<html xml:lang="fr" lang="fr">
<head>
<title>Notre première instruction : echo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<h2>Affichage de texte avec PHP</h2>
<p>
<br />
<?php
echo "Ceci est mon texte";
?>
</p>
</body>
</html>
1. Sur le programme précédent entourez avec une première couleur la ou les parties en PHP et dans une
autre couleur la ou les parties en HTML.
Taper ce petit programme, nommez-le « essai1.php » et enregistrez le dans votre répertoire de travail sur le
serveur local.
2. Faire l'essai de la page
3. Que se passe-t-il ? Est-ce ce que l'on voulait ?
4. D'après ce qu'on a dit en début de TP, le serveur crée du HTML à partir du PHP mais le site généré est
totalement en HTML. On va vérifier ça. Quand vous êtes sur la page de votre site « essai1.php » (avec
Mozilla), faites « Ctrl U » (contrôle U) sur le clavier. Une nouvelle fenêtre s'ouvre, elle contient le
code source du fichier envoyé par le serveur. Qu'en pensez-vous ? Y-a-t-il notre instruction PHP
« echo » ?
Intérêt de visualiser le code source (Ctrl U sous Mozilla)
Cette fonction « Ctrl U » est très pratique pour vérifier que le code généré ne contient pas d'erreurs. En effet,
quand on mélange PHP et HTML on s'embrouille vite. Si l'erreur concerne le seul PHP, le site plante et un
AP3.1_eleves.odt
4/12
message d'erreur apparaît mais si c'est dans la partie HTML qu'il y a une erreur on ne le voit pas toujours à la
programmation. Essayons maintenant de faire volontairement une erreur.
5. Reprenez le programme précédant et rajouter une balise <head> après, par exemple, la balise </p>
(c'est bien une erreur car il ne devrait y avoir qu'une seule balise <head>, en début de programme).
Essayer cette version buggée et afficher le code source avec « Ctrl U ».
6. Comment voit-on qu'il y a une erreur ?
3. Mettre des commentaires
Comme dans tout programme informatique il est important de mettre des commentaires dans le code.
En PHP il y a 2 méthodes :
• sur une ligne : // commentaires
• sur plusieurs lignes: /*
*/
Application :
<!DOCTYPE html>
<head>
<title>Notre première instruction : echo</title>
</head>
<body>
<h2>Affichage de texte avec PHP</h2>
<p><br />
<?php
echo "Ceci est mon texte"; // texte à écrire
?>
</p>
<p><br />
<?php
/*
la 2ème partie en PHP est ici
*/
echo "j'ai beaucoup de talent, n'est-ce pas?"; // texte à écrire
?>
</p>
</body>
</html>
1. Entourer dans une première couleur les partie en PHP
2. Entourer ensuite dans une autre couleur les commentaires présents dans le code PHP
3. Copier ce programme dans notepad++. En quelle couleur notepad++ affiche-t-il les commentaires ?
AP3.1_eleves.odt
5/12
4. Les variables et le test IF
Comme PHP est un langage de programmation on va pouvoir se servir de variables. Une variable étant une
information stockée en mémoire, elle n'a pas une grande durée de vie. En PHP, la variable existe tant que la
page est en cours de génération. Dès que la page PHP est générée, toutes les variables sont supprimées de la
mémoire car elles ne servent plus à rien. Ce n'est donc pas un fichier qui reste stocké sur le disque dur mais
une petite information temporaire présente en mémoire vive.
La variable est représentée par son nom précédé du $ et elle peut être du type entier, float, chaîne de
caractère, …..
exemples :
$nom= ''toto'' ; // variable de type chaîne de caractères
$taille = 12,5 ; // variable de type float (flottant)
$numero=3 ; // variable de type Int (entier)
Et comme dans tout langage informatique il y a des structures algorithmiques traditionnelles (structures de
test comme IF ou CASE, boucles WHILE, FOR, ….
Application :
<!DOCTYPE html>
<head>
<title>variables</title>
</head>
<body>
<h2>variables et Affichage d'un texte différent suivant la variable</h2>
<p><br />
<?php
$age = 8;
if ($age <= 12)
{
echo "Salut gamin !, je sais que tu as ";
echo $age;
echo " ans";
}
else {
echo "Bonjour jeune homme !, je sais que tu as ";
echo $age;
echo " ans";
}
?>
</p>
</body>
</html>
1.
2.
3.
4.
Sur le code de la page PHP/Html précédent entourez en couleur la ou les parties en PHP.
Quelle est le nom de la variable PHP utilisée dans la page précédente ?
Soulignez en couleur cette variable PHP.
Sur le code de la page PHP/Html précédent entourez dans une autre couleur la structure IF ...ELSE.
AP3.1_eleves.odt
6/12
5. Copier ce code dans Notepad++, enregistrer le sous le nom essai3.php. Essayez le et décrire ce qui se
passe.
6. Récupérer avec « Ctrl U » le code généré par le serveur. Qu'est-ce que vous en pensez ?
7. Modifier maintenant le code en donnant la valeur 15 à la variable.
8. Essayez le et décrire ce qui se passe.
9. Récupérer avec « Ctrl U » le code généré par le serveur. Qu'est-ce que vous en penser ? Comparez au
précédent.
Partie 2 : gestion d'un petit site de 2 pages en PHP
2.1 Inclusion d'un fichier
La plupart des sites web sont généralement découpés selon le schéma suivant :
Le problème c'est que jusqu'à présent on était obligé de copier sur chaque page
à l'identique l'en-tête, le menu et le pied de page (seule la partie centrale étant
différente sur chaque page).
Cela donnait un code lourd et répétitif sur toutes les pages et si l'on voulait
modifier l'entête il fallait le faire sur toutes les pages du site (imaginez avec un
site de 3000 pages!).
Et bien PHP nous apporte la solution.
Comment faire (exemple pour l'entête) ?
étape 1 : on crée un fichier « entete.php » dans lequel on copie le contenu de
l'entête (en général tout ce qui est compris entres les balises <header> et
</header>, balises incluses si vous voulez).
étape 2 : on écrit : <?php include("entete.php"); ?> dans chaque page à la place du Header.
Application avec un petit site de 2 pages :
Vous allez récupérer le site « site de la partie 2 » sur l'intranet. Le site est composé d'un fichier style.css, d'un
fichier index.php et d'un fichier page1.php
entête
La structure du site est la suivante : (le menu est intégré à l'entête)
étape 1 : créez un nouveau répertoire « site de la partie 2 » dans
votre répertoire de travail. Dans ce répertoire y copier les 3 fichiers
du site.
étape 2 : essayer ce petit site.
étape 3 : créez le fichier « entete.php » comme expliqué
précédemment.
étape 4 : intégrez ce fichier « entete.php » dans vos 2 pages à l'aide
de la fonction Include.
étape 5 : essayez et faites valider par le professeur
AP3.1_eleves.odt
menu
Corps (partie centrale = article)
7/12
2.2 La structure Switch() et la passage des infos avec l'url.
Structure Switch :
cette structure permet de traiter des variables sans enchaîner des IF … ELSE si la variable a beaucoup de
valeurs possibles :
un exemple avec la variable $note :
switch ($note) // on indique sur quelle variable on travaille ici $note
{
case 0: // dans le cas où $note vaut 0
echo "Tu es vraiment un gros Zér0 !!!";
break;
case 10: // etc. etc.
echo "Tu as pile poil la moyenne, c'est un peu juste…";
break;
case 20:
echo "Excellent travail, c'est parfait !";
break;
default:
echo "Désolé, je n'ai pas de message à afficher pour cette note";
}
résultat :
si la note vaut 0, on affiche Tu es vraiment un gros Zér0 !!!
si la note vaut 10, on affiche Tu as pile poil la moyenne, c'est un peu juste…
si la note vaut 20, on affiche Excellent travail, c'est parfait !
Si la note a une autre valeur, on affiche Désolé, je n'ai pas de message à afficher pour cette note
Qu'est-ce qu'une URL ?
Cela signifie Uniform Resource Locator, et cela sert à représenter une adresse sur le web. Toutes les adresses
que vous voyez en haut de votre navigateur, comme http://www.ecolelamache.org, sont des URL.
Une URL pour envoyer des paramètres
Imaginons que votre site s'appelle monsite.com et que vous avez une page PHP intitulée bonjour.php. Pour
accéder à cette page, vous devez aller à l'URL suivante :
Jusque-là, rien de bien nouveau. Ce que je vous propose d'apprendre à faire, c'est d'envoyer des informations
à la page bonjour.php. Pour cela, on va ajouter des informations à la fin de l'URL, comme ceci :
http://www.monsite.com/bonjour.php?nom=Dupont&prenom=Jean
Ce que vous voyez après le point d'interrogation, ce sont des paramètres que l'on envoie à la page PHP. Celleci peut récupérer ces informations dans des variables. Ainsi la variable nom ($nom dans la page PHP) aura
comme contenu Dupont et la variable prenom ($prenom dans la page PHP) aura comme contenu Jean.
Le point d'interrogation sépare le nom de la page PHP des paramètres. Ensuite, ces derniers s'enchaînent
AP3.1_eleves.odt
8/12
selon la forme nom=valeur et sont séparés les uns des autres par le symbole &. La seule limite est la longueur
de l'URL. En général il n'est pas conseillé de dépasser les 256 caractères.
Comment récupérer ces paramètres dans notre page PHP ?
Dans notre exemple, il s'agit de la page bonjour.php. Celle-ci va automatiquement créer une variable de type
array (tableau de valeurs) au nom un peu spécial : $_GET.
Nous avons fait un lien vers bonjour.php?nom=Dupont&prenom=Jean, cela signifie que nous aurons accès
aux variables suivantes :
Nom
Valeur
$_GET['nom']
Dupont
$_GET['prenom']
Jean
Bon maintenant on va mettre tout ça en pratique :
étape 1 : Vous allez créer 4 fichiers (toujours dans le répertoire « site de la partie 2 ») :
« presentation.php », « index2.php », « erreur.php » et « page1b.php » :
index2.php :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<META HTTP-EQUIV="Content-Language" CONTENT="fr-FX">
<title>TP3.1 - partie 2 - PHP</title>
</head>
<body>
<div id="bloc_page">
<section>

<article class="centrer">
<?php
$_GET['page'] = (int) $_GET['page']; // force le type entier pour la variable page
switch ($_GET['page']) //
{
case 0: // dans le cas où $page vaut 0
include("presentation.php");
break;
include("page1b.php");
break;
AP3.1_eleves.odt
9/12
default: include("erreur.php");
}
?>
</article>
</section>
</div> 
</body>
</html>
presentation.php :
<br/><br/>
<h1>1ère STI 2D - option SIN</h1>
<br/>
<h2>ceci est ma page d'accueil</h2><br/>
<p> oui bon il n'y a pas encore grand chose mais ce n'est pas le but</p>
erreur.php :
<br/><br/>
<h1>ERREUR</h1>
<br/>
<h2>La page demandée n'existe pas !!!</h2><br/>
page1b.php :
<br/><br/>
<h1>page 1 de la 1ère STI 2D - option SIN</h1>
<br/>
<h2>ceci est ma page 1. La classe, non?</h2><br/>
<p> oui bon ce n'est pas encore un vrai site car il n'y a pas de contenus!</p>
étape 2 : essayez, en tapant les URL proposées ci-dessous, et expliquez ce qui se passe (analyse du
résultat et explications à partir du fichier « index2.php »):
◦ http://localhost/tests/partie2/index2.php?page=0
◦ http://localhost/tests/partie2/index2.php
étape 3 : amélioration : faites la modification proposée ci-dessous et essayez en tapant comme URL:
http://localhost/tests/partie2/index2.php
Analyser le résultat.
remplacer le fichier « index2.php » par celui-ci :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<META HTTP-EQUIV="Content-Language" CONTENT="fr-FX">
<title>TP3.1 - partie 2 - PHP</title>
</head>
<body>
AP3.1_eleves.odt
10/12
<div id="bloc_page">
<section>

<article class="centrer">
<?php
if (isset($_GET['page'])) // test si la variable page existe
{
$_GET['page'] = (int) $_GET['page']; // force le type entier pour la variable page
switch ($_GET['page']) //
{
break;
include("page1b.php");
break;
default: include("erreur.php");
}
}
else
{
// si la variable n'existe pas (index.php seul par exemple)
}
?>
</article>
</section>
</div> 
</body>
</html>
étape 4 : finalisation du site : rajouter la gestion du menu ci-dessous dans le fichier « index2.php » juste
avant « <section>  ». Essayer
<nav>
<ul>
<li>Menu: </li>
<li><a href="index2.php?page=0" class="texte_nav" >Accueil</a></li>
<li><a href="index2.php?page=1" class="texte_nav">Page 1</a></li>
</ul>
</nav>
AP3.1_eleves.odt
11/12
Partie 3 (bonus): application réelle au site de la section STI 2D – SIN
Cette partie met en œuvre les savoirs vus dans le TP. Elle peut être faite durant la séance si vous en
avez le temps ou à la maison si vous n'avez pas le temps.
Objectif : transformer le site internet HTML de la section STI 2D – option SIN en site PHP
Cahier des charges :
• Les fichiers sources sont disponibles dans l'intranet. Ils sont à mettre dans un répertoire « site STI 2D
SIN ».
• On veut que les différents blocs composant le site (header, footer) ainsi que le contenu de chaque page
(article) soient intégrés aux pages à l'aide de la fonction Include.
• Le passage d'une page à l'autre (à l'aide du menu) se fera avec la variable page (0 pour la page de
présentation, 1 pour la page programme et 2 pour la page projet).
• La page index.php est la page principale.
Un peu d'aide méthodologique:
préambule : pensez à vérifier à chaque modification le code généré par votre page PHP avec la fonction
« CTRL U » de Mozilla pour voir s'il n'y a pas d'erreurs
étape 0 : essayez le site internet (version HTML) pour voir et comprendre son architecture.
étape 1 : retrouvez la structure du site (dessinez les différents blocs et leur arrangement).
étape 2 : intégrez la fonction include aux blocs entete et pied de page. Tester le résultat.
étape 3 : créez 3 fichiers php (presentation, programme et projet) correspondant au contenu des articles
des 3 pages.
étape 4 : mettre en place la gestion du menu et de la variable $page ainsi que la fonction Switch dans la
page d'index. Tester le résultat.
AP3.1_eleves.odt
12/12

AP3.1: Découverte de la programmation PHP (sites internet)

Transcription

Documents pareils

Html 05 - HTML facile - Pagesperso

DUT SRC - Webchronique

echo digitizer

TP2 - Validation HTML

Narcisse et Echo

1- balises du squelette 2-dans le head 3-dans le body 4

Michael Connelly

PHP

VENDS RAQUETTES HEAD

Le langage PHP – 2ème partie