SlideShare une entreprise Scribd logo
1  sur  13
PhP-MySQL
Pagora 2012/2013
CTD 1
Consignes
 « Il s'agit de réaliser un site Web contenant une page d'acueil et un formulaire séparés
pour que les visiteurs puissent enregistrer les données les concernant à imprimer dans
une carte de visite générée en format pdf »
 « Les données entrées doivent être enregistrées dans une base de données mySQL. »
 « Le code séquençant les actions en fonction des boutons actionnés par le visiteur doit
être contenu dans 1 fichier faisant office de programme principal. »
 « Toutes les actions spécifiques doivent être réalisées par des sous-programmes
contenus dans des fichiers de code dédiés. »
 « L'ensemble des fichiers du site doit être structurellement organisé : ce qui est utile au
graphisme, dans un dossier dédié, ce qui est utile à la réalisation des actions associées
au formulaire, et plus généralement tous les sous-programmes, doivent être situés dans
un dossier dédié. »
 « Les cartes de visites doivent être prévisualisées en html, puis générées par les
fonctions php d'une bibliothèque dédiée selon l'état d'avancement des séances. »
Organisation pratique
 http://tiprof.fr/PHP-mySQL/(1)/org-prat.html
 http://iihm.imag.fr/delamare/pagora/
 William.Delamare@imag.fr
 Evaluation:
 « La note sera calculée à partir des travaux rendus qui sont constitués des compte-rendus des séances et
de l'accès en ligne au résultat du travail produit.
Au fur et à mesure des séances, certains des travaux réalisés en séance doivent être rendus pour la
séance suivante sous forme imprimée (recto/verso et éventuellement en noir&blanc à 2 par page).
Le dernier travail doit être rendu sous forme imprimée comme pour les 3 autres travaux, mais aussi sous
forme électronique : il vous est expressément demandé de constituer une archive avec un dossier
contenant l'ensemble de vos fichiers, et de l'envoyer à l'enseignant par courrier électronique au plus tard
pendant le WE suivant la dernière séance. »
 « Attention : le non respect de ces consignes est sanctionné dans la note. De même, toute relance parce
que les travaux n'ont pas été rendus dans les temps est aussi sanctionné. »
 Ce cours s'appuie sur 2 pré-requis :
 Connaissance et pratique des langages HTML et CSS
 Bases de programmation (types entiers et chaînes, conditions et boucles, parcours d'un tableau, définition
et utilisation de fonctions)
Client / serveur
Page web statique
Page web dynamique:
Génération du contenu via
un langage de script
Client / Serveur
 Client = html/css (+js)
 Serveur
 doit donc générer html/css
 Outils: php/mySQL (Dans ce cours: pas de RIA Flex/As3, pas
de PERL, ni applet Java, ni WebService, etc…)
Langage de scripts
 Principes:
 "calculer" les pages Web qu'un serveur doit renvoyer à un
client pour une URL demandée.
 URL = adresse d’un serveur + désignation d’un fichier
 Logiciel client demande (click de souris sur des liens, etc…) :
envoie d’une requête
 Serveur envoie le fichier demandé
 Au départ: envoie du fichier tel qu’enregistré en mémoire (donc
duplication, etc…)
 Maintenant: possibilité de créer à la volée le fichier à renvoyer
 2 types de scripts:
 Côté serveur(avec environnement adapté)
 Côté client (JavaScript, demande de permission)
Common Gateway Interface
 CGI = interface de passerelle commune, entre:
 Le serveur
 Autre application (SGBD par exemple)
 Langage: peu importe du moment qu’il peut
 lire le flux de données d'entrée
 traiter des chaînes de caractères
 écrire sur le flux standard de sortie
 Être exécuter ou interpréter par le serveur
 Communication CGI/navigateur
 1 = requête du client (html, php, exe)
 2 = réponse du serveur avec le bon en-tête
 content-type : text/html
 content-type : image/gif
 content-type : text/quicktime
