Vous êtes sur la page 1sur 64

SOFTTOP

http://softtop.free.fr

FORMATION
DREAMWEAVER CS4
AVEC LANGAGE PHP ET
BASE DE DONNEES MYSQL

dition fvrier 2009 Patrick QUINIO


SOMMAIRE
Langage PHP et Base de donne MYSQL pour un site
dynamique.
Installation dun serveur APACHE et dune base de
donne MYSQL Locale avec XAMPP.
Configurer Dreamweaver pour un site local.
Raliser un menu avec PHP et MYSQL.
Formulaires et scurit.
Site protg par un mot de passe.
Requte, affichage, modification, suppression des
donnes.
Mise en ligne en fonction des possibilits du serveur
web.
Conclusion.
Langage PHP
pour un site dynamique
Un site dynamique est un ensemble de pages web, relies une
base de donne.
Nous entrons ici dans le web professionnel. La base de donne
contient des informations place dans des tables comme dans
comme dans un tableau de donnes Excel.
Lintrt de la chose rside dans le fait que lon peut changer les
donnes dune page en gardant la prsentation 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 donnes. Autrement il aurait fallut modifier toutes les
pages contenant les articles et faire des pages pour chaque srie
darticle afficher.
Autre avantage on peut trier les donnes, en faisant des requtes,
avant de les afficher, dcider du nombre darticle afficher par page
etc.
Avec PHP cest le serveur qui travaille et gnre 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 dernire version est la 5)
Une base de donne MYSQL est aussi
ncessaire. Tout est inclus avec le pack XAMPP
et gratuit. Il sagit ici dinstaller un serveur sur
votre PC qui va vous permettre de tester en
local vos pages web dynamiques.
Cest important de travailler en local tant que les
pages travaillant avec des formulaires ne sont
pas absolument scurises. Nimporte qui
pourrait aller bricoler les donnes de votre site
en prparation.
Installation du pack XAMPP
Tlcharger ladresse suivante
http://www.apachefriends.org/fr/xampp.ht
ml
Dcompresser le zip la racine de votre
disque dur, puis lancer le fichier
setup_XAMPPlite.bat.
Lancer lapplication XAMPP
Configuration de XAMPP

Cliquer sur service Cocher Cette case

Cliquer sur Admin

En cliquant sur ces


boutons on active ou
Cliquer sur
dsactive lesOK
services
Administration XAMPP

Dans Apache
environnement Ces information donnent le
Cliquer sur phpinfo().
sur Statut vous aveznom
Cliquer Important (localhost) et ladresse
la version
de Scurit
Cliquer sur PHP que vousce
En vert allez
sontutiliser.
(127.0.0.1) de votre serveur
les services
Assurezactifs.
vous
Les queque
autres votre
vous
options devrez
nedenousentrer dans
Votre serveur local nest actuellement
PHP pas
et la scuris
base mais si
Vous arrivez sur lcran
hbergeur daccueil
de site
seront de
la web
pas XAMPP
configuration
utiles
sontpour ledu site web
vous ne lutilisez quen local et siMYSQL
donne vous tes seul
biensur un
qui souvre danspossde
votre actif
navigateur
la on
mme. par
dans
moment. dfaut.
dreamweaver.
rseau priv vous ntes pas oblig peut de mettre
donc des
les mots de
Je vous conseil vivement Firefox dont les
passe sur ladministration du serveurutiliser
APACHE et de la base
plug-in HTML validator et Javascript
MYSQL. Autrement cest indispensable. Nutilisez pas cette
debugging ( tlcharger) savre des outils
version pour faire un serveur WEB accessible depuis internet
prcieux pour la mise au point de pages web
elle nest pas scuris pour cela.
complexes.
Administration des bases de
donnes MYSQL

Entrer le nom de votre


nouvelle base de donne
Vous avez ici les bases de
donnes existantes
Cliquer sur
phpMyAdmin
Cration du dossier de votre site
web local
Aller dans le dossier de xampp la racine du
disque dur puis dans le dossier htdocs et crer
le dossier topsoft.
Tous les dossiers et fichiers du site local de
Dreamweaver seront copis 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 donnes MYSQL sur votre PC.
Dfinir les besoins en donnes
Tout dabord nous allons concevoir un menu
partir dune table donnes appele menu.
Lintrt de ce menu cest que lorsque lon ajout
une page il suffit dentrer ce qui la caractrise
dans la table menu. Toutes les pages ou ce
trouvera un menu incluant la table menu
affichera le lien vers cette page. De mme si on
supprime la page il suffit alors de supprimer les
donnes de cette page dans la table menu.
4 champs seront ncessaires index (N dordre
daffichage) image(lien vers limage icne de la
page) Lien (lien de la page afficher) Alt (texte
de substitution si limage ne saffiche pas)
Crer la table menu

