Apprendre à Créer une application WEB avec PHP et MySQL


Télécharger Apprendre à Créer une application WEB avec PHP et MySQL
55 étoiles sur 5 a partir de 1 votes.
Votez ce document:

Télécharger aussi :


Apprendre à Créer une application WEB avec PHP et MySQL

...

III. Création de la base de données

Maintenant que nous avons définis les différentes données  que  notre  application  devra gérer, nous allons créer physiquement notre base de données.

Pour cela nous allons utiliser le SGBD MySQL, qui est l'un des plus connu  dans le monde du WEB et du logiciel libre.

Afin de faciliter, la manipulation de MySQL, nous allons utiliser PhpMyAdmin.

Cet outil, écrit en PHP, permet de gérer ses bases de données sans avoir besoin d'une grande connaissance de MySQL. De plus du fait qu'il est écrit en PHP (donc sur votre serveur HTTP) vous pouvez surtout gérer vos bases à distance.

Préparation et configuration

Il n'est pas recommandé d'utiliser le "compte" administrateur MySQL (root) pour manipuler une base de données donc nous allons dans le client MySQL, créer  un  utilisateur  qui permettra de gérer notre base de données (création de table, ajout d'enregistrements, ...).

Premièrement, il faut se connecter à MySQL en tant que root via le client MySQL, dans le but de créer notre base et d'ajouter l'utilisateur (qui permettra de gérer la base sous PhpMyAdmin) :

 Il faut maintenant créer notre base de données :

Nous allons maintenant créer l'utilisateur qui sera le DBA de notre base de données, nous

allons donc nous positionner sur la base myforum, puis donner à l'utilisateur wwwadmin toutes les autorisations sur cette base :

Nous pouvons donc maintenant quitter le client MySQL :

Donnons maintenant un mot de passe pour l'utilisateur wwwadmin :

Vérifions maintenant que la configuration de PhpMyAdmin, afin que lorsque l'on se connecte

Remplacer la ligne :

Par :

 On peut maintenant ce connecter à PhpMyAdmin via votre navigateur préféré :

Création de nos tables

Maintenant que l'on est connecté à MySQL sous PhpMyAdmin, nous allons donc créer nos tables dans notre base MyForum : pour cela sélectionnons la base "myforum".

Nous arrivons sur un écran qui nous propose de créer une nouvelle table, en  effet  pour l'instant c'est la seule action que nous pouvons effectuer car notre base est vide.

 Nous allons donc créer la table "users" qui contiendra les informations sur les utilisateurs. Indiquons le nom de la table ("users") et le nombre de champs qu'elle contiendra (5).

Nous voyons donc 5 lignes qui correspondent à nos cinq champs que nous voulons décrire, pour cela il faut fournir plusieurs informations :

  • Field : il s'agit du nom des champs
  • Type : il s'agit du type de données que se champ contiendra (caractères, nombres, dates...)
  • La longueur du champ : Par exemple un code postal contient 5 caractères.
  • Des attributs particuliers (non signés, binaire, ...) je conseille de ne les utiliser que si vous en avez vraiment besoin.
  • Null : permet de définir si le champ peu ne pas être renseigné.
  • Default : qui permet de définir la valeur par défaut du champ.
  • Extra : permet de définir des nombres auto incrémentés.
  • Primary : détermine si le champ est la clé de la table.
  • Index : permet de déterminer si le champ fait parti de l'index secondaire.
  • Unique : Permet d'indique que la valeur du champ doit être unique dans la table.

MySQL permet de gérer une multitude de types différents : chaines de caractères, entiers, flottants, dates, ...

Voici un tableau présentant les types les plus courants et qui nous servirons pour nos tables

Type Description

VARCHAR Chaine de caractères à longueur variable (1­255)

TINYINT Entier entre ­127 et 128

TEXT Texte de 1 à 65535 caractères

DATE Date au format AAAA­MM­JJ

INT Entier de ­2147483648 à 2147483647

BIGINT Entier de ­9223372036854775808 à

­9223372036854775807

FLOAT Permet de stocker des nombre décimaux

DOUBLE Permet de stocker des nombre décimaux

DECIMAL Permet de stocker des nombre décimaux

TIME Permet de stocker une heure au format HH:MM:SS

BLOB Permet de stocker des objets binaires de grande taille

Nous allons donc créer notre table avec la structure suivante :

  • id_user  : varchar(15)
  • passwd  : varchar(15)
  • name : varchar(50)
  • firstname : varchar(50)
  • email : varchar(255)

Lorsque l'on soumet le formulaire, on obtient en réponse le message "Table users has been created" qui indique que l'action s'est bien déroulée.

On obtient également la requête SQL qui vient d'être exécutée, ceci est une bonne chose lorsque l'on ne connaît pas le SQL et que l'on désire l'apprendre.

 Exécution de requêtes

Nous venons de créer notre table grâce à l'interface fournit par phpMyAdmin, on peut également lancer nos requêtes directement grâce à l'onglet SQL.

En effet nous allons créer la table thème de cette façon. Cette table est de la  structure suivante :

  • `id_theme` qui est un nombre auto incrémenté
  • `name` qui est une chaine de caractère
  • `description` qui est également une chaine de caractère.

Nous allons donc utiliser la requête suivante :

Il faut donc maintenant créer les autres tables afin d'obtenir la structure complète de notre base de données :

Sauvegarder la structure

Une fois, notre structure créée, il est bon de la sauvegarder. PhpMyAdmin permet d'exporter la structure ainsi que les données d'une base de données.

  1. Maquettage de l'application

Avant de programmer les pages du forum en PHP avec les accès à la  base  de  données  MySQL,    nous     allons     passer     par     une     phase     de     maquettage     de     l'application. Il s'agit de créer les pages avec des valeurs statiques dans le but de réaliser l'interface et la navigation entre pages.

Pour notre forum de discussion, nous aurons besoin des pages suivantes :

  • Login : cette page est la première page que l'utilisateur verra, il  devra  s'authentifier pour utiliser le forum
  • Inscription : cette page permet à un nouvel utilisateur de s'inscrire, elle est accessible à partir de la page login
  • Liste thèmes : cette page s'affiche lorsque l'utilisateur se sera authentifié, elle affiche la liste des thèmes disponibles sur le forum
  • Liste sujets : cette page affiche l'ensemble des sujets de discussions appartenant à un thème.
  • Liste messages : cette page affiche le fil de discussion d'un sujet.
  • Ecriture message : cette page est appelée lorsque l'utilisateur veut répondre sur un sujet ou, créer un nouveau sujet de discussion.

Pour réaliser ces pages nous allons utiliser les technologies XHTML pour le contenu des pages et CSS pour la mise en forme de celles­ci.

  1. Le XHTML

Il s'agit du standard en vigueur datant du 26 janvier 2000. Le XHTML 1.0 est  basé sur  le langage XML.pan>

Il s'agit uniquement du HTML 4 à la sauce XML. Donc si vous savez écrire du HTML 4, vous savez écrire du XHTML 1.0

Vous trouverez l'ensemble des spécifications du XHTML 1.0 à l'adresse suivante : …

Parmi les points les plus importants de XML par rapport à SGML :

  • Chaque élément ouvert doit être fermé
  • les balises sont toujours orthographiées en minuscule
  • les valeurs des attributs sont toujours renseignées et entre guillemets

Les types de documents



Il existe, comme pour le HTML 4.01, trois  types  de  documents  définissant  le  standard  XHTML :

Le type Strict

Il s'agit du type qu'il faut choisir à chaque fois que cela est possible, en effet il permet de séparer complètement le contenu de la présentation.

Il interdit les balises HTML de type <font> ou <b> les effets de présentation devant être décrit uniquement à l'aide de CSS.

Pour implémenter ce type le document doit impérativement commencer par les lignes suivantes :

 Le type Transitional

Il permet de mélanger contenu et présentation et on peut l'utiliser si l'utilisation de CSS n'est pas possible ou satisfaisante (cas où les visiteurs ciblés ne disposent que de  navigateurs  anciens et le rendu compte plus que l'information, etc.).

