SlideShare uma empresa Scribd logo
1 de 26
Alimentation et Reporting
  de Bases de données via le
                       WEB


           Daniel GASPAR


01/10/12                   1
Déroulement du module
• Articulation du module :
• Présentation succins de l’HTML
       • Version 4

• Utilisation d’un CMS (Content Management Systems)
       • Utilisation de HTML/PHP/SQL

• Projet / Concours
• Présentation du PHP (Cours réalisé par Olivier LEGOAER)
       • Accès aux bases de données (SQL Requis)

• Projet
• Examen écrit

                                                            2
                              Licence Pro SID
Qu’est-ce qu’une Application Web

• 2 problématiques induites par le sujet.

     • => Qu’est ce qu’un site Web ? Et accès au
       contenu ?

     • => Comment gérer et exploiter un ensemble de
       données ?




                                                   3
                     Licence Pro SID
Qu’est-ce qu’une Application Web

• Une application Web permet de mettre des
  informations à la disposition d'utilisateurs via
  un navigateur (IE, Firefox, Chrome, …).
      • => Pour une Consultation
      • => Pour une Mise à Jour


• Utile pour mettre en forme des données
• Utile pour automatiser certains traitements

                                                     4
                      Licence Pro SID
Applications multiples (Web)




                          5
        Licence Pro SID
Applications multiples (Web)




                           6
         Licence Pro SID
Applications multiples (Web)




                           7
         Licence Pro SID
Applications multiples
         (Web:HTML)




                     8
  Licence Pro SID