Crer la table menu


Voici
Lesnos
types
4 champs
de champs
Indiquer le nombre
CliquerLasurclef
la base de
dindex
donne topsoft de champs ici 4
Configuration de Dreamweaver
pour un site local (localhost)

Cliquer sur Site


Nom du site Slectionner
Indiquer le chemin des LocalRseau
fichiers sur
Cliquer pages sur le PC Indiquer le chemin ou se
Indiquer le chemin des
Nouveau Site Indiquer
trouve le chemin
les fichiers surou
le se
fichiers images sur le PC
Cliquer sur
Indiquer lemplacement du OK trouve
Slectionner les
PHP
serveur fichiers
local sur le
Slectionner
MYSQL serveur local
serveur local(localhost par
LocalRseau
dfaut puis nom du site
Indiquer lURL du site en
Cliquer
Cliquersursurinfos
serveur Slectionner lien relatif
local(par
distantesdfaut localhost
dvaluation un document
puis nom du site
Prparation des lments 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.
Crons chaque page en utilisant la page
Formation2 comme modle en faisant
enregistrer sous.
A laide dun logiciel de dessin Firework ou
Photoshop raliser les images des bouton du
menu.
Remplir la table de donnes Menu

Cliquer sur Insrer

Choisir la table
Sur PhpMyadmin, menu en cliquant
Remplir leslachamps
slectionner base
de donnes
TOPSOFT
Puis cliquer sur
Excuter
Voici la table menu
avec ses donnes.
Raliser le menu
Pour raliser le menu nous devons donner
certaines information Dreamweaver.
Dfinir la base de donne utilise.
Indiquer quelle table nous allons utiliser.
Lordre dans lequel nous allons afficher les
donnes du menu.
Pour cela nous allons utiliser les
comportements serveur de Dreamweaver.
Raccordement la base de
donne

Cliquer sur base de


Cliquer
donnesur +
AdresseIP du serveur par
Nom dutilisateur en ici
Cliquer rootOK
sur
On supprime dabord dfaut 127.0.0.1 local
Nom par Cliquer
dfaut
Labase
Slectionner
de la basesur
de +donne
pour
dedonne
lancien menu TypeTester ledvelopper
de documentconnexion
PHPici
comportement apparat
serveur
Raccordement la table menu
Cliquer sur OK
pour valider

Nommer le Jeu
Slectionner la base
denrgistrement Tester la requte
Slectionner
de donnela table
menu Sur Comportement
Cliquer sur +
serveur
Cliquer sur Jeu Vous disposez
denrgistrement maintenant du jeu
denregistrement
Slectionner sur le tri sur Slectionner sur le Menu
index qui donnera lordre tri sur croissant
daffichage des donnes Cliquer sur OK pour
du menu fermer la fentre
Placer le menu sur la page

Slectionner
Slectionner
source
sourcededefichier
fichier
Insrer une image en Slectionner
Slectionner Lien
haut de la colonne La liaison de limage
Image
prvue pour le menu avecLaleliaison
champde la page
image
avec
de laletable
champMenuLien de la Cliquer sur OK
table Menuicisinscrit ici
sinscrit Cliquer sur OK

Cliquer sur licne


Cliquer sur
Slectionner le licne
fichier
texte Coller et
fichier
et copier
remplacer Lien
Rpter rgion

Pour afficher toutes les


donnes
Cliquerdusur
menu nous
Slectionner
A ce stade si vous allonsrpte
rgion ajouter un
Vous avez Slectionner
lenregistrementtout
afficher la page Cliquer
vous sur Cliquer
maintenant une comportement serveur les sur OK
Menu
naurez que le premier en direct
affichage sur +pour valider
en cliquant enregistrements
rgion rpte
lment dupourmenu voir le menu
safficher
Slectionner
lmage du menu
Formulaires et scurit
Considrons que ce site est ouvert
contribution de la part dadhrents.
Nous allons donc faire un formulaire
dinscription que les nouveaux adhrents
devront remplir et qui sajouterons
directement la table adhrent de la base
de donne.
Tout comme nous avons cr la table
Menu, nous allons crer la table
Adhrents.
Crer la table Adhrents
Dterminer les champs ncessaires
Index N adhrent (int N auto)
Nom Champ texte
Prnom Champ texte
Adresse Champ texte
Code postal Champ int (5 caractres)
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: prparation
La table tant cre, il faut faire un formulaire
pour pouvoir saisir les donnes dans une page
web. Pour lajout de nouvelles donnes il sagit
dun formulaire dinsertion.
Nous allons appeler cette page inscription.
Cette page aura lextension .php.
A partir de la page index crons cette nouvelle
page avec enregistrer sous.
Crons maintenant le formulaire trs rapidement
grce une fonction puissante de Dreamweaver.
Formulaire dinsertion: ralisation

Cliquer sur Objet


de donnes
Cliquer sur
CliquerInsertion
sur Cliquer sur insrer
Formulaire Cliquer
un sur assistant de
enregistrement
Cliquer sur Form
formulaireCliquer
dinsertion
sur OK
Slectionner la
Slectionner la denregistrement
pour valider
base de donne
Slectionner la
table topsoft
Adherents
On enlve les champs page ou aller
Cliquer pour faire un
dont on ne veuxUneaprs
pas de validation
zone entoure dude
point dinsertion
saisie de donne en formulaire
pointills apparat
cliquant sur -
Formulaire: prsentation avec CSS
Cliquer Mise
en forme

Dplaons le bouton
lextrieur du tableau et
supprimons la dernire
ligne du tableau Cliquer
Cliquersursurinsrer
insrer
lalabalise
balisediv

Cliquer sur OK
Slectionner la Slectionner
Slectionner
ligne du haut titreForm
corpForm
Slectionner le bas
du formulaire et Slectionner le
selectionner tableau
piedForm
Formulaire: prsentation avec CSS

Nom devient en
Slectionner gras
Nom

Rpter la mme
opration sur tous
les champs ayant
un astrix

Slectionner la
classe oblig

Slectionner
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 laffichage 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 dordre chaque champ. Cela
permet de passer dun champ lautre avec la
touche de tabulation.
Vrifier le contenu de la saisie des champs (voir
scurit des champs de saisie).
En cas derreur de saisie rafficher le contenu des
champs saisis (trs important).
Formulaire: focus sur champ de saisie
Dans le code source, Juste aprs la balise
</head>
Insrer cette ligne de code mettra le focus sur le champ nom louverture de
la page dans le navigateur.
<body onload="document.getElementById(nom ).focus()">
Par contre en cas derreur de saisie il faudra mettre le focus sur le champ ou
lon a dceler lerreur. Lidal est alors de crer 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(); // dmarrage dune session
Si cest le premier affichage du formulaire la variable est vide on met donc le
focus sur nom par dfaut. Sinon on ne fait rien car elle contient le nom du
champ en erreur.
if ($_SESSION['focus'] == "") {$_SESSION['focus'] = "nom";} ?>
Voici maintenant lcriture du focus du champ laffichage de la page.
<body onload="document.getElementById('<?php echo $_SESSION['focus'];
?>').focus()"> Notez que linsertion 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 reprer la saisie dans


le champ nom par cette ligne:
<input type="text" name="Nom" value="" size="32" />
Placer le curseur aprs "Nom" et faite un espace, un
menu droulant vous propose des options choisissez
onfocus=" puis insrer 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 dcrite dans le fichier CSS.
Faire la mme 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 aprs 'focus';" puis faite un espace
et choisir onblur dans la liste droulante. Insrer 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 mme chose pour tous les champs de saisie.
Donner un N dordre chaque
champ
<input type="text" name="Nom" onfocus="this.className='focus';"
onblur="this.className='normal';" value="" size="32" />
Dans cette ligne positionner le curseur aprs size="32" puis faite un
espace et choisir tabindex="" dans la liste droulante. Puis donner le N
d'ordre entre les guillemets, ici 1. Ce qui donnera cette nouvelle ligne
de code pour dfinir ce champ.
<input type="text" name="Nom" onfocus="this.className='focus';"
onblur="this.className='normal';" value="" size="32" tabindex="1" />
Faire la mme chose pour tous les champs de saisie en ajoutant 1
chaque fois. Faire la mme opration sur le bouton de validation du
formulaire.
<input type="submit" value="Ins&eacute;rer un enregistrement"
tabindex="8" />
Contrle de saisie des champs
Dans la saisie de donnes dans un champ
accessible par n'importe qui sur internet la
premire chose assurer est la scurit du site
dans le contrle de la saisie de ces donnes. En
effet l'introduction de caractres spciaux dans
un site dynamique pourrait permettre la prise de
contrle du site par des personnes mal
intentionnes. Cette opration de filtrage est
mise en place de faon automatique par
Dreamweaver.
Contrle de saisie des donnes
Ici nous allons voir qu'il est possible en ajoutant
du code Javascript ou PHP de contrler que les
donnes 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'empche pas d'en vrifier son
existence relle aprs), le nombre de caractre
d'un mot de passe, qu'un champ obligatoire soit
effectivement rempli etc
Contrle de saisie des donnes
Nous allons donc vrifier 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 caractre 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 dj dans le fichier Adhrent. Nous
utiliserons un comportement importer dans
Dreamweaver: FELIXONE check new element.
Contrles de donnes en
Javascript
Cliquer sur OK pour valider

Dans inspecteur Avec cette mthode


de balise, vous pouvez vrifier
Comportements, un certain nombre de
cliquer sur + comportements sur
les champs
Cliquer si obligatoire

Cliquer si nombre Puis cliquer


Cliquer si mail sur Valider le
formulaire
Les valeurs mini et
maxi des nombres
Contrles de donnes

La valeur par dfaut du


Dans l'inspecteur de champ. indiquer
Vous pouvez Peut-trequeutilis
c'estpour
proprit Lamot
un largeur dudu
mettre
de passe champ
code en
php pour le
les caractres
SiLec'est une simple
nombre
caractres ligne
de caractres
rafraichissement ou
de donne
seront masqu par des points ou
plusieurs
maximum
djdes
saisie lignes
accept
aprs une erreur
toiles
Contrles de donnes
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'amliorer encore la saisie.
Dans l'exemple suivant on vrifie que
l'adresse mail n'existe pas dj dans la
table adhrent
Contrles de donnes
Slectionner le
champ mail
Indiquer la page en
cas ou cette adresse
existe ici on
redemande la saisie

Dans
Puis cliquer OK
Comportements
pour valider
serveur, cliquer
sur + Indiquer le message
d'erreur. Le message par
dfaut est en anglais
Puis cliquer
Puis cliquer sur Check Puis
surcliquer
First element (on ne sur Check
FELIXONE
contrle qu'un lment) new elements
Contrles de donnes
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 franais Slectionner
password_confirm dans
la form1
rafficher le contenu des champs
saisis
Nous allons aborder un chapitre important et un peu
compliqu mettre en uvre, le raffichage des
donnes saisie aprs contrle de celles-ci.
Ceci est trs 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
aisment, peut dcourager beaucoup de monde de
s'inscrire sur ce site.
Par scurit nous allons utiliser des variables de
sessions qui ont l'avantage d'tre scurises car
stockes sur le serveur donc plus difficiles mais pas
impossible pirater.
Mais avant cela nous allons crer une connexion
scurise pour l'accs aux pages protgs.
Connexion duune
Dfinir le champ de saisie nom page protge
Dfinir le champ
d'utilisateur ici de saisie du
l'adresse mot
mail
de passe ici password

Dfinir le nom de la colonne de


donne des utilisateurs dans la
table adhrent ici mail Dfinir le nom de la base de
donne ici topsoft
Dfinir le nom de la table de
donne ici adhrents
Puis cliquer OK pour
valider la connexion

Dfinir le chemin de la page ou


l'on dsire se connecter
Dfinir le chemin de la page Dfinir le nom de la colonne de
afficher en cas d'chec donne des mots de passe dans
la table adhrent ici password
Sauvegarde des donnes du formulaire
dans des variables de sessions
Tout d'abord vous devez dmarrer une
session (le serveur attribut
automatiquement un N de session)
<?php session_start(); //dmarre la session
if ($_SESSION['focus'] == "") {$_SESSION['focus'] =
"Nom";// Au dmarrage de la page le focus va sur le
champ nom} ?>
Ensuite on sauve les donnes du
formulaire dans ses variables de session.
Sauvegarde des donnes du formulaire
dans des variables de sessions

$FX_dupValue .= "Cette adresse mail existe dj!";//contrle adresse mail


$_SESSION['MM_Username'] = "";//lignes gnr 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 donnes 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 donnes dans
une table en insertion

Cliquer sur +
Vous devez Cliquer sur OK
relier les
donnes de la
table
Cliquer sur
enregistrement
indiquer sur quelle page un champ de la "form"
aller aprs l'insertion des dans laquelle vous
donnes du formulaire saisissez vos donnes
Afficher le contenu d'une fiche
Pour permettre la mise jour d' une
fichePour
vousvisualiser
aller crerle2contenu
formulaires
de la
l'aide deill'icone
fiche form. les donnes
faut afficher
dans les champs de saisie.
1er formulaire

Cliquer sur Index dans le Cliquer


Cliquer sursur
OK OK
Ici on ajout un menu de 2eme formulaire
jeux d'enregistrement
reroutage et dans proprits Etiquette mail
Adhrents
cliquer sur dynamique

Maintenir le bouton enfonc Slectionner le jeu


(gauche) et faire glisser la SelectAdherent
souris jusque sur le champ Cliquer sur l'clair enCliquer
face sur l'clair
valeur
de la donne de laindex
table
correspondant cette
donne (ici Nom) concerne (ici adhrents)
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


Cliquer sur OK
variable qui contiendra le
contenu valeur du menu de
Nommer la variable (num)
Affecter la variable = au reroutage selecAdherent
champ index de la table
Prciser le type (integer) car
c'est un nombre entier
Donner une valeur par dfautRcuperer la valeur du menu de reroutage
(1) selecAdherent
($HTTP_GET_VARS['selecAdherent'])
Modifier la fiche
Pour modifier le contenu de la fiche
il faut ajouter un comportement
serveur "mise jour"
Slectionner le
formulaire miseAjour
Slectionner la table
adherents

Cliquer sur OK
Cliquer sur +

Slectionner le champ de
formulaire correspondant
Cliquer sur Mettre
Indiquer sur quelle page aller aprs la donne de la table
jour l'enregistrement
mise jour de la fiche (ici on raffiche
les donnes modifies)
Supprimer une fiche
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".
Crer une page supprime_inscriptionOK
qui confirmera que la suppression eu
lieu
Cliquer sur OK

Prciser la table
indiquer la colonne de
cl primaire
Noter le nom de la variable du Cliquer sur Supprimer
menu de reroutage (ici l'enregistrement
selecAdherent)
Accs restreint certaines pages
Pour accder une partie prive du site on peut
autoriser l'accs des pages protges par un
nom d'utilisateur et un mot de passe.
Nous allons donc utiliser un formulaire d'accs
pour la saisie du nom et du mot de passe.
Dreamweaver a des outils spcifiques ce
genre d'opration dans les comportements
serveur.
Formulaire d'accs priv

Cliquer sur + .

Cliquer sur OK pour valider.

Ici les noms des champs du


formulaire
Ici le nomidentifiant
de la baseet de
mot
de
Ici le nom passe
de la table de
donne
Ici les nomdonne
des champs de la
table
On prcise que l'on n'utilise
que le mot de passe.
Chemin de la page si la
connexion est russie
Chemin de la page si la
connexion choue
Restreindre l'accs une page

Cliquer sur + .

Cliquer sur OK pour valider.

Prciser les conditions


de restriction

Chemin de la page en cas


d'erreur d'identification Slectionner restreindre
l'accs la page
Requte et affichage des donnes
Nous allons utiliser une table de donnes
appele Soft dans laquelle se trouvent une
liste de logiciels.
2 critres nous permettent de trier les
logiciels:
Le systme d'exploitation.
Le type de logiciel
Nous afficherons la liste des logiciels par
groupe de 10 par page.
Requtes
Crons 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 slecteurs de donnes

Cliquer Menu de reroutage


Selectionner le type:|
Selectionner le systeme:| L'action doit boucler sur la
Positionner le curseur page et l'on prend la mthode
l'emplacement que vous GET
dsirer sur la page et Cliquer
Positionner le curseur
sur Formulaire
l'emplacement
Positionnerque vous
le curseur
dsirer dans le Formulaire
l'emplacement que vous
dsirer dans le Formulaire
Configurer les slecteurs de donnes

Selectionner le type:| Slectionner la table "Typesoft"


Selectionner le systeme:|

Selectionner les champs destin


la valeur et l'tiquette
Cliquer ici c'est le
sur OK
Cliquer sur
mmecette forme

Slectionner le champ qui doit avoir la


mme valeur que celle slectionne
dans la table typeSoft
Cliquer sur l'clair pour
slectionner la valeur gal

Nommer la forme "selecType" Cliquer sur dynamique


Configurer les slecteurs de donnes

Selectionner le type:| Slectionner la table "systemsoft"


Selectionner le systeme:|

Selectionner les champs destin


la valeur et l'tiquette
Cliquer
Cliquer ici c'est le
sur OK
sur OK
mme
Cliquer sur cette forme

Slectionner le champ qui doit avoir la


mme valeur que celle slectionne
dans la table systemsoft
Cliquer sur l'clair pour
slectionner la valeur gal

Nommer la forme "selecSysteme" Cliquer sur dynamique


Placer le bouton de validation du formulaire "form1"

Cliquer Bouton
Selectionner le type:|
Selectionner le systeme:|

Positionner le curseur
l'emplacement que vous
dsirer dans le Formulaire
Comportement serveur pour trier
les donnes en fonction des choix
Cliquer +
Variables

Cliquer sur +
Cliquer sur OK
Cliquer Tester
Nommer la Cliquer sur OK
Slectionner
variable le
Donner
type (ici la valeur
texte)
par dfaut Dfinir la variable Type et rcuprer la
valeur deRcuprer la valeurde
la forme slecteur detype
la forme slecteur
Dfinirdel'ordre
$HTTP_GET_VARS['selectType'] d'affichage des donnes.
systeme
Dfinir
pour lelesfaire
conditions d'utilisation
vous pouvez cliquerdes
sur + de
Cliquer + Table $HTTP_GET_VARS['selectSysteme']
Cliquer SELECT
variables
la table prcdemment
soft slectionnerdfinies.
le champ sur
Cliquer soft
lequel vous dfinissez l'ordre des donnes
Cliquer
et cliquer sursur OK BY
ORDER
Afficher les donnes

Selectionner le type:|
Selectionner le systeme:|

Cliquer sur source


de donnes
{Soft.Soft_Nom}

Cliquer sur softimage qui


Cliquer sur Lien qui contient le lien
contient le lien de l'image qui
lorsque l'on clique sur l'image
doit se trouver sur le serveur

Cliquer sur le bouton gauche et en


Insrer l'emplacement
maintenant enfonc amener le
curseurd'une
de laimage
souris ou vous dsirez
CliquerCliquer
sur le dossier
sur OK
afficher la donne soft_Nom
Cliquer de
sur la
le dossier donnant le
donnant le lien de l'image
table soft lien si on clique sur l'image
Afficher les donnes
Attention ne pas mettre les donnes
afficher dans form1. les mettre de
prfrence dans une nouvelle forme mais
Selectionner le type:| cele ci n'est obligatoire que si ces
Selectionner le systeme:| donnes sont modifiables pour tre mises
jour aprs modification.

{Soft.Soft_Nom}

Cliquer sur +

Slectionner Rgion
Cliquer sur OK rpte
Slectionner
Slectionner Soft 10
afficher
{Soft.Soft_Description} enregistrements la fois

Amener cette donne avec la souris


l'emplacement dsir
Slectionner ces donnes pour crer
une rgion rpte afin que toute les
donnes s'affiche
Afficher les donnes: styles CSS
Pour afficher les donnes avec une belle
prsentation il faut dfinir des styles dans
la feuille de style CSS et les appliquer
chaque partie de l'affichage des donnes.
La rgion rpter fera afficher les donnes
par groupe de 10. Mais vous pouvez
modifier ce nombre.
Pour faire dfiler les donnes vous devez
rajouter des contrles de navigation.
Contrles de navigation
Nous pouvons ajouter plusieurs types de contrles de navigation le principe
reste toujours le mme ajouter le comportement serveur correspondant.

Cliquer sur +

Cliquer sur OK
VrifierCliquer
que voussur dplacer
verslalabonne
activer bien page suivante
table de donnes

Le lien suivant
est activ
Mise en ligne en fonction des
possibilits du serveur web
Vous devez trouver un hbergeur web qui
inclut dans son offre le langage PHP (la
plupart offre la version 5) et une base de
donne MySQL (Free propose aussi
postgreSQL (plus complet mais je n'ai pas
essay avec Dreamweaver)