0 Objectifs de la session n°1  Revenir sur toutes les bases théoriques nécessaires pour devenir un développeur Web,  Découvrir l’ensemble des langages.

Présentation au sujet: "0 Objectifs de la session n°1  Revenir sur toutes les bases théoriques nécessaires pour devenir un développeur Web,  Découvrir l’ensemble des langages."— Transcription de la présentation:

1 0 Objectifs de la session n°1  Revenir sur toutes les bases théoriques nécessaires pour devenir un développeur Web,  Découvrir l’ensemble des langages utilisés côté client : HTML, CSS, JS,  Présenter les bases de PHP 5 (avec un focus sur la version 5.5),  Découvrir la POO et la mise en œuvre en PHP Introduction Fondamentaux PHP

2 1 Objectifs du jour 1  Revenir sur toutes les bases théoriques nécessaires pour devenir un développeur PHP/Web Jour 1 Fondamentaux PHP Les fondamentaux d’une application PHP/Web Protocole HTTP, échange client serveur Mise en place d’un serveur WEB, présentation des logiciels nécessaires et de leur configuration (serveur HTTP, parser PHP) Exercice pratique Installation et configuration de l’environnement sur le poste de développement Où et comment sont exécutés les scripts (PHP, JS) Focus sur PHP Focus sur JS Le HTML et le DOM Explication de la structure HTML et représentation du DOM Exercice pratique Analyse du DOM en utilisant les outils de développement de google chrome. Décryptage des informations collectées Programme

3 2 Objectifs du jour 2  Découvrir l’ensemble des langages utilisés côté client : HTML, CSS, JS  Présenter les bases de PHP 5 Jour 2 Fondamentaux PHP Exercice pratique Analyse du HTML / CSS et découverte du DOM autour d’une application existante, Initiation à AJAX Présentation des frameworks JS et CSS actuels Présentation de JQUERY Présentation de bootstrap (twitter) Tour d’horizon des autres frameworks Présentation de la philosophie de plugins Jquery en javascript Jquery UI & Jquery Datatable Exercice pratique Utilisation d’ajax avec Jquery Utilisation de Jquery Datatable pour la mise en forme des données Présentation du langage PHP Historique du langage Focus sur la version 5.5 : structure, mots clés, mots réservés Exercice pratique Premier script PHP Programme

4 3 Objectifs du jour 3  Décrouvrir la POO et la mise en œuvre en PHP Jour 3 Fondamentaux PHP Présentation des bases de la POO Héritage, interface, classe abstraite, héritage multiple Mise en œuvre de la POO en PHP Scope et portée Syntaxe objet en PHP Initiation aux trait Présentation de quelques patrons de conception Singleton, factory, adapter Exercice pratique Création d’un singleton Exercice pratique Redéfinir les types primitifs en PHP Programme

5 4 Brief Mettre en place une application disponible depuis l’url « http://formation.fiducial.fr » qui permette à un utilisateur connecté de visualiser la liste d’ordinateurs d’un parc informatique. Pour chaque ordinateur, nous afficherons son identifiant, son IP, le nom et le prénom de son utilisateur. Ce mini projet servira de fil conducteur au cours de la session 1 de la formation. Le fil rouge Fondamentaux PHP

6 5 Quelques rappels Jour 1 – Fondamentaux d’une application WEB Fondamentaux PHP Protocole HTTP Hyper Text Transfer Protocol protocole requête/réponse basé sur du texte La première ligne de la requête contient 3 éléments : Verbe : POST/GET/HEAD/OPTIONS/PUT/… URI : /index.html Protocole : HTTP/1.0 - HTTP/1.1 La première ligne de la réponse contient 2 éléments :État : 200, 402 Phrase : OK, Unauthorized Les lignes suivantes contiennent un certain nombre d’entêtes. Le contenu suit une ligne d’entête vide

7 6 Quelques rappels Jour 1 – Fondamentaux d’une application WEB Fondamentaux PHP Echange client / serveur

8 7 Mise en place d’un serveur WEB Jour 1 – Fondamentaux d’une application WEB Fondamentaux PHP Serveur HTTP Apache Nginx – utilisé chez Fiducial Lighttpd – principalement utilisé pour délivrer du contenu statique IIS - windows PHP Avec apache : en tant que module, mod_php en utilisant fast_cgi et php-fpm Avec nginx en utilisant php-fpm

