Technologie de web. partie pratique. Pierre Manneback Mohammed EL ADOUI Service d informatique, FPMS UMONS à Charleroi

Transcription

1 Technologie de web partie pratique Pierre Manneback Mohammed EL ADOUI Service d informatique, FPMS UMONS à Charleroi

2 Plan HTML et CSS : Exercices basiques : 1 heure JavaScript : Interaction dynamique, lecture et vérification des formulaires : 1 heure PHP : Lecture des formulaires et interaction avec des bases de données : 3 heures Avec la méthode classique Avec PDO Création d une plateforme web simple Dernières technologies des pages responsives : Exemple utilisation de Bootstrape : 1 heure Framework : Utilisation de la plateforme Symfony : 3 heures ou plus!

3 HTML : rappel Le html «HyperText Mark-Up Language» est le langage qui va vous permettre de structurer une page Web à l'aide de plusieurs balises, c est avec ces fameuses balises qu'on va créer une simple page Web avec des liens hypertextes, ça veut dire des relations entre d'autres pages Web par un simple click, bien sûr on peut faire plus que ça" insérer des images" etc Exemple :  <html> <head> <title> le titre de la page </title> </head> <body> </body> </html>

4 HTML : arborescence d un fichier HTML

5 HTML : applications Exercice 1 : Crée une page html qui affiche : Un message d'accueil en utilisant la balise font et ses attributs Un séparateur 4 images représentatives qui se défile 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 votre site web, en ajoutant une liste numéroté. Créer un menu vertical dont les éléments sont des liens Donner à votre page web une visibilité par blocs (par exemple 3 blocs : une verticales pour les liens, et deux horizontales pour les informations du site)

6 CSS : rappel 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. Désormais, votre code HTML ne vous servira qu'à définir la structure de vos contenus tandis que les CSS vous permettront de créer vos styles et votre mise en page. Exemple : <head> <title> Ma page </title> <style type="text/css"> h1 { color : blue; text-align : center; } </style> </head>

7 CSS : Note sur les couleurs Nom Code Résultat White #FFFFFF Black # Red #FF0000 Green #00FF00 Blue #0000FF Yellow #FFFF00 Fuschia #FF00FF Salamon #FA8072 Chocolate #D2691E

8 HTML et CSS : applications Exercice 2 : Création d un fichier CSS qui assure les propretés suivantes: Tous les attributs de la page web doivent être centrés Tous les paragraphes doivent être en 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 Bootstrape qui est plus complet et correspond à toutes les plateformes

9 JavaScript : rappel 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 clarté sur Figure 1

10 JavaScript Qu'est-ce que le JavaScript? JavaScript est un langage de programmation qui permet d'apporter des améliorations au langage HTML en permettant d'exécuter des commandes. Grâce à ce langage, il est possible d écrire des pages interactives et dynamiques. C est un langage interprété, non compilé!

11 JavaScript Qu'est-ce que le JavaScript? Basé sur les objet, pas de classes ni d héritage,... Code intégré dans HTML. Déclaration optionnelle des variables (typage faible). Une syntaxe proche des langages de programmation comme le C. Pas d entrées/sorties. JavaScript ne doit pas être confondu avec Java.

12 JavaScript Let s start! Dans l entête <head> : <script language="javascript"> Placez ici le code de votre script. </script> Dans un fichier html, on peut appeler un fichier contenant du code JavaScript. <script src="nomfichier.js" > </script>

13 JavaScript Quand les instructions de script sont exécutées : Vous avez quatre choix pour déterminer le moment où un script est exécuté : Tandis qu un document se charge, Juste après le chargement d un document, En réponse à l action de l utilisateur, Quand il est appelé par d autres instructions du script.

14 JavaScript Exécution directe : Un code qui est destiné à s exécuter automatiquement lors du chargement de la page, on le met dans la balise body. <BODY> <SCRIPT language="javascript"> document.write("bonjour ") ; </SCRIPT> </BODY>