Pour implémenter ce type le document doit impérativement commencer par les lignes suivantes :

Le type Frameset

Ce type est à utiliser si vous souhaitez utiliser des cadres dans la présentation de vos pages HTML.

Pour implémenter ce type le document doit impérativement commencer par la ligne suivante

L'entête du document : <head></head>

L'élément HEAD rassemble des informations sur le document courant,  telles  que  son  titre, des mots­clefs pouvant être utilisés par des robots de recherche, et toute autre donnée considérée comme venant à part du contenu du document. Les éléments situés à l'intérieur  de la déclaration HEAD ne devront pas être visualisées dans le cas d'agents utilisateurs conformes, sauf mention particulière.

La balise <title>

Tout document HTML doit  comporter  un et  un seul élément  TITLE  dans  sa section  HEAD. Les agents utilisateurs utilisent le contenu de l'élément titre pour donner à l'utilisateur une information concise sur le contenu probable du document, par exemple, en l'écrivant dans la barre de titre de fenêtre, ou en le citant par synthèse vocale.

Les titres peuvent contenir des entités caractères (pour les caractères accentués, les caractères spéciaux, etc.), mais ne pourront contenir aucune autre balise. Voici un exemple de titre de document :

Les balises <meta>

Ce type de balise n'est pas obligatoire mais permet de donner diverses informations telles que l'encodage de la page, le nom de l'auteur, les mots clés (pour les moteurs de recherches), une description du contenu de la page...

