Ecole Supérieure d’Ingénieurs Privée de Gafsa

Support de Cours
Développement des
applications web avancées
Filière : II3

Responsable du cours : Thouraya

GOUASMI
______________________

A.U. 2022/2023

Chapitre 1: La programmation Web,

Technologies et Langages

Introduction
Les langages les plus courants
Les technologies pour la programmation Web
Introduction
Un modèle :site de E-Commerce

Introduction
Architecture d’une application web
Introduction
Protocole HTTP: Hyper Text Transfer Protocol

Protocole de transfert des fichiers (essentiellement au format HTTP) localisés grâce à

une chaîne de caractères appelée URL entre un navigateur (le client) et un serveur web
(appelé d’ailleurs httpd sur les machines Unix).
La communication entre le navigateur et le serveur est faite en deux temps.

Envoi des entêtes HTTP Localisation du fichier

Requête Décode BD

Création des entêtes Formatage

Envoi des entêtes HTTP des données
de réponse Serveur
Web

Le navigateur effectue une requête HTTP.

Introduction
Protocole HTTP: Hyper Text Transfer Protocol

1. Le client demande une page PHP 2. Le serveur

exécute la page
PHP et construit la
Utilisateur réponse en HTML
Serveur Web
3. Réponse contenant du HTML qui sera
affichée par le navigateur de l’utilisateur

Sur le serveur – habituellement associé à un serveur de base de données pour pouvoir

gérer les données.
MYSQL
Même si PHP peut élaborer des réponses complexes (bases de données,
manipulations etc.) le navigateur peut seulement afficher une page statique.
Les langages web
Technologie Web: Côté Client

La programmation côté client sera utilisée

essentiellement dans le cas de validation de formulaires
(champs obligatoires, petits calculs, …) et dans la
création de petites animations (menus déroulants…).

Langage web HTML ou XHTML

Le XHTML, anciennement HTML est le langage de programmation des pages web
« de base ».
C’est ce langage qui va structurer les données d’une page, indiquer comment elle
est faite et quels en sont les éléments. C’est lui qui indiquera quels sont les titres,
comment le texte est divisé en paragraphe, etc.
Langage CSS
Le CSS est un langage utilisé en parallèle avec le XHTML.
Il définit, d’une manière globale, les propriétés de format des balises HTML
employées dans une page ou sur la totalité d’un site Web.

Les langages web

Technologie Web: Côté Client

Langage JavaScript
Le JavaScript est un complément du XHTML très utilisé.
C'est un langage interprété par le navigateur et par conséquent exécuté coté
client uniquement. En général, il est employé pour dynamiser les pages HTML et
effectuer des tâches de prétraitement (validité d’une adresse mail par exemple)
avant envoi vers le serveur. Il ne faut pas le confondre avec le Java qui est beaucoup
plus
Exemple
Le vous cliquez sur un titre de menu, et les éléments de ce menu se déroulent.
Cette action a été possible grâce au Javascript, la page a été envoyée à votre
navigateur sans que les menus aies étés déroulés, mais son code spécifie que lorsque
vous cliquez sur un de ces éléments, une certaine action doit se produire.
Les langages web
Technologie Web: Côté Serveur

Le web, ce n’est qu’un ensemble de documents HTML statiques !

Les programmes côté serveur permettant :
de traiter des soumissions de formulaire ;
d’afficher de manière uniforme l’ensemble des pages d’un site ;
de proposer des applications interactives ;
de permettre à utiliser d’ajouter ou modifier du contenu, etc.
Les Langages de programmation côté serveur :
CGI (Common Gateway Interface) : interface normalisée permettant de faire
communiquer le serveur Web avec un programme s’exécutant sur le serveur,
CGI permet d’utiliser n’importe quel langage de programmation (compilés comme
C, C++, Java, ou interprétés comme Perl, Python, Ruby, etc.) pour écrire des
langages côté serveur .
Quelle que soit la technologie utilisée, le code du programme n’est pas
accessible par le navigateur Web, seulement le résultat de don exécution.

Les langages web

Technologie Web: Côté Serveur

Les Langages de programmation :

PHP : un des langages les plus populaires, s’intègre très facilement avec Apache

(libre)

ASP et ASP.NET : destiné à être utilisé avec IIS (Microsoft, commercial)

ColdFusion (Adobe, commercial)

JSP (Java Server Pages) : permet de mêler instructions Java et code HTML;

nécessite un serveur d’applications Java (ex. Tomcat) en plus d’Apache(Sun gratuit).

Servlets Java : véritables programmes Java, plutôt pour les applications

complexes côté serveur avec peu d’interaction côté client; nécessite un serveur

d’applications Java en plus d’Apache(Sun gratuit).

Technologies Programmation Web
Frameworks pour le Web