9 8 Apache 2.x Jour 1 – Serveur HTTP - Configuration Fondamentaux PHP

10 9 Nginx Jour 1 – Serveur HTTP - Configuration Fondamentaux PHP

11 10 PHP Un fichier de configuration qui contient les directives : php.ini Quelques directives utiles : error_reporting = E_ALL & ~E_NOTICE variables_order = EGPCS auto-prepend-file = [path/to/file] auto-append-file = [path/to/file] Description des directives : http://php.net/manual/fr/ini.core.php Jour 1 – PHP - Configuration Fondamentaux PHP

12 11 Jour 1 – Exercice pratique n°1 Estimation de projet Installer votre serveur Web en local http://www.easyphp.org Configurer et redémarrer Apache Ajouter la directive ServerAlias : formation.fiducial.fr Valider l’installation Créer le fichier phpinfo.php dans le répertoire « www » contenant Ouvrir votre navigateur et accéder http://localhost/phpinfo.php <?php phpinfo();

13 12 Jour 1 – Exercice pratique n°1 - Résultat Estimation de projet Vous devriez voir ceci :

14 13 Jour 1 – Les bases des langages PHP et JS Fondamentaux PHP Où et comment sont exécutés les scripts PHP côté serveur, cela semble maintenant évident

15 14 Jour 1 – Les bases des langages PHP et JS Fondamentaux PHP A quoi ressemble un script PHP? http://php.net/manual/fr/tutorial.firstpage.php

16 15 Jour 1 – Les bases des langages PHP et JS Fondamentaux PHP Où et comment sont exécutés les scripts JS côté client par le moteur javascript du navigateur

17 16 Jour 1 – Les bases des langages PHP et JS Fondamentaux PHP A quoi ressemble un script JS? http://fr.openclassrooms.com/informatique/cours/tout-sur-le-javascript/votre- premier-script

18 17 Jour 1 – Présentation du DOM Fondamentaux PHP Qu’est ce que le DOM? Le Document Object Model (ou DOM) est un standard du W3C qui décrit une interface indépendante de tout langage de programmation et de toute plate-forme, permettant à des programmes informatiques et à des scripts d'accéder ou de mettre à jour le contenu, la structure ou le style de documents XML et HTML1. Le document peut ensuite être traité et les résultats de ces traitements peuvent être réincorporés dans le document tel qu'il sera présenté.W3Clangage de programmationprogrammes informatiquesscriptsXMLHTML1 http://la-cascade.ghost.io/quest-ce-que-le-dom/

19 18 Jour 1 – Exercice pratique n°2 Fondamentaux PHP Utilisation des outils de développement et analyse Aller sur http://www.fiducial.fr Analyser le DOM en utilisant les outils de développement de google chrome. Décrypter des informations collectées dans les outils de développement Répondre aux questions suivantes : Quel CMS est utilisé pour éditer le site www.fiducial.fr?www.fiducial.fr Quel système de cache est utilisé pour pour éviter d’accéder au serveur php à chaque requête? Quel est le nom du cookie utilisé pour stocké la session du site? Faites quelques recherches A quoi sert un cookie? A quoi sert une session? Peut-on modifier un cookie en javascript? En php? Qu’est qu’une session et où est-elle stockée? Premiers pas en javascript Créer un fichier index.html à la racine du site Editer le fichier en créant une structure html valide (balises html, head, body) Créer un premier script javascript dans le code html qui va afficher la date du jour dans une boîte de dialogue Créer un fichier JS (inclusion.js) à la racine du site et inclure ce fichier en utilisant la balise Créer un premier formulaire (method="POST" action=".") contenant 2 champs (input type text et password) : login et password Soumettre le formulaire et analyser les headers envoyés par le formulaire

