Transcript Formation DREAMWEAVER CS4 PHP MYSQL

SOFTTOP
http://softtop.free.fr
FORMATION
DREAMWEAVER CS4
AVEC LANGAGE PHP ET
BASE DE DONNEES MYSQL
Édition février 2009
Patrick QUINIO
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.ht
ml
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 Admin
En cliquant sur ces
boutons on active ou
Cliquer sur
désactive
lesOK
services
Administration XAMPP
Dans Apache
environnement
Ces information donnent le
Cliquer sur phpinfo().
la version
(localhost) et l’adresse
Cliquer Important
sur Statut vous aveznom
de Sécurité
PHP que
vousce
allez
(127.0.0.1)
de votre serveur
Cliquer sur
En vert
sontutiliser.
les services
Assurezactifs.
vous
que
votre
que
vous
devrez
entrer dans
Les
autres
options
nede
nous
PHP
et
la sécurisé
base
Votre serveur local n’est actuellement
pas
mais si
hébergeur
de site
Vous arrivez sur
l’écran
d’accueil
de
XAMPP
la web
configuration
seront
pas
utiles
ledu site web
donnée
sontpour
biensur
vous ne l’utilisez qu’en local
et siMYSQL
vous êtes
seul
un
la on
même.
qui s’ouvre danspossède
votre actif
navigateur
par
dans
défaut.
dreamweaver.
moment.
donc des
les mots de
réseau privé vous n’êtes pas obligé peut
de mettre
Je vous conseil vivement Firefox dont les
passe sur l’administration du serveurutiliser
APACHE et de la base
plug-in HTML validator et Javascript
MYSQL. Autrement c’est indispensable. N’utilisez pas cette
debugging (à télécharger) s’avère des outils
version pour faire un serveur WEB accessible depuis internet
précieux pour la mise au point de pages web
elle n’est pas sécurisé pour cela.
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
Les
nos
types
4 champs
de champs
Indiquer le nombre
CliquerLa
surclef
la base
de
d’index
donnée topsoft de champs ici 4
Configuration de Dreamweaver
pour un site local (localhost)
Cliquer sur Site
Nom du site
Indiquer le chemin des
fichiers sur
pages sur le PC
Cliquer
Indiquer le chemin des
Nouveau
Site
fichiers
images sur le PC
Cliquer sur
Indiquer l’emplacement
du OK
serveur local(localhost par
défaut puis nom
du site
Indiquer
l’URL du site en
Cliquer
Cliquersur
surinfos
serveur
local(par
défaut
localhost
distantes
d’évaluation
puis nom du site
Sélectionner
LocalRéseau
Indiquer le chemin ou se
Indiquer
le chemin
trouve
les fichiers
surou
le se
trouve
les
fichiers
Sélectionner
PHP
serveur
local sur le
Sélectionner
serveur local
MYSQL
LocalRéseau
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
Sur PhpMyadmin, menu en cliquant
Remplir leslachamps
sélectionner
base
de données
TOPSOFT
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
Cliquer
donnéesur +
AdresseIP du serveur par
Nom d’utilisateur
rootOK
Cliquer
sur
en ici
local
On supprime d’abord défaut 127.0.0.1
Cliquer
sur
+donnée
pour
par
défaut
Labase
base
dedonnée
Sélectionner
Nom
de
la
de
l’ancien menu
ledévelopper
connexion
TypeTester
de document
PHPici
apparaît
comportement
serveur
Raccordement à la table menu
Cliquer sur OK
pour valider
Nommer le Jeu
Sélectionner
la base
d’enrégistrement
Sélectionner
de donnéela table
menu
Sélectionner sur le tri sur
index qui donnera l’ordre
d’affichage des données
du menu
Tester la requête
Sur Comportement
Cliquer sur +
serveur
Cliquer
sur Jeu
Vous disposez
maintenant du jeu
d’enrégistrement
d’enregistrement
Menu
Sélectionner sur le
tri sur croissant
Cliquer sur OK pour
fermer la fenêtre
Placer le menu sur la page
Sélectionner
Sélectionner
source
sourcede
defichier
fichier
Insérer une image en
haut de la colonne
prévue pour le menu
Sélectionner
Sélectionner
Lien
Image
La liaison de l’image
la page
avecLaleliaison
champde
image
avec
champ
Lien de la
de laletable
Menu
table
Menuicis’inscrit ici
s’inscrit
Cliquer sur l’icône
Cliquer sur
Sélectionner
le l’icône
fichier
et
fichier
texte Coller
et copier
remplacer Lien
Cliquer sur OK
Cliquer sur OK
Répéter région
Pour afficher toutes les
données
dusur
menu
nous
Cliquer
Sélectionner
A ce stade si vous
allonsrépétée
ajouter
un
région
Sélectionner
tout
Vous avez
l’enregistrement
afficher la page Cliquer
vous sur
Cliquer
comportement serveur
les sur OK
maintenant une
Menu
n’aurez que le
premier en direct
en cliquant enregistrements
sur +pour valider
affichage
région
répétée
élément dupour
menu
voir le menu
Sélectionner
s’afficher
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
Nom
Prénom
Adresse
Code postal
Ville
Adresse mail
Mot de passe
Mail valide
Fiche valide
N° adhérent (int N° auto)
Champ texte
Champ texte
Champ texte
Champ int (5 caractères)
Champ texte
Champ texte
Champ texte (min 6 car.)
Champ int (nombre entier 1car.)
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 Form
Cliquer sur
CliquerInsertion
sur
Formulaire
Sélectionner la
Sélectionner
la
base
de donnée
Sélectionner la
table topsoft
Adherents
page ou aller
On enlève les
champs
Cliquer
pour faire un
après
dont on ne veuxUne
pas
de validation
zone
entourée du
de
point
d’insertion
saisie de donnée
en formulaire
pointillés
apparaît
cliquant sur -
Cliquer sur insérer
Cliquer
assistant de
un sur
enregistrement
formulaireCliquer
d’insertion
sur OK
d’enregistrement
pour valider
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
Cliquersur
surinsérer
insérer
balisediv
lalabalise
Sélectionner la
ligne du haut
Sélectionner le bas
du formulaire et
selectionner
piedForm
Cliquer sur OK
Sélectionner
Sélectionner
titreForm
corpForm
Sélectionner le
tableau
Formulaire: présentation avec CSS
Nom devient en
Sélectionner
gras
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&eacute;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 +
Cliquer si obligatoire
Cliquer si nombre
Cliquer si mail
Avec cette méthode
vous pouvez vérifier
un certain nombre de
comportements sur
les champs
Puis cliquer
sur Valider le
formulaire
Les valeurs mini et
maxi des nombres
Contrôles de données
Dans l'inspecteur de
propriété
La valeur par défaut du
champ. indiquer
Peut-êtreque
utilisé
Vous pouvez
c'estpour
Lamot
largeur
dudu
champ
en
mettre
code
php pour le
un
de passe
les caractères
SiLec'est
une simple
ligne
ou
nombre
de caractères
caractères
rafraichissement
de donnée
seront masqué
par des points
ou
plusieurs
lignes
maximum
accepté
déjàdes
saisie
après une erreur
étoiles
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 sur Check
First element (on ne
contrôle qu'un élément)
Puis cliquer OK
pour valider
Indiquer le message
d'erreur. Le message par
défaut est en anglais
Puis cliquer
Puis
surcliquer
sur Check
FELIXONE
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
àduune
page protégée
Définir le champ de saisie
nom
Définir
le champ
saisie du
mot
d'utilisateur
ici de
l'adresse
mail
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 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 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 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
Vous devez
relier les
données de la
table
indiquer sur quelle page
aller après l'insertion des
données du formulaire
Cliquer sur +
Cliquer sur OK
Cliquer sur
enregistrement
à un champ de la "form"
dans laquelle vous
saisissez vos données
Afficher le contenu d'une fiche
Pour permettre la mise à jour d' une
fichePour
vousvisualiser
aller créerle2contenu
formulaires
de la
à l'aide
deill'icone
form. les données
fiche
faut afficher
dans les champs de saisie.
1er formulaire
Cliquer sur Index dans le
Cliquer
sur
OK
Cliquer
sur
OK
Ici on ajout un menu
de
2eme formulaire
jeux d'enregistrement
Etiquette mail
reroutage et dans propriétés
Adhérents
cliquer sur dynamique
Sélectionner le jeu
Maintenir le bouton enfoncé
SelectAdherent
(gauche) et faire glisser la
face sur l'éclair
souris jusque sur le champ Cliquer sur l'éclair enCliquer
valeur
de la donnée
de laindex
table
correspondant à cette
concernée (ici adhérents)
donnée (ici Nom)
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
Préciser le type (integer) car
c'est un nombre entier
Donner une valeur par défautRécuperer 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"
Sélectionner
le
formulaire miseAjour
Sélectionner la table
adherents
Cliquer sur OK
Cliquer sur +
Indiquer sur quelle page aller après
mise à jour de la fiche (ici on réaffiche
les données modifiées)
Sélectionner le champ de
formulaire correspondant à
Cliquer sur Mettre à
la donnée de la table
jour l'enregistrement
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".
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
et de
mot
Ici le nomidentifiant
de la base
de
passe
Ici le nom
de
la table de
donnée
Ici les nomdonnée
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 échoue
Chemin de la page si la
connexion est réussie
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
Selectionner le systeme:|
page et l'on prend la méthode
Positionner le curseur à
GET
l'emplacement que vous
désirer sur la page et Cliquer
Positionner le curseur à
sur Formulaire
l'emplacement
vous à
Positionnerque
le curseur
désirer
dans le Formulaire
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
Cliquer
sur OK
Cliquer sur
cette forme
même
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
Cliquer
sur OK
OK
Cliquer
sur
même
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"
Cliquer Bouton
Selectionner le type:|
Selectionner le systeme:|
|
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
Sélectionner
le
variable
Donner
valeur
type
(ici la
texte)
par défaut
Cliquer sur OK
Définir la variable Type et récupérer la
la valeurde
detype
la forme sélecteur
valeur deRécupérer
la forme sélecteur
Définirdel'ordre
d'affichage des données.
systeme
$HTTP_GET_VARS['selectType']
Définir
lesfaire
conditions
d'utilisation
pour le
vous pouvez
cliquerdes
sur + de
$HTTP_GET_VARS['selectSysteme']
Cliquer + Table
Cliquer SELECT
variables
la table précédemment
soft sélectionnerdéfinies.
le champ sur
Cliquer soft
lequel vous définissez l'ordre des données
Cliquer
OK BY
et cliquer
sursur
ORDER
Afficher les données
Selectionner le type:|
Selectionner le systeme:|
{Soft.Soft_Nom}
Cliquer sur source
de données
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
Insérer
l'emplacement
maintenant
enfoncè amener le
curseurd'une
de laimage
souris ou vous désirez
CliquerCliquer
sur le dossier
sur OK
afficher la donnée soft_Nom
de
la
Cliquer
sur
le
dossier
donnant le
donnant le lien de l'image
table soft lien si on clique sur l'image
Afficher les données
Selectionner le type:|
Selectionner le systeme:|
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.
{Soft.Soft_Nom}
Cliquer sur +
{Soft.Soft_Description}
Sélectionner
Région
Cliquer sur
OK répétée
Sélectionner
Soft 10
Sélectionner
afficher
enregistrements à la fois
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
sur déplacer
VérifierCliquer
que vous
verslalabonne
page suivante
activer bien
table de données
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)