A propos du cours

Ce cours est une formation aux méthodes modernes de programmation des sites WEB.

A la fin de cette formation vous saurez comment structurer au mieux vos programmes et mettre en place des tests unitaires automatisés.

Un site WEB dynamique est développé autour d'un minimum de cinq langages :

La formation que nous vous proposons, est la séparation de ces cinq langages et une méthodologie reposant sur trois piliers :

Cette méthodologie apporte une véritable simplification dans le codage en séparant de la structure du document XHTML :

Cette formation est progressive et basée sur l'explication du développement d'un site WEB simple (voir les vidéos de présentation), mais présentant tous les aspects de la méthodologie.

Ce MOOC comprend trois méthodes de formation par module :

A qui s'adresse ce cours ?

Ce cours s’adresse, plus particulièrement, à des étudiants, des ingénieurs ou des chefs de projet en informatique, notamment dans le domaine du développement WEB et qui désirent structurer et améliorer la maintenance de leurs applications.

Pour les chefs de projet, cette méthodologie par la séparation des langages et la structuration du codage leur donnera une souplesse dans la gestion de leurs équipes.

Ce cours peut s'effectuer :

Pré-requis

Cette formation est du niveau Licence, destinée à des personnes ayant des connaissances en informatique.

Pour appréhender au mieux cette formation, il est préférable :

  1. d'avoir des bases sur les langages de développement de sites : HTML et CSS ;
  2. d'avoir des notions du langage Javascript ;
  3. de maîtriser un langage de programmation orientée objet tels que : C++, Java, PHP, etc. ;
  4. d'avoir une connaissance du langage SQL pour la récupération et la gestion des informations via une Base de Données.

Contenu de la formation

Cette formation est basée sur 8 modules correspondants aux 8 semaines de formation.

Vidéo Exercice

XHTML5 - CSS3

Cours

  • Rappel du langage XHTML ;
  • Langage à balises ;
  • Document XHTML5 ;
  • Rappel du langage CSS3 ;
  • Normalisation ;
  • Méthode de Phark ;
  • Outils de développement ;
  • Exemples.

Exercices

Analyse d'un site

Analyse d'un site à partir d'un storyboard comportant quatre pages : Page d'accueil, Page Calculatrice, Page Peintres et Page d'Administration des peintres.

Extraction des éléments graphiques, typographiques, positionnement des blocs, etc.

Ecriture du cahier de spécifications.

Squelettes

Déduction de l'analyse des squelettes principal et secondaires du site.

Ecriture de ces squelettes en schéma fils de fer.

Scénario et architecture du site

Ecriture XHTML5 de l'architecture. Balisage sémantique.

CSS3 : Normalisation d'Eric Meyer, Méthode de Phark, Positionnements, etc.

Pages : Accueil, Calculatrice et Peintres

A partir des squelettes et de l'analyse, écriture XHTML5 et CSS3 des pages du sites.

Projet

Analyse d'un site de type commerce électronique à partir d'un storyboard.

Ecriture du site en XHTML et CSS3 en respectant le balisage sémantique appris dans le cours.

Ecriture des Media Queries ou Responsive Web Design.

Optimisation

Sprite.

Minification des feuilles de styles.

Javascript

Cours

  • Rappel du langage Javascript ;
  • Structures lexicales ;
  • Types de données ;
  • Variables - Opérateurs ;
  • Instructions ;
  • Fonctions ;
  • Objets - Tableaux ;
  • Objets Javascript ;
  • Evénements intrinsèques.

Exercices

Nombres entiers

Empêcher l'affichage et l'action d'un caractère non numérique dans les champs de saisie du formulaire de la calculatrice.

Calculatrice

Afficher, en dessous du formulaire de la calculatrice, l'opération et son résultat à partir des données du formulaire.

Vérification d'un formulaire

Développer un script Javascript générique permettant de vérifier que les champs obligatoires de n'importe quel formulaire soient renseignés.

Insertion des données d'un formulaire dans un tableau

Ecrire un script déclenchant l'insertion de données dans un tableau à partir de celles insérées dans un formulaire.

Tri dans un tableau

Trier les données d'une colonne d'un tableau après le clic sur son entête.

Alerte personnalisée

Ecrire une boîte d'alerte personnalisée suivant les erreurs effectuée dans un formulaire.

Optimisation

Minification des scripts Javascript.

Projet

Logo

Ajouter sur le logo un événement intrinsèque afin d'afficher la page d'accueil.

Formulaire de contact

Vérification des champs obligatoire.

Vérification du champ de type email.

Vérification du format des champs de type téléphone.

Produits

Affichage et calcul du caddy.

Listeners

Cours

  • Les différents modèles d'événements ;
  • Les flux d'événements ;
  • Les gestionnaires d'événements ;
  • Sépararer le comportement de la structure.

Exercices

Calculatrice

Suppression de onkeypress de la calculatrice.

Suppression de onchange et de onsumit de la calculatrice.

Formulaire des peintres

Suppression de onsubmit dans le formulaire des peintres.

Tableau des peintres

Suppression de onlick sur les entêtes du tableau

Optimisation

Ecriture d'une fonction générique pour les listeners.

Projet

Logo

Supprimer l'événement intrinsèque sur le logo.

Formulaire de contact

Supprimer tous les événements intrinsèques sur le formulaire de contact.

Produits

Supprimer l'événement intrinsèque permettant l'affichage du caddy.

Méthode MVC

