La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

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

Présentations similaires


Présentation au sujet: "FORMATION DREAMWEAVER CS4 AVEC LANGAGE PHP ET BASE DE DONNEES MYSQL Patrick QUINIO SOFTTOP Édition février 2009."— Transcription de la présentation:

1

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

3 SOMMAIRE Langage PHP et Base de donnée MYSQL pour un site dynamique. Installation dun serveur APACHE et dune 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.

4 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. Lintérêt de la chose réside dans le fait que lon peut changer les données dune 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 darticle à afficher. Autre avantage on peut trier les données, en faisant des requêtes, avant de les afficher, décider du nombre darticle à afficher par page etc.… Avec PHP cest le serveur qui travaille et génère automatiquement du des pages HTML en fonction du codes PHP contenu dans les pages.

5 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 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 sécurisées. Nimporte qui pourrait aller bricoler les données de votre site en préparation.

6 Installation du pack XAMPP Télécharger à ladresse suivante http://www.apachefriends.org/fr/xampp.ht ml 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 lapplication XAMPP

7 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

8 Administration XAMPP Vous arrivez sur lécran daccueil de XAMPP qui souvre dans votre navigateur par défaut. Je vous conseil vivement Firefox dont les plug-in HTML validator et Javascript debugging (à télécharger) savère des outils précieux pour la mise au point de pages web complexes. Cliquer sur Statut En vert ce sont les services actifs. PHP et la base de donnée MYSQL sont bien actif on peut donc les utiliser Les autres options ne nous seront pas utiles pour le moment. Cliquer sur Sécurité Votre serveur local nest actuellement pas sécurisé mais si vous ne lutilisez quen local et si vous êtes seul sur un réseau privé vous nêtes pas obligé de mettre des mots de passe sur ladministration du serveur APACHE et de la base MYSQL. Autrement cest indispensable. Nutilisez pas cette version pour faire un serveur WEB accessible depuis internet elle nest 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 ladresse (127.0.0.1) de votre serveur que vous devrez entrer dans la configuration du site web dans dreamweaver.

9 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

10 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.

11 Définir les besoins en données Tout dabord nous allons concevoir un menu à partir dune table données appelée menu. Lintérêt de ce menu cest que lorsque lon ajout une page il suffit dentrer 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° dordre daffichage) image(lien vers limage icône de la page) Lien (lien de la page à afficher) Alt (texte de substitution si limage ne saffiche pas)

12 Créer la table menu Cliquer sur la base de donnée topsoft Créer la table menu Indiquer le nombre de champs ici 4 Voici nos 4 champsLes types de champs La clef dindex