LE LANGUAGE HTML
• C’est le langage du Web (toutes les pages sont écrites en html).
• C’est un langage de balises (http://b.kostrzewa.free.fr/html ,
  http://fr.selfhtml.org/html) :
   – de structure du fichier html : html, head, body, meta...
   – de mise en forme du texte : b, font, i, u...
   – de listes : li, ul...
   – de paragraphes : p, br, hr, h1, h2, h3...
   – de tableaux : table, tr, td, th...
   – de liens hypertextes : a...
   – de formulaires : form, input, select, option, textarea...
   – ...


                                                                 9
                            Licence Pro SID
LE LANGUAGE HTML
        STRUCTURE DE FICHIER

Sous notepad++ : html_ex1.html
<html>
  <head>
     <title> Exemple de HTML </title>
  </head>
  <body> Ceci est une phrase </body>
</html>

                                        10
                 Licence Pro SID
LE LANGUAGE HTML
STRUCTURE DE FICHIER




                       11
     Licence Pro SID
Applications multiples
                              (Web:HTML)

A L’IUT :                  Machine serveur :
                           wwwetud.univ-pau.fr


                           S:/internet

http://wwwetud.univ-pau.fr/~<user>/<nom_fichier+extension>

Accéder à votre première page Web :
http://wwwetud.univ-pau.fr/~loginetudiant/html_ex1.html

                                                          12
                         Licence Pro SID
LE LANGUAGE HTML
                  MISE EN FORME
<html>
  <head>
     <title> Exemple de HTML </title>
  </head>
  <body>
     <b>Ceci est en caractère gras</b>
  </body>
</html>

                                         13
                  Licence Pro SID
LE LANGUAGE HTML
    MISE EN FORME




                    14
  Licence Pro SID
LE LANGUAGE HTML
              LIEN HYPERTEXTE
<html>
  <head>
     <title> Exemple de HTML </title>
  </head>
  <body> Ceci est une phrase possédant
  un lien hypertexte.
  <a href="cible.html">hyperlien</a>
  </body>
</html>
                                     15
                Licence Pro SID
LE LANGUAGE HTML
 LIEN HYPERTEXTE




                    16
  Licence Pro SID
LE LANGUAGE HTML
                                LISTE
<html>
  <head>
      <title> Exemple de HTML </title>
  </head>
  <body>
              <ul>
                            <li>1er point</li>
                            <li>2nd point</li>
              </ul>
  </body>
</html>                Licence Pro SID
                                                 17
LE LANGUAGE HTML
            LISTE




                    18
  Licence Pro SID
LE LANGUAGE HTML
                            TABLEAU
<html>
  <head>
      <title> Exemple de HTML </title>
  </head>
  <body>      <table border=1>
                     <tr>
                              <td>1ere case</td>
                              <td>2eme case</td>
                     </tr>
              </table>
  </body>
                                                   19
</html>                  Licence Pro SID
LE LANGUAGE HTML
         TABLEAU




                    20
  Licence Pro SID
LE LANGUAGE HTML
                                     TABLEAU
<html>
    <head>
          <title> Exemple de HTML </title>
    </head>
    <body>
                     <table border=1>
                               <tr>
                                        <td>1ere case</td>
                                        <td>2eme case</td>
                               </tr>
                               <tr>
                                        <td>3eme case</td>
                                        <td>4eme case</td>
                               </tr>
                     </table>
    </body>
</html>                                                      21
                                  Licence Pro SID
LE LANGUAGE HTML
         TABLEAU




                    22
  Licence Pro SID
LE LANGUAGE HTML
                               TABLEAU
 A vous de jouer
    On veut représenter le tableau suivant en html :




                                                        23
                            Licence Pro SID
LE LANGUAGE HTML
<html>
    <head>                                     TABLEAU
             <title> Ma premiere page HTML </title>
     </head>
     <body>
     <table border=1>
     <tr>
              <td>1ere case</td>
              <td><u>2eme case</u></td>
     </tr>
     <tr>
              <td><b><i>3eme case</i></b></td>
              <td>4eme case</td>
     </tr>
     <tr>
              <td><u>5eme case</u></td>
              <td><u>6eme case</u></td>
     </tr>
     <tr>
              <td><b><i>7eme case</i></b></td>
              <td><a href="http://www.google.fr">Google</a></td>
     </tr>
     </table>
     </body>
</html>

                                                                   24
                                               Licence Pro SID
LE LANGUAGE HTML
Quelques Balises : MISE EN PAGE
•   Alignements CENTER, LEFT , RIGHT

•   P : paragraphe (utilisation : <p>)

•   BR : passage à la ligne (<br>)

•   HR :règle horizontale (utilisation : <hr>)




                                                     25
                                   Licence Pro SID
Questions



  ?

                          26
Licence Pro SID

Mais conteúdo relacionado

Mais procurados

HTML 5 - intro - en francais
HTML 5 - intro - en francaisHTML 5 - intro - en francais
HTML 5 - intro - en francais
Vlad Posea
 
Le langage HTML
Le langage HTMLLe langage HTML
Le langage HTML
Bruno Delb
 
18 02-2015 atelier-pratique-xml-tei-stage-d-ecdotique-2015
18 02-2015 atelier-pratique-xml-tei-stage-d-ecdotique-201518 02-2015 atelier-pratique-xml-tei-stage-d-ecdotique-2015
18 02-2015 atelier-pratique-xml-tei-stage-d-ecdotique-2015
Emmanuelle Morlock
 
IPW 2eme course - HTML
IPW 2eme course - HTMLIPW 2eme course - HTML
IPW 2eme course - HTML
Vlad Posea
 

Mais procurados (20)

2014 09 12_atelier-humanites-numerique-hisoma-seance-1-oxygen
2014 09 12_atelier-humanites-numerique-hisoma-seance-1-oxygen2014 09 12_atelier-humanites-numerique-hisoma-seance-1-oxygen
2014 09 12_atelier-humanites-numerique-hisoma-seance-1-oxygen
 
Html et xhtml
Html et xhtmlHtml et xhtml
Html et xhtml
 
Intégration Web HTML 5 & CSS 3
Intégration Web HTML 5 & CSS 3Intégration Web HTML 5 & CSS 3
Intégration Web HTML 5 & CSS 3
 
Formation HTML5/CSS3
Formation HTML5/CSS3Formation HTML5/CSS3
Formation HTML5/CSS3
 
technologie web - part2
technologie web - part2technologie web - part2
technologie web - part2
 
HTML 5 - intro - en francais
HTML 5 - intro - en francaisHTML 5 - intro - en francais
HTML 5 - intro - en francais
 
Formation web
Formation webFormation web
Formation web
 
Initiation au html
Initiation au htmlInitiation au html
Initiation au html
 
Atelier template
Atelier templateAtelier template
Atelier template
 
Présentation html5
Présentation html5Présentation html5
Présentation html5
 
Le langage HTML
Le langage HTMLLe langage HTML
Le langage HTML
 
Cours HTML/CSS
Cours HTML/CSSCours HTML/CSS
Cours HTML/CSS
 
Les balises HTML
Les balises HTMLLes balises HTML
Les balises HTML
 
HTML
HTMLHTML
HTML
 
Introduction à XML
Introduction à XMLIntroduction à XML
Introduction à XML
 
Css+html
Css+htmlCss+html
Css+html
 
18 02-2015 atelier-pratique-xml-tei-stage-d-ecdotique-2015
18 02-2015 atelier-pratique-xml-tei-stage-d-ecdotique-201518 02-2015 atelier-pratique-xml-tei-stage-d-ecdotique-2015
18 02-2015 atelier-pratique-xml-tei-stage-d-ecdotique-2015
 
Normes de base du Web GTI780 & MTI780 ETS A09
Normes de base du Web  GTI780 & MTI780  ETS   A09Normes de base du Web  GTI780 & MTI780  ETS   A09
Normes de base du Web GTI780 & MTI780 ETS A09
 
Les base du Html5
Les base du Html5Les base du Html5
Les base du Html5
 
IPW 2eme course - HTML
IPW 2eme course - HTMLIPW 2eme course - HTML
IPW 2eme course - HTML
 

Destaque

Parteneriat Polonia 2009 - Actiunea 1
Parteneriat Polonia 2009  - Actiunea 1Parteneriat Polonia 2009  - Actiunea 1
Parteneriat Polonia 2009 - Actiunea 1
Mihaela Bondoc
 
Présentation Cousumain / Pavillon Noir
Présentation Cousumain / Pavillon NoirPrésentation Cousumain / Pavillon Noir
Présentation Cousumain / Pavillon Noir
Sacha Brasseur
 
PHP: Variablen und Datentypen
PHP: Variablen und DatentypenPHP: Variablen und Datentypen
PHP: Variablen und Datentypen
lehrerfreund
 
Das Wunder Von Bern
Das Wunder Von BernDas Wunder Von Bern
Das Wunder Von Bern
guestbea553
 

Destaque (20)

Parteneriat Polonia 2009 - Actiunea 1
Parteneriat Polonia 2009  - Actiunea 1Parteneriat Polonia 2009  - Actiunea 1
Parteneriat Polonia 2009 - Actiunea 1
 
Social Media für Anwälte
Social Media für AnwälteSocial Media für Anwälte
Social Media für Anwälte
 
Wie ScanCorner Ihre alten Fotos restauriert
Wie ScanCorner Ihre alten Fotos restauriertWie ScanCorner Ihre alten Fotos restauriert
Wie ScanCorner Ihre alten Fotos restauriert
 
Mythen und Fakten der Gemeinsamen Fischereipolitik der EU
Mythen und Fakten der Gemeinsamen Fischereipolitik der EUMythen und Fakten der Gemeinsamen Fischereipolitik der EU
Mythen und Fakten der Gemeinsamen Fischereipolitik der EU
 
Open Data und die OGD Austria, eGovCamp 3.12.2010, Wien
Open Data und die OGD Austria, eGovCamp 3.12.2010, WienOpen Data und die OGD Austria, eGovCamp 3.12.2010, Wien
Open Data und die OGD Austria, eGovCamp 3.12.2010, Wien
 
Voyage
VoyageVoyage
Voyage
 
Unidad 2 (1)
Unidad 2 (1)Unidad 2 (1)
Unidad 2 (1)
 
Présentation Cousumain / Pavillon Noir
Présentation Cousumain / Pavillon NoirPrésentation Cousumain / Pavillon Noir
Présentation Cousumain / Pavillon Noir
 
Cómo hacer un plan de marketing online
Cómo hacer un plan de marketing online Cómo hacer un plan de marketing online
Cómo hacer un plan de marketing online
 
Perspectives Entreprises - 2ème trimestre 2012
Perspectives Entreprises - 2ème trimestre 2012Perspectives Entreprises - 2ème trimestre 2012
Perspectives Entreprises - 2ème trimestre 2012
 
Fehlerfreundliche Lehr-Lern-Arrangements: Selbstorganisationsoffener Unterricht
Fehlerfreundliche Lehr-Lern-Arrangements: Selbstorganisationsoffener UnterrichtFehlerfreundliche Lehr-Lern-Arrangements: Selbstorganisationsoffener Unterricht
Fehlerfreundliche Lehr-Lern-Arrangements: Selbstorganisationsoffener Unterricht
 
Internet galactique -- Cafe Numerique
Internet galactique -- Cafe NumeriqueInternet galactique -- Cafe Numerique
Internet galactique -- Cafe Numerique
 
Kolma & Comarch ERP - von der Evaluation bis zum erfolgreichen Live-Betrieb
Kolma & Comarch ERP - von der Evaluation bis zum erfolgreichen Live-BetriebKolma & Comarch ERP - von der Evaluation bis zum erfolgreichen Live-Betrieb
Kolma & Comarch ERP - von der Evaluation bis zum erfolgreichen Live-Betrieb
 
RBS Change - e-commerce international
RBS Change - e-commerce internationalRBS Change - e-commerce international
RBS Change - e-commerce international
 
PHP: Variablen und Datentypen
PHP: Variablen und DatentypenPHP: Variablen und Datentypen
PHP: Variablen und Datentypen
 
Mobile Applikationen im Tourismus
Mobile Applikationen im TourismusMobile Applikationen im Tourismus
Mobile Applikationen im Tourismus
 
Formation réception
Formation réceptionFormation réception
Formation réception
 
Das Wunder Von Bern
Das Wunder Von BernDas Wunder Von Bern
Das Wunder Von Bern
 
Broschüre HPS
Broschüre HPSBroschüre HPS
Broschüre HPS
 
ATR2011 - Scrum dans les tranchées Normandes
ATR2011 - Scrum dans les tranchées NormandesATR2011 - Scrum dans les tranchées Normandes
ATR2011 - Scrum dans les tranchées Normandes
 

Semelhante a Alimentation et Reporting de Bases de données via le WEB

Semelhante a Alimentation et Reporting de Bases de données via le WEB (20)

hassclic284.ppt
hassclic284.ppthassclic284.ppt
hassclic284.ppt
 
Html css-xhtml
Html css-xhtmlHtml css-xhtml
Html css-xhtml
 
Langage HTML
Langage HTMLLangage HTML
Langage HTML
 
Chapitre 1_HTML_complet_version1.pdf
Chapitre 1_HTML_complet_version1.pdfChapitre 1_HTML_complet_version1.pdf
Chapitre 1_HTML_complet_version1.pdf
 
presentation de html partie par partie et detaillee.pptx
presentation de html partie par partie et detaillee.pptxpresentation de html partie par partie et detaillee.pptx
presentation de html partie par partie et detaillee.pptx
 
Chapitre2 HTML5
Chapitre2 HTML5Chapitre2 HTML5
Chapitre2 HTML5
 
HTML : why content is important - SoftShake 2014
HTML : why content is important - SoftShake 2014HTML : why content is important - SoftShake 2014
HTML : why content is important - SoftShake 2014
 
Les blocs Drupal de drop.org à Drupal 8
Les blocs Drupal de drop.org à Drupal 8Les blocs Drupal de drop.org à Drupal 8
Les blocs Drupal de drop.org à Drupal 8
 
Html 5
Html 5Html 5
Html 5
 
exposé en HTML
exposé en HTMLexposé en HTML
exposé en HTML
 
cours Php
cours Phpcours Php
cours Php
 
Langage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliersLangage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliers
 
Découverte HTML5/CSS3
Découverte HTML5/CSS3Découverte HTML5/CSS3
Découverte HTML5/CSS3
 
Langage HTML
Langage HTMLLangage HTML
Langage HTML
 
Cours Introduction a la programmation Web ISI Ettaieb Abdessattar
Cours Introduction a la programmation Web ISI Ettaieb AbdessattarCours Introduction a la programmation Web ISI Ettaieb Abdessattar
Cours Introduction a la programmation Web ISI Ettaieb Abdessattar
 
Rmll2010 Html5 Css3
Rmll2010 Html5 Css3Rmll2010 Html5 Css3
Rmll2010 Html5 Css3
 
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptxFormation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
 
XHL8
XHL8XHL8
XHL8
 
Publication de documents sur le Web
Publication de documents sur le WebPublication de documents sur le Web
Publication de documents sur le Web
 
0055-cours-internet-web.pdf
0055-cours-internet-web.pdf0055-cours-internet-web.pdf
0055-cours-internet-web.pdf
 

Alimentation et Reporting de Bases de données via le WEB

  • 1. Alimentation et Reporting de Bases de données via le WEB Daniel GASPAR 01/10/12 1
  • 2. Déroulement du module • Articulation du module : • Présentation succins de l’HTML • Version 4 • Utilisation d’un CMS (Content Management Systems) • Utilisation de HTML/PHP/SQL • Projet / Concours • Présentation du PHP (Cours réalisé par Olivier LEGOAER) • Accès aux bases de données (SQL Requis) • Projet • Examen écrit 2 Licence Pro SID
  • 3. Qu’est-ce qu’une Application Web • 2 problématiques induites par le sujet. • => Qu’est ce qu’un site Web ? Et accès au contenu ? • => Comment gérer et exploiter un ensemble de données ? 3 Licence Pro SID
  • 4. Qu’est-ce qu’une Application Web • Une application Web permet de mettre des informations à la disposition d'utilisateurs via un navigateur (IE, Firefox, Chrome, …). • => Pour une Consultation • => Pour une Mise à Jour • Utile pour mettre en forme des données • Utile pour automatiser certains traitements 4 Licence Pro SID
  • 5. Applications multiples (Web) 5 Licence Pro SID
  • 6. Applications multiples (Web) 6 Licence Pro SID
  • 7. Applications multiples (Web) 7 Licence Pro SID
  • 8. Applications multiples (Web:HTML) 8 Licence Pro SID
  • 9. LE LANGUAGE HTML • C’est le langage du Web (toutes les pages sont écrites en html). • C’est un langage de balises (http://b.kostrzewa.free.fr/html , http://fr.selfhtml.org/html) : – de structure du fichier html : html, head, body, meta... – de mise en forme du texte : b, font, i, u... – de listes : li, ul... – de paragraphes : p, br, hr, h1, h2, h3... – de tableaux : table, tr, td, th... – de liens hypertextes : a... – de formulaires : form, input, select, option, textarea... – ... 9 Licence Pro SID
  • 10. LE LANGUAGE HTML STRUCTURE DE FICHIER Sous notepad++ : html_ex1.html <html> <head> <title> Exemple de HTML </title> </head> <body> Ceci est une phrase </body> </html> 10 Licence Pro SID
  • 11. LE LANGUAGE HTML STRUCTURE DE FICHIER 11 Licence Pro SID
  • 12. Applications multiples (Web:HTML) A L’IUT : Machine serveur : wwwetud.univ-pau.fr S:/internet http://wwwetud.univ-pau.fr/~<user>/<nom_fichier+extension> Accéder à votre première page Web : http://wwwetud.univ-pau.fr/~loginetudiant/html_ex1.html 12 Licence Pro SID
  • 13. LE LANGUAGE HTML MISE EN FORME <html> <head> <title> Exemple de HTML </title> </head> <body> <b>Ceci est en caractère gras</b> </body> </html> 13 Licence Pro SID
  • 14. LE LANGUAGE HTML MISE EN FORME 14 Licence Pro SID
  • 15. LE LANGUAGE HTML LIEN HYPERTEXTE <html> <head> <title> Exemple de HTML </title> </head> <body> Ceci est une phrase possédant un lien hypertexte. <a href="cible.html">hyperlien</a> </body> </html> 15 Licence Pro SID
  • 16. LE LANGUAGE HTML LIEN HYPERTEXTE 16 Licence Pro SID
  • 17. LE LANGUAGE HTML LISTE <html> <head> <title> Exemple de HTML </title> </head> <body> <ul> <li>1er point</li> <li>2nd point</li> </ul> </body> </html> Licence Pro SID 17
  • 18. LE LANGUAGE HTML LISTE 18 Licence Pro SID
  • 19. LE LANGUAGE HTML TABLEAU <html> <head> <title> Exemple de HTML </title> </head> <body> <table border=1> <tr> <td>1ere case</td> <td>2eme case</td> </tr> </table> </body> 19 </html> Licence Pro SID
  • 20. LE LANGUAGE HTML TABLEAU 20 Licence Pro SID
  • 21. LE LANGUAGE HTML TABLEAU <html> <head> <title> Exemple de HTML </title> </head> <body> <table border=1> <tr> <td>1ere case</td> <td>2eme case</td> </tr> <tr> <td>3eme case</td> <td>4eme case</td> </tr> </table> </body> </html> 21 Licence Pro SID
  • 22. LE LANGUAGE HTML TABLEAU 22 Licence Pro SID
  • 23. LE LANGUAGE HTML TABLEAU  A vous de jouer  On veut représenter le tableau suivant en html : 23 Licence Pro SID
  • 24. LE LANGUAGE HTML <html> <head> TABLEAU <title> Ma premiere page HTML </title> </head> <body> <table border=1> <tr> <td>1ere case</td> <td><u>2eme case</u></td> </tr> <tr> <td><b><i>3eme case</i></b></td> <td>4eme case</td> </tr> <tr> <td><u>5eme case</u></td> <td><u>6eme case</u></td> </tr> <tr> <td><b><i>7eme case</i></b></td> <td><a href="http://www.google.fr">Google</a></td> </tr> </table> </body> </html> 24 Licence Pro SID
  • 25. LE LANGUAGE HTML Quelques Balises : MISE EN PAGE • Alignements CENTER, LEFT , RIGHT • P : paragraphe (utilisation : <p>) • BR : passage à la ligne (<br>) • HR :règle horizontale (utilisation : <hr>) 25 Licence Pro SID
  • 26. Questions ? 26 Licence Pro SID