FORMATION DES STAGIAIRES A L’ISS

THEME : LE DEVELOPPEMENT EN WEB 2.0

Encadreur : Ir KABAMBA Dieumerci
 PLAN DE LA FORMATION
I. OBJECTIF DE LA FORMATION
II. GENERALITE SUR LE WEB
II.1. DEFINITIONS DE QUELQUES CONCEPTS
II.1.1 Web
II.1.2 Développement
1. Définition du développement
2. Type des développements
II.1.3 Technologies Web
1. Définition des Technologies Web
2. Eléments des Technologies Web
a. Protocole http, https et Ftp
b. Url
c. Les verbes http
II.2. INSTALLATION ET CONFIGURATION DES OUTILS
1. Navigateurs web
2. Les éditeurs
a. Editeur textuel
b. Editeur wysiwyg
3. Serveur web
a. Sortes des serveurs web
b. Configuration du serveur web
4. Website2APK
a. Définition
b. Configuration et implémentation
5. NoxPlayer
II.3. PREREQUIS SUR LE DEVELOPPEMENT WEB
II.3.1. Notion sur le front office
a. Définition de front office
b. Les langages utilisés
1. Html
2. Css
 3. Javascript
c. Balises utilisées
1. Définition de balise
2. Types des balises
3. Présentation des balises de base
II.3.2. Technique de développement avec ajax
1. Définition d’ajax
2. Utilisation de jQuery
3. Requête ajax
- Fonction et évènement
- Envoi de données
- Récupération de données
- Gestion des erreurs
4. Notion sur le localstorage et session Storage
II.3.3. Notion sur le back office
1. Définition de back office
2. Langage utilisé
- Php
II.3.4. Notion sur le Framework
1. Définition de Framework
2. Types des Framework
- Bootstrap
- Jquery

III. MODELISATION ET IMPLEMENTATION

III.1 MODELISATION DE LA BDD
III.1.1 Proposition de la base de données
III.1.2. Passage de MCD en MLD
III.1.3. Présentation du MLDV
III.2 IMPLEMENTATION DE LA BDD
III.2.1 Créations de la base de données
III.2.2 Créations des tables
IV. DEVELOPPEMENT D’UNE APPLICATION WEB
IV.1. Création de l’architecture MVC
IV.2. Création des interfaces
1. Formulaires d’accueil
2. Menu général
3. Autres interfaces
4. Sécurités
5. Appel des interfaces
IV.3. Connexion avec la bdd
IV.4. Opération de MAJ
1. Ajouter
2. Supprimer
3. Modifier
4. Recherche
5. Affichage
I. OBJECTIF DE LA FORMATION
Avec l’évolution des nouvelles technologies de
l’information et de la communication, il devient
incontournable de maitriser les contours du
fonctionnement du web, service le plus populaire de
l’internet.
C’est ainsi que notre formation fixe comme
objectif :
 Permettre aux stagiaires de bénéficier des connaissances sur le
web 2.0
 Modéliser une structure des données
 Implémenter la base de donnes avec possibilité d’effectuer
l’import et export dans un SGBD MySQL
 Développer une application web avec la technologie ajax

II. GENERALITE SUR LE WEB

Le web est considéré comme un service de l’internet,
or l’internet est un réseau international. Il est aussi un
ensemble des données reliées par des liens
hypertextes, sur Internet. Surfer sur le web ou sur
internet veut dire consulté les pages web.
 - A quoi correspondent les différentes phases de cette évolution ?

Le web est sans nul doute une technologie majeure du 21ème siècle.
Et si sa nature, sa structure et son utilisation ont évolué au cours du
temps, force est de constater que cette évolution a également
profondément modifié nos pratiques commerciales et sociales.

Pour mieux comprendre les enjeux et les différentes phases de cette

évolution, nous allons nous livrer à un exercice de synthèse, qui ne
se veut en aucun cas exhaustif, mais qui devrait vous fournir
quelques clés de compréhension.

 Le web 1.0, encore appelé web traditionnel, est avant tout un

web statique, centré sur la distribution d’informations. Il se
caractérise par des sites orientés produits, peu d’intervention des
utilisateurs.

 Le web 2.0, ou web social, change totalement de perspective. Il

privilégie la dimension de partage et d’échange d’informations et
de contenus (textes, vidéos, images ou autres). Il voit l’émergence
des réseaux sociaux, des smartphones et des blogs. Le web se
démocratise et se dynamise. L’avis du consommateur est sollicité
en permanence et il prend goût à cette socialisation virtuelle.
Toutefois, la prolifération de contenus de qualité inégale engendre
une infobésité difficile à contrôler.

 Le web 3.0, aussi nommé web sémantique, vise à organiser la

