responsive et dynamique

Transcription

1 Apprendre à développer un site web responsive et dynamique avec PHP Julien GAMBELLI

2 Table des matières 1 Les éléments à télécharger sont disponibles à l'adresse suivante : Saisissez la référence ENI de l'ouvrage RIPHPRES dans la zone de recherche et validez. Cliquez sur le titre du livre puis sur le bouton de téléchargement. Chapitre 1 Introduction 1. Présentation Qu est-ce qu un site responsive? À qui s adresse ce livre? Description de cet ouvrage Mot de l auteur Chapitre 2 Initialisation : l'environnement de travail 1. Initialisation du serveur local Installation du serveur sur notre ordinateur Vérifier que tout fonctionne avec la phrase magique Pour aller plus loin : la configuration multisites Configuration du fichier httpd.conf Configuration du fichier httpd-vhosts.conf Configuration du fichier hosts de Windows Test

3 2 PHP Développer un site web responsive et dynamique Chapitre 3 Rendez intelligent votre site avec le langage PHP 1. Petit rappel sur le HTML Les bases Les balises à connaître Les nouveautés apportées par le HTML Les règles de base de la syntaxe PHP Les commentaires Les variables et constantes Les variables Les constantes L affichage de la valeur d'une variable Les tableaux Les opérations L'addition et la soustraction La division et la multiplication La concaténation Les comparaisons Les structures de contrôle et les boucles Les opérateurs logiques La condition if L'écriture minifiée Le else if Le switch case Les boucles Le while Le do-while Le for Optimisations

4 Table des matières 3 6. Les fonctions Notre première fonction La déclaration L'appel Les fonctions imbriquées Les fonctions utiles de PHP Include / Require Empty / Isset Les chaînes de caractères Les tableaux Les fonctions mathématiques Autres fonctions Les formulaires Le formulaire en HTML La balise form et l'url de destination Les zones de saisie et le bouton submit L'aide à la saisie Un exemple de formulaire La récupération des valeurs en PHP Les variables d'url L'organisation des pages L arborescence du répertoire Le.htaccess La directive RewriteRule La directive Password et le fichier.htpasswd Exercice pratique : créer un formulaire d'inscription Spécifications Correction de l'exercice Pour aller plus loin : les sessions Initialisation de la session Vérification et destruction de la session

5 4 PHP Développer un site web responsive et dynamique 11. Pour aller plus loin : mettre en place une API simple Côté serveur Côté client Chapitre 4 Les bases de données MySQL 1. Rappel sur les bases de données Les différents types de bases de données Les bases de données relationnelles La création de la base de données MySQL Les conventions Les types de champs Les types de données numériques La clause ZEROFILL Signé ou non signé Les nombres entiers Les nombres réels Les types de données de gestion du temps Les types de données de chaînes de caractères Les textes courts Les textes longs La création et l administration des tables Les clauses de manipulation des données L'insertion de données (INSERT) La modification de données (UPDATE) La suppression de données (DELETE) La clause de sélection des données La clause de sélection (SELECT) Les fonctions d'agrégation La sélection sans doublon Le renommage de champs

6 Table des matières Les clauses conditionnelles (WHERE et AND, OR,...) Les opérateurs de comparaison Les critères Les fonctions de tri (ORDER BY et GROUP BY) La fonction de tri (ORDER BY) Les fonctions d'agrégation (GROUP BY et HAVING) Les autres fonctions Les fonctions de chaînes de caractères Les fonctions de jointure Les fonctions de limitation de résultat L utilisation en PHP avec MySQLi La connexion, la déconnexion et les fonctions de base Exécution d une requête et récupération du résultat L exécution d une requête La récupération du résultat Exemples de miniprogrammes Chapitre 5 Sublimez votre site avec les feuilles de style CSS3 1. Introduction sur les feuilles de style La mise en place du CSS sur un site Internet Le code CSS La sélection basique et l application d un style à un composant La sélection avancée d un composant Les priorités Les différents formats des éléments Les couleurs Les unités de mesure

7 6 PHP Développer un site web responsive et dynamique 3.4 Les propriétés de base Les bordures Les polices Le type d'affichage (display) Les dimensions Le positionnement Les marges et espacements L'alignement horizontal L'alignement vertical D'autres propriétés Les animations Les transitions L'animation de composants La fonction debug des navigateurs La source de la page courante Les propriétés CSS Les contrôles Les paramètres d'affichage Les fonctionnalités L arborescence actuelle Pour aller plus loin : les sélecteurs before et after L incontournable : le site responsive Les media queries Les points de rupture La compatibilité des media queries L adaptation des contenus Les plugins responsive Bootstrap Materialize CSS