Local / Distant
En local:
- Edition des sources
- Visualisation
- Base de test
Donc
- Editeur de fichiers
- Navigateur (ff, opera…)
+ serveur local* (Apache, …)
- Base de donnée
Ensuite:
- Envoie des fichiers sources sur le serveur
Donc:
- logiciel FTP
*: si les fichiers contiennent un langage script
file:///on/se/fiche/du/chemin (statique)
http://localhost/chemin/du/rep/www (dynamique)
http://adresse/sur/le/net
Rappels html
• Quelques balises utiles pour le cours
• <p>…</p>: paragraphe
• <hi>…</hi>: titre (important i = 1, moins important i = 6)
• <center>…</center>: centrer « … »
• <i>…</i> : « … » en italique (gras si <b>)
• <a href=« … » >…</a>
• Et encore mieux: http://www.codeshttp.com/baliseh.htm
• Quelques règles (les miennes)
• Pas de style dans les fichiers html (<td style=« … »)
• <A completer au fur et a mesure>
Rappels html: tableaux
- Le CSS vous permettra de rendre
le tableau plus présentable
- Bordures
- Couleurs
- Centrer/justifier le texte
- Etc
Rappels html: tableaux
Rappels html: formulaires
- Balise <form>…</form>
- Attributs:
- method
- post
- get
- Différences
- Des valeurs passées par GET se voient dans l’URL
ex: http://maPage.php?val1=huhu&val2=hehe
- GET limité en taille (255 caractères)
- Action:
- Ce qu’il se passe après la validation
- Script php, perl, …
- envoie d’un mail
- Etc
Exemple complet: (source et résultat)
file:///Users/admin/Documents/Vacations/pagora/cours/ex_form.html
http://iihm.imag.fr/delamare/pagora/exemples/ex_form.html
TD1
 Création d’une page index.html
 La visualiser en http://localhost/…
 Création d’un formulaire
 (On pourra directement mettre l’extension .php)
 Champs ?

Contenu connexe

Similaire à ppt1.pptx

Développement Web
Développement WebDéveloppement Web
Développement Webmastertic
 
hassclic270.ppt
hassclic270.ppthassclic270.ppt
hassclic270.pptadiouf2
 
Développement Web
Développement WebDéveloppement Web
Développement Webmastertic
 
Rich Desktop Applications
Rich Desktop ApplicationsRich Desktop Applications
Rich Desktop Applicationsgoldoraf
 
Partie 1_Matriser les bases PHP v0555555555555.pptx
Partie 1_Matriser les bases PHP v0555555555555.pptxPartie 1_Matriser les bases PHP v0555555555555.pptx
Partie 1_Matriser les bases PHP v0555555555555.pptxHamzaElgari
 
PHP/ExtJs experience feedback - IAV case - 1
PHP/ExtJs experience feedback - IAV case - 1PHP/ExtJs experience feedback - IAV case - 1
PHP/ExtJs experience feedback - IAV case - 1fayway
 
Dotnet j2 ee
Dotnet j2 eeDotnet j2 ee
Dotnet j2 eechdalel
 
Flex, une techno RIA incontournable pour les futures app web ?
Flex, une techno RIA incontournable pour les futures app web ?Flex, une techno RIA incontournable pour les futures app web ?
Flex, une techno RIA incontournable pour les futures app web ?GreenIvory
 
08 01 mise en place d'un serveur web
08 01 mise en place d'un serveur web08 01 mise en place d'un serveur web
08 01 mise en place d'un serveur webNoël
 
BreizhCamp - Drupal7 dans le cloud avec Azure
BreizhCamp - Drupal7 dans le cloud avec AzureBreizhCamp - Drupal7 dans le cloud avec Azure
BreizhCamp - Drupal7 dans le cloud avec AzureNicolas Georgeault
 
cours web chap1.pptx
cours web chap1.pptxcours web chap1.pptx
cours web chap1.pptxMaha Maalej
 
Presentation
PresentationPresentation
Presentationbois
 
Optimiser WordPress
Optimiser WordPressOptimiser WordPress
Optimiser WordPressChi Nacim
 
Systèmes de Gestion de Contenu (SGC)
Systèmes de Gestion de Contenu (SGC)Systèmes de Gestion de Contenu (SGC)
Systèmes de Gestion de Contenu (SGC)Laurent Moccozet
 
Java script Introduction
Java script IntroductionJava script Introduction
Java script IntroductionMohamed MHAMDI
 

Similaire à ppt1.pptx (20)

Développement Web
Développement WebDéveloppement Web
Développement Web
 
hassclic270.ppt
hassclic270.ppthassclic270.ppt
hassclic270.ppt
 
Introduction webextensions
Introduction webextensionsIntroduction webextensions
Introduction webextensions
 
Serveurs
ServeursServeurs
Serveurs
 
Développement Web
Développement WebDéveloppement Web
Développement Web
 
Rich Desktop Applications
Rich Desktop ApplicationsRich Desktop Applications
Rich Desktop Applications
 