Les balises <link>

La balise link permet d'effectuer des liens vers des ressources externes afin de définir par exemple les relations entre pages, mais aussi de définir le fichier de style CSS à utiliser (que nous verrons plus tard).

Entête pour MyForum

Pour notre application nous allons utiliser le code suivant :

Bien entendu nous allons changer le titre pour chaque page.

Le contenu de la page : <body></body>

Le corps d'un document contient son contenu effectif. Ce contenu pourra être représenté par un agent utilisateur d'une multitude de façons. Par  exemple,  pour  les  navigateurs  visuels, vous pourrez considérer le corps comme un cadre dans lequel le contenu apparaît : texte, images, couleurs, dessins, etc. Pour les agents utilisateurs  audio,  le  même  contenu  pourra être "parlé".

Balises de groupes <div></div> et <span></span>

Les éléments DIV et SPAN, en conjonction avec les attributs id et class, proposent un mécanisme générique pour renforcer la structuration d'un document. Ce sont les deux seuls éléments du HTML qui n'ajoutent aucune information de présentation à leur contenu. De ce fait, il est possible de les utiliser associés à des identificateurs et des assignations de classe pour pouvoir formater l'apparence de zones de texte par application ultérieure de feuilles de style.

Balises d'entêtes <h1>, <h2>, <h3>, <h4>, <h5>, <h6>

Un élément de titrage décrit brièvement le thème de la section qu'il introduit. Les informations de titrage pourront être récoltées par les agents utilisateurs pour, par exemple, construire une table des matières automatiques pour ce document.

Le HTML définit six niveaux de titrage depuis H1 affiché comme le plus imposant jusqu'à H6 le plus discret. Les navigateurs visuels utiliseront des polices plus ou moins grosses pour rendre compte du niveau de titre.

Le résultat obtenu :

La balise de lien ou d'ancre <a></a>

L'élément A peut être utilisé pour définir une ancre, un lien ou les deux. L'exemple qui suit spécifie un lien :

Ce lien désigne la "home page" du World Wide Web Consortium. Lorsqu'un utilisateur active  ce lien dans un agent utilisateur, ce dernier ira récupérer la ressource pointée, et dans notre cas, un document HTML.

L'exemple suivant illustre une définition d'ancre. Supposez que nous définissions une ancre nommée "ancre­une".

Cette définition assigne un nom d'ancre à la zone entière du document qui contient le texte

"l'endroit de l'ancre une". Normalement, le contenu des éléments A ne seront pas affiché différemment que la normale lorsque l'élément A ne sert qu'à définir une ancre.

