Ce support s'adresse aux développeurs qui souhaitent concevoir des WebApps, ces applications web légères, intégrant des fonctionnalités proches de celles des applications natives, qui fonctionnent directement via un navigateur internet sans qu'il soit nécessaire de les installer sur un ordinateur ou un téléphone. L'objectif de ce support est de proposer une approche complète pour maîtriser, aussi bien côté client que côté serveur, la création d'une WebApp responsive à l'aide des langages JavaScript/jQuery, HTML/CSS et PHP et de bases de données MySQL/MariaDB.

Au fil des chapitres, le lecteur découvre ainsi les grandes étapes du développement, illustrées par de nombreux exemples :

- Les principes d'une WebApp à travers l'utilisation du protocole HTTP, la communication Ajax et la structure du document HTML ;
- L'utilisation des styles pour la mise en forme du texte ou la création de titres dynamiques et d'animations ;
- La mise en page d'une page au moyen des grilles et le positionnement des blocs ;
- L'utilisation de JavaScript pour gérer des tableaux, des objets ou des dates ;
- L'utilisation de jQuery pour gérer les sélecteurs, les évènements et manipuler le DOM ;
- La mise en place de formulaires mettant en oeuvre l'envoi de fichier Ajax, la validation des données avec des expressions régulières ou encore l'accès en lecture et écriture à la base de données ;
- L'utilisation de services web ;
- Le stockage de données locales et l'utilisation de bases de données locales ;
- L'affichage adaptatif pour les différents types de supports.

Pour finir, l'auteur propose au lecteur un chapitre qui présente par la pratique l'installation d'une WebApp sur terminal mobile.

Téléchargements

• Extrait du livre
• Extrait du livre
• Extrait du livre

Principes d'une WebApp

1. 1. Présentation
   1. 1.1 Qu'est-ce qu'une WebApp ?
   2. 1.2 Les avantages et les inconvénients
   3. 1.3 Le responsive design
2. 2. Les bases
   1. 2.1 Retour aux sources
   2. 2.2 Une nouvelle étape
   3. 2.3 De nouvelles possibilités
3. 3. Le développement d'une WebApp
   1. 3.1 L'approche full stack
   2. 3.2 Le découpage en couches
   3. 3.3 Les traitements côté client et les traitements côté serveur
   4. 3.4 Les frameworks et les librairies
   5. 3.5 HTTP
4. 4. La structure de l'application
   1. 4.1 L'arborescence des fichiers
   2. 4.2 La structure monotithique
   3. 4.3 Les sous-domaines
   4. 4.4 La gestion des accès

Les bases de l'application

1. 1. La page d'accueil
   1. 1.1 Un simple document HTML
   2. 1.2 La définition du type de document
   3. 1.3 Les balises meta
   4. 1.4 La balise link
   5. 1.5 Les CSS
   6. 1.6 Les scripts
   7. 1.7 Les codes d'échappement
2. 2. La communication client-serveur
   1. 2.1 Les commandes HTTP
   2. 2.2 Les cookies
3. 3. Le paramétrage du serveur
   1. 3.1 Le fichier .htaccess
   2. 3.2 Les sous-domaines

L'importance du style

1. 1. Une transition nécessaire
   1. 1.1 Le HTML sans le style
   2. 1.2 Création d'une feuille de style
   3. 1.3 L'intégration des styles
   4. 1.4 Le HTML avec les CSS
2. 2. Généralités sur les CSS
   1. 2.1 Les unités
   2. 2.2 Le modèle de boîte
   3. 2.3 Les quatre côtés
3. 3. La généralisation du div
   1. 3.1 Le placement
   2. 3.2 Cibler un style
   3. 3.3 Les identifiants
   4. 3.4 Les classes
4. 4. Tout en div
   1. 4.1 Transition en douceur
   2. 4.2 Les pseudo-classes

La structure du document

1. 1. Le découpage en blocs
   1. 1.1 Le bloc de données
   2. 1.2 De multiples blocs
   3. 1.3 Le positionnement des blocs
2. 2. Les autres tags de mise en page
   1. 2.1 Le paragraphe
   2. 2.2 Les en-têtes
   3. 2.3 La zone de texte
   4. 2.4 Les listes
