YBET

Rue Albert 1er, 7

6810 Pin - Chiny

Route Arlon - Florenville

(/fax: 061/32.00.15

Les formations sur Internet

13. Première partie de notre exercice: la mise en page de notre site de petites annonces.

1. Les includes, hiérarchie des fichiers - 2. Les fonctions PHP require() et include() - 3. Le header et footer - 4. Le corps de notre page Internet - 5. Utilisation spécifique des colonnes - 6. En résumé

Après les bases en PHP et en MySQL, la suite de la formation va reprendre un développement plutôt conséquent puisque nous allons créer de toute pièce un site de petites annonces. Il nous manque encore quelques fonctions PHP (ou même MySQL) que nous verrons à fait dans la programmation. Avant de commencer le développement de notre site de petites annonces (la création de la base de donnée est déjà faite au chapitre précédant), nous allons faire la mise en page, la présentation de notre site et utiliser quelques fonctions spécifiques pour l'utilisation simultanée de plusieurs fichiers PHP.

Le gros avantage de PHP, c'est la possibilité d'inclure des fichiers dans un fichier. La première possibilité est d'inclure des parties de mise en pages, l'autres est d'inclure des fonctions dans un fichier et de les appeler à partir de tous les autres. C'est le principal intérêt de ce chapitre.

Cette partie va être nécessaire pour tous le développement futur. Nous allons utiliser une structure de page Internet standard:

Header
Colonne gauche	Corps de la page (contenu)	colonne droite
Footer

Le Header (entête) reprend notre entête dans lequel s'insère le logo, les boutons de navigation
La colonne gauche reprend différentes cases
Le corps de la page reprend le contenu, texte, images, ....
La partie gauche reprend d'autres cases
Le footer (pied de page) va reprendre par exemple les partenaires, des aides à la navigation.

D'autres parties vont être nécessaire pour notamment ouvrir et fermer la base de donnée.

Pour cette partie, nous allons utiliser des tableaux (l'utilisation du CSS serait souhaitable et c'est d'ailleurs ce qui est, en partie, réellement utilisé actuellement), en fait 1 tableau de 3 lignes ou même en 3 tableaux distincts. Cette partie va nécessiter quelques commandes en html. Pour une introduction à l'HTML

<div align="center"> // tableau centré sur la page
<table border="1" width="90%"> // largeur du tableau de 90 % avec une bordure de 1
    <tr>

        <td width="100%" colspan="3" align="center">Header</td>

    </tr>

// première ligne du tableau, 1 seule colonne
    <tr>

        <td width="20%" align="center">Colonne gauche</td>

        <td width="60%" align="center">Corps de la page (contenu)</td>

        <td width="20%" align="center">colonne droite</td>

    </tr>

// deuxième ligne du tableau, divisé en 3 colonnes.
    <tr>

        <td width="100%" colspan="3" align="center">Footer</td>

    </tr>

// dernière ligne du tableau qui reprend le footer.
</table> // fin du tableau
</div> // fin de l'alignement centré du tableau

Il ne nous restera plus qu'à remplir les cellules en créant des fichiers spécifiques que nous appelons des box (des boîtes). Dans le développement ci-dessus, nous utiliserons simplement 3 tableaux distincts: 1 pour l'en-tête, 1 pour le corps et un pour le pied de page.

1. Les Includes, hiérarchie des fichiers

Cette structure est régulièrement utilisée en HTML. En PHP, cette structure va déjà créer minium 6 fichiers, 1 par cellule que nous souhaitons remplir plus la page d'index. Pour peu que nous souhaitons créer des colonnes droites ou gauches différentes d'un groupe de page différent ou même créer un fichier "colonne-droite" qui reprend plusieurs parties par exemple, le nombre de fichiers répétitifs va vite augmenter. Il nous faut une structure dans la sauvegarde des données. Nous allons en fait directement créer un sous-répertoire reprenant tous ces fichiers inclus et un sous-dossier pour les différents fichiers repris dans les includes (typiquement le contenu des colonnes).

Cette manière de travailler n'est pas obligatoire mais va faciliter la maintenance et le développement de notre site.

Dans le dossier www de EasyPhpp (Programm Files), créez ces 2 dossiers à l'aide de l'explorateur Windows.

Pour signaler dans quel dossier, nous pouvons lui donner son adresse absolue ou même utiliser une variable qui reprend l'adresse du dossier Includes et du dossier box

2. Les fonctions require() et include()

L'utilisation d'une base de donnée Mysql demande d'ouvrir et de fermer la base de donnée. Nous pourrions directement inclure les différentes lignes de commandes dans le fichier principal, ou même dans le header et le footer mais par homogénéité, nous allons créer 2 fichiers spécifiques:

start.php: Vérifie si la base de donnée existe et l'ouvre
Stop.php: ferme la base de donnée.

Le contenu de ces 2 fichiers a déjà été vu:

includes\start.php

<?php
if(!mysql_connect('localhost','root')){
Echo'Connection Impossible';
exit();
} else{
echo'Connexion réussie';
}
Mysql_select_db('ybet');
?>

!Note: la base de donnée ybet doit au préalable être créée dans easyphp->phpmyadmin.

includes\stop.php

<?php
mysql_close();
?>

Remarquez que pour l'instant, nous laissons le message en cas de connexion réussie, ça va faciliter le développement.

Créez ces 2 fichiers et enregistrez-les dans le dossier Includes.

Il nous reste à inclure ces 2 fichiers dans notre index.php. Cette partie va utiliser les commandes require() ou include(). Les 2 commandes incluent et exécutent un fichier PHP, la différence vient de la manière de gérer les erreurs en PHP. Ces 2 fonctions acceptent également des fichiers textes, html, ... mais pas les images comme des bannières par exemple.

include('start.php')	inclut et exécute le fichier start.php. Si le fichier n'existe pas, la fonction renvoie un simple message d'erreur et continue le script
require('start.php')	inclut et exécute le fichier start.php. Si le fichier n'existe pas, la fonction renvoie une erreur fatale et arrête le script.

Dans la majorité des cas, vous pouvez utiliser la fonction PHP include(), sauf si le fichier est obligatoire pour l'application complète. C'est le cas dans notre programmes puisque la base de donnée doit obligatoirement être ouverte avec d'exécuter la suite.

<?php
require('includes/start.php');
// cette partie ouvre la base de donnée
print ('<br>');
echo 'Vous pouvez travailler avec la base de donnée';
print('<br>');
require('includes/stop.php');
echo 'Base de donnée fermée';
?>

Remarquez les ' dans les fonctions require(). L'exécution d'index.php donne

Connexion réussie
Vous pouvez travailler avec la base de donnée
Base de donnée fermée

Dans un chapitre suivant, nous désignerons par des variables les différents dossiers.

3. Le header, footer

Le header va inclure les titres au-dessus de chaque page. Nous allons également créer un fichier PHP. L'avantage est de pouvoir modifier 1 seul fichier pour modifier le haut de toutes les pages que nous allons créer. Notre but n'est pas ici la création des logos et mises en page de ce simple header.php

<?php
// entête de nos pages Internet
?>
<table border="0" width="100%">
<tr>
<td width="24%" bgcolor="#FFFF00">
<p align="center"><img border="0" src="ybet.gif" width="150" height="21"></td>
<td width="76%" bgcolor="#FFFF00">
<p align="center"><b>Notre site de petites annonces YBET</b></td>
</tr>
</table>

Dans ces lignes de commandes, le logoybet est directement dans le dossier principal www. Remarquez que le contenu de ce fichier est en fait un simple fichier écrit en HTML avec 1 tableau sur 2 colonne. Vous pouvez le créer avec 1 logiciel HTML comme FrontPage et recopier directement le code dans l'éditeur PHP (avec le head (meta) éventuellement mais ce n'est pas conseillé, mais sans les <body>, ...)

La méthode de travail est identique pour le footer., un tableau va reprendre l'ensemble de la mises en page (mais ce n'est pas nécessaire).

