<!-- If the browser does not support frames put the first topic content here --> <div class="Section1"> <h1><a name="node0" id="node0"></a><span style= 'font-size:20.0pt'>TP1</span></h1> <p class="MsoNormal"> </p> <p class="MsoNormal" style='margin-bottom:6.0pt'> <b><u>Objectifs :</u></b></p> <p class="MsoNormal">Utiliser Ajax pour « récupérer » des données sur le serveur (Bdd) et afficher les résultats sur une « partie de page » <span style= 'font-family:Wingdings'>è</span> Sans rafraichir l’ensemble de la page.</p> <p class="MsoNormal"><span style= 'font-size:11.0pt'> </span></p> <p class="MsoNormal"><span style= 'font-size:11.0pt'> </span></p> <p class="MsoNormal" style='margin-bottom:6.0pt'><b><u>Notions abordées :</u></b></p> <ul style='margin-top:0cm' type="disc"> <li class="MsoNormal">Révision MySql</li> <li class="MsoNormal">Révision PHP</li> <li class="MsoNormal">Révisiion JavaScript</li> <li class="MsoNormal">Ajax</li> </ul> <p class="MsoNormal"><span style= 'font-size:11.0pt'> </span></p> <p class="MsoNormal"><span style= 'font-size:11.0pt'> </span></p> <p class="MsoNormal" style='margin-bottom:6.0pt'> <b><u>Thème</u></b></p> <p class="MsoNormal">Créer la base de données GesProd</p> <p class="MsoNormal">La renseigner en lançant le script creerAjax.sql qui se trouve dans Echange2/Phl/Ajax/Td2</p> <p class="MsoNormal"><span style= 'font-size:11.0pt'> </span></p> <p class="MsoNormal"><u>Version 1 :</u></p> <p class="MsoNormal">Créer l’interface permettant de lister les catégories de produits à partir d’un clic sur un bouton</p> <p class="MsoNormal"><span style= 'font-size:11.0pt'> </span></p> <p class="MsoNormal"><img width="303" height="115" src= "TDAjax_complet_fichiers/image001.jpg" alt="image" /><span style= 'font-family:Wingdings'>è</span><img width="204" height="117" src= "TDAjax_complet_fichiers/image002.jpg" alt="image" /></p> <p class="MsoNormal"><span style= 'font-size:11.0pt'> </span></p> <p class="MsoNormal"><u>Version 2 :</u></p> <p class="MsoNormal">Créer l’interface permettant de choisir une catégorie de produits dans une liste déroulante puis un produit dans une 2<sup>ème</sup> liste déroulante.</p> <p class="MsoNormal"><img width="171" height="93" src= "TDAjax_complet_fichiers/image003.jpg" alt="image" /><span style= 'font-family:Wingdings'>è</span><img width="161" height="90" src= "TDAjax_complet_fichiers/image004.jpg" alt="image" /></p> <p class="MsoNormal"><span style= 'font-size:11.0pt'> </span></p> <p class="MsoNormal"><u>Version 3 :</u></p> <p class="MsoNormal">Créer l’interface permettant de choisir une catégorie de produits dans une liste déroulante puis un produit dans une 2<sup>ème</sup> liste déroulante et d'afficher les caractéristiques complètes du produit.</p> <p class="MsoNormal"><img width="157" height="101" src= "TDAjax_complet_fichiers/image005.jpg" alt="image" /><span style= 'font-family:Wingdings'>è</span><img width="176" height="104" src= "TDAjax_complet_fichiers/image006.jpg" alt="image" /><span style= 'font-family:Wingdings'>è</span> <img width="218" height="106" src= "TDAjax_complet_fichiers/image007.jpg" alt="image" /></p> <p class="MsoNormal"><span style= 'font-size:11.0pt'> </span></p> <b><u><span style= 'font-size:12.0pt;font-family:"Times New Roman"'><br clear="all" style='page-break-before:always' /></span></u></b> <h1><a name="node1" id="node1"></a><span style= 'font-size:20.0pt'>TP2</span></h1> <p class="MsoNormal"> </p> <p class="MsoNormal" style='margin-bottom:6.0pt'> <b><u>Objectifs :</u></b></p> <p class="MsoNormal">Utiliser Ajax pour « récupérer » des données sur le serveur (Bdd) et afficher les résultats sur une « partie de page » <span style= 'font-family:Wingdings'>è</span> Sans rafraichir l’ensemble de la page.</p> <p class="MsoNormal"> </p> <p class="MsoNormal"> </p> <p class="MsoNormal" style='margin-bottom:6.0pt'><b><u>Notions abordées :</u></b></p> <ul style='margin-top:0cm' type="disc"> <li class="MsoNormal">Révision MySql</li> <li class="MsoNormal">Révision PHP</li> <li class="MsoNormal">Révisiion JavaScript</li> <li class="MsoNormal">Ajax</li> </ul> <p class="MsoNormal"> </p> <p class="MsoNormal"> </p> <p class="MsoNormal" style='margin-bottom:6.0pt'> <b><u>Thème</u></b></p> <p class="MsoNormal">Créer la base de données gesPays</p> <p class="MsoNormal">La renseigner en lançant le script pays.sql qui se trouve dans Echange/SIO1//Phl/Ressources</p> <p class="MsoNormal"> </p> <p class="MsoNormal">Créer l’interface permettant de lister, dans une "liste déroulante ouverte", les pays correspondant au(x) caractère(s) saisi(s) dans la zone de texte.</p> <p class="MsoNormal"> </p> <p class="MsoNormal"><img width="240" height="238" src= "TDAjax_complet_fichiers/image008.jpg" alt="image" /></p> <p class="MsoNormal"> </p> <b><u><span style= 'font-size:12.0pt;font-family:"Times New Roman"'><br clear="all" style='page-break-before:always' /></span></u></b> <h1><a name="node2" id="node2"></a><span style= 'font-size:20.0pt'>TP3</span></h1> <p class="MsoNormal"> </p> <p class="MsoNormal" style='margin-bottom:6.0pt'> <b><u>Objectifs :</u></b></p> <p class="MsoNormal">Utiliser Ajax pour « récupérer » des données dans un fichier xml, les "exploiter" et afficher les résultats sur une « partie de page » <span style= 'font-family:Wingdings'>è</span> Sans rafraichir l’ensemble de la page.</p> <p class="MsoNormal"> </p> <p class="MsoNormal"> </p> <p class="MsoNormal" style='margin-bottom:6.0pt'><b><u>Notions abordées :</u></b></p> <ul style='margin-top:0cm' type="disc"> <li class="MsoNormal">Révision MySql</li> <li class="MsoNormal">Révision PHP</li> <li class="MsoNormal">Révisiion JavaScript</li> <li class="MsoNormal">Ajax</li> </ul> <p class="MsoNormal"> </p> <p class="MsoNormal"> </p> <p class="MsoNormal" style='margin-bottom:6.0pt'> <b><u>Thème</u></b></p> <p class="MsoNormal">Récupérer le fichier bareges.xml et l'exploiter pour obtenir l'écran suivant :</p> <p class="MsoNormal" align="center" style='text-align:center'> <img width="231" height="197" src= "TDAjax_complet_fichiers/image009.jpg" alt="image" /></p> <p class="MsoNormal">Les données (date, hauteur bas et haut de piste, ouverture des pistes) sont à écrire au chargement de la feuille.</p> <p class="MsoNormal"> </p> <b><u><span style= 'font-size:12.0pt;font-family:"Times New Roman"'><br clear="all" style='page-break-before:always' /></span></u></b> <h1><a name="node3" id="node3"></a><span style= 'font-size:20.0pt'>TP4</span></h1> <p class="MsoNormal"> </p> <p class="MsoNormal">A partir du fichier xml "carnet.xml" suivant :</p> <p class="MsoNormal"> </p> <div style= 'border:solid windowtext 1.0pt;padding:1.0pt 4.0pt 1.0pt 4.0pt'> <p class="MsoNormal" style='border:none;padding:0cm'><?xml version="1.0" encoding="ISO-8859-1"?></p> <p class="MsoNormal" style='border:none;padding:0cm'> <carnet></p> <p class="MsoNormal" style='border:none;padding:0cm'> <contact></p> <p class="MsoNormal" style='border:none;padding:0cm'> <nom>Chevalier</nom></p> <p class="MsoNormal" style='border:none;padding:0cm'> <prenom>Vincent</prenom></p> <p class="MsoNormal" style='border:none;padding:0cm'> <adresse>13, rue du Maréchal Joffre</adresse></p> <p class="MsoNormal" style='border:none;padding:0cm'> <cp>59000</cp></p> <p class="MsoNormal" style='border:none;padding:0cm'> <ville>Lille</ville></p> <p class="MsoNormal" style='border:none;padding:0cm'> <tel>+33- (0) -320219729</tel></p> <p class="MsoNormal" style='border:none;padding:0cm'> </contact></p> <p class="MsoNormal" style='border:none;padding:0cm'>.</p> <p class="MsoNormal" style='border:none;padding:0cm'>.</p> <p class="MsoNormal" style='border:none;padding:0cm'>.</p> <p class="MsoNormal" style='border:none;padding:0cm'> <contact></p> <p class="MsoNormal" style='border:none;padding:0cm'> <nom>Sarget</nom></p> <p class="MsoNormal" style='border:none;padding:0cm'> <prenom>Lucie</prenom></p> <p class="MsoNormal" style='border:none;padding:0cm'> <adresse>18, avenue des peupliers</adresse></p> <p class="MsoNormal" style='border:none;padding:0cm'> <cp>44000</cp></p> <p class="MsoNormal" style='border:none;padding:0cm'> <ville>Nantes</ville></p> <p class="MsoNormal" style='border:none;padding:0cm'> <tel>+33- (0) -111102266</tel></p> <p class="MsoNormal" style='border:none;padding:0cm'> </contact></p> <p class="MsoNormal" style='border:none;padding:0cm'> </carnet></p> </div> <p class="MsoNormal"> </p> <p class="MsoNormal"> </p> <p class="MsoNormal">Réaliser le script html avec fonction(s) ajax permettant d'obtenir l'affichage suivant :</p> <p class="MsoNormal"> </p> <p class="MsoNormal"><img width="158" height="74" src= "TDAjax_complet_fichiers/image010.jpg" alt="image" /></p> <p class="MsoNormal"> </p> <p class="MsoNormal"><img width="218" height="150" src= "TDAjax_complet_fichiers/image011.jpg" alt="image" /></p> <p class="MsoNormal"> </p> <b><u><span style= 'font-size:12.0pt;font-family:"Times New Roman"'><br clear="all" style='page-break-before:always' /></span></u></b> <h1><a name="node4" id="node4"></a><span style= 'font-size:20.0pt'>TP5</span></h1> <p class="MsoNormal"> </p> <p class="MsoNormal">A partir du fichier "hopital.xml" suivant :</p> <p class="MsoNormal"> </p> <div style= 'border:solid windowtext 1.0pt;padding:1.0pt 4.0pt 1.0pt 4.0pt'> <p class="MsoNormal" style='border:none;padding:0cm'><?xml version="1.0" encoding="ISO-8859-1"?></p> <p class="MsoNormal" style='border:none;padding:0cm'> <personnel></p> <p class="MsoNormal" style='border:none;padding:0cm'> <nb>4</nb></p> <p class="MsoNormal" style='border:none;padding:0cm'><service intitule="pneumologie" tel="0296681214"></p> <p class="MsoNormal" style='border:none;padding:0cm'> <employe></p> <p class="MsoNormal" style='border:none;padding:0cm'> <nom>Chevalier</nom></p> <p class="MsoNormal" style='border:none;padding:0cm'> <prenom>Vincent</prenom></p> <p class="MsoNormal" style='border:none;padding:0cm'> <tel>0715182356</tel></p> <p class="MsoNormal" style='border:none;padding:0cm'> </employe></p> <p class="MsoNormal" style='border:none;padding:0cm'> <employe></p> <p class="MsoNormal" style='border:none;padding:0cm'> <nom>Fournier</nom></p> <p class="MsoNormal" style='border:none;padding:0cm'> <prenom>Yves</prenom></p> <p class="MsoNormal" style='border:none;padding:0cm'> <tel>0625364533</tel></p> <p class="MsoNormal" style='border:none;padding:0cm'> </employe></p> <p class="MsoNormal" style='border:none;padding:0cm'> <employe></p> <p class="MsoNormal" style='border:none;padding:0cm'> <nom>Larmet</nom></p> <p class="MsoNormal" style='border:none;padding:0cm'><span lang= "EN-GB" xml:lang= "EN-GB"><prenom>Stephane</prenom></span></p> <p class="MsoNormal" style='border:none;padding:0cm'><span lang= "EN-GB" xml:lang= "EN-GB"><tel>0660022605</tel></span></p> <p class="MsoNormal" style='border:none;padding:0cm'> </employe></p> <p class="MsoNormal" style='border:none;padding:0cm'> </service></p> <p class="MsoNormal" style='border:none;padding:0cm'>…</p> <p class="MsoNormal" style='border:none;padding:0cm'><service intitule="cardiologie" tel="0296681217"></p> <p class="MsoNormal" style='border:none;padding:0cm'> <employe></p> <p class="MsoNormal" style='border:none;padding:0cm'> <nom>Bernard</nom></p> <p class="MsoNormal" style='border:none;padding:0cm'> <prenom>Jean</prenom></p> <p class="MsoNormal" style='border:none;padding:0cm'> <tel></tel></p> <p class="MsoNormal" style='border:none;padding:0cm'> </employe></p> <p class="MsoNormal" style='border:none;padding:0cm'> <employe></p> <p class="MsoNormal" style='border:none;padding:0cm'> <nom>Dinan</nom></p> <p class="MsoNormal" style='border:none;padding:0cm'> <prenom>Leona</prenom></p> <p class="MsoNormal" style='border:none;padding:0cm'> <tel></tel></p> <p class="MsoNormal" style='border:none;padding:0cm'> </employe></p> <p class="MsoNormal" style='border:none;padding:0cm'> <employe></p> <p class="MsoNormal" style='border:none;padding:0cm'> <nom>Marmand</nom></p> <p class="MsoNormal" style='border:none;padding:0cm'> <prenom>Valérie</prenom></p> <p class="MsoNormal" style='border:none;padding:0cm'> <tel>0652524589</tel></p> <p class="MsoNormal" style='border:none;padding:0cm'> </employe></p> <p class="MsoNormal" style='border:none;padding:0cm'> <employe></p> <p class="MsoNormal" style='border:none;padding:0cm'> <nom>Vergnes</nom></p> <p class="MsoNormal" style='border:none;padding:0cm'> <prenom>Kévin</prenom></p> <p class="MsoNormal" style='border:none;padding:0cm'> <tel>0688326978</tel></p> <p class="MsoNormal" style='border:none;padding:0cm'> </employe></p> <p class="MsoNormal" style='border:none;padding:0cm'> </service></p> <p class="MsoNormal" style='border:none;padding:0cm'> </personnel></p> </div> <span style= 'font-size:12.0pt;font-family:"Times New Roman"'><br clear="all" style='page-break-before:always' /></span> <p class="MsoNormal"> </p> <p class="MsoNormal">On veut obtenir un affichage du type :</p> <p class="MsoNormal"> </p> <p class="MsoNormal"><img width="612" height="302" src= "TDAjax_complet_fichiers/image012.jpg" alt="image" /></p> <p class="MsoNormal"> </p> </div>
Table des matières
Sujets
Recherche
TP1
TP2
TP3
TP4
TP5
TP1
TP2
TP3
TP4
TP5
Générée avec
chmProcessor
Générée avec
chmProcessor