Une fois l'ancre définie, nous aimerions pouvoir nous y référer depuis un document  (le  même ou un autre). Les URL qui désignent les ancres se terminent par un "#"  suivi du nom de l'ancre. Voici quelques exemples d'URL ainsi constituées :

  • Lorsque le l'ancre est située dans le même document : #anchor­one

Texte préformatés <pre></pre>

L'élément PRE indique aux agents utilisateurs visuels que le texte qui y est inclus est "préformaté".

Les agents utilisateurs visuels doivent traiter le texte préformaté comme suit :

  • Ils doivent laisser les espaces blancs intacts.
  • Ils devront écrire le texte avec une police à espacement fixe.
  • Le retour automatique à la ligne pourra y être désactivé.
  • Le traitement de la directionnalité doit rester opérationnel.

L'exemple suivant montre un texte préformaté :

Voici le rendu de votre navigateur :

Les tableaux <table></table>

L'élément TABLE contient tous les autres éléments qui spécifient le titre, les  lignes,  le  contenu, et le format d'un tableau.

Titres de tableaux :<caption></caption>

Lorsque présent, le texte de l'élément CAPTION décrira usuellement la nature du tableau. L'élément CAPTION doit venir immédiatement après la balise de début de l'élément TABLE.

Groupes de lignes : <thead>,<tbody>,<tfoot>

Un tableau doit contenir au moins un groupe de lignes. Chaque groupe de lignes est divisé en trois parties : en­tête, corps, et piétement. Les en­têtes et piétements de tableaux sont optionnels. L'élément THEAD définit l'en­tête, l'élément TFOOT définit le piétement, et l'élément TBODY définit le corps de tableau.

Lorsqu'il existe, chacun des instances d'éléments THEAD, TFOOT, et TBODY DOIT contenir au moins une ligne (voir TR).

L'exemple suivant illustre l'ordre et la structure des en­têtes, pieds et corps de tableaux.

Lignes de tableau : <tr></tr>

L'élément TR agit comme un container accueillant des cellules d'une ligne d'un tableau.

Cellules de tableau : <th> et <td>

Les éléments TH contiennent les en­têtes de colonnes (ou  de ligne), tandis  que les éléments TD définissent des cellules de données. Cette distinction permet aux agents utilisateurs de représenter différemment les en­têtes et les cellules de données, même en l'absence de feuilles de style.

Les cellules peuvent être vides (c.­à­d., ne contenir aucune données).

...

Les objets externes

Les images <img>

Cette balise permet d'intégrer des images dans un document XHTML.

Aujourd'hui, la plupart des navigateurs Web supportent les images, cependant Lynx (le navigateur le plus utilisé par les aveugles et les malvoyants) ne les supportent pas, en effet un aveugle ne peu en aucun cas apprécier le contenu d'une image, sauf si on lui décrit son contenu.

Dans cette optique la balise <img> donne la possibilité d’afficher un texte alternatif pour les navigateurs n'arrivant pas à afficher les images :



 Les objets externes <object>

Dans les anciennes versions du HTML intégrer des scripts externes (Applet Java, Objet ActiveX, ...), n'était pas toujours une chose aisée. Aujourd'hui une seule balise permet d'implémenter ce type de ressource, la balise <object>.

Celle ci permet en plus de proposer une solution alternative lorsque le navigateur ne peut afficher l'objet (plugin non activé, ...) :

La balise OBJECT permet aussi d'intégrer des images (tout comme la balise IMG), aussi

vaut il mieux préférer OBJECT (car une image est un objet externe).

Les Formulaires <form></form>

L'élément FORM fait office de container pour des contrôles. Il spécifie :

    >
  • Le programme qui traitera le formulaire une fois complété et dûment soumis (l'attribut action).
  • La méthode par laquelle les données déposées par l'utilisateur seront transmises au serveur (l'attribut method, valeurs 'get' ou 'post').

Un formulaire peut contenir du texte et des balises (paragraphes, listes, etc.) ainsi que les contrôles détaillés ci­après.

La portée de l'attribut name associé à chacun des contrôles situé à l'intérieur d'un élément FORM est limitée à cet élément FORM.

La balise <label>

