Vous êtes sur la page 1sur 21

Douraid ARFAOUI

ELAMANA Training and Development

I- Initialisation et prparations

1) Les bases des applications web


2.1- Larchitecture client-serveur : Client web : tout composant logiciel, qui met des requtes HTTP envers un serveur pour rcuprer des ressources, ou demander un service (exemple : navigateur) Serveur web: Un composant logiciel quon installe sur un ordinateur (ventuellement un serveur puissant) qui sen charge de grer les requtes HTTP reues, et de retourner une rponse HTTP aux clients (exemples : Apache HTTP Server, Microsoft IIS, Apache Tomcat,etc.)

Scnario de communication : 1. Le client envoie une requte HTTP contenant lURL de la ressource demande (fichier script, fichier html, images,etc.) et dautres informations 2. Le serveur rcupre la requte, linterprte, puis il gnre une rponse HTTP qui contient les donnes contenues dans la ressource demande :
1

Douraid ARFAOUI

ELAMANA Training and Development

Si la ressource est un fichier contenant un code HTML, il retourne son contenu (en plus un code HTML gnr dynamiquement sil y en a) Si la ressource est un autre type de donnes brutes (images, audio, video, documents etc.) le serveur web retourne simplement cette ressource.

3. Le client rcupre alors la requte et affiche le rsultat lutilisateur. Le serveur interprte la requte ? En fait, ce nest pas le rle dun serveur HTTP dexcuter les actions attendues par une requte, toutefois, et grce la technologie, des plugins sont dvelopps pour diverses serveur web les permettant de supporter certains langages de programmation interprtes. Linterprtation de la requte sagit dexcuter toute action dynamique : cest lexcution du code ct serveur, qui rsulte par exemple la gnration dynamique dun code HTML, excuter une transaction de base de donnes, denvoi des emails, de tlchargement des fichiers envers le serveuretc.

2.2- Le protocole HTTP : Cest le protocole de base qui gre le dialogue entre le client et le serveur (Requtes et Rponses). Les requtes HTTP : Une requte HTTP est constitue de 3 lments principaux : 1. Ligne de requte : [METHODE] [URI] [VERSION_DU_PROTOCOLE] 2. Entte de la requte (headers) : Cest un ensemble des champs optionnels pour donner des informations supplmentaires au serveur propos du client et/ou de la requte. Chaque entte scrit dans une novelle ligne 3. Le corps de la requte (body) : Cest un ensemble des champs optionnels qui permettent denvoyer des donnes au serveur (texte, binaires,etc) Mthode HTTP : Les mthodes HTTP indiquent le type de requte souhait. Il existe une varit des mthodes : POST : Cette mthode sert envoyer les donnes au serveur dans le corps de la requte http
2

Douraid ARFAOUI

ELAMANA Training and Development

GET : Cette mthode permet simplement de demander une ressource, on peut toutefois passer des paramtres (donnes) via lURL (cest ce quon appelle le QueryString)

Autres : HEAD, PUT, DELETE, OPTIONS, TRACE, CONNECT

URI: Il sagit de lemplacement de la ressource sur le serveur. Version du protocole : Dsigne la version du protocole HTTP utilis. Syntaxe dune requte HTTP.
Ligne de requte : Mthode URL Version_de_protocole En-tte de requte [Ligne vide] Corps de requte

Exemple dune requte http


GET /index.jsp HTTP/1.0 Host : monsite.com User-Agent : Mozilla/5.0 . . . . .Firefox/2.0.0.20

Les rponses HTTP : Une rponse HTTP est constitue de 3 lments principaux : 1. Code de statut: Indique principalement ltat de traitement de la requte. Syntaxe : [VERSION-HTTP] [CODE_SATATUT] [EXPLICATION] 2. Entte de la rponse (headers) : Cest un ensemble des champs optionnels pour donner des informations supplmentaires au client propos du serveur et/ou de la requte. Chaque entte scrit dans une novelle ligne 3. Le corps de la rponse (body) : Contenu de la ressource demand Quelques codes de rponse HTTP : 200 : OK : Indique que la requte a t excute avec succs 301 : Moved : La ressource demande a t transfre envers un autre emplacement

