FORMATION DREAMWEAVER CS4 AVEC LANGAGE PHP ET BASE DE DONNEES MYSQL SOFTTOP http://softtop.free.fr FORMATION DREAMWEAVER CS4 AVEC LANGAGE PHP ET BASE DE DONNEES MYSQL Patrick QUINIO Édition février 2009

SOMMAIRE Langage PHP et Base de donnée MYSQL pour un site dynamique. Installation d’un serveur APACHE et d’une base de donnée MYSQL Locale avec XAMPP. Configurer Dreamweaver pour un site local. Réaliser un menu avec PHP et MYSQL. Formulaires et sécurité. Site protégé par un mot de passe. Requête, affichage, modification, suppression des données. Mise en ligne en fonction des possibilités du serveur web. Conclusion.

Langage PHP pour un site dynamique Un site dynamique est un ensemble de pages web, reliées à une base de donnée. Nous entrons ici dans le web professionnel. La base de donnée contient des informations placée dans des tables comme dans comme dans un tableau de données Excel. L’intérêt de la chose réside dans le fait que l’on peut changer les données d’une page en gardant la présentation initiale. Par exemple si vous avez des articles en vente Si vous ajoutez des articles ou si vous modifiez le prix vous allez juste modifier la table qui contient les données. Autrement il aurait fallut modifier toutes les pages contenant les articles et faire des pages pour chaque série d’article à afficher. Autre avantage on peut trier les données, en faisant des requêtes, avant de les afficher, décider du nombre d’article à afficher par page etc.… Avec PHP c’est le serveur qui travaille et génère automatiquement du des pages HTML en fonction du codes PHP contenu dans les pages.

Installer un serveur APACHE et une base MYSQL avec XAMPP Pour tester votre site avec du code PHP il faut un serveur capable de comprendre le langage PHP. (la dernière version est la 5) Une base de donnée MYSQL est aussi nécessaire. Tout est inclus avec le pack XAMPP et gratuit. Il s’agit ici d’installer un serveur sur votre PC qui va vous permettre de tester en local vos pages web dynamiques. C’est important de travailler en local tant que les pages travaillant avec des formulaires ne sont pas absolument sécurisées. N’importe qui pourrait aller bricoler les données de votre site en préparation.

Installation du pack XAMPP Télécharger à l’adresse suivante http://www.apachefriends.org/fr/xampp.html Décompresser le zip à la racine de votre disque dur, puis lancer le fichier setup_XAMPPlite.bat. Lancer l’application XAMPP

Configuration de XAMPP Cocher Cette case Cliquer sur service Cliquer sur Admin En cliquant sur ces boutons on active ou désactive les services Cliquer sur OK

Administration XAMPP Dans Apache environnement Ces information donnent le nom (localhost) et l’adresse (127.0.0.1) de votre serveur que vous devrez entrer dans la configuration du site web dans dreamweaver. Cliquer sur phpinfo(). Important vous avez la version de PHP que vous allez utiliser. Assurez vous que votre hébergeur de site web possède la même. Cliquer sur Statut Cliquer sur Sécurité En vert ce sont les services actifs. PHP et la base de donnée MYSQL sont bien actif on peut donc les utiliser Les autres options ne nous seront pas utiles pour le moment. Votre serveur local n’est actuellement pas sécurisé mais si vous ne l’utilisez qu’en local et si vous êtes seul sur un réseau privé vous n’êtes pas obligé de mettre des mots de passe sur l’administration du serveur APACHE et de la base MYSQL. Autrement c’est indispensable. N’utilisez pas cette version pour faire un serveur WEB accessible depuis internet elle n’est pas sécurisé pour cela. Vous arrivez sur l’écran d’accueil de XAMPP qui s’ouvre dans votre navigateur par défaut. Je vous conseil vivement Firefox dont les plug-in HTML validator et Javascript debugging (à télécharger) s’avère des outils précieux pour la mise au point de pages web complexes.

Administration des bases de données MYSQL Entrer le nom de votre nouvelle base de donnée Vous avez ici les bases de données existantes Cliquer sur phpMyAdmin