L'élément LABEL peut être utilisé pour attacher une information à un autre contrôle (à l'exception des éléments LABEL eux­mêmes). Les labels pourront être affichés par les agents utilisateurs d'une multitude de façons (ex., visuellement, auditivement par des synthétiseurs vocaux, etc.)

Notez que les éléments LABEL sont associés aux éléments INPUT via l'attribut id.

La balise <input>

La nature d'un contrôle défini par un élément INPUT dépend de la valeur de son attribut type.

Types de champs de saisie

L'attribut type de l'élément INPUT détermine quel contrôle doit être créé.

text

Ce type crée un champ de texte mono ligne. La valeur émise lors de la soumission du formulaire est le texte entré.

password

Comme le type "text", mais le texte entré est visualisé à l'écran de sorte que les caractères ne puissent être reconnus (par exemple une série d'étoiles). Ce contrôle est utilisé pour l'entrée de données sensibles telles que des mots de passe. La valeur émise lors de la soumission du formulaire est le texte tapé (et non pas le texte affiché (!)).

 checkbox

Une case à cocher est une sorte de commutateur bipolaire. Lorsqu'elle est cochée, la case est dite "active". Lorsqu'elle est vide, la case est "inactive". La valeur de la case à cocher n'est émise que si cette dernière est active.

Plusieurs cases à cocher du même formulaire pourront partager le même nom. Au  moment de la soumission, toute case à cocher "activée"  y compris celles  de  nom  semblable  émet une paire nom/valeur dans laquelle le nom sera identique. Ceci permettra aux utilisateurs de choisir des valeurs multiples pour une propriété unique.

radio

Un bouton radio est aussi un commutateur  bipolaire.  Lorsqu'il est marqué,  le bouton radio est dit "actif". Lorsqu'il est vide, il est réputé "inactive". La valeur du bouton radio n'est émise que si ce dernier est actif.

Plusieurs boutons radio du même formulaire pourront partager le même nom. Cependant, seul l'un d'entre eux pourra être actif à la fois. Lorsque l'un des boutons radio est marqué, tous les autres portant le même nom sont automatiquement désélectionnés. Pour cet ensemble de boutons radio, il ne peut donc être émis qu'une seule paire nom/valeur.

submit

Crée un bouton de soumission. Lorsque l'utilisateur clique sur ce bouton, le contenu du formulaire est soumis au programme spécifié par la localisation définie par l'attribut action de l'élément FORM englobant.

Un formulaire peut contenir plusieurs boutons de soumission. Cependant, seule la paire nom/valeur du bouton de soumission actionné sera envoyée dans le formulaire.

image

Crée un bouton de soumission graphique. La valeur de l'attribut src spécifie l'URL de l'image qui servira de représentation graphique du bouton. Certains  utilisateurs  ne  pourront visualiser cette image. Nous recommandons fortement d'adjoindre la définition d'un attribut  alt valant pour alternative textuelle de l'image.

reset

Crée un bouton de réinitialisation. Lorsque ce bouton est  activé par  l'utilisateur,  les  valeurs de tous les contrôles du formulaire sont remises à leur valeur initiale, telle que mentionnée dans l'attribut value. Le couple nom/valeur d'un bouton de réinitialisation n'est jamais envoyé lors de la soumission d'un formulaire.

hidden

Crée un élément qui ne doit pas être représenté par l'agent utilisateur. Cependant, le couple nom/valeur de cet élément sera joint aux données envoyées lors de la soumission du formulaire.

Ce type de contrôle sera en général utilisé pour enregistrer des données d'échanges client/serveur qui seraient autrement perdues du fait de la nature volatile des processus HTTP.

file

Demande à l'utilisateur de désigner un fichier. Lorsque le formulaire est soumis, le contenu de ce fichier sera transmis au serveur comme une valeur de n'importe quel autre contrôle.

La balise <textarea>

L'élément TEXTAREA crée une zone de saisie de texte multi lignes (par opposition au champ de texte INPUT d'une seule ligne). Le contenu de cet élément fournit le texte initial qui est présenté dans la zone de saisie.