13 Configuration de Dreamweaver pour un site local (localhost) Cliquer sur Site Cliquer sur Nouveau Site Nom du site Indiquer le chemin des fichiers pages sur le PC Indiquer le chemin des fichiers images sur le PC Indiquer lemplacement du serveur local(localhost par défaut puis nom du site Sé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 MYSQL Sélectionner LocalRéseau Indiquer le chemin ou se trouve les fichiers sur le serveur local Indiquer lURL du site en local(par défaut localhost puis nom du site Cliquer sur OK

14 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 laide dun logiciel de dessin Firework ou Photoshop réaliser les images des bouton du menu.

15 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.

16 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. Lordre dans lequel nous allons afficher les données du menu. Pour cela nous allons utiliser les comportements serveur de Dreamweaver.

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

18 Raccordement à la table menu Sur Comportement serveur Cliquer sur + Cliquer sur Jeu denrégistrement Nommer le Jeu denrégistrement Sélectionner la base de donnée Sélectionner la table menu Sélectionner sur le tri sur index qui donnera lordre daffichage 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 denregistrement Menu

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

20 Répéter région A ce stade si vous afficher la page vous naurez 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 lmage du menu Sélectionner lenregistrement 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 safficher

21 Formulaires et sécurité Considérons que ce site est ouvert à contribution de la part dadhérents. Nous allons donc faire un formulaire dinscription que les nouveaux adhérents devront remplir et qui sajouterons 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.

22 Créer la table Adhérents Déterminer les champs nécessaires –IndexN° adhérent (int N° auto) –NomChamp texte –PrénomChamp texte –AdresseChamp texte –Code postalChamp int (5 caractères) –VilleChamp texte –Adresse mail Champ texte –Mot de passe Champ texte (min 6 car.) –Mail valideChamp int (nombre entier 1car.) –Fiche valideChamp int (nombre entier 1 car)

23 Formulaire: préparation La table étant créée, il faut faire un formulaire pour pouvoir saisir les données dans une page web. Pour lajout de nouvelles données il sagit dun formulaire dinsertion. Nous allons appeler cette page inscription. Cette page aura lextension.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.

24 Formulaire dinsertion: réalisation Cliquer pour faire un point dinsertion Cliquer sur Formulaire Cliquer 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 enregistrement Cliquer sur assistant de formulaire dinsertion denregistrement Sé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

25 Formulaire: présentation avec CSS Déplaçons le bouton à lexté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

26 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

27 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 1 er 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. Vérifier le contenu de la saisie des champs (voir sécurité des champs de saisie). En cas derreur de saisie réafficher le contenu des champs saisis (très important).

28 Formulaire: focus sur champ de saisie Dans le code source, Juste après la balise Insérer cette ligne de code mettra le focus sur le champ nom à louverture de la page dans le navigateur. Par contre en cas derreur de saisie il faudra mettre le focus sur le champ ou lon a déceler lerreur. Lidéal est alors de créer une variable serveur qui nous renverra le nom du champ en erreur si cela se produit. connexion à la B.D.D. Voici maintenant lécriture du focus du champ à laffichage de la page. ').focus()"> Notez que linsertion de code php se trouve entre les balises. Ces balises sont disponibles dans le menu php.

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

30 Changer la couleur du champ en quittant le focus 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: Ainsi lorsque vous quittez ce champ il reprend sa couleur initiale (blanc). Faire la même chose pour tous les champs de saisie.

31 Donner un N° dordre à chaque champ 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. 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.

32 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.

33 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…

34 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.

35 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 champs Cliquer si obligatoire Cliquer si nombre Cliquer si mail Les valeurs mini et maxi des nombres Cliquer sur OK pour valider

36 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ères Le 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

37 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

38 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

39 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

40 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.

41 Connexion à une page protégée Définir le champ de saisie du nom d'utilisateur ici l'adresse mail Définir le champ de saisie du mot de passe ici password Définir le nom de la 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

42 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) – Ensuite on sauve les données du formulaire dans ses variables de session.

43 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"];

44 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

45 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

46 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. 1 er formulaire 2 eme 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 OK

47 Afficher le contenu d'une fiche Pour que la fiche qui apparait à l'écran soit la bonne vous devez modifier le comportement serveur de l'enregistrement adherents. Cliquer sur + pour ajouter une variable qui contiendra le contenu valeur du menu de reroutage selecAdherent 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

48 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 table Indiquer sur quelle page aller après mise à jour de la fiche (ici on réaffiche les données modifiées) Cliquer sur OK

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

50 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.

51 Formulaire d'accès privé Ici les noms des champs du formulaire identifiant et mot de passe Ici le nom de la base de donnée Ici le nom de la table de donnée Ici les nom des champs de la table 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 +.

52 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.

53 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.

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

55 Jeux d'enregistrements

56 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

57 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

58 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 cette forme

59 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

60 Comportement serveur pour trier les données en fonction des choix Cliquer sur + Cliquer + Table Cliquer soft Cliquer SELECT Cliquer + Variables Nommer la variable Sé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 Définir la variable Type et récupérer la valeur de la forme sélecteur de type $HTTP_GET_VARS['selectType']

61 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

62 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ée Sélectionner Soft Sé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.

63 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.

64 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 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é

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


Télécharger ppt "FORMATION DREAMWEAVER CS4 AVEC LANGAGE PHP ET BASE DE DONNEES MYSQL Patrick QUINIO SOFTTOP Édition février 2009."

Présentations similaires


Annonces Google