Technologie de web partie pratique - Moodle
publicité
Technologie du web
partie pratique
Pierre Manneback
Mohammed EL ADOUI
Service d’informatique, FPMS
UMONS à Charleroi
2016-17
UMONS/FPMs/INFO/Web Tech/Pratique
1
Plan
• HTML et CSS : Exercices basiques (1 h)
• JavaScript : Interaction dynamique, lecture et vérification de formulaires
(1 h)
• PHP : Lecture des formulaires et interaction avec des bases de données :
(3 h)
Avec la méthode classique
Avec PDO
Création d’une plateforme web élémentaire
• Technologies de pages « responsives » : Exemple avec Bootstrap (1 h)
• Framework : Utilisation de la plateforme Symfony (3 h ou plus !)
2016-17
UMONS/FPMs/INFO/Web Tech/Pratique
2
HTML : quelques éléments
• Le html « HyperText Mark-Up Language » est le langage qui va vous permettre
de structurer une page Web à l'aide de balises.
• C’est avec ces balises qu'on va notamment créer une simple page Web avec
des liens hypertextes,
<!-- Commentaire -->
<html>
<head>
<title> le titre de la page </title>
</head>
<body>
</body>
</html>
2016-17
UMONS/FPMs/INFO/Web Tech/Pratique
3
Un fichier HTML a une structure d’arbre
2016-17
UMONS/FPMs/INFO/Web Tech/Pratique
4
HTML : Exercice 1
Créer une page html qui affiche :
Un message d'accueil en utilisant la balise font et des
attributs
Un séparateur
4 images représentatives qui défilent horizontalement en
utilisant la balise html marquee et en définissant pour
l’élément <img> les attributs width et/ou height
Crée deux paragraphes qui peuvent donner une
description de la page web, en ajoutant une liste
numérotée.
Créer un menu vertical dont les éléments sont des liens
Donner à votre page web une visibilité par blocs (par
exemple 3 blocs : un vertical pour les liens, et deux
horizontaux pour les informations du site)
2016-17
UMONS/FPMs/INFO/Web Tech/Pratique
5
CSS : quelques éléments
• Les CSS (Cascading Style Sheets, c'est à dire "feuilles de styles en cascade") permettent de
séparer le contenu de vos documents de leur présentation. Ainsi, le code HTML ne vous
servira qu'à définir la structure de vos contenus, tandis que les CSS vous permettront de
créer les styles et la mise en page.
• Exemple :
<head>
<title> Ma page </title>
<style type="text/css">
h1 {
color : blue;
text-align : center;
}
</style>
</head>
2016-17
UMONS/FPMs/INFO/Web Tech/Pratique
6
CSS : Note sur les couleurs (codage RGB)
2016-17
Nom
Code
White
#FFFFFF
Black
#000000
Red
#FF0000
Green
#00FF00
Blue
#0000FF
Yellow
#FFFF00
Fuschia
#FF00FF
Salamon
#FA8072
Chocolate
#D2691E
UMONS/FPMs/INFO/Web Tech/Pratique
Résultat
7
HTML et CSS : Exercice 2
Création d’un fichier CSS qui assure les propriétés suivantes:
Tous les attributs de la page web doivent être centrés
Tous les paragraphes doivent être de couleur grise, de taille 14p, en gras et de
police Arial utilisant la notion des id, puis la notion des classes CSS.
Définition d’une image de font de votre choix (.jpeg, .png)
Dans la partie (Nouvelles technologies), nous allons utiliser le style Bootstrapqui
est plus complet et correspond à toutes les plateformes
2016-17
UMONS/FPMs/INFO/Web Tech/Pratique
8
JavaScript : quelques éléments
• Le navigateur qu’on utilise pour voir une page est un objet qui s’appelle
navigator.
• La fenêtre du navigateur est un objet nommé window.
• La page HTML est un objet que l’on appelle document.
• Un formulaire à l’intérieur d’un document est aussi un objet, appelé form.
• Un lien hypertexte dans une page HTML, est encore un autre objet appelé
link.
Plus de précision à la Figure 1
2016-17
UMONS/FPMs/INFO/Web Tech/Pratique
9
anchor
button
applet
text
document
area
radio
history
form
select
Navigator
Window
option
location
image
submit
layer
password
link
…
Figure 1
2016-17
UMONS/FPMs/INFO/Web Tech/Pratique
10
JavaScript : Exercices élémentaires
• Exemple : Hello world
Déclaration et définition d’un code JS : dans body, entête ou séparément
Écrire dans un document html …
Comprendre le modèle objet de JavaScript (Figure 1)
Manipuler les différents objets
Alertes d’information, de confirmations …
Variables : var
Les boucles : for, while …
Les fonctions : function
Pour commencer, créer une page web qui permet de sommer/multiplier deux
nombres entrés dans deux champs text
2016-17
UMONS/FPMs/INFO/Web Tech/Pratique
11
JavaScript : Objets prédéfinis
• Exercice 3 : Les événements et la validation des
formulaires
Sur votre page déjà créée, donner un lien pour
inscrire les visiteurs. La page permet d’afficher un
formulaire : nom, prénom, adresse, email,
téléphone, mot de passe et bouton de validation.
On utilisant les évènements : load/unload,
onmouseover, onChange, onFocus/onBlur, onselect,
onSubmit, Onclick …, créér un code JavaScript dans
l’entête de la page qui permet de :
Vérifier que les champs sont tous remplis, sinon une
alerte est affichée
Vérifier que la forme des champs email et téléphone sont
corrects (un numéro de téléphone a 9 chiffre au max et
commence par un 0, un email comporte le caractère ‘@’),
sinon une alerte est affichée
Vérifier si le mot de passe comporte 8 caractères, sinon
une alerte est affichée
2016-17
UMONS/FPMs/INFO/Web Tech/Pratique
12
JavaScript : Objets prédéfinis :
• Exercice 4 : création d’une page qui calcule le prix de voyage
entre deux villes
Créer un formulaire qui contient deux listes (listes de 6
villes), une Checkbox qui vérifie que le voyageur a moins
de 26 ans et un bouton de validation
Une fois on clic sur le bouton de validation, une fonction
JavaScript est appelée pour calculer le prix du voyage, en
prenant en considération l'âge du voyageur: si le
voyageur a moins de 26 ans, le prix est divisé par deux.
Dans la fonction JavaScript, analyser tous les cas
possibles, en définissant des variables (par exemple le
prix du voyage entre la ville a et la ville b sera initialisé
par ab=10).
Prenez en considération le cas où l’utilisateur met la
même ville de départ et de destination (un message
d’erreur sera affiché).
2016-17
UMONS/FPMs/INFO/Web Tech/Pratique
13
PHP : introduction et manipulation des formulaires et
bases des données
• Exemple: rappels
Déclaration et manipulation: variables, fonctions, …
Exemples : création d’une fonction qui permet d’afficher un message de
couleur c de taille s (passés en paramètres).
Programmation orientée objet
Gestion des sessions d’utilisateurs
Wampserver sera installé préalablement
2016-17
UMONS/FPMs/INFO/Web Tech/Pratique
14
PHP : introduction et manipulation des formulaires et
bases des données
• Exercice 5 : PHP et les formulaires
Dans votre page web créée précédemment, donner un lien pour l’inscription des clients et
ajouter un champ pour une photo de profil. Après la vérification du formulaire par JavaScript
(Exercice 4), les données des champs doivent être envoyées à une page PHP pour la
manipulation
Afficher les données et la photo téléchargée sur une page PHP
Si l’un des champ n’est pas rempli, un message d’erreur sera affiché
Dans PhpMyadmin créer une base de données appelée Tp_Techno_Web
Créer une table utilisateur avec les colonnes des champs de votre page.
2016-17
15
PHP : introduction et manipulation des
formulaires et bases de données
• Exercice 6 : PHP et manipulation des bases de données (méthode PDO)
Création d’une base de données en local (localhost) avec PhpMyadmin
Exemple : une base de données avec une table client (id, nom, prénom, adresse, email,
téléphone).
Connexion à la base des données avec la méthode classique
Interactions avec la base des données
Insertion
Suppression
Mise à jour
Extraction des données
…
2016-17
UMONS/FPMs/INFO/Web Tech/Pratique
16
PHP : introduction et manipulation des
formulaires et bases des données
• Exercice 7 : Création d’une page qui calcule le prix de voyage entre
deux villes avec PHP
Vous répondez aux mêmes questions de l’exercice 5, mais avec la
création d’une base de données dont laquelle les prix entre les villes de
départ et destination sont stockés.
Pensez à une conception qui assure les éléments suivants :
Chaque voyage a un numéro (id)
Chaque client doit être inscrit avant la réservation
Les dates de réservations doivent être enregistrées
2016-17
UMONS/FPMs/INFO/Web Tech/Pratique
17
PHP : introduction et manipulation des
formulaires et bases des données
• Exercice 8 : Création d’une page utilisateurs gérée par un administrateur
Pour cela il faut une base de données avec deux tables administrateur,
utilisateur
L’utilisateur peut créer un compte :
Nom, prénom … et avec une photo de profil !
L’utilisateur peut se connecter et afficher ses informations, les modifier, ou les
supprimer …
L’administrateur peut supprimer/ajouter un utilisateur …
L’utilisateur peut consulter la listes des utilisateurs inscrits, communiquer avec
eux par des messages …
Créativité autorisée
2016-17
UMONS/FPMs/INFO/Web Tech/Pratique
18
Technologie du web récente : Bootstrap
• Exercice 9 : Création de pages « responsives »
Préparation de fichiers css, js ...
Il s'agit de Bootstrap sous sa forme la plus simple : des fichiers pré-compilés pour une
utilisation rapide pour pratiquement n'importe quel projet Web. Nous proposons du CSS et
du JS compliés (bootstrap.*), ainsi que du CSS et du JS compilés et minimisés
(bootstrap.min.*).
Utilisation et découverte de ces fichiers : des tableaux responsives …
Le but c’est de donner une référence pour créer un site web au design
adaptatif, et de montrer l’utilité de Bootstrap pour avoir des pages web
adaptées à toutes les interfaces et systèmes …
2016-17
UMONS/FPMs/INFO/Web Tech/Pratique
19
Technologie de web récentes : Bootstrap
2016-17
UMONS/FPMs/INFO/Web Tech/Pratique
20
Symfony : Pourquoi Symfony !?
• Gain de temps et qualité optimisée : Par l’utilisation de composants déjà existants,
on supprime les tâches à faible valeur ajoutée pour se concentrer exclusivement sur
des aspects plus complexes
• Open source
• Evolutivité et maintenance garantie : De par son caractère universel, l’utilisation de
Symfony assure la longévité de vos projets
• Interopérabilité : Cette solution vous permet de construire des applications qui
répondent précisément à vos besoins : réelle flexibilité.
• Ressources (documentations) : En utilisant Symfony vous êtes sûr de ne pas être
seul derrière votre écran.
• Réputation et références dans le monde entier : Très vite adopté par les
professionnels depuis son lancement en 2005.
2016-17
UMONS/FPMs/INFO/Web Tech/Pratique
21
Framework Symfony : un nouveau monde de
création de pages web
• Symfony est un framework MVC libre écrit en PHP (compatible avec
PHP 7). Il fournit des fonctionnalités modulables et adaptables qui
permettent de faciliter et d’accélérer le développement d'un site web.
• Remarques :
notre développement en utilisant Symfony, sera réalisé sous Netbeans à
télécharger par le lien : https://netbeans.org/downloads/ en choisissant
l’option ‘all’
La version symfony à utilisé : à confirmer (selon la stabilité!)
2016-17
UMONS/FPMs/INFO/Web Tech/Pratique
22
Le but c’est de donner un tutoriel comme
point de démarrage !
Choix de la version de Symfony
Création d’un nouveau projet symfony sur Netbeans
Montrer la structure générale du projet et l’ arborescence à respecter
Mode de fonctionnement
Les fichiers de configuration
Gérer un mini-projet sous symfony en utilisant les notions acquises.
2016-17
UMONS/FPMs/INFO/Web Tech/Pratique
23