masse d’informations disponibles en fonction du contexte et des
besoins de chaque utilisateur, en tenant compte de sa localisation,
de ses préférences, etc.

 Le web 4.0, évoqué par certains comme le web intelligent, effraie

autant qu’il fascine, puisqu’il vise à immerger l’individu dans un
environnement (web) de plus en plus prégnant. C’est un terrain
d’expérimentation où tous ne sont pas (encore) prêts à
s’aventurer !

II.1. DEFINITIONS DE QUELQUES CONCEPTS

II.1.1 Web
Le Web est le terme communément employé pour parler du World Wide
Web, ou WWW, traduit en français par la toile d'araignée mondiale. Il
fait référence au système hypertexte fonctionnant sur le réseau
informatique mondial Internet.
 II.1.2 Développement
1. Définition du développement
C’est l’action de développer, de se développer ou résultat de cette
action. En informatique, on parle aussi de l’implémentation ou de la
réalisation d’un programme.
2. Type des développements
Il existe plusieurs types des développements :
- Mobile ;
- Web ;
- Logiciel.
II.1.3 Technologies Web
1. Définition des Technologies Web
Les technologies web sont un ensemble de protocoles et spécifications
qui composent et sont utilisés par le World Wide Web et ses normes.
C’est aussi un ensemble de termes propre au domaine du World Wide
Web et ses normes.

2. Eléments des Technologies Web

a. Protocol http https et ftp

Un protocole informatique est un ensemble de règles qui
régissent les échanges de données ou le comportement collectif
de processus ou d'ordinateurs en réseaux ou d'objets connectés.
HyperText Transfer Protocol Secure (HTTPS) est une extension
de HyperText Transfer Protocol (HTTP). Il est utilisé pour une
communication sécurisée sur un réseau informatique et est
largement utilisé sur Internet. C’est aussi la variante avec
authentification et chiffrement de ce protocole.
 b. Ftp (file transfert Protocol) est un logiciel utilisé dans le transfert
de fichiers entre deux ordinateurs. De nos jours, le serveur FTP
est principalement utilisé par les webmasters qui gèrent des sites
Internet pour la mise en ligne, la modification ou encore la
sauvegarde de contenus

c. Une URL (pour uniform resource locator, signifiant littéralement

localisateur de ressources uniforme) est une chaîne de caractères
décrivant l’emplacement d’une ressource.
d. Serveur web
Un serveur web est un ordinateur connecté à Internet et sur
lequel sont hébergés des sites web, composés de pages HTML
(le serveur web, également appelé serveur HTTP, peut également être
composé d'un groupe d'ordinateurs). Il est aussi un logiciel utilisé pour
servir des ressources à travers le protocole http.
La fonction principale d'un serveur Web est de stocker et délivrer des
pages web qui sont généralement rendues en HTML. Le protocole de
communication HyperText Transfer Protocol (HTTP) permet le dialogue
via le réseau avec le logiciel client, généralement un navigateur web.
e. Serveur apache
Le logiciel libre Apache HTTP Server (Apache) est
un serveur HTTP créé et maintenu au sein de la
fondation Apache. Jusqu'en avril 2019, ce fut
le serveur HTTP le plus populaire du World Wide Web.
Il est distribué selon les termes de la licence Apache.
f. Les verbes du http
 GET : La méthode GET demande une représentation de la
ressource spécifiée. Les requêtes GET doivent uniquement être
utilisées afin de récupérer des données.
  HEAD : La méthode HEAD demande une réponse identique à une
