Faire son premier site (partie 2)

Le PHP

Là encore, je ne vais pas vous apprendre à programmer en PHP. Pour illustrer le PHP, je vais vous donner une méthode pour faire une “interface” de site.
Vous me direz que vous savez déjà faire, ben moi je vais vous apprendre comment faire ça rapidement et surtout sans vous fatiguer, autant pour la conception que pour la mise à jour de votre site.
Comme pour le Javascript, un peu d’histoire s’impose :
Le langage PHP a été mis au point au début d’automne 1994 par Rasmus Lerdorf. Ce langage de script lui permettait de conserver la trace des utilisateurs venant consulter son CV sur son site, grâce à l’accès à une base de données par l’intermédiaire de requêtes SQL. Ainsi, étant donné que de nombreux internautes lui demandèrent ce programme, Rasmus Lerdorf mit en ligne en 1995 la première version de ce programme qu’il baptisa Personal Sommaire Page Tools, puis Personal Home Page v1.0 (traduisez page personnelle version 1.0). Passons maintenant au PHP.

Voyons maintenant la méthode.

L’aspect graphique Il faut tout d’abord un “look” à votre site. Pour les exemples qui vont suivre, j’en ai fait un tout ce qu’il y a de plus simple :

Bandeau du haut

Corps

Bandeau du bas

J’ai réalisé cette interface sous Photoshop mais vous pouvez utiliser d’autres logiciels tels que Paint Shop Pro, The Gimp ou même Paint.
La technique est simple. Vous dessinez une interface entière sans texte et ensuite vous la découpez.
Voici les différentes “pièces” de la mienne :

– Le bandeau du haut.

– Le menu. Là l’image fait 100 pixels de haut. Ca permet à l’interface d’être aussi haute que nécessaire.

– Le “corps” de la page. Idem que pour le menu.

– Bandeau du bas.

Ensuite l’assemblage est relativement simple. Il se fait à l’aide d’un tableau et on utilise les images comme “background” des cellules.

Exemple :

<html>
<head>
<title></title>
</head>
<body>
<div align=”center”><table width=”770″ border=”0″ cellpadding=”0″ cellspacing=”0″>
<tr>
<td background=”images/top.jpg” height=”112″ colspan=”2″></td>
</tr>
<tr>
<td background=”images/leftmenu.jpg” width=”149″ valign=”top”>
<table border=”0″ cellpadding=”3″ cellspacing=”0″><tr><td>Texte du menu</td></tr></table>
</td>
<td background=”images/body.jpg” width=”621″ valign=”top”>
<table border=”0″ cellpadding=”3″ cellspacing=”0″><tr><td>Texte du corps</td></tr></table>
</td>
</tr>
<tr>
<td background=”images/bottom.jpg” height=”60″ colspan=”2″></td>
</tr>
</table>
</div>
</body>
</html>

Les lignes que j’ai mis en rouge sont des tables dans les cellules du menu et du corps qui permettent au texte de ne pas coller au bord de la cellule.
Notez bien les dimensions des différentes images et ajustez les cellules de la table en conséquence. Il faut aussi ne pas oublier de mettre le cellpadding et le cellspacing à 0 sinon les images ne sont pas collées sur le bord.

Vous avez maintenant une interface claire qui peut servir pour toutes les pages de votre site. Le problème c’est que de copier à chaque fois le tableau dans chaque page (ou si vous voulez changer le look du site plus tard), c’est fatiguant :op
C’est là que le PHP entre en jeu ! Il va faire comme les frames HTML mais en mieux. On appelle cela les pseudo-frames PHP.