15 JavaScript Exécution différée : Le code qui s exécute lors d un événement généré par intervention de l utilisateur est placé dans la balise <head>. Dans ce cas, le code est lu par le navigateur, stocké en mémoire, il s exécute que sur demande! <head> <script language="javascript"> function aurevoir (){ alert("au revoir"); } </script> </head> <body onunload=aurevoir();> </body>

16 anchor button Navigator applet text document area radio Window history form select location image submit option layer password link Figure 1

17 JavaScript Les instructions de JavaScript Les actions effectuées sont les suivantes : Définir ou initialiser une variable ; Assigner une valeur à une propriété ou à une variable ; Changer la valeur d une propriété ou d une variable ; Appeler une méthode d un objet ; Appeler une fonction prendre une décision.

18 JavaScript 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ée une page web qui permet de sommer/multiplier deux nombres entrés dans deux champs text

19 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 faire inscrire les visiteurs. La page permet d afficher un formulaire : nom, prénom, adresse, , téléphone, mot de passe et un bouton de validation. On utilisant les évènements : load/unload, onmouseover, onchange, onfocus/onblur, onselect, onsubmit, Onclick, crée un code JavaSript 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 et téléphone sont correct (un numéro de téléphone a 9 chiffre au max et commence par un 0, un comporte le ), sinon une alerte est affichée Vérifier si le mot de passe comporte 8 caractère, sinon une alerte est affichée

20 JavaScript : Objets prédéfinis : Exercice 4 : création d une page qui calcule le prix de voyage entre deux villes Crée un formulaire qui contient deux listes (listes de 6 villes), un Checkbox qui vérifie que le voyageur à 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 on considération l'âge de voyageur: si le voyageur a moins de 26 ans, le prix est divisé par deux. Dans la fonction JavaScript, analyser tous les cas possibles, on 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é).

21 PHP : introduction et manipulation des formulaires et bases des données Exemple: rappels Déclaration et manipulation des : variables, fonctions Exemples : création d une fonction qui permet d afficher un message de couleur c de taille s. passé en paramètres. Programmation orienté objet Gestion des sessions d utilisateurs Wampserver sera installé préalablement

22 PHP : introduction et manipulation des formulaires et bases des données Exercice 5 : PHP et les formulaires Dans votre page web crée présidèrent, 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 champs n est pas rempli, un message d erreur sera affiché Dans PhpMyadmin crée une base de données appelée Tp_Techno_Web Crée une table utilisateur avec les colonnes des champs de votre page.

23 PHP : introduction et manipulation des formulaires et bases des données Exercice 6 : PHP et manipulation des bases de données (méthode PDO) Création d une base de données en locale (localhost) avec PhpMyadmin Exemple : une base de données avec une table client(id, nom, prénom, adresse, , 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

24 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

25 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 profile!! L utilisateur peut se connecter et afficher ses informations, les modifiés, ou les supprimer L administrateur peut supprimer/ajouter un utilisateur L utilisateur peut consulter la listes des utilisateurs inscris, communiquer avec eux par des messages Créativités.

26 Technologie de web récentes : Bootstrape Exercice 9 : Création des pages responsives Préparations des fichiers css, js pour les étudiants. 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 responsi Le but c est de donner une référence pour créer un site web au design adaptatif, et encore montrer l utilité de Bootstrape pour avoir des pages web adapté à toutes les interfaces et systèmes

27 Technologie de web récentes : Bootstrape Exercice 9 : Création des pages responsives Préparations des fichiers css, js pour les étudiants. 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 responsi Le but c est de donner une référence pour créer un site web au design adaptatif, et encore montrer l utilité de Bootstrape pour avoir des pages web adapté à toutes les interfaces et systèmes

28 Technologie de web récentes : Bootstrape

29 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.

30 Framework Symfony : un nouveau monde de création de page 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éaliser sous Netbeans à télécharger par le lien : en choisissant l option all La version symfony à utilisé : à confirmé (selon la stabilité!)

31 Le but c est de donner un tutorial pour un 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.