Création du dossier de votre site web local Aller dans le dossier de xampp à la racine du disque dur puis dans le dossier htdocs et créer le dossier topsoft. Tous les dossiers et fichiers du site local de Dreamweaver seront copiés dans ce dossier qui deviendra alors le site distant. Vous avez maintenant un serveur vous permettant de tester vos page web incluant du code PHP et des données MYSQL sur votre PC.

Définir les besoins en données Tout d’abord nous allons concevoir un menu à partir d’une table données appelée menu. L’intérêt de ce menu c’est que lorsque l’on ajout une page il suffit d’entrer ce qui la caractérise dans la table menu. Toutes les pages ou ce trouvera un menu incluant la table menu affichera le lien vers cette page. De même si on supprime la page il suffit alors de supprimer les données de cette page dans la table menu. 4 champs seront nécessaires index (N° d’ordre d’affichage) image(lien vers l’image icône de la page) Lien (lien de la page à afficher) Alt (texte de substitution si l’image ne s’affiche pas)

Créer la table menu Créer la table menu Voici nos 4 champs Les types de champs Indiquer le nombre de champs ici 4 Cliquer sur la base de donnée topsoft La clef d’index

Configuration de Dreamweaver pour un site local (localhost) Cliquer sur Site Nom du site Sélectionner LocalRéseau Indiquer le chemin des fichiers pages sur le PC Cliquer sur Nouveau Site Indiquer le chemin ou se trouve les fichiers sur le serveur local Indiquer le chemin des fichiers images sur le PC Indiquer le chemin ou se trouve les fichiers sur le serveur local Cliquer sur OK Sélectionner PHP MYSQL Indiquer l’emplacement du serveur local(localhost par défaut puis nom du site Sélectionner LocalRéseau Indiquer l’URL du site en local(par défaut localhost puis nom du site Cliquer sur infos distantes Cliquer sur serveur d’évaluation Sélectionner lien relatif à un document

Préparation des éléments du menu Rubriques du menu Acceuil Edito logiciels Formation Liens courriel Pour chaque rubrique il nous faut une image et une page vers laquelle nous mettrons le lien. Créons chaque page en utilisant la page Formation2 comme modèle en faisant enregistrer sous. A l’aide d’un logiciel de dessin Firework ou Photoshop réaliser les images des bouton du menu.

Remplir la table de données Menu Cliquer sur Insérer Choisir la table menu en cliquant Sur PhpMyadmin, sélectionner la base TOPSOFT Remplir les champs de données Puis cliquer sur Exécuter Voici la table menu avec ses données.

Réaliser le menu Pour réaliser le menu nous devons donner certaines information à Dreamweaver. Définir la base de donnée utilisée. Indiquer quelle table nous allons utiliser. L’ordre dans lequel nous allons afficher les données du menu. Pour cela nous allons utiliser les comportements serveur de Dreamweaver.

Raccordement à la base de donnée Cliquer sur base de donnée Cliquer sur + AdresseIP du serveur par défaut 127.0.0.1 en local Nom d’utilisateur ici root par défaut Cliquer sur OK On supprime d’abord l’ancien menu Sélectionner comportement serveur Cliquer sur + pour développer La base de donnée apparaît ici Nom de la base de donnée Type de document PHP Tester le connexion

Raccordement à la table menu Cliquer sur OK pour valider Nommer le Jeu d’enrégistrement Sélectionner la base de donnée Tester la requête Sélectionner la table menu Sur Comportement serveur Cliquer sur + Cliquer sur Jeu d’enrégistrement Vous disposez maintenant du jeu d’enregistrement Menu Sélectionner sur le tri sur index qui donnera l’ordre d’affichage des données du menu Sélectionner sur le tri sur croissant Cliquer sur OK pour fermer la fenêtre

Placer le menu sur la page Sélectionner source de fichier Sélectionner source de fichier Insérer une image en haut de la colonne prévue pour le menu Sélectionner Image Sélectionner Lien La liaison de l’image avec le champ image de la table Menu s’inscrit ici La liaison de la page avec le champ Lien de la table Menu s’inscrit ici Cliquer sur OK Cliquer sur OK Cliquer sur l’icône fichier Sélectionner le texte et copier Cliquer sur l’icône fichier Coller et remplacer Lien par alt

Répéter région Pour afficher toutes les données du menu nous allons ajouter un comportement serveur en cliquant sur + Cliquer sur région répétée Sélectionner l’enregistrement Menu A ce stade si vous afficher la page vous n’aurez que le premier élément du menu Vous avez maintenant une région répétée Sélectionner tout les enregistrements Cliquer sur affichage en direct pour voir le menu s’afficher Cliquer sur OK pour valider Sélectionner l’mage du menu

Formulaires et sécurité Considérons que ce site est ouvert à contribution de la part d’adhérents. Nous allons donc faire un formulaire d’inscription que les nouveaux adhérents devront remplir et qui s’ajouterons directement à la table adhérent de la base de donnée. Tout comme nous avons créé la table Menu, nous allons créer la table Adhérents.

Créer la table Adhérents Déterminer les champs nécessaires Index N° adhérent (int N° auto) Nom Champ texte Prénom Champ texte Adresse Champ texte Code postal Champ int (5 caractères) Ville Champ texte Adresse mail Champ texte Mot de passe Champ texte (min 6 car.) Mail valide Champ int (nombre entier 1car.) Fiche valide Champ int (nombre entier 1 car)

Formulaire: préparation La table étant créée, il faut faire un formulaire pour pouvoir saisir les données dans une page web. Pour l’ajout de nouvelles données il s’agit d’un formulaire d’insertion. Nous allons appeler cette page inscription. Cette page aura l’extension .php. A partir de la page index créons cette nouvelle page avec enregistrer sous. Créons maintenant le formulaire très rapidement grâce à une fonction puissante de Dreamweaver.

Formulaire d’insertion: réalisation Cliquer sur Objet de données Cliquer sur Insertion Cliquer sur Formulaire Cliquer sur insérer un enregistrement Cliquer sur assistant de formulaire d’insertion d’enregistrement Cliquer sur Form Cliquer sur OK pour valider Sélectionner la base de donnée topsoft Sélectionner la table Adherents Sélectionner la page ou aller après validation du formulaire On enlève les champs dont on ne veux pas de saisie de donnée en cliquant sur - Cliquer pour faire un point d’insertion Une zone entourée de pointillés apparaît

Formulaire: présentation avec CSS Cliquer Mise en forme Déplaçons le bouton à l’extérieur du tableau et supprimons la dernière ligne du tableau Cliquer sur insérer la balise Cliquer sur insérer la balise div Cliquer sur OK Sélectionner la ligne du haut Sélectionner corpForm Sélectionner titreForm Sélectionner le bas du formulaire et selectionner piedForm Sélectionner le tableau

Formulaire: présentation avec CSS Nom devient en gras Sélectionner Nom Répéter la même opération sur tous les champs ayant un astérix Sélectionner la classe oblig Sélectionner une classe

Formulaire: focus sur le champ en mode saisie Dans un formulaire vous devez aider au maximum la personne qui doit le remplir. A l’affichage de la page mettre le focus sur le 1er champ de saisie (Champ dans lequel ce fait la saisie). Changer la couleur du champ qui a le focus. Donner un N° d’ordre à chaque champ. Cela permet de passer d’un champ à l’autre avec la touche de tabulation. Vérifier le contenu de la saisie des champs (voir sécurité des champs de saisie). En cas d’erreur de saisie réafficher le contenu des champs saisis (très important).

Formulaire: focus sur champ de saisie Dans le code source, Juste après la balise </head> Insérer cette ligne de code mettra le focus sur le champ ‘nom’ à l’ouverture de la page dans le navigateur. <body onload="document.getElementById(‘nom’ ).focus()"> Par contre en cas d’erreur de saisie il faudra mettre le focus sur le champ ou l’on a déceler l’erreur. L’idéal est alors de créer une variable serveur qui nous renverra le nom du champ en erreur si cela se produit. <?php require_once('Connections/topsoft.php'); ?> connexion à la B.D.D. <?php session_start(); // démarrage d’une session Si c’est le premier affichage du formulaire la variable est vide on met donc le focus sur nom par défaut. Sinon on ne fait rien car elle contient le nom du champ en erreur. if ($_SESSION['focus'] == "") {$_SESSION['focus'] = "nom";} ?> Voici maintenant l’écriture du focus du champ à l’affichage de la page. <body onload="document.getElementById('<?php echo $_SESSION['focus']; ?>').focus()"> Notez que l’insertion de code php se trouve entre les balises <?php et ?>. Ces balises sont disponibles dans le menu php.

Changer la couleur du champ qui a le focus Dans le code source, vous allez repérer la saisie dans le champ nom par cette ligne: <input type="text" name="Nom" value="" size="32" /> Placer le curseur après "Nom" et faite un espace, un menu déroulant vous propose des options choisissez onfocus="“ puis insérer ce code javascript entre les guillemets this.className='focus'; La ligne de code devient alors: <input type="text" name="Nom" onfocus="this.className='focus';" value="" size="32" /> Ainsi lorsque vous êtes sur le champ de saisie il devient jaune. La classe focus est décrite dans le fichier CSS. Faire la même chose pour tous les champs de saisie.

Changer la couleur du champ en quittant le focus <input type="text" name="Nom" onfocus="this.className='focus';" value="" size="32" /> Dans cette ligne positionner le curseur après 'focus';" puis faite un espace et choisir onblur dans la liste déroulante. Insérer cet code javascript entre les guillemets this.className='normal'; et la nouvelle ligne de code du camp nom devient: <input type="text" name="Nom" onfocus="this.className='focus';" onblur="this.className='normal';" value="" size="32" /> Ainsi lorsque vous quittez ce champ il reprend sa couleur initiale (blanc). Faire la même chose pour tous les champs de saisie.

Donner un N° d’ordre à chaque champ <input type="text" name="Nom" onfocus="this.className='focus';" onblur="this.className='normal';" value="" size="32" /> Dans cette ligne positionner le curseur après size="32" puis faite un espace et choisir tabindex="" dans la liste déroulante. Puis donner le N° d'ordre entre les guillemets, ici 1. Ce qui donnera cette nouvelle ligne de code pour définir ce champ. <input type="text" name="Nom" onfocus="this.className='focus';" onblur="this.className='normal';" value="" size="32" tabindex="1" /> Faire la même chose pour tous les champs de saisie en ajoutant 1 à chaque fois. Faire la même opération sur le bouton de validation du formulaire. <input type="submit" value="Insérer un enregistrement" tabindex="8" />

Contrôle de saisie des champs Dans la saisie de données dans un champ accessible par n'importe qui sur internet la première chose à assurer est la sécurité du site dans le contrôle de la saisie de ces données. En effet l'introduction de caractères spéciaux dans un site dynamique pourrait permettre la prise de contrôle du site par des personnes mal intentionnées. Cette opération de filtrage est mise en place de façon automatique par Dreamweaver.

Contrôle de saisie des données Ici nous allons voir qu'il est possible en ajoutant du code Javascript ou PHP de contrôler que les données correspondent au minimum de ce que l'on attend. Par exemple qu'un code postal ait 5 chiffres, qu'une adresse mail soit formaté correctement (ce qui n'empêche pas d'en vérifier son existence réelle après), le nombre de caractère d'un mot de passe, qu'un champ obligatoire soit effectivement rempli etc…

Contrôle de saisie des données Nous allons donc vérifier dans notre formulaire avec du Javascript: Le remplissage des champs obligatoires Le format du code postal Le format de l'adresse mail Le nombre de caractère minimum du mot de passe La validité du mot de passe par une double saisie Avec du code PHP Que l'on ne puisse pas saisir une adresse mail existent déjà dans le fichier Adhérent. Nous utiliserons un comportement à importer dans Dreamweaver: FELIXONE check new element.

Contrôles de données en Javascript Cliquer sur OK pour valider Dans inspecteur de balise, Comportements, cliquer sur + Avec cette méthode vous pouvez vérifier un certain nombre de comportements sur les champs Cliquer si obligatoire Puis cliquer sur Valider le formulaire Cliquer si nombre Cliquer si mail Les valeurs mini et maxi des nombres

Contrôles de données La valeur par défaut du champ. Peut-être utilisé pour mettre du code php pour le rafraichissement de donnée déjà saisie après une erreur Dans l'inspecteur de propriété Vous pouvez indiquer que c'est un mot de passe les caractères seront masqué par des points ou des étoiles La largeur du champ en caractères Le nombre de caractères maximum accepté Si c'est une simple ligne ou plusieurs lignes

Contrôles de données Ces comportements vont ajouter du code Javascript à la page mais il est possible en écrivant votre propre code ou en trouvant sur internet des comportements serveur plus complet d'améliorer encore la saisie. Dans l'exemple suivant on vérifie que l'adresse mail n'existe pas déjà dans la table adhérent

Contrôles de données Sélectionner le champ mail Indiquer la page en cas ou cette adresse existe ici on redemande la saisie Dans Comportements serveur, cliquer sur + Puis cliquer OK pour valider Indiquer le message d'erreur. Le message par défaut est en anglais Puis cliquer sur FELIXONE Puis cliquer sur Check First element (on ne contrôle qu'un élément) Puis cliquer sur Check new elements

Contrôles de données Dans Balise Comportements nous allons cliquer sur + et choisir Massimocorner Compare fields. Il s'agit d'un comportement importé depuis les comportements disponibles sur internet et accessible directement depuis Dreamweaver. Selectionner password dans la form1 Puis cliquer OK pour valider le test de comparaison des champs Changer le message d'erreur en français Sélectionner password_confirm dans la form1

réafficher le contenu des champs saisis Nous allons aborder un chapitre important et un peu compliqué à mettre en œuvre, le réaffichage des données saisie après contrôle de celles-ci. Ceci est très important car sinon la personne qui fait une erreur lors de la saisie devrait tout ressaisir à chaque fois qu'elle fait une erreur et cela, on le comprendra aisément, peut décourager beaucoup de monde de s'inscrire sur ce site. Par sécurité nous allons utiliser des variables de sessions qui ont l'avantage d'être sécurisées car stockées sur le serveur donc plus difficiles mais pas impossible à pirater. Mais avant cela nous allons créer une connexion sécurisée pour l'accès aux pages protégés.

Connexion à une page protégée Définir le champ de saisie du nom d'utilisateur ici l'adresse mail Définir le champ de saisie du mot de passe ici password Définir le nom de la colonne de donnée des utilisateurs dans la table adhérent ici mail Définir le nom de la base de donnée ici topsoft Définir le nom de la table de donnée ici adhérents Puis cliquer OK pour valider la connexion Définir le chemin de la page ou l'on désire se connecter Définir le chemin de la page à afficher en cas d'échec Définir le nom de la colonne de donnée des mots de passe dans la table adhérent ici password

Sauvegarde des données du formulaire dans des variables de sessions Tout d'abord vous devez démarrer une session (le serveur attribut automatiquement un N° de session) <?php session_start(); //démarre la session if ($_SESSION['focus'] == "") {$_SESSION['focus'] = "Nom";// Au démarrage de la page le focus va sur le champ nom} ?> Ensuite on sauve les données du formulaire dans ses variables de session.

Sauvegarde des données du formulaire dans des variables de sessions $FX_dupValue .= "Cette adresse mail existe déjà!";//contrôle adresse mail $_SESSION['MM_Username'] = "";//lignes généré par Dreamweaver $_SESSION['focus'] = "eMail";//le focus sera mis sur le champ mail $_SESSION['nom'] = $HTTP_POST_VARS["Nom"]; $_SESSION['prenom'] = $HTTP_POST_VARS["Prenom"]; $_SESSION['adresse'] = $HTTP_POST_VARS["Adresse"]; $_SESSION['Ville'] = $HTTP_POST_VARS["Ville"]; $_SESSION['code_postal'] = $HTTP_POST_VARS["code_postal"]; $_SESSION['mail'] = $HTTP_POST_VARS["mail"]; $_SESSION['password_confirm'] = $HTTP_POST_VARS["password_confirm"];

Ré-affichage des données en cas d'erreur de saisie Indication d'affichage de variable de session La valeur initiale du champ sera cette ligne de code php qui affiche (echo) le contenu de la variable de session ($_SESSION['Nom'])

Enregistrement des données dans une table en insertion Cliquer sur + Vous devez relier les données de la table Cliquer sur OK Cliquer sur enregistrement à un champ de la "form" dans laquelle vous saisissez vos données indiquer sur quelle page aller après l'insertion des données du formulaire

Afficher le contenu d'une fiche Pour permettre la mise à jour d' une fiche vous aller créer 2 formulaires à l'aide de l'icone form. Pour visualiser le contenu de la fiche il faut afficher les données dans les champs de saisie. 1er formulaire Cliquer sur Index dans le jeux d'enregistrement Adhérents Cliquer sur OK Ici on ajout un menu de reroutage et dans propriétés cliquer sur dynamique Cliquer sur OK 2eme formulaire Etiquette mail Maintenir le bouton enfoncé (gauche) et faire glisser la souris jusque sur le champ correspondant à cette donnée (ici Nom) Sélectionner le jeu SelectAdherent Cliquer sur l'éclair en face de la donnée de la table concernée (ici adhérents) Cliquer sur l'éclair valeur index

Afficher le contenu d'une fiche Pour que la fiche qui apparait à l'écran soit la bonne vous devez modifier le comportement serveur de l'enregistrement adherents. Cliquer sur + pour ajouter une variable qui contiendra le contenu valeur du menu de reroutage selecAdherent Cliquer sur OK Nommer la variable (num) Affecter la variable = au champ index de la table Préciser le type (integer) car c'est un nombre entier Donner une valeur par défaut (1) Récuperer la valeur du menu de reroutage selecAdherent ($HTTP_GET_VARS['selecAdherent'])

Modifier la fiche Pour modifier le contenu de la fiche il faut ajouter un comportement serveur "mise à jour" Sélectionner le formulaire miseAjour Sélectionner la table adherents Cliquer sur OK Cliquer sur + Sélectionner le champ de formulaire correspondant à la donnée de la table Cliquer sur Mettre à jour l'enregistrement Indiquer sur quelle page aller après mise à jour de la fiche (ici on réaffiche les données modifiées)

Supprimer une fiche Cliquer sur OK Préciser la table Faire une copie de la page modification puis supprimer le comportement serveur "Mise à jour" et le formulaire modification. Pour supprimer le contenu de la fiche il faut ajouter un comportement serveur "Supprimer l'enregistrement". Créer une page supprime_inscriptionOK qui confirmera que la suppression à eu lieu Cliquer sur OK Préciser la table indiquer la colonne de clé primaire Noter le nom de la variable du menu de reroutage (ici selecAdherent) Cliquer sur Supprimer l'enregistrement

Accès restreint à certaines pages Pour accéder à une partie privée du site on peut autoriser l'accès à des pages protégées par un nom d'utilisateur et un mot de passe. Nous allons donc utiliser un formulaire d'accès pour la saisie du nom et du mot de passe. Dreamweaver a des outils spécifiques à ce genre d'opération dans les comportements serveur.

Formulaire d'accès privé Cliquer sur + . Cliquer sur OK pour valider. Ici les noms des champs du formulaire identifiant et mot de passe Ici le nom de la base de donnée Ici le nom de la table de donnée Ici les nom des champs de la table On précise que l'on n'utilise que le mot de passe. Chemin de la page si la connexion est réussie Chemin de la page si la connexion échoue

Restreindre l'accès à une page Cliquer sur + . Cliquer sur OK pour valider. Préciser les conditions de restriction Chemin de la page en cas d'erreur d'identification Sélectionner restreindre l'accès à la page

Requête et affichage des données Nous allons utiliser une table de données appelée Soft dans laquelle se trouvent une liste de logiciels. 2 critères nous permettent de trier les logiciels: Le système d'exploitation. Le type de logiciel Nous afficherons la liste des logiciels par groupe de 10 par page.

Requêtes Créons 3 jeux d'enregistrements Soft, systemesoft et typesoft dans les comportements serveur en utilisant les tables soft, systeme et typesoft.

Jeux d'enregistrements

Placer les sélecteurs de données Cliquer Menu de reroutage Selectionner le type:| L'action doit boucler sur la page et l'on prend la méthode GET Selectionner le systeme:| Positionner le curseur à l'emplacement que vous désirer sur la page et Cliquer sur Formulaire Positionner le curseur à l'emplacement que vous désirer dans le Formulaire Positionner le curseur à l'emplacement que vous désirer dans le Formulaire

Configurer les sélecteurs de données Selectionner le type:| Selectionner le systeme:| Sélectionner la table "Typesoft" Selectionner les champs destiné à la valeur et l'étiquette ici c'est le même Cliquer sur OK Cliquer sur OK Cliquer sur cette forme Sélectionner le champ qui doit avoir la même valeur que celle sélectionnée dans la table typeSoft Cliquer sur l'éclair pour sélectionner la valeur égal à Nommer la forme "selecType" Cliquer sur dynamique

Configurer les sélecteurs de données Selectionner le type:| Selectionner le systeme:| Sélectionner la table "systemsoft" Selectionner les champs destiné à la valeur et l'étiquette ici c'est le même Cliquer sur OK Cliquer sur OK Cliquer sur cette forme Sélectionner le champ qui doit avoir la même valeur que celle sélectionnée dans la table systemsoft Cliquer sur l'éclair pour sélectionner la valeur égal à Nommer la forme "selecSysteme" Cliquer sur dynamique

Placer le bouton de validation du formulaire "form1" Selectionner le type:| Selectionner le systeme:| Cliquer Bouton | Positionner le curseur à l'emplacement que vous désirer dans le Formulaire

Comportement serveur pour trier les données en fonction des choix Cliquer + Variables Cliquer sur + Cliquer sur OK Cliquer Tester Nommer la variable Cliquer sur OK Sélectionner le type (ici texte) Donner la valeur par défaut Définir la variable Type et récupérer la valeur de la forme sélecteur de type $HTTP_GET_VARS['selectType'] Récupérer la valeur de la forme sélecteur de systeme $HTTP_GET_VARS['selectSysteme'] Définir l'ordre d'affichage des données. pour le faire vous pouvez cliquer sur + de la table soft sélectionner le champ sur lequel vous définissez l'ordre des données et cliquer sur ORDER BY Définir les conditions d'utilisation des variables précédemment définies. Cliquer + Table Cliquer SELECT Cliquer soft Cliquer sur OK

Afficher les données Selectionner le type:| Selectionner le systeme:| Cliquer sur source de données Cliquer sur source de données {Soft.Soft_Nom} Cliquer sur softimage qui contient le lien de l'image qui doit se trouver sur le serveur Cliquer sur Lien qui contient le lien lorsque l'on clique sur l'image Cliquer sur le bouton gauche et en maintenant enfoncè amener le curseur de la souris ou vous désirez afficher la donnée soft_Nom de la table soft Insérer l'emplacement d'une image Cliquer sur le dossier donnant le lien de l'image Cliquer sur OK Cliquer sur OK Cliquer sur le dossier donnant le lien si on clique sur l'image

Afficher les données Attention à ne pas mettre les données à afficher dans form1. les mettre de préférence dans une nouvelle forme mais cele ci n'est obligatoire que si ces données sont modifiables pour être mises à jour après modification. Selectionner le type:| Selectionner le systeme:| {Soft.Soft_Nom} Cliquer sur + Sélectionner Région répétée Cliquer sur OK Sélectionner afficher 10 enregistrements à la fois Sélectionner Soft {Soft.Soft_Description} Amener cette donnée avec la souris à l'emplacement désiré Sélectionner ces données pour créer une région répétée afin que toute les données s'affiche

Afficher les données: styles CSS Pour afficher les données avec une belle présentation il faut définir des styles dans la feuille de style CSS et les appliquer à chaque partie de l'affichage des données. La région répéter fera afficher les données par groupe de 10. Mais vous pouvez modifier ce nombre. Pour faire défiler les données vous devez rajouter des contrôles de navigation.

Contrôles de navigation Nous pouvons ajouter plusieurs types de contrôles de navigation le principe reste toujours le même ajouter le comportement serveur correspondant. Cliquer sur + Cliquer sur OK Vérifier que vous activer bien la bonne table de données Cliquer sur déplacer vers la page suivante Le lien suivant est activé

Mise en ligne en fonction des possibilités du serveur web Vous devez trouver un hébergeur web qui inclut dans son offre le langage PHP (la plupart offre la version 5) et une base de donnée MySQL (Free propose aussi postgreSQL (plus complet mais je n'ai pas essayé avec Dreamweaver)