FORMATIONDREAMWEAVER CS4AVEC LANGAGE PHP ET
BASE DE DONNEES MYSQL
Patrick QUINIO
SOFTTOPhttp://softtop.free.fr
É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 APACHEet 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 suivantehttp://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
Cliquer sur service Cocher Cette case
Cliquer sur OK
En cliquant sur ces boutons on active ou désactive les services
Cliquer sur Admin
Administration XAMPP
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.
Cliquer sur StatutEn 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.
Cliquer sur Sécurité
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.
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.
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.
Administration des bases de données MYSQL
Cliquer sur phpMyAdmin
Vous avez ici les bases de données existantes
Entrer le nom de votre nouvelle base de donnée
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
Cliquer sur la base de donnée topsoft
Créer la table menuIndiquer le nombre
de champs ici 4
Voici nos 4 champsLes types de champsLa clef d’index
Configuration de Dreamweaver pour un site local (localhost)
Cliquer sur Site
Cliquer sur Nouveau Site
Nom du siteIndiquer le chemin des fichiers pages sur le PC
Indiquer le chemin des fichiers images sur le PC
Indiquer l’emplacement du serveur local(localhost par
défaut puis nom du siteSélectionner lien
relatif à un document
Cliquer sur infos distantes
Sélectionner LocalRéseau
Indiquer le chemin ou se trouve les fichiers sur le
serveur local
Cliquer sur serveur d’évaluation
Sélectionner PHP MYSQLSélectionner LocalRéseau
Indiquer le chemin ou se trouve les fichiers sur le
serveur local
Indiquer l’URL du site en local(par défaut localhost
puis nom du site
Cliquer sur OK
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
Sur PhpMyadmin, sélectionner la
base TOPSOFT
Choisir la table menu en cliquant
Cliquer sur Insérer
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
On supprime d’abord l’ancien menu
Sélectionner comportement serveurType de document
PHP
Cliquer sur base de donnéeCliquer sur +
AdresseIP du serveur par défaut 127.0.0.1 en localNom d’utilisateur ici root
par défautNom de la base de donnéeTester le connexion
Cliquer sur OKLa base de donnée
apparaît iciCliquer sur + pour
développer
Raccordement à la table menu
Sur Comportement serveur
Cliquer sur +Cliquer sur Jeu
d’enrégistrement
Nommer le Jeu d’enrégistrementSélectionner la base de donnéeSélectionner la
table 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
Tester la requête
Cliquer sur OK pour fermer la fenêtre
Cliquer sur OK pour valider
Vous disposez maintenant du jeu d’enregistrement
Menu
Placer le menu sur la page
Insérer une image en haut de la colonne
prévue pour le menu
Cliquer sur l’icône fichier
Sélectionner source de fichier
Sélectionner Image
Cliquer sur OK
La liaison de l’image avec le champ image
de la table Menu s’inscrit ici
Cliquer sur l’icône fichier
Sélectionner source de fichier
Sélectionner Lien
La liaison de la page avec le champ Lien de la
table Menu s’inscrit iciCliquer sur OK
Sélectionner le texte et copierColler et
remplacer Lien par alt
Répéter région
A ce stade si vous afficher la page vous
n’aurez que le premier élément du menu
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’mage du menu
Sélectionner l’enregistrement
Menu
Sélectionner tout les
enregistrements
Cliquer sur OK pour valider
Vous avez maintenant une région répétée
Cliquer sur affichage en direct pour voir le menu
s’afficher
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 pour faire un point d’insertion
Cliquer sur FormulaireCliquer sur
Form
Une zone entourée de pointillés apparaît
Cliquer sur Insertion
Cliquer sur Objet de données
Cliquer sur insérer un enregistrementCliquer sur assistant de
formulaire d’insertion d’enregistrementSélectionner la
base de donnée topsoft
Sélectionner la table Adherents
On enlève les champs dont on ne veux pas de
saisie de donnée en cliquant sur -
Cliquer sur OK pour valider
Sélectionner la page ou aller
après validation du formulaire
Formulaire: présentation avec CSS
Déplaçons le bouton à l’extérieur du tableau et supprimons la dernière
ligne du tableau
Cliquer Mise en forme
Sélectionner la ligne du haut
Cliquer sur insérer la balise div
Sélectionner titreForm
Cliquer sur OK
Sélectionner le tableau
Cliquer sur insérer la balise
Sélectionner corpForm
Sélectionner le bas du formulaire et
selectionner piedForm
Formulaire: présentation avec CSS
Sélectionner une classe
Sélectionner la classe oblig
Nom devient en gras
Répéter la même opération sur tous les champs ayant
un astérix
Sélectionner Nom
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 sessionSi 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
Dans inspecteur de balise,
Comportements, cliquer sur +
Puis cliquer sur Valider le
formulaire
Avec cette méthode vous pouvez vérifier
un certain nombre de comportements sur
les champsCliquer si obligatoire
Cliquer si nombreCliquer si mail
Les valeurs mini et maxi des nombres
Cliquer sur OK pour valider
Contrôles de données
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èresLe nombre de caractères
maximum acceptéSi c'est une simple ligne
ou plusieurs lignes
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
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
Dans Comportements serveur, cliquer
sur +
Puis cliquer sur
FELIXONE
Puis cliquer sur Check
new elements
Puis cliquer sur Check First element (on ne
contrôle qu'un élément)
Sélectionner le champ mail
Indiquer la page en cas ou cette adresse
existe ici on redemande la saisie
Indiquer le message d'erreur. Le message par
défaut est en anglais
Puis cliquer OK pour valider
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
Sélectionner password_confirm dans
la form1
Changer le message d'erreur en français
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éeDéfinir le champ de saisie du nom d'utilisateur ici l'adresse mailDéfinir le champ de saisie du mot
de passe ici password
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
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 colonne de donnée des mots de passe dans
la table adhérent ici password
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
Puis cliquer OK pour valider la connexion
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
La valeur initiale du champ sera cette ligne de code php qui affiche (echo) le contenu de la variable de session ($_SESSION['Nom'])
Indication d'affichage de variable de session
Enregistrement des données dans une table en insertion
Cliquer sur +Vous devez
relier les données de la
table
à 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
Cliquer sur OK
Cliquer sur enregistrement
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.
1er formulaire
2eme formulaire
Pour visualiser le contenu de la fiche il faut afficher les données dans les champs de saisie.
Cliquer sur l'éclair en face de la donnée de la table
concernée (ici adhérents)
Maintenir le bouton enfoncé (gauche) et faire glisser la souris jusque sur le champ
correspondant à cette donnée (ici Nom)
Ici on ajout un menu de reroutage et dans propriétés
cliquer sur dynamique
Sélectionner le jeu SelectAdherent
valeur index
Etiquette mail
Cliquer sur l'éclair
Cliquer sur Index dans le jeux d'enregistrement
Adhérents
Cliquer sur OKCliquer sur OK
Afficher le contenu d'une fichePour 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
Nommer la variable (num)
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'])
Cliquer sur OK
Affecter la variable = au champ index de la table
Modifier la fiche
Pour modifier le contenu de la fiche il faut ajouter un comportement serveur "mise à jour"
Cliquer sur +
Cliquer sur Mettre à jour l'enregistrement
Sélectionner le formulaire miseAjour
Sélectionner la table adherents
Sélectionner le champ de formulaire correspondant à
la donnée de la tableIndiquer sur quelle page aller après mise à jour de la fiche (ici on
réaffiche les données modifiées)
Cliquer sur OK
Supprimer une ficheFaire 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 Supprimer l'enregistrement
Préciser la table
indiquer la colonne de clé primaire
Noter le nom de la variable du menu de reroutage (ici
selecAdherent)
Cliquer sur OK
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é
Ici les noms des champs du formulaire identifiant et
mot de passeIci le nom de la base de
donnéeIci le nom de la table de donnéeIci les nom des champs de la table
Chemin de la page si la connexion est réussie
Chemin de la page si la connexion échoue
On précise que l'on n'utilise que le mot de passe.
Cliquer sur OK pour valider.
Cliquer sur + .
Restreindre l'accès à une page
Cliquer sur + .
Sélectionner restreindre l'accès à la page
Préciser les conditions de restriction
Chemin de la page en cas d'erreur d'identification
Cliquer sur OK pour valider.
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
Positionner le curseur à l'emplacement que vous
désirer sur la page et Cliquer sur Formulaire
Selectionner le type:|
Positionner le curseur à l'emplacement que vous
désirer dans le Formulaire
Cliquer Menu de reroutage
Selectionner le systeme:|
Positionner le curseur à l'emplacement que vous
désirer dans le Formulaire
L'action doit boucler sur la page et l'on prend la
méthode GET
Configurer les sélecteurs de données
Selectionner le type:|
Selectionner le systeme:|
Cliquer sur cette forme
Nommer la forme "selecType" Cliquer sur dynamique
Sélectionner la table "Typesoft"
Selectionner les champs destiné à la valeur et l'étiquette ici c'est le
même
Cliquer sur l'éclair pour sélectionner la valeur égal à
Sélectionner le champ qui doit avoir la même valeur que celle
sélectionnée dans la table typeSoft
Cliquer sur OK Cliquer sur OK
Configurer les sélecteurs de données
Selectionner le type:|
Selectionner le systeme:|
Nommer la forme "selecSysteme" Cliquer sur dynamique
Sélectionner la table "systemsoft"
Selectionner les champs destiné à la valeur et l'étiquette ici c'est le
même
Cliquer sur l'éclair pour sélectionner la valeur égal à
Sélectionner le champ qui doit avoir la même valeur que celle sélectionnée
dans la table systemsoft
Cliquer sur OK Cliquer sur OK
Cliquer sur cette forme
Placer le bouton de validation du formulaire "form1"
Selectionner le type:|
Selectionner le systeme:|
|
Positionner le curseur à l'emplacement que vous
désirer dans le Formulaire
Cliquer Bouton
Comportement serveur pour trier les données en fonction des choix
Cliquer sur +
Cliquer + TableCliquer soft
Cliquer SELECT
Cliquer + Variables
Nommer la variableSélectionner le
type (ici texte)Donner la valeur par défaut
Récupérer la valeur de la forme sélecteur de systeme
$HTTP_GET_VARS['selectSysteme']
Cliquer sur OK
Définir les conditions d'utilisation des variables précédemment définies.
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
Cliquer Tester
Cliquer sur OK
Cliquer sur OK
Définir la variable Type et récupérer la valeur de la forme sélecteur de type$HTTP_GET_VARS['selectType']
Afficher les données
Selectionner le type:|
Selectionner le systeme:|
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
{Soft.Soft_Nom}
Insérer l'emplacement d'une image
Cliquer sur le dossier donnant le lien de l'image
Cliquer sur source de données
Cliquer sur softimage qui contient le lien de l'image qui doit se trouver sur le serveur
Cliquer sur OK Cliquer sur le dossier donnant le lien si on clique sur l'image
Cliquer sur source de données
Cliquer sur Lien qui contient le lien lorsque l'on clique sur l'image
Cliquer sur OK
Selectionner le type:|
Selectionner le systeme:|
{Soft.Soft_Nom}
Afficher les données
Amener cette donnée avec la souris à l'emplacement désiré
{Soft.Soft_Description}
Sélectionner ces données pour créer une région répétée afin que toute les
données s'affiche
Cliquer sur +
Sélectionner Région répétéeSélectionner SoftSélectionner afficher 10
enregistrements à la fois
Cliquer sur OK
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.
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 navigationNous 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 déplacer vers la page suivante
Vérifier que vous activer bien la bonne
table de données
Cliquer sur OK
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)
Top Related