Les balises <select> et <option>

L'élément SELECT crée une liste d'options pouvant être sélectionnées par l'utilisateur. Chaque élément SELECT doit contenir au moins une définition d'option. Chaque option est spécifiée par une instance de l'élément OPTION.

Les agents utilisateurs se baseront sur le contenu de l'élément OPTION pour afficher le libellé de l'option dans la liste.

 Vérifier la validité des pages

Après l'écriture ou la génération de pages HTML il faut que les pages soient valides. Il ne suffit pas de vérifier le rendu des pages sur différents navigateurs, cette validation doit être faite auprès des validateurs de référence du W3C :

Lynx viewer est un service qui permet de vérifier le rendu de pages Web, telles qu'elles apparaissent dans le navigateur en mode texte Lynx. Lynx  est  très  utilisé par  les  non­ voyants et les malvoyants ainsi que sur certaines configurations informatiques ne disposant pas d'interface graphique évoluée.

  1. Les pages du forum en XHTML

Pour notre forum, nous avons donc besoins de six pages XHTML, que nous allons décrire.

La page d'identification

Ceci est la page d'entrée du forum; toute personne voulant utiliser le forum doit se signer (et donc doit être inscrite).

Cette page contient donc un formulaire, avec deux champs saisissables :

  • Code user : représentant le pseudo de l'utilisateur
  • Mot de passe : son mot de passe lui  permettant  de se connecter. Il y a deux boutons :
  • Se connecter : qui permet d'effectuer la connexion proprement dit, et d'accéder au forum
  • J'ai perdu mon mot de passe : qui permet de renvoyer à l'utilisateur son mot de passe par email.

Pour les personnes qui ne sont pas encore inscrites, il y a également un lien vers la page d'inscription.

La page d'inscription

Cette page est tout simplement le formulaire permettant à une personne de s'inscrire sur le forum.

Ce formulaire est composé de 6 champs saisissables et obligatoires :

  • Le Nom de l'utilisateur
  • Le Prénom de l'utilisateur
  • L'email de l'utilisateur (pour pouvoir lui renvoyer son mot de passe)
  • Le code user : l'utilisateur devra choisir un pseudo qui lui servira pour se connecter.
  • Le mot de passe : l'utilisateur devra choisir un mot de passe qui lui servira pour se connecter.
  • La confirmation : l'utilisateur devra ressaisir son mot de passe ici (vérifier l'égalité avec le champ précédent)

Il y a deux boutons :

  • S'inscrire : qui permet d'enregistrer les données de l'utilisateur, de plus cela effectue  la connexion au forum
  • Rétablir : qui permet de réinitialiser le formulaire.

La liste des thèmes



Cette page liste les thèmes disponibles sur le forum, elle est constituée des éléments suivants :

  • La barre de navigation : la seule option proposée est Quitter, qui renvoi vers la page d'identification.
  • Le tableau dressant la liste des thèmes :
  • Nom du thème (lien vers la page des sujets)
  • Description du thème (lien vers la page des sujets)
  • Le nombre de sujets postés
  • La date du dernier message

La liste des sujets

Cette page liste les sujets postés pour un thème donné sur le forum, elle est constituée des éléments suivants :

  • La barre de navigation :
  • "c1">Quitter, qui renvoi vers la page d'identification.
  • Thèmes, qui renvoi vers la page de liste des thèmes du forum
  • Le tableau dressant la liste des sujets :
  • Auteur du sujet
  • Titre du sujet (lien vers la page des messages)
  • Le nombre de réponses au sujet
  • La date du dernier message concernant le sujet
  • Un bouton Nouveau : qui permet de poster un nouveau sujet (lien vers Edition Message).

Les messages concernant un sujet

Cette page affiche la discussion concernant un sujet, elle est constituée des éléments suivants :

  • La barre de navigation :
  • Quitter, qui renvoi vers la page d'identification.
  • Thèmes, qui renvoi vers la page de liste des thèmes du forum
  • Sujets, qui renvoi vers la page des sujets concernant le thème en cours
  • Le tableau dressant la discussion, et ceci dans l'ordre d'arrivé :
  • Auteur du message
  • Titre du message
  • Date  du message
  • Texte du message
  • Un bouton Répondre : qui permet d'ajouter un message dans la discussion (lien vers Edition Message).