3. 3. Les grilles d'affichage
   1. 3.1 La controverse
   2. 3.2 Les tables
   3. 3.3 CSS flexbox
   4. 3.4 La grille CSS
   5. 3.5 La répartition des colonnes
   6. 3.6 Le placement par ligne et colonne
   7. 3.7 Le placement sur grille

JavaScript orienté WebApp

1. 1. Les variables
   1. 1.1 Quelques précisions
   2. 1.2 La déclaration implicite
   3. 1.3 var
   4. 1.4 let
2. 2. Les structures de données
   1. 2.1 Les tableaux
   2. 2.2 Les objets
   3. 2.3 Combinaisons de tableaux et d'objets
   4. 2.4 L'objet Map
   5. 2.5 L'opérateur delete
3. 3. Les boucles for
   1. 3.1 Le for et les tableaux
   2. 3.2 for in
   3. 3.3 for of
   4. 3.4 forEach
   5. 3.5 Fonction anonyme
4. 4. La gestion du temps
   1. 4.1 Le parent pauvre
   2. 4.2 Le formatage de la date

Un éditeur de texte

1. 1. Quelques outils
   1. 1.1 Du textarea vers le contenteditable
   2. 1.2 execCommand
   3. 1.3 Les icônes
   4. 1.4 La barre d'outils
2. 2. Le programme
   1. 2.1 Les initialisations
   2. 2.2 Les événements de la zone de texte
   3. 2.3 Les événements de la barre d'outils
   4. 2.4 L'éditeur en action

De JavaScript à jQuery

1. 1. Une transition nécessaire
   1. 1.1 Un choix de raison
   2. 1.2 Quelques bases
   3. 1.3 La gestion des événements
   4. 1.4 La manipulation des classes
   5. 1.5 Les opérations groupées
   6. 1.6 La manipulation du DOM
2. 2. Un sélecteur de couleurs
   1. 2.1 Étude comparative
   2. 2.2 Version JavaScript
   3. 2.3 Version jQuery

Le modèle objet de document

1. 1. Le DOM
   1. 1.1 L'arborescence
   2. 1.2 Les éléments additionnels
   3. 1.3 La hiérarchie des éléments
2. 2. La manipulation
   1. 2.1 L'insertion
   2. 2.2 La suppression et le remplacement
   3. 2.3 Les opérations multiples
3. 3. Visibilité et positionnement
   1. 3.1 Le choix de la visibilité
   2. 3.2 Le positionnement
   3. 3.3 La troisième dimension
4. 4. Un outil de test
   1. 4.1 Les styles
   2. 4.2 Le code HTML
   3. 4.3 Le script
   4. 4.4 Les boutons de contrôle
   5. 4.5 Les boutons de positionnement
   6. 4.6 Le déplacement du panneau
   7. 4.7 Les tests

Plus loin dans les styles

1. 1. Les CSS approfondis
   1. 1.1 Les polices additionnelles
   2. 1.2 Les blocs arrondis
   3. 1.3 Les filtres
   4. 1.4 Un générateur automatique d'effets
   5. 1.5 les transformations
   6. 1.6 Le point de référence
   7. 1.7 Créer un titre
2. 2. Les animations
   1. 2.1 La roue qui tourne
   2. 2.2 Quelques variations
   3. 2.3 Des points qui tournent
3. 3. Un menu horizontal
   1. 3.1 Les styles
   2. 3.2 Le menu
   3. 3.3 La fonction principale

Le taquin

1. 1. Un petit jeu
   1. 1.1 Présentation
   2. 1.2 La feuille de style
2. 2. Le script
   1. 2.1 L’initialisation
   2. 2.2 Les événements
   3. 2.3 La fonction principale

Les formulaires

1. 1. Une application interactive
   1. 1.1 Les formulaires HTML
   2. 1.2 Les éléments input
   3. 1.3 Les champs select
   4. 1.4 Les zones de texte
   5. 1.5 Les attributs
2. 2. L'utilisation
   1. 2.1 L’accès aux éléments input
   2. 2.2 L’accès aux cases et aux boutons
   3. 2.3 L'affichage
   4. 2.4 Les formulaires jQueryUI
   5. 2.5 L'envoi de fichiers