4. Le corps de notre page Internet

Le corps de notre page est constitué d'un tableau sur 3 colonnes. Dans la colonne de gauche, nous allons inclure un fichier includes\colon-gauche.php. Le corps va utiliser un fichier en HTML includes\corps.htm. La colonne de droite reprend includes\colon-right.php

La seule réelle difficulté va être d'associer ces 3 fichiers dans un tableau. Reprenons la partie de construction d'un tableau ci-dessus.

<tr>

<td width="20%" align="center">Colonne gauche</td>

<td width="60%" align="center">Corps de la page (contenu)</td>

<td width="20%" align="center">colonne droite</td>

</tr>

</table>

</div>

Ce tableau est constitué d'une ligne et de 3 colonnes. Elle va être insérée dans notre fichier index.php, il nous suffira juste d'utiliser la fonction include() dans chaque colonne.

La première opération est de créer les fichiers includes\colon-left.php et include\colon-right php. Pour l'instant, laissons-les vides.

Le corps est un fichier html pour l'instant, ça va nous permettre de ne pas s'occuper des caractères de syntaxe comme ' qui nécessite \ devant, même si la fonction ADDSLASHES($variable) le fait automatiquement comme nous l'avons vu au chapitre 8. Ca va permettre également de travailler avec un logiciel HTLM, sans programmation comme PHP ou dreamweaver. Vous devrez néanmoins retirer la partie header du fichier créé.