Douraid ARFAOUI

ELAMANA Training and Development

400 : Bad Request : Le serveur indique que la syntaxe de la requte envoye est malforme. 403 : Forbidden : laccs la ressource demand est interdit 404 : Not Found : La ressource demande est introuvable

Exemple dune rponse HTTP


HTTP/1.0 200 OK Date: Tue, 12 Feb 2013 22:56:05 GMT Server: Apache/2.6.1 Content-Type: text/html Content-Length: 81 Expires: Sat, 01 Jan 2000 00:59:59 GMT Last-modified: Fri, 09 Aug 1996 14:21:40 GMT <html> <head></head> <body> <span>Ceci est le corps de la rponse</span> </body> </html>

2.2- Les interfaces dune application web : Les interfaces des applications web sont conues par le billais du langage de balisage HTML, et sont mises en forment laide des feuilles de style CSS. 2.2.1- XHTML : XHTML sagit de la version 4.01 de HTML, il a apport des changements majeurs aux anciennes versions. XHTML : eXtensible HyperText Markup Language XHTML implante les rgles dun document bien form du langage XML, parmi lesquels on distingue: La dclaration de la balise <doctype> est obligatoire Les balises doivent tre correctement imbriques Toutes les balises doivent tre crites en minuscule Le document doit avoir un seul lment racine Les attributs doivent tres crites en minuscule
4

Douraid ARFAOUI

ELAMANA Training and Development

Les valeurs des attributs doivent tres mises entre des guillemets La minimisation des attributs est interdite. 2.2.2- HTML5 : HTML5 est, actuellement, la version la plus rcente de HTML. Il est encore sous dveloppement et extension, il sera bientt un nouveau standard pour le HTML. Les apports majeurs de HTML5 sont : Nouvelles balises introduites Nouveaux attributs Support complet de CSS3 Intgration vido et audio facile, sans la ncessit des plugins externes. Dessins graphiques 2D et 3D Bases de donnes SQL locales Golocalisation Et bien encore plus !

Remarque : Il est noter que HTML5 nest pas, totalement, support par tous les navigateurs, toutefois il est en constante dveloppement et intgration.

Les nouvelles fonctionnalits de HTML5 sont bases sur des API Javascript. Exemple dun document HTML5
<!DOCTYPE HTML> <html> <body>

<video width="320" height="240" controls="controls"> <source src="video1.mp4" type="video/mp4"> <source src=" video1.mp4" type="video/ogg"> <source src=" video1.webm" type="video/webm"> Votre navigateur ne supporte pas la balise <video> </video> </body> </html>

Douraid ARFAOUI

ELAMANA Training and Development

2.2.3- Les feuilles de style CSS : Les feuilles de style CSS (Cascading Style Sheets) est un langage destine la mise en forme des lments HTML (couleurs, positions, arrires plan, bordures, tailles, ombrages, transparence,etc.). Syntaxe CSS SELECTEUR { Proprit :Valeur ; Proprit :Valeur ; .. } Le Slcteur sagit de llment sur laquelle on veut appliquer le style, il peut tre : Un nom de balise : Dans ce cas le style sera appliqu sur toutes les balises portant ce nom. Exemples : body, div, img, a, table, td, ul, li,etc. Un accesseur par ID : Il sagit de dfinir un nom prcd par #, dans ce cas le style sera appliqu sur tout lment ayant comme valeur de lattribut id le nom dclar. Un accesseur par classe : Il sagit de dfinir un nom prcd par un point . , dans ce cas le style sera appliqu sur tout lment ayant comme valeur de lattribut class le nom dclar. Il existe plusieurs autres slecteurs quon peut dcouvrir dans les annexes de ce support. Les styles CSS peuvent tres imbriqus directement dans le code HTML en les mettant entre les balises <style> et </style>, on peut galement les sparer dans des fichiers CSS indpendantes (dextension .CSS).

Douraid ARFAOUI

ELAMANA Training and Development

Exemple dapplication de CSS :