requête GET pour laquelle on aura omis le corps de la réponse (on
a uniquement l'en-tête).
 POST : La méthode POST est utilisée pour envoyer une entité vers
la ressource indiquée. Cela entraîne généralement un changement
d'état ou des effets de bord sur le serveur.
 PUT : La méthode PUT remplace toutes les représentations
actuelles de la ressource visée par le contenu de la requête.
 DELETE : La méthode DELETE supprime la ressource indiquée.
 CONNECT : La méthode CONNECT établit un tunnel vers le
serveur identifié par la ressource cible.
 OPTIONS : La méthode OPTIONS est utilisée pour décrire les
options de communications avec la ressource visée.
 TRACE : La méthode TRACE réalise un message de test
aller/retour en suivant le chemin de la ressource visée.
 PATCH : La méthode PATCH est utilisée pour appliquer des
modifications partielles à une ressource.

II.2. INSTALLATION ET CONFIGURATION DES

OUTILS
Ce point parle des outils à installer et à
configurer ainsi que le les différents serveurs :
1. Navigateur web

C’est un logiciel conçu pour consulter et afficher le World Wide Web.

Techniquement, c'est au minimum un client HTTP. Les navigateurs
internet sont les logiciels nécessaires à l'affichage des sites internet. Un
navigateur Internet n'est pas un moteur de recherche. Les 5
navigateurs les plus populaires sont Google Chrome, Safari, Mozilla
Firefox, Opera et Microsoft Edge.
a. Installation et configuration
Pour installer un navigateur, il faut avoir le
fichier exécutable puis double-cliquer et puis cliquer sur
le fichier installer pour lancer.
Pour configurer le navigateur, il faut noter qu’il
porte une liste des options comme : zoom, extension et
thème etc….
Cependant, Google a livré un nouveau
compilateur JavaScript pour son moteur JavaScript V8
dans Chrome, appelé Sparkplug(Bougie d'allumage),
qui promet une expérience Web beaucoup plus rapide -
et il le fait en "trichant", selon les ingénieurs du projet.

Sparkplug fait partie de Chrome 91, que Google a

publié avec des mises à jour de sécurité mais aussi
quelques changements clés sous le capot qui
améliorent son puissant moteur JavaScript, V8.

Microsoft s'appuie également sur V8 ces jours-ci après

avoir abandonné son moteur JavaScript Chakra dans
l'ancien Edge et adopté Chromium pour le nouveau
navigateur Edge et adopté V8.

Il faut savoir qu’un navigateur propose une console

pour le test des javascript et d’affichage en mode
mobile.
2. Les éditeurs
L’éditeur est un LOGICIEL utilisé pour rédiger,
corriger, modifier un texte qui représente le plus
souvent du code informatique. Il existe deux types
d’éditeurs :
a. Editeur textuel : c’est avant tout un simple programme
informatique qui travaille à partir de textes (Bloc note,
Notepad++, vs, NetBeans, sublime, etc…)
b. Editeur wysiwyg : Sous l'acronyme assez barbare
WYSIWYG, pour What You See Is What You Get (signifie
en français ce que vous voyez est ce que vous obtenez), se
cache un éditeur visuel de texte. De façon concrète, un
 logiciel WYSIWYG propose à l'utilisateur de voir
simultanément le texte qu'il rédige et le résultat tel qu'il sera
publié (Dreamweaver, WordPress et Bootstrap Studio).

NB : pour faire le choix d’un éditeur, il faut tenir compte de

l’autocomplétions et intégration des extensions ainsi que les
librairies.
3. Serveur web
a. Définition de serveur web
C’est un logiciel de service de ressources web (serveur HTTP),
soit un serveur informatique (ordinateur) qui répond à des requêtes du
World Wide Web sur un réseau public (Internet) ou privé intranet
b. Sortes des serveurs web
Sortes de serveurs web appelés aussi http sont :

 Le NCSA HTTPd est un serveur HTTP développé au National

Center for Supercomputing Applications de 1993 à 1998.
 Apache HTTP Server de l’Apache Software Foundation,
successeur du NCSA HTTPd ;
 Apache Tomcat de l’Apache Software Foundation, évolution de
Apache pour J2EE(Java EE signifie Java édition entreprise pour
les applications qui s'exécutent sur des serveurs, par exemple
des sites Web.);
 Google Web Server de Google ;

c. Installation de serveurs web

Comme mentionné dans la présentation
générale, Apache est intégré à des plates-formes de
développement web. En installant n'importe lequel de
ceux-ci, on obtient une installation correcte d’Apache.
 Il est ainsi possible d'installer apache sur une
machine windows, en téléchargeant wampserver ou
Easyphp (une petite recherche sur google permettra
d'obtenir les installables de ces deux logiciels ) . Mais,
apache peut être aussi installé de façon indépendante
à ces outils. Sous Windows, il existe sous deux formes
binaires : avec et sans le support de (Open) SSL
(Secure Socket Layer). La deuxième étant déconseillée
si l'on compte mettre en place HTTPS. Les paquets
téléchargeables sont disponibles.
Pour l'installer après téléchargement :
1- Faire un double-clic sur l'exécutable
2- Faire la série de "Suivant" jusqu'à terminer l'installation
3- Passer à la configuration.
d. Configuration du serveur web
Pour la figuration de serveur web, il faut noter que la
configuration est plus liée au port d’accès ainsi que php
pour les fichiers à envoyer.
Serveur XAMPP
 Après avoir cliqué sur config, on peut configurer le port de l’apache qui
est un numéro qui permet à un logiciel de communiquer d’autres. Par
exemple : Listen * :81 or le par défaut est le port 80 (Listen 80).

4. Website2APK
a. Définition Website2APK Builder
C’est un logiciel capable de transformer votre site web en une
véritable application Android. Une fois le processus de création terminé,
vous obtenez un fichier APK directement installable sur vos appareils
Android.
 b. Configuration et implémentation

5. NoxPlayer
C’est un logiciel qui joue le rôle d’un téléphone virtuel, installable
sur Windows.
II.3. PREREQUIS SUR LE DEVELOPPEMENT WEB
II.3.1. Notion sur le front office
a. Définition de front office
En informatique, une application de front office ou logiciel de front
office est la partie d'un système informatique accessible aux
utilisateurs finaux ou aux clients, par opposition au back office. Une
traduction possible de front office est guichet, boutique, ou encore
service de clientèle.
le client
b. Les langages utilisés
1. Html
Langage de balisage utilisé pour la création de pages web,
permettant notamment de définir des liens hypertextes. C’est aussi un
langage information basé sur SGML qui décrit les différents éléments
d’un texte à l’aide de balises, en vue se sa publication sur le www.
 SGML : Standard Generalized Markup Language (« langage de
balisage généralisé normalisé » - SGML) est un langage de description à
balises, de norme ISO (Organisation internationale de normalisation)
Aujourd’hui nous avons le HTML5, mais il faut signaler que
langage html utilise l’extension « .htm »
Structure de html
<Doctype html >
<head>
<title></title>
</head>
</Html>
2. CSS
CSS est l'acronyme de « Cascading Style Sheets » ce qui signifie «
feuille de style en cascade ». Le CSS correspond à un langage
informatique permettant de mettre en forme des pages web (HTML ou
XML). ... css) et contient des éléments de codage.
Aujourd’hui nous avons le CSS3, mais il faut signaler que le
langage html utilise l’extension « .css »
<style></style> ou on peut utiliser de lien
<link href="styles/style.css" rel="stylesheet" type="text/css">
3. Javascript
JavaScript est un langage de programmation de scripts principalement
employé dans les pages web interactives et à ce titre est une partie
essentielle des applications web. Avec les technologies HTML et CSS,
JavaScript est parfois considéré comme l'une des technologies cœur du
World Wide Web.
Aujourd’hui nous utilisons des Framework pour faciliter les
choses, mais il faut signaler que le langage javascript utilise l’extension
« .js »
<Script> </script>
 c. Balises utilisées
1. Définition de balise
Les balises HTML sont les éléments de base du codage HTML. Elles
sont utilisées pour mettre en forme un texte, structurer et hiérarchiser le
contenu d'une page. Les balises indiquent également au navigateur
comment afficher la page en question
2. Types des balises
On distingue deux principaux types de balises en HTML : le type block
( <p> , <h1> …) : ces balises créent un retour à la ligne et occupent par
défaut toute la largeur disponible. Elles se suivent de haut en bas ; le
type inline ( <a> , <strong> …) : ces balises délimitent du texte au milieu
d'une ligne
Voici la liste de toutes les balises HTML

 Balises de premier niveau.

 Balises d'en tête.
 Balises de structuration du texte.
 Balises de listes.
 Balises de tableau.
 Balises de formulaire.
 Balises sectionnantes.
 Balises génériques.

Voici quelques éléments de type bloc que vous connaissez sans

doute :

 <div> : balise multi-usage. ...

 <h1> ... ...
 <p> : paragraphe.
 <ul>, <ol>, <dl> : listes (non ordonnée, ordonnée ou avec
définition).
 <li>, <dt>, <dd> : élément de liste, définition, et titre de définition.
 <table> : tableau.

3. Présentation des balises de base

Pour présenter une balise, il faut savoir qu’elle est considérée comme un
objet contenant les propriétés et les valeurs ainsi que le nom.
Exemple :
<buttom name= ‘’enregistrer’’ id=’ideng’ type= ‘’buttom’’ onclick=’’ ’’>
</bottom>
Nb :
Exercices
Créer un bureau d’échange qui permet la gestion de conversion d’argent
sans tenir compte de la bdd.
II.3.2. Technique de développement avec ajax
5. Définition d’ajax
6. Utilisation de jQuery
7. Requête ajax
- Fonction et évènement
- Envoi de données
- Récupération de données
- Gestion des erreurs
8. Notion sur le localstorage et session Storage
II.3.3. Notion sur le back office
3. Définition de back office
4. Langage utilisé
- Php
II.3.4. Notion sur le Framework
3. Définition de Framework
4. Types des Framework
- Bootstrap
- Jquery