FORMATION DREAMWEAVER CS4 AVEC LANGAGE PHP ET BASE DE DONNEES MYSQL Patrick QUINIO SOFTTOP Édition...

FORMATIONDREAMWEAVER CS4AVEC LANGAGE PHP ET

BASE DE DONNEES MYSQL

Patrick QUINIO

SOFTTOPhttp://softtop.free.fr

Édition février 2009

http://patrick.quinio.free.fr/

http://patrick.quinio.free.fr/

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

http://www.apachefriends.org/fr/xampp.html

http://www.apachefriends.org/fr/xampp.html

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


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 -


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


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


• 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


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


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:|


désirer dans le Formulaire

Cliquer Menu de reroutage

Selectionner le systeme:|



L'action doit boucler sur la page et l'on prend la

méthode GET

Configurer les sélecteurs de données



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



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"



|



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



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



{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)

FORMATION DREAMWEAVER CS4 AVEC LANGAGE PHP ET BASE DE DONNEES MYSQL Patrick QUINIO SOFTTOP Édition...

Documents

Transcript of FORMATION DREAMWEAVER CS4 AVEC LANGAGE PHP ET BASE DE DONNEES MYSQL Patrick QUINIO SOFTTOP Édition...