Partie 1_Matriser les bases PHP v0555555555555.pptx
Partie 1_Matriser les bases PHP v0555555555555.pptxPartie 1_Matriser les bases PHP v0555555555555.pptx
Partie 1_Matriser les bases PHP v0555555555555.pptx
 
PHP/ExtJs experience feedback - IAV case - 1
PHP/ExtJs experience feedback - IAV case - 1PHP/ExtJs experience feedback - IAV case - 1
PHP/ExtJs experience feedback - IAV case - 1
 
Dotnet j2 ee
Dotnet j2 eeDotnet j2 ee
Dotnet j2 ee
 
SAPIENS2009 - Module 4B
SAPIENS2009 - Module 4BSAPIENS2009 - Module 4B
SAPIENS2009 - Module 4B
 
Flex, une techno RIA incontournable pour les futures app web ?
Flex, une techno RIA incontournable pour les futures app web ?Flex, une techno RIA incontournable pour les futures app web ?
Flex, une techno RIA incontournable pour les futures app web ?
 
08 01 mise en place d'un serveur web
08 01 mise en place d'un serveur web08 01 mise en place d'un serveur web
08 01 mise en place d'un serveur web
 
BreizhCamp - Drupal7 dans le cloud avec Azure
BreizhCamp - Drupal7 dans le cloud avec AzureBreizhCamp - Drupal7 dans le cloud avec Azure
BreizhCamp - Drupal7 dans le cloud avec Azure
 
cours web chap1.pptx
cours web chap1.pptxcours web chap1.pptx
cours web chap1.pptx
 
Presentation
PresentationPresentation
Presentation
 
Optimiser wordpress
Optimiser wordpressOptimiser wordpress
Optimiser wordpress
 
Optimiser WordPress
Optimiser WordPressOptimiser WordPress
Optimiser WordPress
 
Support NodeJS avec TypeScript Express MongoDB
Support NodeJS avec TypeScript Express MongoDBSupport NodeJS avec TypeScript Express MongoDB
Support NodeJS avec TypeScript Express MongoDB
 
Systèmes de Gestion de Contenu (SGC)
Systèmes de Gestion de Contenu (SGC)Systèmes de Gestion de Contenu (SGC)
Systèmes de Gestion de Contenu (SGC)
 
Java script Introduction
Java script IntroductionJava script Introduction
Java script Introduction
 