8 Table des matières 7 Chapitre 6 Boostez votre CSS avec Sass 1. Introduction à Sass L installation et la mise en place L installation du préprocesseur L installation par ligne de commande L installation par logiciel L organisation des fichiers La compilation La compilation par ligne de commande La compilation par logiciel Les variables Les règles imbriquées et les sélecteurs Les règles imbriquées Les sélecteurs Les fonctionnalités Les mixins L héritage Les fonctions supplémentaires Les opérations mathématiques La condition if Les boucles for Le langage Less

9 8 PHP Développer un site web responsive et dynamique Chapitre 7 Le petit plus : JavaScript et jquery 1. Rappel sur la POO (Programmation Orientée Objet) Les classes La visibilité Les attributs Les méthodes Le constructeur Les objets JavaScript La fonction de log et d alerte L interaction avec le HTML Les événements Les méthodes de récupération de données Les méthodes de modification de données Les autres méthodes Les variables Les valeurs numériques Les chaînes de caractères Les valeurs booléennes Les tableaux L initialisation d un tableau La récupération et l affectation de valeurs Les fonctions de tableau Les structures de contrôle La condition if Le switch case Les boucles La boucle while La boucle for La boucle do while Les boucles et les tableaux

10 Table des matières Les fonctions Introduction à jquery La mise en place de jquery La sélection d éléments La modification et l affichage de propriétés d éléments L affichage de propriétés et d éléments La modification des éléments Les formulaires Chapitre 8 Synthèse du livre 1. La mise en place de l environnement de travail Le site dynamique La base de données L apparence visuelle Le site responsive L ergonomie L hébergement web Exercice pratique Création de site Internet 1. Introduction Spécifications Les paramètres de base Les livres Les catégories Le compte client

11 10 PHP Développer un site web responsive et dynamique 2.5 Partie front Les URL Le référencement naturel Le menu Le footer La page d accueil La recherche L affichage d un livre La page de contact La page À propos Mon compte L enregistrement d un compte Les détails du compte L ajout d un livre Les messages d erreur Partie back Le menu La page d accueil Les fichiers L ajout et la modification d une catégorie Affichage de la liste des catégories L ajout et la modification d un livre Affichage de la liste des livres Correction de l exercice 1. Introduction La base de données Les champs Les liaisons

12 Table des matières Le site Internet L arborescence des fichiers La page d index et le fichier.htaccess Index.php htaccess Les includes constants.php header.php footer.php functions.php menu.php sql.php Le JavaScript L API Les pages home.php contact.php about.php list.php book.php register.php signin.php account.php addbook.php Sass main.scss _variables.scss _fonts.scss _mixins.scss _general.scss _menu.scss _texts.scss _forms.scss

13 12 PHP Développer un site web responsive et dynamique _animations.scss L interface d administration L arborescence des fichiers La page d index Les includes header.php menu.php footer.php Les pages home.php listbooks.php listcategories.php updatebook.php updatecategory.php Index

14 225 Chapitre 6 Boostez votre CSS avec Sass 1. Introduction à Sass Boostez votre CSS avec Sass Sass est un langage de génération de CSS, ce qu on appelle un préprocesseur. La première limite des CSS qui nous vient à l esprit est l inexistence des variables. Nous aurions bien aimé utiliser, par exemple, une variable «couleur» définie pour tout un site Internet. Ceci est possible avec Sass. L utilisation de Sass est invisible pour les internautes qui vont voir uniquement le CSS généré sur le site Internet. Le principal avantage de Sass est que la syntaxe est la même que CSS, à l exception des nouveautés qu'elle apporte (variables, fonctions), donc il n y a pas besoin de réapprendre tout pour commencer à travailler avec Sass!

15 226 PHP Développer un site web responsive et dynamique 2. L installation et la mise en place Pour commencer à utiliser Sass, il est nécessaire de télécharger un préprocesseur. À noter, ces préprocesseurs sont utiles pour minifier du code, c est-à-dire rendre le code dans sa forme la plus compacte possible (en supprimant les espaces et tabulations) pour le rendre le plus léger possible, mais pour le coup, illisible. Un code Sass va s écrire dans un fichier.scss. 2.1 L installation du préprocesseur Il y a deux manières de compiler du code Sass, la première est de le faire en ligne de commande (Cygwin pour Windows) et via le terminal pour Mac et Linux, la seconde est d utiliser un logiciel qui va le faire pour nous. Il n y a pas de meilleure méthode, utilisez simplement celle qui vous convient le mieux. Personnellement, je préfére la ligne de commande, car c est toujours plus flexible qu un logiciel L installation par ligne de commande Sous Windows, il suffit d installer Cygwin avec Ruby et Sass lors de l installation. Sous Mac et Linux, installez Ruby puis tapez la commande : gem install Sass Pour vérifier que Sass est bien installé, tapez la commande suivante : Sass -v Le numéro de version doit normalement être retourné. Editions ENI - All rights reserved