L'édition d'un message

Cette page permet la création d’un sujet ou d'effectuer une réponse sur un sujet donné, elle est constituée des éléments suivants :

  • La barre de navigation :
  • Quitter, qui renvoi vers la page d'identification.
  • Thèmes, qui renvoi vers la page de liste des thèmes du forum
  • Sujets, qui renvoi vers la page des sujets concernant le thème en cours
  • Messages, qui renvoi vers la page affichant la discussion en cours (dans le cas ou l'on répond à un message)
  • Un formulaire composé de deux champs saisissables :
  • Un titre de message (pré alimenté avec "RE : titre sujet" dans le cas d'une réponse)
  • Une zone de texte, ou l'utilisateur saisira son message.
  • Deux boutons :
  • Un bouton Envoyer qui permet d'enregistre un message et de revenir ver la page de la discussion.
  • Un bouton Rétablir qui permet de réinitialiser le formulaire.
  • Le tableau dressant la discussion, dans l'ordre inverse d'arrivée :
  • Auteur du message
  • Titre du message
  • Date  du message
  • Texte du message

Une page XHTML valide

Voici par exemple le code source XHTML de la page d'édition d'un message au format XHTML (page validé par le validateur du W3C), sans mise en forme particulière.

<h1>MyForum v0.1</h1>

<hr/>

</div>

<!­­ La partie principale ­­>

<div class="main">

<div class="pwd">

Darken &gt;&gt; <a href="login.html" title="quitter">Quitter</a> :: <a href="themes.html" title="retour aux thèmes">Thèmes<;/a> :: <a href="sujets.html" title="retour sur Devel">Sujets</a> :: <a href="messages.html" title="retour sur Comment réaliser un forum en PHP ?">Messages</a>

</div>

<!­­ Message d'erreur ­­>

<div class="err">

ERREUR : Vous devez saisir vos identifiants pour vous inscrire

</div>

<!­­ Répondre au message ­­>

<div class="box">

<h1>Répondre au message</h1>

<form action="messages.html" method="get">

<div class="field2"><label for="title">Titre :

</label><br/><input type="text" id="title" name="titre" value="RE: Comment réaliser un forum en PHP ?" size="50" /></div>

<div class="field2"><label for="mess">Message :

</label><br/><textarea cols="50" id="mess" rows="12" name="message">Saisissez votre texte ici...</textarea></div>

<div class="buttons">

<input class="button" type="submit" name="action" value="Envoyer" />

&nbsp;<input class="button" type="reset" />

</div>

</form>

</div>

<!­­ La liste des themes ­­>

<table class="old">

<caption>Devel : Comment réaliser un forum en PHP ?</caption>

<tbody>

<!­­ 1 message ­­>

<tr class="row"><th class="left">Darken</th><th class="left">RE: Comment réaliser un forum en PHP ?</th><th class="right">2003­12­21 12:45</th></tr>

<tr class="row"><td colspan="3" class="left">Salut,<br />En fait tu tombe bien, je donne actuellement une conférence sur le sujet.<br/>Celle ci à lieu au licé Kastler...<br/>@++</td></tr>

<!­­ 1 message ­­>

<tr class="row"><th class="left">Akira</th><th class="left">Comment réaliser un forum en PHP ?</th><th class="right">2003­12­21 10:05</th></tr>

<tr class="row"><td colspan="3" class="left"><pre>Bonjour, j'aimerais réaliser un forum en PHP avec MySQL,<br/>Mais je ne sais pas du tout par ou commencer.<br/>Quelqu'un aurrait il une idée....</pre></td></tr>

</tbody>

</table>

</div>

<!­­ Le pied de page ­­>

<div class="footer">

<hr/>

Copyright &copy; 2003­2004 Philippe BOUSQUET<br />

Ce logiciel est sous licence Gnu Genral Public License

</div>

Et voici le résultat dans votre navigateur internet



3754