Cours

  • Rappel du langage PHP ;
  • Modèles Vues Contrôleur ;
  • Document XHTML - Document PHP ;
  • Séparation du contrôleur de l'architecture ;
  • Fonctions de contrôle ;
  • Classe Vues ;
  • Autoload ;
  • Classe - méthode -argument variables ;
  • Vue VHTml ;
  • Méthodologie.

Exercices

Contrôleur et mise en page du site ;

Autoload et Vues : VHtml, VNav.

Classe, méthode et argument variables.

Fonctions de contrôle.

Vues VPeintres.

Projet

Autoload et mise en page.

Classe - Méthode - Arguments variables.

Contrôleur et fonctions de contrôle.

Vue VAside.

AJAX - JSON

Cours

  • Rappel de la méthode AJAX ;
  • Scénario d'un site exemple ;
  • Fonction asynchrone de changement du contenu d'un élément via la méthode MVC ;
  • Fonction synchrone permettant de récupérer un objet Javascript via la méthode MVC et l'envoi d'un encodage JSON ;
  • Boîte de sélection générant une boîte de sélection.

Exercices

Calcule en utilisant une classe effectuant le calcul sur le serveur, via le contrôleur de la méthode MVC en utilisant une fonction AJAX asynchrone.

Idem en utilisant une fonction AJAX synchrone et en récupérant les données au format JSON.

Insertion des données du formulaire des peintres dans le tableau en utilisant une fonction AJAX.

Affichage d'une fenêtre personnalisée contenant l'image du tableau du peintre.

Affichage des données du tableau à partir d'un fichier.

Téléchargement, redimensionnement et prévisualisation d'une image.

Télécharegment par drag and drop.

Alerte pesonnalisée.

Projet

Formulaire de contact

Affichage du formulaire de contact avec une fonction AJAX.

Initialisation des événements sur le formulaire.

Calcul et sauvegarde du panier

Le calcul du prix total des achats se fera en lisant un fichier contenant les informations des différents produits.

Sauvegarde des commandes dans un fichier.

Bon de commande

Affichage du bon de commande par lecture du fichier des commandes.

Base de Données

Cours

  • Accès aux Base de Données avec PDO (PHP Data Objects) ;
  • Développement des class Modèles (CRUD) de gestion et de récupération des données d'une Base de Données.

Exercices

Classes Modèles en relation avec les tables de la Base de Données.

Constructeur : connexion à la Base de Données avec création d'un objet PDO (PHP Data Objects).

Méthode de classe Select_all() de récupération des tubles d'une table.

Méthode de classe Insert() d'insertion des données.

Méthode de classe Select() de récupération d'un tuble d'une table.

Méthode de classe Update() de modification des données.

Méthode de classe Delete() de suppression des données.

Méthode de classe Modify() de gestion des données.

Utilisation des sessions.

Projet

Modèles conceptuel des données

Les affichages se feront en récupérant les données dans une table.

Affichage de la navigation.

Affichage d'un produit.

Affichage des produits.

Sauvegarde des données du panier dans une table.

Affichage du panier.

Afichage du bon de commande.

Sécurité

Cours

  • SQL Injection : utilisation des binds ;
  • XSS (Cross Site Scripting) : strip-tags ;
  • Parameter tampering : vérification de l'utilisateur, token ;
  • .htaccess ;
  • .htaccess et LDAP ;
  • Attribut d'autorisation et utilisation des masques.

Exercices

SQL Injection : Mise en place du binding dans les classes Modèles.

XSS : Utilisation de la fonction PHP strip-tags() associée à la fonction array_walk().

Attribut d'autorisation et utilisation des masques.

Projet

SQL Injection : Mise en place du binding dans les classes Modèles.

XSS : Utilisation de la fonction PHP strip-tags() associée à la fonction array_walk().

Intégration Continue

Cours

  • Mise en place des tests unitaires : PHPUnit et Selenium ;
  • Versioning : GIT ;
  • Intégration continue : Jenkins et Ant.

Exercices

Ecriture des test unitaires sur les méthodes de la classe CCalcul avec PHPUnit.

Ecriture des test unitaires sur les méthodes de la classe CCalcul avec PHPUnit et Selenium.

Ecriture des test unitaires sur les méthodes de la classe MPeintres avec PHPUnit et Selenium.

Mise en place du versionning avec Git.

Automatisation des tests avec Jenkins et Ant.

Projet

Mettre en oeuvre dans le site du projet les acquis du cours Intégration continue.

Références

Méthodologie utilisée par :

  1. le CEA (Commissariat à l'Energie Atomique et aux Energies Alternatives) sur les Intranet relatifs aux Base de Données Combustibles ;
  2. le moteur du logiciel de E-Commerce Gulliver et 250 boutiques.

Enseignant

Christian Bonhomme

Christian Bonhomme

  1. Docteur en Physique des Particules et en Physique Nucléaire (Université de Grenoble) ;
  2. Ingénieur en Génie Atomique (INSTN de Grenoble) ;
  3. Ingénieur-Chercheur au Commissariat Atomique (Retraité) ;
  4. Professeur à l'IUT d'Informatique d'Aix en Provence (Retraité) ;
  5. Professeur au CNAM d'Aix en Provence (en activité) ;
  6. Créateur et Développeur du moteur de E-Commerce Gulliver.
  7. Contact : phpconsulting.contact@gmail.com
"Un programme non structuré et sans test est comme une voiture sans volant et sans frein."

Ce site est entièrement conçu et développé avec la méthodologie enseignée.