16 Boostez votre CSS avec Sass Chapitre L installation par logiciel Il existe un certain nombre de logiciels qui font tous plus ou moins de la compilation de fichier «.scss». L idée ici n est pas de faire un comparatif, mais de dresser une liste pour voir tout ce qui est disponible : CodeKit (Payant) Compass.app (Payant, open source) Ghostlab (Payant) Hammer (Payant) Koala (open source) LiveReload (Payant, open source) Prepros (Payant) Scout (open source) Pour information, Koala fonctionne très bien et fait ce qu'on lui demande. 2.2 L organisation des fichiers Pour plus de clarté, il est préférable de créer un fichier global qui recense tous les fichiers «.scss» du projet et ainsi, en sortie, il n y aura qu un seul fichier CSS généré et il sera possible de le compresser facilement. Il faut nommer chaque fichier «.scss» précédé d un «_», sauf pour le fichier global qui va réaliser les imports. Dans nos pages HTML, c est bien le fichier «.css» généré qu il faudra inclure et non pas les fichiers «.scss.». Pour importer un fichier «.scss», il faut utiliser la directive suivante "chemin vers le fichier"; Le chemin vers le fichier peut contenir le chemin relatif vers le fichier à importer.

17 228 PHP Développer un site web responsive et dynamique Remarque Il n est pas obligatoire dans l import de préciser «_» avant le nom du fichier ainsi que l extension «.scss». Par exemple, on souhaite avoir un fichier «main.scss» qui inclut les fichiers «form.scss» et «layout.scss» eux-mêmes situés dans un dossier «site» "site/layout.scss"; 2.3 La compilation Une fois que le logiciel de prétraitement est installé, il est maintenant possible de compiler les fichiers «.scss» pour en générer des fichiers «.css». Il n est pas nécessaire de lancer à la main à chaque fois la compilation des fichiers. Elle peut se faire automatiquement grâce à une directive watch qui va surveiller les changements d un dossier La compilation par ligne de commande Pour une compilation simple, il suffit de lancer la commande suivante : Sass fichier.scss:fichier.css Cette commande va donc, à partir d un fichier «fichier.scss», générer un fichier «fichier.css» et un fichier «fichier.map». Par exemple, on souhaite compiler le fichier «main.scss» en un fichier «main.css» situé lui-même dans un dossier «css» : Sass main.scss:css/main.css Ce qui est finalement assez rébarbatif car cela veut dire qu à chaque fois que l on fait une modification sur le fichier, il faut lancer la ligne de commande pour voir les modifications s afficher... Mais il y a une solution! Editions ENI - All rights reserved

18 Boostez votre CSS avec Sass Chapitre En effet, il est possible de surveiller un fichier ou un répertoire complet, et ainsi, dès qu une modification est faite sur un fichier, la compilation se lance toute seule. Pour cela, il suffit d ajouter l option --watch à la commande Sass : Sass main.scss:css/main.css --watch L option permet également de compiler au moment où la commande est lancée. Pour un dossier complet du dossier «Sass» vers «css» : Sass Sass:css Il est également possible de compresser le CSS en sortie avec l option --style compressed comme ceci : Sass main.scss:css/main.css --style compressed La compilation par logiciel En général pour le logiciel, il est nécessaire d aller chercher le dossier où se trouvent tous les fichiers Sass et d en compiler le principal. Lorsqu il est compilé, une directive watch est en général lancée sur le dossier ou une simple case à cocher le permet (compilation automatique). 3. Les variables Les variables représentent la fonctionnalité phare de Sass. Elles vont nous permettre de définir des valeurs qui seront répétées sur plusieurs composants et que l on n aura pas à réécrire à chaque fois. Pour définir une variable, il suffit d inscrire son nom précédé du sigle «$», un peu comme en PHP, sauf que l affectation se fait par «:» au lieu de «=» : $variablesass: valeur;

19 230 PHP Développer un site web responsive et dynamique Par exemple, on souhaite définir une couleur primaire et une couleur secondaire. On souhaite par la suite appliquer la couleur primaire aux titres et la couleur secondaire aux textes soulignés et en gras : _layout.scss : $primary-color: violet; $secondary-color: grey; h1 { color: $primary-color; } u { color: $secondary-color; } b { color: $secondary-color; } index.htm : <html> <head> <link href="css/main.css" rel="stylesheet"> </head> <body> <h1>ceci est un titre</h1> <p>ceci est un texte dont <u>cette partie</u> est soulignée</p> <p>voila un texte qui est <b>partiellement en gras</b></p> </body> </html> Ceci donne comme résultat : Editions ENI - All rights reserved