<html>

<body>

<p>Le corps de la page en Php est constitué d'un fichier html où l'on a

retiré les balises (entre <head> et </head>)</p>

</body>

</html>

Voici notre index.php provisoire

<?php
require('includes/start.php');
// cette partie ouvre la base de donnée
print('<br>');
include('includes/header.php');
?>
<div align="center">
<table border="1" width="90%">
<tr>
<td width="20%" align="center">
<?php

include ('includes/colon-left.php');

     ?>
</td>
<td width="60%" align="center">
    <?php
     include ('includes/corps.htm');
   ?>
</td>
<td width="20%" align="center">
<?php
   include ('includes/colon-right.php');
?>
</td>
</tr>
</table>
</div>
<?php
include ('includes/footer.php');
?>

L'ensemble de nos fichiers qui gèrent la base de donnée (entrée, modification et suppression des annonces, administration) va utiliser cette structure. Remarquez que chaque cellule reprend <?php ...fonction PHP ?> puisque le tableau est en HTML, il faut chaque fois dissocier les 2

6. Utilisation spécifique des colonnes.

L'intérêt de créer 2 colonnes finalement vides est de pouvoir insérer des box que nous créons directement. Ceci permettra par exemple de créer 2 colonnes de droite distinctes qui utiliserons des boîtes différentes. De nouveau, nous allons utiliser les commandes PHP include() ou require(). Réservons par exemple la colonne de gauche pour la navigation et la colonne de droite pour les inscriptions (l'objet d'un développement spécifique dans un chapitre suivant).

Dans le dossier includes\box, créons un fichier navigation.php qui utilise un simple texte à la suite de l'autre:

<p align="center">Navigation</p>

<hr>

<p align="center"><a href="index.php">index</a></p>

<p align="center"><a href="inscription.php">Inscription</a></p>

Modifions le fichier colon-left.php comme suit:

<?php
include('includes/box/navigation.php');
?>

7. En résumé

Dans ce chapitre de la formation, nous avons créé la mise en page de nos pages Internet en utilisant les fonctions d'inclusion de PHP (include et require). Notre site de petites annonces en ligne n'en est qu'à ses débuts, les chapitres suivants vont nous permettre de développer les fonctionnalités sur la base de donnée MySQL comme les inscriptions, rentrés des données, administration du site. En cours, nous modifierons quelques parties comme l'installation automatique.

14. > Création automatique de tables MySQL

< 12. Base relationnelle avec MySQL

Mise en ligne: 08/04/2006, modification 22/03/2012