Les Frameworks d’application Web :

Les langages présentés ci-avant restent assez basiques et généralistes.
N’encouragent pas forcément une organisation propre d’un site Web.
Framework : ensemble d’un langage de programmation, d’une bibliothèque de
fonctions, d’outils externes, de bonnes pratiques
Permet d’abstraire la création d’une page web.
Suit en général le modèle MVC.
Inclut parfois la génération de code JavaScript côté client pour créer
directement une application Web fortement dynamique (exp. Validation de
formulaire); intégration Ajax également. Fortement recommandé pour créer
des applications complexes…
(Mais également complexe à maîtriser ! )

Technologies Programmation Web

Frameworks pour le Web

Le Modèle MVC :

est un modèle architectural qui sépare une application en trois composants

logiques principaux :

Modèle : Un modèle contient les données utilisées par un programme. Il peut

s’agir d’une base de données, d’un fichier ou d’un simple objet.

Vue : Une vue est un moyen d’afficher des objets dans une application. La vue est
l’interface utilisateur. La vue permet à l’utilisateur d’afficher les données à l’aide d’un
modèle et lui permet également de modifier les données.
Contrôleur : Les contrôleurs agissent comme une interface entre le modèle et la
vue, pour traiter toute la logique métier et les requêtes entrantes, manipuler les
données à l’aide du composant Modèle et interagir avec les Vues pour rendre le
résultat final.
Technologies Programmation Web
Frameworks pour le Web

Le Modèle MVC :

Technologies Programmation Web

Frameworks pour le Web

Les frameworks les plus populaires :

ASP.NET : DotNetNuke
ColdFusion : Model-glue, FuseBox
Java : Struts, Spring, JavaServer Faces, Google Web Toolkit
Perl : Catalyst
PHP: CakePHP, Symphony, Zend
Python : Django
Smallltalk : Seaside
… et beaucoup d’autres !
Technologies Programmation Web
Frameworks pour le Web

Les Systèmes de gestion de contenu :

CMS (Content Management System)
En quelque sorte une version « extrême »des frameworks : plus besoin de programmer,
application (presque) prête à l’emploi
Permet de gérer des documents, des fichiers multimédias, des blogs, des systèmes de
commentaires, etc.
Permettent souvent de développer ses propres extensions, à la manière d’un
framework, pour une personnalisation totale
Les plus courants : Symphony, Mambo, Joomla!, Drupal, Wordpress, Plone. . .
CMS d.un type un peu particulier : Wiki (MediaWiki, TWiki. . .) + applications Web
spécialisées : gestion de forums, d’agenda, de serveur mail, etc.

Technologies Programmation Web

Frameworks pour le Web

Repérer une technologie côté serveur:

Impossible d’avoir accès au code source, donc comment savoir avec quelle
technologie côté serveur un site a été réalisé ?

URL : (.php pour PHP, .jsp pour JSP, .asp pour ASP, /servlet/ pour une servlet. . .).

Tout cela est configurable, mais bien souvent la configuration par défaut est utilisée.

Ça peut être écrit en toutes lettres sur le site (souvent pour un CMS)

Regarder les commentaires dans le code HTML, CSS. . .

Organisation des fichiers et répertoires, librairies JavaScript ou CSS chargées, etc.

Cookies, en particulier identifiants de session

 Chapitre 2: Le langage PHP pour la
programmation Web: Syntaxe et
applications

Introduction
Le Syntaxe de Base
Structures de contrôle
Les Tableaux
Les fonctions avec le langage PHP
PHP et MYSQL
La sécurité en PHP
Un Module d’administration CMS avec PHP

Le langage PHP … C’est quoi?

Introduction

PHP est un langage de script open source, qui est interprété, et qui permet de réaliser
de la programmation multimédia dynamique qui est principalement utilisé pour être
exécuté par un serveur Web.
Les avantages de ce langage sont:
Intégration facile dans une page HTML
Syntaxe proche du langage c/c++
Gestion simplifiée de multiples types de bases de données

Exemple :
<html>
<head>!<title>Test PHP</title>!</head>
<body>
<?php $date = date("d-m-Y");
echo "Bonjour tout le monde<p>";
echo "nous sommes le $date <br>";
?>
</body>
</html>
Syntaxe de base
Principes

Mélange de C et de Perl
Identificateurs sensibles à la casse, sauf pour les fonctions
Instructions terminées par un ’; ‘.
Commentaires /* ... */ // .... # ...
Noms de variables commencent par un ’$’, suivi d’une lettre ou un souligné ’_’.
Pas de limite de taille. $i $compteur $_tmp
Pas de déclaration explicite, pas de typage
Types de données : scalaires (entiers, décimaux, chaînes de caractères),
composites (tableaux, objets)

