chamilo - impl ementation d’une appli. web avec html, php & … · impl ementation d’une...

Contenu

1 Implementation d’une appli. Web avec HTML, PHP & MySQLIntroductionUn peu d’HTMLUn peu de PHPElements du langageLiens entre HTML & PhPAcceder a MySQL depuis PHP

Implementation d’une appli. Web avec HTML, PHP & MySQL Introduction

World Wide Web

Un peu d’histoire :

1980 : hypertexte, invente par T. Berners-Lee et R. Caillau (formatpour des echanges de documents au CERN, Geneve)

1990 : protocole HTTP + HTML −→ WWW

1992 : premier serveur installe hors Europe (Stanford)

1994 : creation de W3C (WWW Consortium)

Lorraine Goeuriot IUT 1, Universite Grenoble Alpes Auteur du cours : Marie-Christine Fauvet Universite Grenoble Alpes – UFR IM2AGSGBD 28 janvier 2018 2 / 55


Architecture (vue grossiere)

url

url

HTML

client 1

HTML

client n

HT

TP

serv

er

php query

HTML

HTML

query

Web Server .

static html pages

SQL

mysql

Oracle



Les langages du Web

<html><head>

<meta charset=“UTF-8”><title>Page exemple</title><style>

body {background-color: yellow;}</style><script>

setTimeOut(function() {window.location.reload(1);

}, 5000);</script>

</head><body>

<h1>Exemple de requête : </h1><?php

$dbh = new PDO(‘mysql:host~localhost;dbname=base1’, ‘base1’, ‘toto’);$query = ‘SELECT COUNT(cmd_num) as nb FROM Commandes’;$sth = $dbh->query($query);$row = $sth->fetch(PDO::FETCH_ASSOC);

?><p> Il y a <?= $row[‘nb’] ?> commandes </p>

</body></html>

CSS!

Javascript!

SQL!

PHP!

HTML!


Implementation d’une appli. Web avec HTML, PHP & MySQL Un peu d’HTML

HyperText Markup Language

Description de documents hypertextes bases sur des balises :

Les balises en paire : <tag-name tag-attributes> texte

</tag-name>

Les balises orphelines : <tag-name tag-attributes/ >

ou tag-attributes est une sequence de 0, une ou plusieurs expressionsde la forme attribute-name="value".

Les balises servent a decrire :

Contenu

Presentation

Liens vers d’autres documents



HTML - Rappels ( ?)

Structure principale :

<html><head>

<title>Titre de la page, apparait dans la fenetre du navigateur

< /title><!– Autres meta informations : style, encodage, scripts, etc. –>

< /head><body>< /body>

< /html>



HTML - Rappels ( ?)

Styles : <h1>...< /h1>, <h2>...< /h2>...

Polices : <b>, <i>...

Structure du texte : <p>...< /p>, <br>, <hr>...

Liens hypertexte : <a href="http://monurl.com">Ceci est un

lien< /a>

Images : <img src=”chemin-vers-mon-image” width=200height=100>

Dimensions (valables pour les images, tableaux, etc.) : fixe (exwidth=200 ou 200px) ou relative (ex width=50%)



Listes et tableaux

Listes ordonnees :

<ol><li>Element 1< /li><li>Element 1< /li>

< /ol>

Listes non ordonnees :

<ul><li>Element 1< /li><li>Element 1< /li>

< /ul>



Listes et tableaux

Tableau :

<table><caption>Titre du tableau< /caption><tr>

<th>Case entete 1< /th>...

< /tr><tr>

<td>Case 1< /td><td>Case 2< /td><td>...< /td>

< /tr>< /table>



Exercice : ecrivez le code de cette page



Exemple

<html><head>

<meta name=”author” content=”Mr X”></meta><title> un exemple </title>

</head><body>

<h1> bienvenue a Grenoble ! </h1><br><b>une vue de Grenoble :</b><br><img src=”grenoble-photo-17.jpg” width=200/><br><a href=”http ://www.ujf-grenoble.fr”>cliquer ici pour visiter l’UJF</a><br><i>Amusez-vous bien</i>< !– un commentaire qui peut aider –>

