Développement
des Applications Web
Prof. Mabrouk
[Link]@[Link]
Notions de base :
Page Web ?
Notions de base : Page Web
Unité élémentaire d'un site web
Accessible via un navigateur web (Firefox, Mozilla, Safari, Internet Explorer, etc.)
[Link]
Notions de base : Page Web
Unité élémentaire d'un site web
Accessible via un navigateur web (Firefox, Mozilla, Safari, Internet Explorer, etc.)
[Link]
Notions de base : Page Web
[Link]
Notions de base : Page Web
[Link]
Notions de base : Page Web
Page Web : Interprétation du code HTML
Texte : Code HTML
Navigateur
Web :
Interpréteur du
code HTML
Liens vers des documents : Images, vidéos, icônes,
fichiers de styles, autres pages web
Fichiers
Page Web Scripts Web
Fichiers Page Web PHP, ASP, JSP
de styles Page Web
de styles
CSS Applet
CSS
Notion de base : Page Web
Notions de base :
Site Web ?
Notions de base : Site Web
[Link]
Notions de base : Site Web
[Link]
Ensemble des pages web (et des
ressources) inter reliées entre elles
par des liens hypertextes
Notions de base : Site Web
L’internaute peut accéder par une
adresse web appelée Url
Url :
[Link]
Page Web
Navigateur
Web Envoi de la page web Serveur
Web
Adresse web : [Link]
Notions de base : Site Web
L’internaute peut accéder par une
adresse web appelée Url
Url :
[Link]
Page Web
Navigateur
Web Envoi de la page web Serveur
Web
Ensemble de pages web et de ressources reliées par des Adresse web : [Link]
hyperliens,
Hébergé sur un Serveur Web
Accessible par une adresse web via un navigateur.
Notions de base :
Types de Site Web ?
Types de Site Web
Deux types de sites web :
Les sites statiques.
Les sites dynamiques.
Site Web statique
Les contenu est statique : sa mise à jour se fait
manuellement Pages
Ce n'est pas très pratique en cas de plusieurs Web
mise à jour Statiques
Page Web
Statique HTTP
Faible coût de maintenance
Temps de chargement des pages plus rapide
Moins chers à héberger
Meilleure sécurité que les sites dynamiques Site Web statiques
Créer une Page Web statique
Créer une Pagee Web statique
Utiliser le code HTML ( +styles CSS )
Texte : Code HTML
Liens vers des documents : Images, vidéos, icônes,
fichiers de styles, autres pages web
Page Web
Fichiers
Fichiers PagePage
WebWeb
de styles
de styles
CSS statiques
CSS
Créer une Page Web statique
Rédiger un document HTML qui est :
Comporte le code HTML (Langage de description de pages web )
construit suivant une syntaxe précise
structuré par des balises
créé dans tout éditeur de texte (bloc-notes, notepad++, …)
interprété (visualisé) dans un navigateur (Mozilla Firefox, Internet Explorer, etc.)
PageWeb
Notepad++
Navigateur
Web
Editeurs de texte
Site Web dynamique
Site Web dynamique
Le contenu de ce type de site est dit « dynamique »
Page web dynamique : Code HTML + Scripts Web parce qu'il peut changer sans l'intervention du
webmaster
Le contenu est dynamique et adapté au besoin
Sites fonctionnels et interactifs
Plus faciles à entretenir
Aspect plus professionnel
Interagissent avec leurs utilisateurs
Sont hautement évolutifs
Liens vers des documents : Images, vidéos, icônes,
fichiers de styles, autres pages web
Fichiers
Page Web Scripts Web
Fichiers Page Web PHP, ASP, JSP
de styles Page Web
de styles
CSS Applet
CSS
Site Web dynamique
Afficher la
liste des
données
Interaction avec une Base de données
Formulaire
pour
Ajouter des
données
Scripts Web
PHP, ASP, JSP
Applet
Serveur Web
Formulaire
pour mettre
à jour les
données SGBD
Base de
données
Site Web dynamique
Partie Partie Base de
Statique Dynamique SGBD
donnée
Site Web dynamique
Partie Partie Base de
Statique Dynamique SGBD
donnée
Images
Page Scripts Web
HTML/C
Videos
SS Page
HTML/CSS
FichierPDF
Interface
graphique /DOC…
Application Web vs site Web
Application Web vs site Web
Un site Web:
une collection de pages
Hébergé par un serveur Web
accessibles via un navigateur
Une application web :
Une composante d’un site web dynamique
un logiciel applicatif
Hébergé par un serveur Web
accessibles via un navigateur
Développer une Application Web
Environnement de Fonctionnement
Serveur Web
Page
Scripts Web
HTML/CSS PHP, ASP, JSP
Applet
Page
HTML/CSS
Page
HTTP
HTML/CSS
Interface
SGBD
Page Web graphique
Navigateur
Web
Images Videos FichierPDF
/DOC…
Base de
Répertoire : www donnée
Environnement de Fonctionnement
Chrome Apache
Firefox HTTP Server
Internet
Explorer
Serveur Web
Page
Scripts Web
HTML/CSS PHP, ASP, JSP
Applet
Page
HTML/CSS
Page
HTTP
HTML/CSS
Interface
SGBD
Page Web graphique
Navigateur
Web
Images Videos FichierPDF
/DOC…
MySql Base de
Répertoire : www Sql Server donnée
Oracle
…
Les outils de développement
Les outils de développement
Editeurs de code
Plateformes de développement Web
CMS : Systèmes de Gestion de Contenu
Editeurs de code
Les outils de développement
Editeurs de code
Sublime
Notepad++
Brackets
Plateformes de développement Web
Les outils de développement
Plateformes de développement Web
Une plateforme de développement a pour but
de faciliter la tâche des développeurs en
fournissant une librairie de fonctions
pouvant être exécutées à l’aide de variables à
l’intérieur de pages HTML.
Les outils de développement
Plateformes de développement Web
Plateformes de développement en PHP :
Symfony , Cake PHP, Zend, Laravel, etc. …
•Gratuites.
•Flexibles et simples d’utilisation
•Bonne option pour développer des applications web complètes et efficaces
CMS : Systèmes de Gestion de Contenu
Systèmes de gestion de contenus (CMS)
Systèmes de gestion de contenus (CMS)
Les systèmes de gestion de contenu (SGC) ou Content Management System
(CMS) en anglais
Ils sont des applications web
Ils permettent de:
gérer et de publier facilement du contenu (Textes, Images, Vidéos, etc… )
crées des sites web sans l’aide d’un développeur Web.
Beaucoup de fonctions sont déjà programmées et accessibles à l’aide d’une
interface web. Pour les développeurs:
une interface de programmation (API) est
disponible donnant la possibilité d’accéder aux
fonctions du système
Systèmes de gestion de contenus (CMS)
CMS : Systèmes de Gestion de Contenu
ils permettent de séparer les opérations de gestion de la forme et du
contenu ;
Scripts : Base de
PHP,… données
Contenu
Page Web HTTP CMS
Fichiers
CSS
Fichiers multimédia:
CSS Images, vidéos,
de style :
CSS son,..
Serveur Web
Systèmes de gestion de contenus (CMS)
CMS : Systèmes de Gestion de Contenu
ils permettent de séparer les opérations de gestion de la forme et du
contenu ;
Scripts : Base de
PHP,… données Importer Thèmes
Contenu
CMS
Fichiers
CSS
Fichiers
CSS
multimédia:
Images, vidéos,
Importer Extensions
de style :
CSS son,..
Systèmes de gestion de contenus (CMS)
CMS : Systèmes de Gestion de Contenu
WordPress
Drupal
Joomla
Ecommerce - Prestashop
Ecommerce - Magento
Application développés par les CMS
Sites internet avec tous types de contenus
Blog pour la gestion régulière d’actualités
Boutiques en ligne et solutions e-commerce
Gestion de vidéos depuis des services tiers
Exposés / Projets
Thème Contenu
PHP & MVC Définitions
PHP & orienté objet Démonstration
Exemples
CMS - WordPress
CMS - Drupal Description
Démonstration
CMS – Joomla • Installation
Ecommerce - Prestashop • tutorial d’utilisation
Ecommerce - Magento Réalisation
•Portail
Bootstrap •Site Web E-commerce
Zend Framework •Application Web
Cake PHP
Symfony
Laravel