20 19 Rappel des objectifs du jour 2  Découvrir l’ensemble des langages utilisés côté client : HTML, CSS, JS  Présenter les bases de PHP 5 Jour 2 Fondamentaux PHP Présentation de la revue de code Qu’est ce que la revue de code? Quels sont les objectifs de la revue de code? Exercice pratique Revue de code du développement de la veille Présentation des frameworks JS et CSS actuels Présentation de JQUERY Présentation de bootstrap (twitter) Tour d’horizon des autres frameworks Présentation de la philosophie de plugins Jquery en javascript Jquery UI & Jquery Datatable Présentation du langage PHP Historique du langage Focus sur la version 5.5 : structure, mots clés, mots réservés Exercice pratique Utilisation d’ajax avec Jquery Utilisation de Jquery Datatable pour la mise en forme des données Programme

21 20 Jour 2 – Revue de code Fondamentaux PHP Qu’est ce que la revue de code Une revue de code s'appuie sur la vérification (manuelle ou automatisée) du respect d'un ensemble de règles de programmation. Objectif de la revue de code F avoriser la collaboration, le travail en équipe (’appropriation du code par l’équipe) Appliquer un standard Détecter et corriger les défauts (bugs mais aussi lisibilité) au plus tôt dans le cycle de vie du code pour économiser les coûts Formation des développeurs Comment intégrer la revue de code dans le workflow de développement? Grâce à des outils comme gitlab ou github en utilisant git flow

22 21 Jour 2 – Les frameworks JS Fondamentaux PHP Jquery jQuery est une bibliothèque JavaScript libre et multi-plateforme créée pour faciliter l'écriture de scripts côté client dans le code HTML des pages web. La bibliothèque contient notamment les fonctionnalités suivantes : Parcours et modification du DOM (y compris le support des sélecteurs CSS 1 à 3 et un support basique de XPath) ; Événements ; Effets visuels et animations ; Manipulations des feuilles de style en cascade (ajout/suppression des classes, d'attributs…) ; Ajax ; Plugins ; Utilitaires (version du navigateur web…).

23 22 Jour 2 – Les frameworks JS Fondamentaux PHP Jquery – les notions de base La syntaxe $(selecteur).action() Le signe $ est un alias de la fonction jquery Le (selecteur) permet de sélectionner des éléments HTML Une action() jQuery à exécuter sur les éléments

24 23 Jour 2 – Les frameworks JS Fondamentaux PHP Jquery – les notions de base Les sélecteurs classiques : Sélecteur d’éléments : $("p") Sélecteur d’identifiants : $("#test") Sélecteur de classe: $(".maclasse") Exemples : http://openclassrooms.com/courses/simplifiez-vos-developpements-javascript-avec- jquery/plus-loin-dans-la-selection-d-elements

25 24 Jour 2 – Les frameworks JS Fondamentaux PHP Jquery – les notions de base

26 25 Jour 2 – Les frameworks JS Fondamentaux PHP Les frameworks JS angularJS : https://angularjs.org/ backboneJS : http://backbonejs.org/ ember.js : http://emberjs.com/ knockout : http://knockoutjs.com/ extjs : www.sencha.com/products/extjs/ Faites vous votre avis et testez les.

27 26 Jour 2 – Un framework CSS Fondamentaux PHP Bootstrap http://getbootstrap.com/getting-started/ Mettre en pratique Mettre en place une barre de navigation fixe Tester les exemples décrits dans la documentation

28 27 Jour 2 – utilisation de plugins existants Fondamentaux PHP La philosophie d’utilisation des plugins existants Réutiliser, c’est capitaliser Où trouver les plugins? http://plugins.jquery.com/ Le nombre d’utilisateurs et de contributeurs est un bon indicateur quant à la qualité d’un plugin Le test d’un plugin a un coût très faible Quelques plugins jQuery Datatable : http://www.datatables.net/ jQuery UI : http://jqueryui.com/

29 28 Jour 2 – utilisation de plugins existants Fondamentaux PHP Un exemple simple http://www.datatables.net/examples/ajax/objects.html

30 29 Jour 2 – PHP Fondamentaux PHP PHP, l’historique http://talks.php.net/phptour14#/ La structure et les mots clés du langage http://www.vulgarisation-informatique.com/variables-constantes.php Un focus sur les sessions http://fr2.php.net/manual/fr/session.examples.basic.php Quelques éléments de POO Mots clés : Class, interface, abstract Accessibilité : public, protected, private