ppt1.pptx

  • 2. Consignes  « Il s'agit de réaliser un site Web contenant une page d'acueil et un formulaire séparés pour que les visiteurs puissent enregistrer les données les concernant à imprimer dans une carte de visite générée en format pdf »  « Les données entrées doivent être enregistrées dans une base de données mySQL. »  « Le code séquençant les actions en fonction des boutons actionnés par le visiteur doit être contenu dans 1 fichier faisant office de programme principal. »  « Toutes les actions spécifiques doivent être réalisées par des sous-programmes contenus dans des fichiers de code dédiés. »  « L'ensemble des fichiers du site doit être structurellement organisé : ce qui est utile au graphisme, dans un dossier dédié, ce qui est utile à la réalisation des actions associées au formulaire, et plus généralement tous les sous-programmes, doivent être situés dans un dossier dédié. »  « Les cartes de visites doivent être prévisualisées en html, puis générées par les fonctions php d'une bibliothèque dédiée selon l'état d'avancement des séances. »
  • 3. Organisation pratique  http://tiprof.fr/PHP-mySQL/(1)/org-prat.html  http://iihm.imag.fr/delamare/pagora/  William.Delamare@imag.fr  Evaluation:  « La note sera calculée à partir des travaux rendus qui sont constitués des compte-rendus des séances et de l'accès en ligne au résultat du travail produit. Au fur et à mesure des séances, certains des travaux réalisés en séance doivent être rendus pour la séance suivante sous forme imprimée (recto/verso et éventuellement en noir&blanc à 2 par page). Le dernier travail doit être rendu sous forme imprimée comme pour les 3 autres travaux, mais aussi sous forme électronique : il vous est expressément demandé de constituer une archive avec un dossier contenant l'ensemble de vos fichiers, et de l'envoyer à l'enseignant par courrier électronique au plus tard pendant le WE suivant la dernière séance. »  « Attention : le non respect de ces consignes est sanctionné dans la note. De même, toute relance parce que les travaux n'ont pas été rendus dans les temps est aussi sanctionné. »  Ce cours s'appuie sur 2 pré-requis :  Connaissance et pratique des langages HTML et CSS  Bases de programmation (types entiers et chaînes, conditions et boucles, parcours d'un tableau, définition et utilisation de fonctions)
  • 4. Client / serveur Page web statique Page web dynamique: Génération du contenu via un langage de script
  • 5. Client / Serveur  Client = html/css (+js)  Serveur  doit donc générer html/css  Outils: php/mySQL (Dans ce cours: pas de RIA Flex/As3, pas de PERL, ni applet Java, ni WebService, etc…)
  • 6. Langage de scripts  Principes:  "calculer" les pages Web qu'un serveur doit renvoyer à un client pour une URL demandée.  URL = adresse d’un serveur + désignation d’un fichier  Logiciel client demande (click de souris sur des liens, etc…) : envoie d’une requête  Serveur envoie le fichier demandé  Au départ: envoie du fichier tel qu’enregistré en mémoire (donc duplication, etc…)  Maintenant: possibilité de créer à la volée le fichier à renvoyer  2 types de scripts:  Côté serveur(avec environnement adapté)  Côté client (JavaScript, demande de permission)
  • 7. Common Gateway Interface  CGI = interface de passerelle commune, entre:  Le serveur  Autre application (SGBD par exemple)  Langage: peu importe du moment qu’il peut  lire le flux de données d'entrée  traiter des chaînes de caractères  écrire sur le flux standard de sortie  Être exécuter ou interpréter par le serveur  Communication CGI/navigateur  1 = requête du client (html, php, exe)  2 = réponse du serveur avec le bon en-tête  content-type : text/html  content-type : image/gif  content-type : text/quicktime
  • 8. Local / Distant En local: - Edition des sources - Visualisation - Base de test Donc - Editeur de fichiers - Navigateur (ff, opera…) + serveur local* (Apache, …) - Base de donnée Ensuite: - Envoie des fichiers sources sur le serveur Donc: - logiciel FTP *: si les fichiers contiennent un langage script file:///on/se/fiche/du/chemin (statique) http://localhost/chemin/du/rep/www (dynamique) http://adresse/sur/le/net
  • 9. Rappels html • Quelques balises utiles pour le cours • <p>…</p>: paragraphe • <hi>…</hi>: titre (important i = 1, moins important i = 6) • <center>…</center>: centrer « … » • <i>…</i> : « … » en italique (gras si <b>) • <a href=« … » >…</a> • Et encore mieux: http://www.codeshttp.com/baliseh.htm • Quelques règles (les miennes) • Pas de style dans les fichiers html (<td style=« … ») • <A completer au fur et a mesure>
  • 10. Rappels html: tableaux - Le CSS vous permettra de rendre le tableau plus présentable - Bordures - Couleurs - Centrer/justifier le texte - Etc
  • 12. Rappels html: formulaires - Balise <form>…</form> - Attributs: - method - post - get - Différences - Des valeurs passées par GET se voient dans l’URL ex: http://maPage.php?val1=huhu&val2=hehe - GET limité en taille (255 caractères) - Action: - Ce qu’il se passe après la validation - Script php, perl, … - envoie d’un mail - Etc Exemple complet: (source et résultat) file:///Users/admin/Documents/Vacations/pagora/cours/ex_form.html http://iihm.imag.fr/delamare/pagora/exemples/ex_form.html
  • 13. TD1  Création d’une page index.html  La visualiser en http://localhost/…  Création d’un formulaire  (On pourra directement mettre l’extension .php)  Champs ?

Notes de l'éditeur

  1. - Presentation de moi ^^
  2. Pour que tout le monde suive le cour avec une idee de Ce qu’il y a a retenir (important) Ce qui sera utile au projet (concretement)
  3. Tout le monde ok avec pre-requis ? (Quel langage ?) Quelqu’un ca deja des bases de php ? SQL ? Autre ?
  4. - Generation de la page a chaque reclamation = dynamique
  5. On ne parlera pas de javascript, executable du cote client Pas de RIA Pas d’autre combinaisons (Autre moteur de stockage de donnee, autre langage de script (PERL)…) Php/mysql = grosse communaute active !
  6. Explication de chacun des points (logiciel cool, navigateur cool, serveur pour le php, chemin, ranger des fichiers, etc) Local = travail/verif avant publi
  7. Tr = raw Td = cellule
  8. Tr = raw Td = cellule
  9. Penser a mettre une url pour que les etudiants puissent voir le fichier…