</body></html>



Les formulaires

Structure :

<form action=”ma page.php” method=”{GET/POST}”>...<input type=”submit” value=”Valider”>

< /form>

attribut action : lien vers la page qui traite les valeurs du formulaire(souvent grace a du code PHP)

attribut method : methode de transmission des donnees saisies auserveur

bouton Submit : obligatoire ! Sinon les informations ne sont pasenvoyees au serveur.



Un exemple

<html> <body><form action=”mapage.php” method=”GET”>

Nom : <input type=”text” name=”nom”><br>Mot de passe : <input type=”password” name=”mdp”><br>Sexe : <input type=”radio” name=”sexe” value=”F” checked> F

<input type=”radio” name=”sexe” value=”M”> M <br>Age : <select name=”age”>

<option value=”enfant”>0-12< /option><option value=”jeune”>12-25< /option><option value=”adulte”>25-60< /option><option value=”senior”>60+< /option>< /select><br>

Racontez votre vie :<br><textarea name=”mavie” rows=”10” cols=”40”>

Il &eacute ;tait une fois...< /textarea><input type=”submit” value=”valider”>

< /form>< /body>< /html>Lorraine Goeuriot IUT 1, Universite Grenoble Alpes Auteur du cours : Marie-Christine Fauvet Universite Grenoble Alpes – UFR IM2AGSGBD 28 janvier 2018 13 / 55


HTML - Suite et fin

HTML s’apprend par la pratique

Facile a tester

Documentation : http://www.w3schools.com/html/default.asp

Normes d’utilisation : privilegier les feuilles de style CSS a l’insertionde balises de mise en forme (police, couleurs, etc.)

Dimensions : privilegier les tailles relatives plutot que fixes (mobiles,tablettes, portables, etc.)


http://www.w3schools.com/html/default.asp

Implementation d’une appli. Web avec HTML, PHP & MySQL Un peu de PHP

PHP - Un peu de culture...

Cree en 1994 par Rasmus Lerdrof

PHP signifie :

Personal Home Page (au debut)PHP : Hypertext Preprocessor (officiellement)People Hate Perl (moins officiellement)

La version courante est la 5.4 (depuis fin 2011)

Compile depuis la version 4

Site officiel : http://www.php.net/La documentation en francais :http://www.php.net/manual/fr/index.php



Principe

Le code PHP code est embarque dans les pages HTML (inclus entreles marques <?php et ?> pour les blocs, <? = et ? > pour lesinstructions breves)

Le serveur s’occupe d’interpreter le code

Le code PHP ne peut pas etre vu par les clients

Exemple :

<html><head> <title> Heure </title> </head><body><p>

L’heure courante est < ?php print date(”h :i :s”) ; ?>< /p></body> </html>



Roles (client et serveur)

Du cote serveur :

<html><head> <title> Heure </title> </head><body><p>

L’heure courante est < ?php print date(”h :i :s”) ; ?>< /p></body> </html>

du cote client (un browser) :

<html><head> <title> Heure </title> </head><body> <p>

L’heure courante est 16 :39 :27< /p></body> </html>


Implementation d’une appli. Web avec HTML, PHP & MySQL Elements du langage

Exemples

Les noms de variables commencent par $

$reply = 42 ; // entier$pi = 3.14159 ; // reel$action = ”naviguer” ; // chaıne$sentence = ”J’aime $action” ; // chaıne interpretee$sentence = ’Cela coute $100’ ; // chaıne non interpretee$foo = $action ; // variable$E = $m*$c*$c ; // expression



Regles de typage

Le type d’une variable est derive de sa valeur

<html> <body>< ?php

$a = 3 ; // $a est un entier$a = 3.4 ; // $a est maintenant un reel$b = (int) $a ;// $b a la valeur de $a castee en entier (3)

?></body></html>