31 30 Jour 2 – PHP – les indispensables Fondamentaux PHP Les bases du langage sur php.net http://php.net/manual/fr/langref.php Les variables prédéfinies http://fr2.php.net/manual/fr/reserved.variables.php Les constantes prédéfinies http://php.net/manual/fr/language.constants.predefined.php var_dump($maVariable) Indispensable pour connaître le contenu et le type d’une variable : http://fr2.php.net/manual/fr/function.var-dump.phphttp://fr2.php.net/manual/fr/function.var-dump.php Gestion des erreurs http://fr2.php.net/manual/fr/ref.errorfunc.php Focus sur http://fr2.php.net/manual/fr/function.error-reporting.phphttp://fr2.php.net/manual/fr/function.error-reporting.php Savoir se situer __FILE__ $_SERVER[‘DOCUMENT_ROOT’] La gestion des dates Les fonctions date(), time(), mktime() Mais surtout : http://fr2.php.net/manual/fr/class.datetime.php et http://fr2.php.net/manual/fr/class.dateinterval.phphttp://fr2.php.net/manual/fr/class.datetime.phphttp://fr2.php.net/manual/fr/class.dateinterval.php Des fonctions bien utiles http://fr2.php.net/manual/fr/ref.info.php Récupérer la liste des fichiers incluent : http://fr2.php.net/manual/fr/function.get-included-files.phphttp://fr2.php.net/manual/fr/function.get-included-files.php Les fonctions pour les classes/objets http://fr2.php.net/manual/fr/ref.classobj.php La gestion des exceptions http://php.net/manual/fr/language.exceptions.php Des erreurs de mémoire Problème de mémoire allouée pour l’exécution de votre script. Pour contourner, ini_set(‘memory_limit’,’1G’); Ce qu’il faut retenir pour gagner du temps

32 31 Jour 2 – PHP – les indispensables Fondamentaux PHP Les normes de développement Ne pas utiliser les mots réservés Comme pour mysql, l’utilisation de mot réservés est interdit autant dans le nom de variable que pour les noms de méthodes. Les Normes PSR Pour faciliter la mise en place de projet PHP, une norme à été mise en place par le “PHP Framework Interoperability Group”. Découpé en niveau de 0 à 4. Cela permet un apprentissage rapide, utilisé conjointement avec un codeSniffer et permet de gagner en lisibilité et en qualité. Les niveaux les plus utilisés sont 0, 1 et 2. Les suivants sont des réponses précises à des cas d’utilisations précis. http://www.php-fig.org/psr/psr-0/fr/ http://www.php-fig.org/psr/psr-1/fr/ http://www.php-fig.org/psr/psr-2/fr/ http://www.php-fig.org/psr/psr-4/

33 32 Jour 2 – Exercice pratique n°2 Fondamentaux PHP Continuer le projet

34 33 Objectifs du jour 3  Décrouvrir la POO et la mise en œuvre en PHP Jour 3 Fondamentaux PHP Présentation des bases de la POO Héritage, interface, classe abstraite, héritage multiple Mise en œuvre de la POO en PHP Scope et portée Syntaxe objet en PHP Exercice pratique Création d’un singleton Exercice pratique Redéfinir les types primitifs en PHP Programme

35 34 Jour 3 – Les bases de la POO Fondamentaux PHP Une classe En programmation orientée objet, une classe déclare des propriétés communes à un ensemble d'objets. La classe déclare des attributs représentant l'état des objets et des méthodes représentant leur comportement. Une classe représente donc une catégorie d'objets. Elle apparaît aussi comme un moule ou une usine à partir de laquelle il est possible de créer des objets. (c'est en quelque sorte une « boîte à outils » qui permet de fabriquer un objet). On parle alors d'un objet en tant qu'instance d'une classe (création d'un objet ayant les propriétés de la classe). En PHP http://fr2.php.net/manual/fr/language.oop5.basic.php

36 35 Jour 3 – Les bases de la POO Fondamentaux PHP Une interface C’est une classe ne possédant que des méthodes abstraites. Cela correspond à une structure qui devra être implémentée par toutes les classes qui l’implémenteront. En PHP