Le langage PHP est un langage interprété, il n’a pas donc besoin d’être compilé.
En revanche, il est nécessaire de disposer d’un interprétateur PHP pour pouvoir
exécuter des scripts PHP.

Syntaxe de base
Les Opérateurs

arithmétiques : + - * / %
incrément/décrément :
++$a incrémente $a de 1, puis retourne $a.
$a++ retourne $a, puis l’incrémente de 1.
--$a décrémente $a de 1, puis retourne $a.
$a-- retourne $a, puis décrémente $a de 1.
Concaténation de chaînes : .
Logiques : ! && || AND XOR OR

Un Exemple:
$x = true;! $y = false; $z = false;
$x || $y AND $z false
($x || ($y AND $z)) true
$x OR $y AND $z true

de comparaison : < <= > >= == !=

d’assignation : = et += (opérateurs combinés)
 Syntaxe de base
Les Structures conditionnelles

if (expression) instruction Remplace une suite de if

if($a > $b) print "a est plus grand que b";
switch ($i){
else / elseif case 0:
if ($a> $b) { print "I égale 0";
print "a est plus grand que b"; break;
} elseif ($a == $b) { case 1:
print "a est égal à b"; print "I égale 1";
} else { break;
print "a est plus petit que b"; case 2:
} print “i égale 2";
break;
}

Les Structures de contrôle

Les Boucles

while (expression)instruction do instruction while (expression);

while (expression):
instructions ... $i = 0;
endwhile; do {
while ($pas >=1e-3){ print $i;
$milieu=($a+$b) / 2; } while ($i>0);
if(f($milieu)<0) {
$a=$milieu;
} else {
$b=$milieu;
}
$pas = abs($b-$a);
}
 Les Structures de contrôle
Les Boucles

for (expr1; expr2; expr3) foreach(tableau as $value)

instruction instructions
for (expr1; expr2; expr3):
instructions ...;
endfor; $a = array (1, 2, 3, 17);
foreach ($a as $v) {
print "Valeur courante de \$a: $v.\n";
for ($i = 1; $i <= 10; $i++) }
{
print $i;
}

Les Structures de contrôle

Break/ continue/ include

break : pour sortir d’une boucle La fonction include() inclus et évalue

le fichier spécifié en argument (au
for ($i = 1;;$i++) { niveau de interpréteur PHP)
if ($i > 10) break;
print $i;
} include(« file.inc.php »);
include(« connexion.php »);
continue : passer à l’itération suivante

$i = 0;
while ($i++ < 5) {
if (($i % 2) == 0) continue;
print $i;
}
 Les Tableaux

Dans un langage de programmation, un tableau est une suite de valeurs référencées

par une unique variable.

La taille d’un tableau est déterminée par le nombre de valeurs qu’il contient.

Les tableaux peuvent être :

indicés et les valeurs sont référencées par leur position en partant de 0
associatifs et les valeurs sont référencées par des noms ou clefs

Les Tableaux

Un tableau peut contenir des valeurs de types différents : entier, chaîne de caractères,
etc.
Exemple
$tab[0] = "1er element";
$tab[1] = "2e element";
$tab[2] = 120;
En PHP, l’affectation d’un indice à un nouvel élément est automatique : il correspond
à la première cellule vide.
$tab2[] = "1er element";
$tab2[] = "2e element";
$tab2[] = 120;
L’initialisation d’un tableau peut également se faire à l’aide de la fonction array
Exemple
$tab3 = array("1er element","2e element",120);
 Les Tableaux
Les Tableaux associatifs

Les indices numériques sont remplacés par des chaînes de caractères appelées clefs.

Pour un tableau donné, toutes les clefs doivent être différentes.

La fonction array peut également être utilisée pour initialiser le tableau.

Exemple

$prenom["ETUDIANT1"] = "BBBB";
$prenom["ETUDIANT2"] = "DDD";
$prenom = array(" ETUDIANT1" => " BBB", .ETUDIANT2" =>"DDD");

Les Tableaux
Les Tableaux associatifs

Le parcours d’un tableau associatif est plus complexe que celui des tableaux indicés : on
ne peut pas se baser sur l’ordre des indices pour effectuer une boucle simple.
On peut utiliser un curseur sur le tableau : sorte de flèche indiquant l’élément du
tableau actuellement visé.
Les fonctions next et prev permettent de déplacer le curseur initialement positionné sur
le premier élément du tableau.
Les fonctions key et current renvoient respectivement la clef et la valeur de l’élément
courant.
Exemple (Afficher toutes les personnes de la liste prenom)

echo "Nom=" key($prenom).

" Prenom=" current($prenom)."\n";
while(next($prenom)){
echo "Nom=".key($prenom)."Prenom=".current($prenom);
}