Le Jacascript est un langage qui est executé par le navigateur, c'est à dire coté client. A contrario, le php est executé sur le serveur, c'est à dire avant que ce dernier renvoie la réponse html de la requête au client.
Pour exécuter du code php, nous avons donc besoin d'installer un serveur virtuel. C'est ce que nous ferons ici à l'aide de easyPHP qui est un Open Source d'utilisation gratuite.
Télécharger l'installateur Devserver ici et lancer l'installation.
Une fois l'installation terminée, rien ne se passe. Il faut pour cela lancer l'executable "C:\Program files\EasyPHP-Devserver-17\run-devserver.exe" 
. Vous pourrez alors ouvrir le dashboard via un click sur l'icone d'easyPHP qui vient d'apparaitre en bas et à droite de votre écran pour accéder au server virtuel comme dans l'image ci dessous.
Après avoir ouvert le dashboard, Vous devez obtenir l'image suivante
Cliquer start au dessous de HTTP SERVER dans le dashboard pour démarrer le serveur virtuel. Pour tester le fonctionnement en server virtuel, on va utiliser le code de test proposé par EasyPHP que vous pouvez reprendre ci-dessous.
Vous pourrez remarquer dans l'exemple ci-dessous que tout code php doit être compris entre les balise "<?php" et ?>. D'autre part, L’instruction "echo" permet d’envoyer un affichage vers la page html. Elle peut évidemment contenir du code html (ici la balise <p>). Le "." sert pour la concaténation des chaines.
exemple 1 :<br>
<?php
echo "<p>la date d'aujourd'hui est le " . date("j - n - Y") . "</p>";
?>
Recopier ce code et sauvegarder le dans le dossier "C:\Program files\EasyPHP-Devserver-17\eds-www" sous le nom par exemple "test.php". Pour executer ce fichier dans votre navigateur, il vous suffira de taper dans l'adresse "localhost/test.php". Le résultat devrait être le suivant.
Le php est un langage de programmation complet orienté objet. Il permet néanmoins de faire des boucles, d'avoir des variables .... Ces derniére seront toujours précédé d'un $ comme dans l'exemple suivant :
exemple 2 :<br>
<?php
echo "<p>la date d'aujourd'hui est le " . date("j - n - Y") . "</p>";
for ($i = 1; $i <= 10; $i++) {
if($i % 2 == 0){
echo $i . " est un nombre pair <br>";
}else{
echo $i . " est un nombre impair <br>";
}
}
?>
Recopier ce code et sauvegarder le dans le dossier "C:\Program files\EasyPHP-Devserver-17\eds-www" sous le nom par exemple "test.php". Pour executer ce fichier dans votre navigateur, il vous suffira de taper dans l'adresse "localhost/test.php". Le résultat devrait être le suivant.
Vous trouverez ci-dessous un dernier exemple avec une boucle "tant que"
exemple 2 :
<?php
echo "<p>la date d'aujourd'hui est le " . date("j - n - Y") . "</p>";
$i = 1 ;
while($i <= 10){
if($i % 2 == 0){
echo $i . " est un nombre pair <br>";
}else{
echo $i . " est un nombre impair <br>";
}
$i = $i + 1 ;
}
?>
Ce dernier exemple donne le même résultat que précedemment.
Vous pouvez maintenant utiliser toutes les fonctions php pour rendre votre site plus intéractif. Il ne faudra pas oublier de fermer votre server virtuel après votre travail en cliquant sur stop au dessous de HTTP SERVER dans le dashboard.
La première fonction que nous allons découvrir est la fonction "include". Elle va nous permettre d'améliorer la maintenance de notre site. Dans un premier temps, nous allons reprendre les fichiers html et css que nous avons vu lors du tutoriel sur le css. Vous pouvez les reprendre ci-dessous et changer l'extension du fichier index.html par index.php pour indiquer au serveur que ce dernier peut contenir du code php
<!DOCTYPE!>
<html>
<head>
<html lang="fr">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Titre de mon site</title>
<link href="css/styles.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class='wrapper'>
<div id='header'>
<h1><a href='index.html'>Formation CSS</a></h1>
<div>Mon premier site internet et patati et patata. Ceci n'a aucun intéret dans cette entête, mais
en mathématiques, un groupe est un magma associatif et unifère dans lequel chaque élément est symétrisable.</div>
</div>
<div id='content'>
<div id='sidebar'>
<ul id='main-nav'>
<li><a href='http://lepoittevin.olivier.free.fr'>Site de Mr Le poittevin</a></li>
<li><a href='écrire.html'>écrire</a></li>
<li><a href='categorie.html'>catégories</a></li>
<li><a href='#' onclick="alert('En cours de construction')">contact</a></li>
</ul>
</div>
<div class='contents'>
<div class="entry">
<p>Amoureux de la prose, jeune vagabond lyrique, qui se découvre et se délie la langue après
deux shots de tequila paf, et se pose en spectacle pour délivrer ses besoins de reconnaissance et de luxure, prenez
place et sortez vos neurones, l’heure est à l’étude.</p>
</div>
<div class="entry">
<p>Tout ça avait pour but d'illustrer le péril du conformisme, et la difficulté de préserver
vos convictions, quoi qu'en pense les autres. [...] Nous avons tous besoin d'être accepté, mais soyez persuadé que vos
convictions sont uniques, les vôtres, même si on les trouve anormales ou impopulaires, même si le troupeau dit « C'est
maaaaaaaaal ».<br> Robert Frost a dit : « Deux routes s'offraient à moi, et là j'ai suivi celle où on n'allait pas, et
j'ai compris toute la différence. »</p>
<p><i>Robin Williams, Le Cercle des poètes disparus (1989), écrit par Tom Schulman</i></p>
</div>
</div>
</div>
<div id='footer'> Texte du pied de page
</div>
</div>
</body>
</html>
/* Dans ce site, on va essayer de placer les éléments dans le flux, c'est à dire qu'il seront placés
les uns après les autres.*/
body{
/* L'image de fond sera dans le dossier img */
background: url(../img/fond_img.jpg) repeat center top transparent;
}
#wrapper{
/* Le wrapper n'aura pas de marge et occupera 100% de l'écran pour sa largeur */
margin: 0;
width: 100%;
}
#header{
margin-left:5%; /* Marge correspondant à 5% de la largeur de l'écran */
margin-top: 2%;
width: 90%; /* L'entête occupera 90% de la largeur de son parent, c'est à dire le block .wrapper */
background-color: rgba(0,0,0,0.7); /*La couleur sera noire (0,0,0) et aura une opacité de 0.7 */
color: #FFFFFF;
}
#content{
/* Définition des marges, largeur */
display: inline-block;
margin-left: 5%;
margin-top: 2%;
width: 90%;
}
#footer{
/* Définition des marges, largeur et hauteur */
margin-top:2%;
width: 100%;
height: 10%;
/* Couleur du fond */
background-color: #000000;
color: #FFFFFF;
}
#sidebar{
/* Sidebar sera positionné en ligne */
display:inline-block;
/* Définition dés marges, hauteur et largeur */
margin-top: 2%;
margin-left: 3%;
margin-bottom: 2%;
width: 25%;
}
.contents{
/* Sidebar sera positionné en ligne */
display:inline-block;
/* Définition dés marges, hauteur et largeur */
float: right;
margin-top: 2%;
margin-right: 3%;
margin-bottom: 2%;
width: 65%;
background-color: rgba(0,0,0,0.6); /*La couleur sera noire (0,0,0) et aura une opacité de 0.7 */
color: #FFFFFF; /* La couleur du texte sera blanche */
}
.entry{
margin-left: 5%;
margin-top:2%;
width: 90%;
border-bottom: 1px solid #CEC6B5; /* bordure en bas de .entry de 1 pixel d'épaisseur */
}
h1{
text-align: center; /* Centre tous les titre h1 comme le titre de l'entête */
}
a { /* on donne une couleur à tous les liens du document */
color: #FF0000;
text-decoration: none;
text-align: left;
text-transform: uppercase; /* transforme le texte en majuscule */
}
#main-nav li {
padding: 10px 4px 6px 6px;
margin: 5px 0px;
background-image: linear-gradient(#fff,#aaa);
border-radius: 20px;
list-style: none; /*on enleve les icones de liste */
border: 1px solid;
}
L'objectif est de remplacer le menu que l'on retrouve généralement dans toutes les pages par le code d'un fichier que l'on nomera "menu.php". Pour ce faire, on va dans un premier temps créer ce dernier dans lequel on va recopier le code du menu comme ci-dessous.
<div id='sidebar'>
<ul id='main-nav'>
<li><a href='http://lepoittevin.olivier.free.fr'>Site de Mr Le poittevin</a></li>
<li><a href='ecrire.html'>écrire</a></li>
<li><a href='categorie.html'>catégories</a></li>
<li><a href='#' onclick="alert('En cours de construction')">contact</a></li>
</ul>
</div>
Il ne reste plus qu'a remplacer le texte du menu dans le fichier "index.php" par : "<?php include 'menu.php' ?>", ce qui donne :
<!DOCTYPE!>
<html>
<head>
<html lang="fr">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Titre de mon site</title>
<link href="css/styles.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class='wrapper'>
<div id='header'>
<h1><a href='index.html'>Formation CSS</a></h1>
<div>Mon premier site internet et patati et patata. Ceci n'a aucun intéret dans cette entête, mais
en mathématiques, un groupe est un magma associatif et unifère dans lequel chaque élément est symétrisable.</div>
</div>
<div id='content'>
<?php include 'menu.php' ?>
<div class='contents'>
<div class="entry">
<p>Amoureux de la prose, jeune vagabond lyrique, qui se découvre et se délie la langue après
deux shots de tequila paf, et se pose en spectacle pour délivrer ses besoins de reconnaissance et de luxure, prenez
place et sortez vos neurones, l’heure est à l’étude.</p>
</div>
<div class="entry">
<p>Tout ça avait pour but d'illustrer le péril du conformisme, et la difficulté de préserver
vos convictions, quoi qu'en pense les autres. [...] Nous avons tous besoin d'être accepté, mais soyez persuadé que vos
convictions sont uniques, les vôtres, même si on les trouve anormales ou impopulaires, même si le troupeau dit « C'est
maaaaaaaaal ».<br> Robert Frost a dit : « Deux routes s'offraient à moi, et là j'ai suivi celle où on n'allait pas, et
j'ai compris toute la différence. »</p>
<p><i>Robin Williams, Le Cercle des poètes disparus (1989), écrit par Tom Schulman</i></p>
</div>
</div>
</div>
<div id='footer'> Texte du pied de page
</div>
</div>
</body>
</html>
L'utilisation de cette fonction va permettre une gestion beaucoup plus simple de votre site web. En effet, pour modifier le menu sur toutes les pages, vous devrez modifier seulement le fichier, "menu.php".
Nous utiliseront auusi le php dans le tutoriel concernant les bases de données.