Type d’une variable

boolean isset($var) renvoie vrai si $var est affectee (a une valeur)string gettype($var) renvoie la chaine decrivant le type de $varboolean is double($var) renvoie vrai si $var est de type doubleboolean is integer($var) renvoie vrai si $var est de type entierboolean is string($var) renvoie vrai si $var est une chaıneboolean is type($var, $t) renvoie vrai si $var est du type $t... . . .



Exemple

<html> <body>< ?php

$a=3 ;echo ”type = ” ; echo gettype($a) ; echo ”<br>” ;$a = 3.4 ;echo ”type = ” ; echo gettype($a) ; echo ”<br>” ;$b = (boolean) $a ;echo ”type = ” ; echo gettype($b) ; echo ”<br>” ;echo $b ;

?></body> </html>



Operateurs (exemples)

Sur les nombres : +, -, *, /, % (modulo), et les operateursarithmetiques habituels : cos, sin, floor, ceil, etc..

Sur les chaınes de caracteres :

< ?php$a = ”Hello ” ;$b = $a . ”World !” ; # // la valeur de $b est ”Hello World !”$a = ”Hello ” ;$a .= ”World !” ; # // la valeur de $a est ”Hello World !”$rest = substr(”abcdef”, 0, 1) ; # // la valeur de $rest est ”ab”$rest = substr(”abcdef”, 4) ; # // retourne ”e”

?>

De comparaison : ==, <>, !=, >=, >, <=, <

Logiques : NOT, !, AND, &&, OR, | |, XOR



Structures de controle

if, else, elseif, while, do, for, foreach,...

Tres proche de C . . .

...if ( !isset($login) or !isset ($motdepasse)) {

$codeerreur = ”problemevariables” ;}else {

$codeerreur = ”sanserreur” ;}

....

while ($nbRes > 0) {.... ;$nbRes = $nbRes - 1 ;.... ;

} ;

do {.... ;$nbRes = $nbRes - 1 ;.... ;

} while ($nbRes > 0) ;



Tableaux

Initialisation :

$tab = array(”h”, ”1”, ”test”) ; $tab = [”h”, ”1”, ”test”] ;

Ajout d’elements :

$tab[3] = ”suivant” ;$i = 10 ; $tab[$i] = ”autre” ;$tab[] = ”dernier” ; // pour inserer a la fin

Est-ce que $var est un tableau ?

boolean is array($var) ;



Parcours d’un tableau

Boucle for :

for ($i=0 ; $i<count($tab) ; $i = $i+1) {echo ”<li>”.$tab[$i].”< /li>” ;

} ;

Boucle While

$i=0 ;while ($i < count($tab)) {

echo ”<li>”.$tab[$i].”< /li>” ;$i = $i + 1

}



Les dictionnaires

Les dictionnaires sont des tableaux associatifs

Initialisation :

$d = array(”t”=>1, ”f”=>0, ”c”=>5) ;$d = [”t”=>1, ”f”=>0, ”c”=>5] ;

Ajout d’elements : $d[”t”] = 3 ;

Tableau des cles : array keys($d)

Tableau des valeurs : array values($d)



Parcours des dictionnaires

Le dictionnaire :