Avant de voir comment, il faut d’abord intaller un serveur sur votre ordinateur. Pourquoi ? Parce que le PHP est un langage interprété par le serveur de votre hébergeur et qu’il est lourd d’uploader vos fichiers à chaque fois que vous voulez tester si tout va bien.
Pour celà, le plus simple est d’installer EasyPHP qui est un package qui contient tout ce qui faut pour utiliser PHP en local (notamment Apache pour Windows et PHP). Suivez les instructions de cette page.
Une fois installé, il y a 2 façons de tester vos pages PHP :
– soit vous mettez vos fichiers dans le repertoire “www” (repertoire d’EasyPHP) et vous accéder à vos fichiers en tapant l’adresse http://localhost/ dans votre navigateur.
– soit vous créez un alias à partir de la page http://localhost/home/ (la manoeuvre est bien expliquée).

Maintenant vous pouvez utiliser le PHP sur votre PC.
Reprenons l’exemple du dessus mais en y incorporant le code PHP que je vais vous expliquer. Ça sera votre page index.php.

Exemple :

<html>
<head>
<title></title>
</head>
<body>
<div align=”center”><table width=”770″ border=”0″ cellpadding=”0″ cellspacing=”0″>
<tr>
<td background=”images/top.jpg” height=”112″ colspan=”2″></td>
</tr>
<tr>
<td background=”images/leftmenu.jpg” width=”149″ valign=”top”>
<table border=”0″ cellpadding=”3″ cellspacing=”0″><tr><td>
Texte du menu
</td></tr></table>
</td>
<td background=”images/body.jpg” width=”621″ valign=”top”>
<table border=”0″ cellpadding=”3″ cellspacing=”0″><tr><td>
<?
if ($page==’liens’ || $page==’images’)
{
include($page.’.php’);
}
else
{
include(‘home.php’);
}
?>

</td></tr></table>
</td>
</tr>
<tr>
<td background=”images/bottom.jpg” height=”60″ colspan=”2″></td>
</tr>
</table>
</div>
</body>
</html>

Le texte en rouge, c’est le code PHP. Vous voyez, ce n’est pas bien long.
Je vais pas vous expliquer le code en lui-même, ce n’est pas l’objectif de cet article, je vais juste vous apprendre à vous en servir.
Toutes les pages de votre site que normalement vous nommez blabla.html, vous allez les nommer blabla.php.
Ensuite, il n’est plus nécessaire de mettre les balises <html>,<head> et <body> puisqu’elle sont dans votre page index.php. Vous ne mettrez que votre texte (décoré par de l’HTML comme vous le désirez) et vos images de la même manière que si vous le mettiez dans la page index.php à la place du code PHP.
Maintenant pour demander au code PHP d’afficher une page précise c’est très simple.
Par exemple, l’adresse de votre page “lien” (votre fichier s’appelle liens.php par exemple) sera http://monsite.com/index.php?page=liens.
Pour votre page d’images (fichier images.php), ça sera http://monsite.com/index.php?page=images.
Vous avez compris, après “page=” vous mettez le nom du fichier sans l’extention “.php”.

La petite astuce de ce script c’est que si vous ne mettez rien derrière “page=” ou que vous ne tapez que http://monsite.com dans la barre d’adresse, il va automatiquement inclure le fichier home.php qui contient le texte de votre page d’acceuil (ATTENTION là il faut absolument utiliser le nom “home.php” pour votre page d’acceuil à moins de modifier le script PHP).

ATTENTION : dans votre if, vous devez bien tester la présence d’une page existante afin de ne pas permettre à une personne mal intentionnée d’exécuter un script php autre que ceux que vous avez prévu !

Si vous voulez voir cet exemple en ligne, c’est par là.

Félicitations, vous avez utilisé votre premier script PHP. A la manière des CSS qu’on a vu précédemment, ce script simplifie grandement la mise à jour de votre site.

Si vous voulez en savoir plus sur le PHP et apprendre à programmer, je vous recommande vivement le site PHP Débutant.
C’est en suivant un à un les tutoriaux de ce site que j’ai appris le PHP, c’est vraiment bien fait. Et si vous avez un problème en PHP, n’hésitez pas à utiliser leur forum ou le forum Programmation de Zebulon, y aura toujours quelqu’un pour vous aider…

Dernière mise à jour le 2 décembre 2018

développement

Faire son premier site (partie 2)

Le PHP

Vous aimerez aussi