<!DOCTYPE html> <html> <head> <title>Exemple CSS</title>

<style> p{font-size:18px; font-weight:bold; color:blue; }

#joliDiv{font-size:14px; font-family:Arial; padding:5px; border:1px solid orange; width:200px; text-align:center; }

.grosBouton{font-size:30px; padding:10px;} </style> </head> <body> <p>Je suis un paragraphe</p> <br /> <div id="joliDiv">Je suis un div</div> <br /> <button </body> </html> class="grosBouton">Je suis un GROS BOUTON!</button>

Rendu de ce code :

Douraid ARFAOUI

ELAMANA Training and Development

2.3- JavaScript : JavaScript est un langage de programmation ct client, il fournit un ensemble de fonctionnalit trs utile, tel que la validation des formulaires ct client, laffichage des boites des dialogues, la manipulation du contenu HTML dune faon dynamique et bien plus !
Remarque : Depuis lintroduction de la technologie AJAX, on peut dsormais excuter des requtes ct serveur en utilisant le JavaScript !

Les fragments de code JavaScript peuvent tres imbriqus dans le code HTML, ou encore spars dans des fichiers (dextension .js) Pour intgrer le JavaScript dans un document HTML, le code doit tre compromis entre les balises <script> et </script>

Exemple dun code JavaScript

<!DOCTYPE HTML> <html> <body> <script> alert(Bonjour ! Cest mon premier code JavaScript !) ; </script> </body> </html>

Le rendu de ce code est une boite de dialogue qui affiche un message :

Douraid ARFAOUI

ELAMANA Training and Development

Et un deuxime exemple :
<!DOCTYPE html> <html> <head> <script> function afficherDate() { alert(Date()); } </script> </head> <body> <button type="button" onclick="afficherDate();">Afficher la date</button> </body></html>

Cet exemple fournit un bouton que lorsque sur lequel il affiche une boite de dialogue contenant la date et lheure courantes.

3) Le modle MVC
Le modle MVC (Modle Vue Contrleur) peut tre dfini comme tant un modle dhirarchisation et dorganisation des diffrents composants dune application. Le principe sagit de la dcomposition de lapplication en 3 axes : Les modles : Ces sont les composants qui sen chargent de la gestion intgrale des donnes de lapplication qui se situent par exemple dans une base de donnes.
9

Douraid ARFAOUI

ELAMANA Training and Development

Dune manire plus spcifique, les modles sont des classes ayant des mthodes pour insrer, rcuprer, mettre jour ou supprimer des donnes. Les vues : Les vues sont tout simplement les interfaces graphiques qui seront affiches aux utilisateurs. Ils ne doivent rien contenir que les composantes graphiques (en web, seulement HTML, CSS) et ventuellement des blocs Javascript. Les contrleurs : Cest la partie qui sen charge de la logique de contrle, ces sont les codes qui sen chargent des traitements dynamiques, tel que le traitement des requtes de lutilisateur.

Le modle MVC permet donc de bien structurer les applications, ce qui rsulte une maintenance facile, et un code plus clair et net. Exemple thorique : Dans une certaine application web, on se suppose de crer une partie qui permet linscription des nouveaux utilisateurs, pour modliser cette partie en MVC, on cre : Un modle : Une classe qui dispose des 2 mthodes principales, une mthode pour linsertion des informations de lutilisateur dans la base de donnes, et une autre pour rcuprer les informations dun certain utilisateur. Une vue : Linterface graphique contenant le formulaire dinscription Le contrleur : Cest le code qui sen charge de la vrification des valeurs saisies, de la vrification de lexistence du nom dutilisateur ou de ladresse email, lappel la mthode dinsertion des donnes si les informations fournies sont valides.
10

Douraid ARFAOUI

ELAMANA Training and Development

II- Le langage PHP : Premiers pas


1- Gnralits :
Le langage PHP est un langage de script interprt ct serveur, destin au dveloppement des applications web dynamiques. Les blocs de code PHP peuvent tre crites dans un fichier spar ou en les incluant dans le code HTML, et doivent tre comprises dans le corps de la balise < ?php ?> Les fichiers PHP ont lextension .php par dfaut Premier exemple :
<?php echo "<b>Mon premier script PHP</b>"; ?>