3. 3. La validation des formulaires
   1. 3.1 Pour l'ergonomie et pour la sécurité
   2. 3.2 Des contrôles simples
   3. 3.3 Les expressions rationnelles ou régulières
   4. 3.4 Les autres contrôles
   5. 3.5 Le contrôle par le service web

Le service web

1. 1. Les formats de données
   1. 1.1 Présentation
   2. 1.2 XML
   3. 1.3 JSON
   4. 1.4 La conversion
2. 2. La communication client-serveur
   1. 2.1 AJAX
   2. 2.2 jQuery
   3. 2.3 Le service web
3. 3. Les services web publics
   1. 3.1 Un lecteur d'actualités
   2. 3.2 Les deux fonctions
   3. 3.3 Le service web PHP

Le serveur web

1. 1. Le côté serveur
   1. 1.1 Les choix
   2. 1.2 La base de données
   3. 1.3 Le code PHP
   4. 1.4 Les bases du SQL
   5. 1.5 Retour au webservice
2. 2. Le côté client
   1. 2.1 Un formulaire
   2. 2.2 L'écriture en base

Des formulaires interactifs

1. 1. Une classe dédiée
   1. 1.1 La création
   2. 1.2 La méthode get
   3. 1.3 La méthode set
   4. 1.4 Une mise en œuvre
2. 2. Un générateur de titre
   1. 2.1 Un outil utile
   2. 2.2 Les styles
   3. 2.3 Le formulaire
   4. 2.4 La police d’écriture
   5. 2.5 Ombrage et déformation
   6. 2.6 La couleur de fond
   7. 2.7 La mise en forme
   8. 2.8 Le calcul des alignements
   9. 2.9 Les transformations
   10. 2.10 La couleur
   11. 2.11 L’export du code

Les données locales

1. 1. Un stockage simple
   1. 1.1 Le stockage local
   2. 1.2 Les fonctions
2. 2. Une base de données locales
   1. 2.1 indexedDB
   2. 2.2 Le fonctionnement asynchrone
   3. 2.3 Lecture des données
   4. 2.4 Écriture et modification des données
   5. 2.5 La classe
3. 3. Un panier d'achats
   1. 3.1 Un exemple pratique
   2. 3.2 Le code
   3. 3.3 L’initialisation du programme
   4. 3.4 L’affichage du panier
   5. 3.5 Les gestionnaires d’événements
   6. 3.6 Le calcul du total

L'affichage adaptatif

1. 1. La mise en page
   1. 1.1 Le responsive design
   2. 1.2 Les découpages réguliers
   3. 1.3 Les découpages irréguliers
   4. 1.4 Les découpages sur plusieurs niveaux
   5. 1.5 Les pixels
   6. 1.6 Les points de rupture
2. 2. Le retour du menu
   1. 2.1 Une étape intermédiaire
   2. 2.2 Des règles distinctes
   3. 2.3 L'initialisation du menu
   4. 2.4 Les gestionnaires d'événements
   5. 2.5 Les derniers réglages
3. 3. La préparation de la mise en page
   1. 3.1 Le découpage
   2. 3.2 Les media queries
   3. 3.3 La mise en page JavaScript
   4. 3.4 L'impression
4. 4. La mise en page hiérarchisée
   1. 4.1 Les styles
   2. 4.2 Les règles média
   3. 4.3 L’impression
   4. 4.4 Le contenu
   5. 4.5 La mise en page dynamique
   6. 4.6 Le rendu final

Une WebApp complète

1. 1. La structure d'une WebApp
   1. 1.1 Le code HTML
   2. 1.2 La feuille de style
   3. 1.3 Le code JavaScript
2. 2. Un exemple utile
   1. 2.1 Création d'un compte utilisateur
   2. 2.2 La première étape
   3. 2.3 L’affichage en grille
   4. 2.4 L’envoi du formulaire
   5. 2.5 Envoi d'un mail de confirmation
   6. 2.6 Le mot de passe
   7. 2.7 Déconnexion
   8. 2.8 Connexion
   9. 2.9 L'affichage des erreurs
3. 3. La finalisation
   1. 3.1 Contrôler la sélection de texte
   2. 3.2 Éviter la fermeture de l'application
   3. 3.3 La publication de l'application
   4. 3.4 Installation
   5. 3.5 Pour conclure
6. Index