$pays = array(”ad” => ”andorre”,”ae” => ”emirats arabes unis”,...”zw” => ”zimbabwe”

Se parcourt de la facon suivante :

foreach ($pays as $key => $value) {echo $value.’ (<code>’.$key.’< /code>), ’ ;

}



Inclusion de programme

include("foo.php")

Inclut un autre programmeAlerte lorsque le programme n’existe pas

require("foo.php")

Inclut un autre programmeErreur lorsque le programme n’existe pas



Fonctions et actions

< ?phpfunction test fonction ($x) {

return $x+1 ;} ?>

< ?phpfunction test action ($x, &$y) {

/* x est un parametre donne, y un parametre resultat. */$y = $x+1 ;

}?>



Parametres GET et POST

Comment transmettre des donnees du navigateur vers le serveur ?

password :

connexion remise à zéro

Exemple de formulaire :

login : toto! *******!

Login.php

Login.php

Login.php?login=toto&password=1234567

... $login = $_GET[‘login’]; $password = $_GET[‘login’]; ...

GET!

POST! ... $login = $_POST[‘login’]; $password = $_POST[‘login’]; ...

$_GET[‘password’]

$_POST[‘password’]


Implementation d’une appli. Web avec HTML, PHP & MySQL Liens entre HTML & PhP

Interagir avec un utilisateur via un formulaire (en HTML)

password :



login :

<b> Exemple de formulaire : </b><form method=post action=”1-action.php”>

login : <input type=”text” name=”login”><!− Declaration de la variable login − >password : <input type=”password” name=”pwd”− ><!− Declaration de la variable pwd><br><input type=”submit” value=”connexion”><input type=”reset” value=”remise &agrave ; z&eacute ;ro”>

</form>



Interagir avec un utilisateur via un formulaire (en HTML)

<b> Exemple de formulaire : </b><formmethod=post action=”1-action.php”>

login : <input type=”text” name=”login”><!− Declaration de la variable login − >password : <input type=”password” name=”pwd”><!− Declaration de la variable pwd − ><br><input type=”submit” value=”connexion”><input type=”reset” value=”remise &agrave ; z&eacute ;ro”>

</form>

Le programme 1-action.php s’occupe de traiter les valeurs entrees.

login et pwd sont 2 variables dont les valeurs sont affectees apres quel’utilisateur ait clique sur le bouton connexion, qui declenche la soumissiondu formulaire.



Passages de valeurs de 1.php vers 1-action.php

$login, $pwd

......

echo "Connexion de ".$login." OK.";

1−action.php

$login=$_POST["login"];

<php

$pwd=$_POST["pwd"];if (isset($login) and isset($pwd)) {

} else {echo "Connnexion impossible";

}

?>

1.php

Exemple de formulaire

<form mehod=post action="1−action.php">

login :

<input type="submit" value="connexion">

<input type="reset" value="remise à zeacute;ro>

</form>

passwd : <input type="password" name="pwd">

<input type="text" name="login">

......



1.php & 1-action.php : rendu a l’execution

password :


Exempledeformulaire :

login :

Connexion fauvet OK

fauvet **********



Selection parmi un choix

Choix dans une liste :

non

éventuellement

peut−etre

peut−etre v

oui

...<form method=’post’ multiple=’no’ size=1 action=’2-action.php’>

<select name=reponse><option value=1> oui </option><option value=0> non </option><option value=2 selected> peut-&ecirc ;tre</option><option value=3> &eacute ;ventuellement</option>

</select>....</form>reponse est une variable dont la valeur est soit 0, 1, 2, ou 3 apres que leformulaire ait ete soumis.



Formulaires - Verification des parametres

Pour eviter les erreurs, il est important de :

Verifier l’existence des parametres :

if (isset($ POST[’login’])){$login = $ POST[’login’] ;}else{

$nom = ”invite” ;}

Verifier la saisie (format, type...)

Transformer les caracteres speciaux HTML : htmlspecialchars() (ex :’e’ → ’&eacute ;’, ’&’ → ’&amp ;’...)

Fonction filter input : permet de verifier l’existence, le format et defiltrer les caracteres. Ex : filter input(INPUT POST, ’email’,FILTER VALIDATE EMAIL)



Les sessions

Une session est une periode entre un debut et une fin d’une activite(la visite d’un site puis fermeture de la fenetre)

Une session en PHP est un mecanisme qui permet de garder ”enmemoire” un nombre illimite de valeurs entre plusieurs requetes d’unmeme utilisateur

Ex : lorsqu’un formulaire est sur plusieurs pages, les sessionspermettent de conserver les valeurs saisies d’une page a l’autre

Stockage temporaire, sur le serveur

Declenche par section start(), ferme parsession write close() (facultatif)



Sessions - Exemple

password :



login : toto! *******!

Login.php

Bonjour!toto!!!!Choisissez!une!ac2on!dans!le!menu!:!!

Ac2on!1!Ac2on!2!Ac2on!3!

page1.php

U2lisateur!toto,!ac2on!2!OK!

page2.php

Suivant!



page1.php

< ?php session start() ; // Initialisation d’une session...$ SESSION[’login s’] = $ POST[’login’] ;$ SESSION[’pwd s’] = $ POST[’pwd’] ;

?>Bonjour < ? echo $ SESSION[’login s]’ ; ?><form method=post action=”page2.php”>

<select name=”action”><option value=0> Action 1 </option><option value=1> Action 2 </option><option value=2> Action 3</option><input type=”submit” value=”Suivant”>

</form>

A la suite du declenchement de la soumission du formulaire Login.php, lesvariables de session $login s et $pwd s prennent respectivement les valeurs de$login et $pwd initialisees apres que l’utilisateur ait valide le formulaire.



Le programme page2.php

< ?php session start() ;if (isset($ SESSION[’login s’]) and isset($ SESSION[’pwd s’])) {

// Verification des parametres de connexion (login s et pwd s)$lien = .... // tentative de connexionif ($lien) {

echo ”Utilisateur $ SESSION[’login s’], action $ POST[’action’] OK” ;... }else {

echo = ”Pas de connexion” ; }?>...


Implementation d’une appli. Web avec HTML, PHP & MySQL Acceder a MySQL depuis PHP

Acceder a MySQL depuis PHP - Introduction

PHP permet l’acces a plusieurs SGBD : Oracle, SQL server, Postgres,MySQL, etc.

Les interfaces sont similaires mais leurs implementations sontspecifiques.

Principales interactions entre PHP et le SGBD :

Connexion a la base de donnees, deconnexion.Execution d’une requete (select, update, . . . ).Traitement des resultats (une liste de nuplets ou une erreur).



Interface PHP-MySQL

mysql (fonctions mysql *()) - Obsolete apres PHP 5.5

mysqli : interface procedurale et objet, acces a toutes lesfonctionnalites de MYSQL

PDO (PHP Data Objects) : interface objet, acces a toutes lesfonctionnalites de MYSQL + Portabilite : MySQL, Oracle,PostgreSQL, etc.



Connexion

<?php/* Connexion a la base de donnees */$dsn = ’pgsql :host=127.0.0.1 ;dbname=base1’ ;$sql login = ’base1’ ;$sql password = ’toto’ ;$dbh = new PDO($dsn, $sql login, $sql password) ;

?>



Requete simple

<?php$query = ”SELECT name, manf FROM Beers” ;$sth = $dbh->query($query) ;

? >Nombre de lignes : <? = $sth− >rowCount() ? ><br>Nombre de colonnes : <? = $sth− >columnCount() ? ><br><ul>

< ?php while ($row = $sth− >fetch(PDO : :FETCH ASSOC)) : ? ><li><? =$row[’name’] ? > (<? =$row[’manf’] ? >)< /li>

<?php endwhile ;? >< /ul>



Requete parametree

< ?php$login = filter input(INPUT POST, ’login’, FILTER UNSAFE RAW) ;$password = filter input(INPUT POST, ’password’, FILTER UNSAFE RAW) ;$query = ”SELECT * FROM users WHERE login= :login

AND password = :password” ;$sth = $dbh− >prepare($query) ;$sth− >bindParam(’ :login’, $login, PDO : :PARAM STR, 20) ;$sth− >bindParam(’ :password’, $password, PDO : :PARAM STR, 100) ;$sth− >execute() ;if ($sth− >rowCount() === 1) :

$row = $sth− >fetch(PDO : :FETCH ASSOC) ;? ><p>Bienvenue <? = $row[’fullname’] ? > !< /p>

<?php else : ? ><p> Identifiants invalides !< /p>

<?php endif ;? >



Creer une page dynamique, mode d’emploi

Trois composantes :

La page en elle-meme (HTML)

L’acces aux donnees (SQL)

La communication entre l’affichage et les donnees (PHP)

Essayer d’ecrire les trois en meme temps → meilleur moyen de s’emmelerles pinceaux ! !



Creer une page dynamique, mode d’emploi

Quatre etapes :

1 Dessiner la page (SUR PAPIER)

2 Creer la page HTML (statique)

3 Preparer les requetes et le format des resultats attendus

4 Remplacer le contenu statique par du contenu dynamique (PHP-SQL)

Et toujours se referer aux documentations :

HTML : http://www.w3schools.com/html

PHP : http://php.net/manual/fr/

PDO : http://php.net/manual/fr/book.pdo.php

SQL : http://www.w3schools.com/sql/


http://www.w3schools.com/html

http://php.net/manual/fr/

http://php.net/manual/fr/book.pdo.php

http://www.w3schools.com/sql/


Exemple - page dynamique

Creation d’une page affichant toutes les bieres et leurs brasseurs dans untableau, puis une liste de tous les bars, avec leur adresse.




1 Dessiner la page

Bienvenue sur ma première page dynamique !

Bière Brasseur New Toohey’s Pale Ale Sierra Nevada Red Toohey’s Victoria Bitter Carlton

•  Australia Hotel, The Rocks •  Coogee Bay Hotel, Coogee •  Lord Nelson, The Rocks •  Marble Bar, Sydney




2 Creer la page HTML (statique)

<html><body>

<h1>Bienvenue sur ma premi&egrave ;re page dynamique !< /h1><table>

<tr><th>Bi&egrave ;re< /th><th>Brasseur< /th>< /tr><tr><td>New< /td><td>Toohey’s< /td>< /tr>

...< /table><ul>

<li>Australia Hotel, The Rocks< /li><li>Coogee Bay Hotel, Coogee< /li>...

< /ul>< /body>< /html>




3 Preparer les requetes et le format des resultats attendus

Noms des bieres et brasseurs :

SELECT name, manf FROM beersFormat : (string, string)

Noms et adresses des bars :

SELECT name, addr FROM barsFormat : (string, string)




4 Remplacer le contenu statique par du dynamique

<html><body>(A) CONNEXION(B) REQUE ET AFFICHAGE

<h1>Bienvenue sur ma premi&egrave ;re page dynamique !< /h1><table>

<tr><th>Bi&egrave ;re< /th><th>Brasseur< /th>< /tr><tr><td>New< /td><td>Toohey’s< /td>< /tr>

...< /table>

(C) REQUETE 2 ET AFFICHAGE<ul>

<li>Australia Hotel, The Rocks< /li><li>Coogee Bay Hotel, Coogee< /li>...

< /ul>< /body>< /html>





(A) Connexion :

<?php$dsn = ’pgsql :host=127.0.0.1 ;dbname=base1’ ;$sql login = ’base1’ ;$sql password = ’toto’ ;$dbh = new PDO($dsn, $sql login, $sql password) ;





(B) Requete 1 et affichage :

<?php$query = ”SELECT name, manf FROM beers” ;$sth = $dbh− >query($query) ;

? ><table>

<tr><th>Bi&egrave ;re< /th><th>Brasseur< /th>< /tr><? php while ($row = $sth− >fetch(PDO : :FETCH ASSOC)) :? >

<tr><td><? =$row[’name’]? >< /td><td><? =$row[’manf’]? >< /td>< /tr>

<?endwhile ;? >< /table>





(C) Requete 2 et affichage :

<?php$query = ”SELECT name, addr FROM bars” ;$sth = $dbh− >query($query) ;

? ><ul>

<? php while ($row = $sth− >fetch(PDO : :FETCH ASSOC)) :? ><li><? =$row[’addr’]? >, <? =$row[’name’]? >< /li>

<?endwhile ;? >< /ul>


chamilo - impl ementation d’une appli. web avec html, php & … · impl ementation d’une...

Documents