Lorsquon excute ce fichier, son rendu est le suivant :

Les structures echo et print permettent dcrire des chaines de caractre directement dans le flux/corps de la rponse HTTP.

Deuxime exemple :
<!DOCTYPE html > <html> <head> <title>Exemple 2</title> </head> <body> <div>Ceci est un div crit en HTML</div> <?php echo "<div style='color:red'>Ceci est un div gnr par PHP</div>"; ?> </body> </html>

11

Douraid ARFAOUI

ELAMANA Training and Development

Rendu de ce fichier :

2- Les variables et les constantes :


Un variable est un conteneur quon peut lutiliser pour stocker des donnes. Comme dans tout langage de programmation, on peut dfinir des variables et des constantes en PHP. Les variables PHP commencent toujours par le caractre $ suivi par le nom de la variable. Exemples de dclaration des variables:
$var1 $var2 $var3 $var4 $var5 = = = = = 50; // une variable de type entier "Une chaine"; // une variable de type chain de caractres 20.2; // une variable de type rel (float) true; // une variable de type boolen array(); // une variable de type tableau

Il est noter que : PHP est un langage de typage faible, c'est--dire quon ne dfinit pas le type de variable son dclaration, une variable PHP peut contenir nimporte quel type de donnes Le nom dune variable PHP doit commencer toujours par une lettre alphabtique (az, A-Z) ou le caractre _ , et il ne doit pas contenir des caractres spciaux tels que (@, ,, !,etc). Toutefois il peut comporter des chiffres On peut toujours utiliser les variables aprs leur dclaration Les variables PHP doivent tres initialiss leur dclaration. Les portes des variables : La porte dune variable dfinit son accessibilit dans le reste du code PHP. On distingue 4 types de portes :

12

Douraid ARFAOUI

ELAMANA Training and Development

Porte globale : Cest le cas ou on dfinit une variable directement dans un bloc PHP, il sera accessible partout dans la mme page ou il est dfinit, sauf dans le corps des fonctions

Porte locale : Cest le cas des variables dclars lintrieur des fonctions, ou le variable ne sera plus valide en dehors de la fonction dans laquelle elle est dclare Porte statique : Si on dclare une variable locale dans une fonction, elle sera dtruite aprs chaque appel. Pour pouvoir garder ltat (la valeur) dune variable dans une mme fonction aprs chaque appel, on doit le dclarer statique via le mot cl static.

Porte paramtre : Ces sont les variables passes en paramtre dune fonction, et sont utilisables seulement dans le corps de cette dernire.

Utilisation : On peut utiliser les variables avec des diffrentes manires, soit : En laffichant En lui affectant une autre variable En le passant en paramtre une fonction etc.
<?php $x = $y = $z = echo ?> 50; $x; $y + 5; "La valeur de la variable z est: ". $z;

Rendu de ce code :

Les constantes sont des conteneurs de donnes mais qui ne peuvent pas tres modifis aprs leur dfinition. Les noms des constantes suivant les mmes que celles des variables sauf quon nutilise pas le caractre $ pour les utiliser.
13

Douraid ARFAOUI

ELAMANA Training and Development

Pour dclarer une constante, on doit utiliser la fonction define(Nom_Constante, Valeur)


<?php define("PI",3.1415); define("age",25); echo PI; echo "<br />"; echo age; ?>

Rendu de ce code :

3- Les chaines de caractre:


Les chaines de caractre sont dfinies par une suite des caractres de tout type de donnes. La dfinition des variables des chaines de caractre en PHP se fait comme suit :

<?php $maChaine = "Ceci est une chaine"; $chaine2 = 'Ceci est une chaine aussi'; $chaine3 = "Chaine contenant des \"guillemets\" "; $chaine4 = 'Chaine contenant un \'apostrophe\' '; echo echo echo echo ?> $maChaine; $chaine2; $chaine3; $chaine4;

14

Douraid ARFAOUI

ELAMANA Training and Development

Rendu de ce code :

