Introduction au Développement Web

Badreddine GUIZANI
Faculté des Sciences de Monastir

29 janvier 2019

B.GUIZANI (MP-Telecom/FSM ) Développement Web 29 janvier 2019 1 / 13

 Présentation du Web

Présentation du service Web

World Wide Web, www, toile

(d'araignée).
Est un service internet pour partager
des documents.
Architecture Client/Serveur.
Utilise le protocole de
communication http et https.
URL : Uniform Resource Locator.

B.GUIZANI (MP-Telecom/FSM ) Développement Web 29 janvier 2019 2 / 13

 Composantes du Web Applications Client

Les navigateurs Web [browser]

Un navigateur est un logiciel conçu pour consulter et acher les

documents du World Wide Web.
Un navigateur web est composé de divers modules :
Module de communication : récupérer les page web.
Moteur de rendu : permettant d'acher les pages web selon des
standards du Web.
Interface utilisateur: Fonctionnalités supplémentaires.

Konqueror Chrome Edge Maxthon

Firefoxe Opera Safari

B.GUIZANI (MP-Telecom/FSM ) Développement Web 29 janvier 2019 3 / 13

 Composantes du Web Applications Serveur

Serveurs web

Un serveur web est une machine serveur utilisé pour publier des sites web
sur Internet. Il désigne également le logiciel utilisé sur le serveur pour
répondre aux requêtes HTTP des clients.

B.GUIZANI (MP-Telecom/FSM ) Développement Web 29 janvier 2019 4 / 13

 Composantes du Web Applications Serveur

Architecture Multi-tiers

Serveur Application : logiciel d'infrastructure orant un contexte

d'exécution pour des composants applicatifs.
Tomcat, Java EE, JBoss, Websphere etc
Serveur de base de données : Système de gestion de bases de données
en réseaux
SQL serveur, Oracle, MySQL, MariaDB, Postgre SQL, SQLite,
MongoDB.
B.GUIZANI (MP-Telecom/FSM ) Développement Web 29 janvier 2019 5 / 13
 Composantes du Web Applications Serveur

Environnent Serveur Web

Il existe plusieurs plat-forme qui propose un ensemble d'outils complet pour

mettre en place son serveur web locale nécessaire au développement web
WAMP (Windows/ApacheMySQL/PHP)
XAMPP : X(cross) Apache MySQL Perl PHP
MAMP : macOS/Apache/MySQL/PHP
WNMP Windows, Nginx, MariaDB, PHP

B.GUIZANI (MP-Telecom/FSM ) Développement Web 29 janvier 2019 6 / 13

 développement Web MVC Modele MVC

Modèle MVC

MVC pour Modèle-vue-contrôleur.

Est un modèle pour bien structurer les
programmes et applications
Informatique.
Modèle (Model) : Gestion des
données.
Contrôleur (Controller) : contient la
logique concernant les actions
eectuées.
Vue (View) : contient la présentation
de l'interface graphique.

B.GUIZANI (MP-Telecom/FSM ) Développement Web 29 janvier 2019 7 / 13

 développement Web MVC Technologies de developpement

Développement FrontEnd vs BackEnd

Une question se pose toujours

On disposent d'une fonction à exécuter et deux acteurs (Client et Serveur).
Ou exécuter cette fonction ?
Développement FrontEnd :
Marquage et désigne.
Fonctions de synchronisation.
édition des éléments web.
Recherche et optimisation.
Développement BackEnd :
Programmation application.
Accès aux bases de données.
Transformation des données.
Sécurité.
Sauvegarde.
B.GUIZANI (MP-Telecom/FSM ) Développement Web 29 janvier 2019 8 / 13
 développement Web MVC Technologies de developpement

FrontEnd technologies

Langage de marquage et de style des données à visualisées : HTML +

CSS.
Programmes de contrôle et d'interfaçage : JavaScript
Bibliothèques (JavaScript) pour création d'interfaces utilisateurs
(Menu, synchronisation, interactivité etc. )

B.GUIZANI (MP-Telecom/FSM ) Développement Web 29 janvier 2019 9 / 13

 développement Web MVC Technologies de developpement

BackEnd technologies

Des langages de programmation (dynamique) avancés permettant

d'accéder aux données, de générer les interfaces et de gérer le contenu des
applications web.

B.GUIZANI (MP-Telecom/FSM ) Développement Web 29 janvier 2019 10 / 13

 développement Web MVC Outils du développement

Les éditeurs WYSIWIG

Un logiciel WYSIWYG est un logiciel qui dispose d'une interface graphique

qui permet à l'utilisateur de voir son document tel qu'il sera publié.
 WYSIWYG  est l'acronyme de la locution anglaise  what you see is
what you get  permet de composer visuellement le résultat voulu

B.GUIZANI (MP-Telecom/FSM ) Développement Web 29 janvier 2019 11 / 13

 développement Web MVC Outils du développement

Les éditeurs de texte

Un éditeur de texte est un logiciel destiné à la création et l'édition de

chiers textes.
fonctionnalités intéressantes pour le développement web
Coloration syntaxique ; Indentation automatique ; Interaction avec des
programmes ; Le complètement automatique ;

B.GUIZANI (MP-Telecom/FSM ) Développement Web 29 janvier 2019 12 / 13

 développement Web MVC CMS

Content Management systems (CMS)

Les CMS sont des programmes informatiques qui facilitent le contrôle, la

gestion, la modication et la publication du contenu créé pour le site Web
à partir d'une seule interface utilisateur.

B.GUIZANI (MP-Telecom/FSM ) Développement Web 29 janvier 2019 13 / 13