37 36 Jour 3 – Les bases de la POO Fondamentaux PHP Une classe abstraite Les classes possédant au moins une méthode abstraite sont aussi dites classes abstraites (ou virtuelles) et ne peuvent pas être instanciées directement — sauf en créant une sous-classe non abstraite En PHP

38 37 Jour 3 – Les bases de la POO Fondamentaux PHP L’héritage Il est possible de restreindre l'ensemble d'objets représenté par une classe A grâce à un mécanisme d'héritage. Dans ce cas, on crée une nouvelle classe B liée à la classe A et qui ajoute de nouvelles propriétés. Dans ce cas, différents termes sont utilisés : A est une généralisation de B et B est une spécialisation de A ; A est une super-classe de B et B est une sous-classe de A ; A est la classe mère de B et B est une classe fille de A. En PHP

39 38 Jour 3 – Design pattern Fondamentaux PHP Design pattern Un patron de conception est issu de l'expérience des concepteurs de logiciels. Il décrit sous forme de diagrammes un arrangement récurrent de rôles et d'actions joués par des modules d'un logiciel, et le nom du patron sert de vocabulaire commun entre le concepteur et le programmeur. D'une manière analogue à un patron de couture, le patron de conception décrit les grandes lignes d'une solution, qui peuvent ensuite être modifiées et adaptées en fonction des besoins. Les patrons de conception décrivent des procédés de conception généraux et permettent en conséquence de capitaliser l'expérience appliquée à la conception de logiciel. Ils ont une influence sur l'architecture logicielle d'un système informatique.

40 39 Jour 3 – Un design pattern simple Fondamentaux PHP Singleton le singleton est un patron de conception (design pattern) dont l'objet est de restreindre l'instanciation d'une classe à un seul objet (ou bien à quelques objets seulement). Il est utilisé lorsque l'on a besoin d'exactement un objet pour coordonner des opérations dans un système. Le modèle est parfois utilisé pour son efficacité, lorsque le système est plus rapide ou occupe moins de mémoire avec peu d'objets qu'avec beaucoup d'objets similaires.patron de conception

41 40 Jour 3 – Les bases de la POO Fondamentaux PHP Focus sur PDO http://fr2.php.net/manual/fr/intro.pdo.php L'extension PHP Data Objects (PDO) définit une excellente interface pour accéder à une base de données depuis PHP. Chaque pilote de base de données implémenté dans l'interface PDO peut utiliser des fonctionnalités spécifiques de chacune des bases de données en utilisant des extensions de fonctions. Notez que vous ne pouvez exécuter aucune fonction de base de données en utilisant l'extension PDO par elle-même ; vous devez utiliser un driver PDO spécifique à la base de données pour accéder au serveur de base de données. PDO fournit une interface d'abstraction à l'accès de données, ce qui signifie que vous utilisez les mêmes fonctions pour exécuter des requêtes ou récupérer les données quelque soit la base de données utilisée. PDO ne fournit pas une abstraction de base de données : il ne réécrit pas le SQL, n'émule pas des fonctionnalités manquantes. Vous devriez utiliser une interface d'abstraction complète si vous avez besoin de cela. <?php $bdd = new PDO('mysql:host=localhost;dbname=test', 'root', ''); ?>

42 41 Les enjeux de l’estimation Estimation de projet Définir les travaux à réaliser Déterminer comment réaliser la tache Déterminer la complexité de la tâche Partager la compréhension de la tâche Ré estimer pour affiner ou réagir à des évènements Déterminer le dimensionnement de l’équipe Lotir le projet

43 42 Le principe d’estimation Estimation de projet Définir la backlog des charges de réalisation Sur la base du cahier des charges. Découper logiquement le projet et définir les charges de développement Déterminer les charges annexes Tout ce qui n’est pas de la charge de développement Exemple : L’initialisation, La conception, les tests, le pilotage, … Déterminer le « poids » de chacune par rapport à la charge de réalisation Coéfficienter par rapport à la charge de développement est « logique » pour les tests ou le pilotage. Pas logique pour la rédaction d’un plan Qualité par ex. La forme et la granularité permettent de partager avec d’autres équipes La meilleure estimation est celle que l’on aura partagée