On remarque ainsi que les chaines sont crite sur la mme ligne. Rappelons que la structure echo crit la chaine en paramtre directement dans le flux HTML, alors pour retourner la ligne, on doit crire <br /> aprs chaque ligne. Au lieu dcrire chaque ligne avec un echo, on peut galement concatner les chaines. Concatnation des chaines de caractre : La concatnation des chaines consiste coller/runir un ensemble des chaines en une seule chaine. Cette opration est effectue par loprateur point .

<?php $maChaine = "Ceci est une chaine"; $chaine2 = 'Ceci est une chaine aussi'; $chaine3 = "Chaine contenant des \"guillemets\" "; $chaine4 = 'Chaine contenant un \'apostrophe\' '; echo $maChaine . "<br />" . $chaine2 . "<br />" . $chaine3 . "<br />" . $chaine4; // on peut galement stocker des chaines concatnes en une seule variable echo "<br /><br />"; $chaine = $maChaine . "<br />" . $chaine2 . "<br />" . $chaine3 . "<br />" . $chaine4; echo $chaine ?>

Rendu de ce code :

15

Douraid ARFAOUI

ELAMANA Training and Development

Quelques fonctions utiles sur les chaines de caractre : strlen($chaine) : retourne la longueur dune chaine passe en paramtre strtoupper($chaine) : retourne la chaine passe en paramtre tout en majuscule strtolower($chaine) : retourne la chaine passe en paramtre tout en majuscule strpos($c,$chaine) : retourne lindice de la premire occurrence du caractre $c dans la chaine $chaine, si le caractre est introuvable la fonction retourne false.

4- Les tableaux :
Les tableaux sont lun des structures des donnes complexes. Un tableau est gnralement une collection des donnes quon peut stocker dans une seule variable. En PHP on peut accueillir plusieurs types des donnes dans un mme tableau. Dclaration :
//Dclaration d'un tableau vide $tab = array();

En PHP il existe 2 types des tableaux : Les tableaux indexs ( base dindice) Les tableaux associatifs ( base des cls)

4.1- Les tableaux indexs ( base dindice) :


Les tableaux base dindice sont des tableaux dont chaque lment possde un indice entier (0, 1,2,), avec lequel on peut accder llment. Le premier lment dans un tableau index possde lindice 0, le deuxime possde lindice 1, etc. Dclaration et initialisation :
//Dclaration et initialisation d'un tableau index $tab1 = array("Une chaine",25,true, 30.2,'element');

16

Douraid ARFAOUI

ELAMANA Training and Development

$tab1 est une variable dans laquelle on a stock un tableau, ce tableau comporte 5 lments, on peut accder nimporte quel lment du tableau en utilisant la syntaxe suivante :
$nomVariableableau [INDICE_ELEMENT]

Exemples :
//Dclaration et initialisation d'un tableau index $tab1 = array("Une chaine",25,true, 30.2,'element'); // affiche le premier lment : Une chaine echo $tab1[0]; //affiche le 4me lment: 30.2 echo $tab1[3]; //stocker la valeur de la 2me lment dans une autre variable $var = $tab1[1];

Les lments dun tableau sont eux-mmes des variables, on peut donc changer leurs valeurs :
//Dclaration et initialisation d'un tableau index $tab1 = array("Une chaine",25,true, 30.2,'element'); // modifier la valeur du 2me lment $tab1[1] = 50; //afficher la structure et les valeurs du tableau $tab1 print_r($tab1);

Affiche :

Remarque : La fonction print_r() permet dafficher la structure et le contenu dun donne de type complexe (tableaux, objets) et on lutilise gnralement pour des buts de dbogage du code

Les tableaux en PHP nont pas de taille fixe, et ils sont extensibles. On peut ajouter des lments au tableau en utilisant la syntaxe suivante :
$nomVariableTableau [] = VALEUR_A_AJOUTER

17

Douraid ARFAOUI

ELAMANA Training and Development

Exemples :
$tab1 = array(); $tab2 = array(20,"salut"); $tab1[] = "chaine de caractres"; $tab1[] = 520; $tab1[] = array(2,65,50.2); $tab2[] = "hello"; $tab2[] = 170; print_r($tab1); echo "<br />"; print_r($tab2);

Rsultat :

On a bien remarqu quon peut ajouter aussi des tableaux comme lments dun autre tableau.

4.2- Les tableaux associatifs ( base des cls):


Un tableau associatif est trs semblable un tableau base des cls, sauf que les indices sont remplacs par des cls sous format des chaines de caractre. Exemple 1:
$personne = array("Nom" => "ABC", "Prenom"=>"DEF","Age"=>25); print_r($personne);

Rsultat :

Ainsi dans cet exemple, les cls sont : Nom , Prenom et Age , et on associe chaque cl son valeur par le billais de loprateur => Exemple 2 : Modifier la valeur dun lment :
$personne["Nom"] = "Arfaoui"; $personne["Prenom"] = "Douraid"; print_r($personne);

18

Douraid ARFAOUI

ELAMANA Training and Development

Rsultat :

On peut ajouter des valeurs un tableau associatif en utilisant la syntaxe suivante :


$nomVariableTableau["NOUVEL_CLE"]=VALEUR ; print_r($personne);

Exemple (Suite de lexemple prcdent) :


$personne["Ville"] = "Hammam Sousse";

Rsultat :

PARTIE A COMPLETER

7- La rcupration des paramtres:


Les paramtres sont les informations que le client envoie envers le serveurs dans le corps de la requte (en utilisant la mthode HTTP POST) ou en les passants directement travers lURL (en utilisant la mthode HTTP GET). Exemple de passation des paramtres travers la mthode GET : http://nom.de.domaine/page.php?param1=val1&param2=val2&param3=val3&... Pour envoyer des donnes avec la mthode POST, on peut utiliser les formulaires, dont voici un exemple :
<form method="post" action="page.php"> Paramtre 1 <input type="text" name="param1" /> <br /> Paramtre 2<input type="text" name="param2" /> <br /> Paramtre 3<input type="text" name="param3" /> <br /> <input type="submit" value="Envoyer" /> </form>

19

Douraid ARFAOUI

ELAMANA Training and Development

Ainsi les paramtres envoyer dans cet exemple sont les champs dont les cls sont param1, param2 et param3 et les valeurs sont celles que lutilisateur va saisir. A lenvoi des paramtres envers le serveur, linterprteur PHP met ces derniers dans lun deux tableaux associatifs prdfinis selon la mthode HTTP utilise : $_POST : Si les paramtres sont envoyes par le billais de la mthode POST $_GET : Si les paramtres sont envoyes via la mthode GET

Pour rcuprer ces paramtres on utilise la syntaxe suivante :


// Pour les paramtres envoys via POST $_POST["NOM_PARAMETRE"] // Pour les paramtres envoys via GET $_GET["NOM_PARAMETRE"]

Exemple 1: Rcupration et affichage des paramtres envoys via la mthode POST : Fichier HTML :
<form method="post" action="infos.php"> <table> <tr><td>Votre Nom:</td><td><input type="text" name="param_nom" /></td></tr> <tr><td>Votre Prnom:</td><td><input type="text" name="param_prenom" /></td></tr> <tr><td>Votre age:</td><td><input type="text" name="age" /></td></tr> <tr><td>Sexe:</td><td><select name="param_sexe"><option>Homme</option>Femme</option></select></td></tr> <tr><td></td><td><input type="submit" value="Afficher les informations" /></td></tr> </table> </form>

20

Douraid ARFAOUI

ELAMANA Training and Development

Fichier infos.php :
<table> <tr><td>Nom:</td><td><?php echo $_POST["param_nom"]; ?></td></tr> <tr><td>Prnom:</td><td><?php echo $_POST["param_prenom"]; ?></td></tr> <tr><td>Age:</td><td><?php echo $_POST["age"]; ?></td></tr> <tr><td>Sexe:</td><td><?php echo $_POST["param_sexe"]; ?></td></tr> </table>

On simule lexemple en remplissant le formulaire et en lenvoyant :

Rsultat :

21