Bilan_A_Retenir_R211_2024_03_05_pagine.pdf

Petit Bilan R211 – Ce qu’il faut retenir Compréhension de la « structure » d’un site Web repérer les couches logicielles  3 Couches logicielles : Client, Serveur de traitement, et Serveur de données les 3 sur la même machine ou sur des machines différentes  développement local : sur...

Petit Bilan R211 – Ce qu’il faut retenir Compréhension de la « structure » d’un site Web repérer les couches logicielles  3 Couches logicielles : Client, Serveur de traitement, et Serveur de données les 3 sur la même machine ou sur des machines différentes  développement local : sur la même machine qui n’est pas forcément en réseau  chaque couche échange des demandes et des réponses avec la (ou les) couches voisine(s) 1 Pour en savoir plus https://fr.wikipedia.org/wiki/Mod%C3%A8le-vue-contr%C3%B4leur#Diff%C3%A9rence_avec_l'architecture_trois_niveaux_(3-tiers) 2 Dans une application Web (Par Benoît Prieur — Travail personnel, CC0, https://commons.wikimedia.org/w/index.php?curid=859 96118 3 Le site Web côté Client  résultat de l’exécution du code source dans le navigateur  interface où ont lieu les interactions avec l’utilisateur (IHM) => développé avec les méthodes et langages du développement Front End par exemple html, css, js,... 4 Le site Web côté Serveur  code source qui définit les réponses à afficher en fonction des demandes de l’utilisateur  2 serveurs : serveur de traitement et serveur de données  développés avec les méthodes et langages du développement Back End par exemple php, pour le serveur de traitement, et sql, pour le serveur de données (modèle relationnel) 5 Installation et démarrage d’un serveur local Avoir un serveur WEB de type LAMP sur sa machine - LAMP : Linux, Apache, Mysql, PHP - Linux : système d’exploitation - Apache : le serveur web à proprement parler - MySql : un outil de gestion de base de donnée - PHP : un langage de script côté serveur - Permet de simuler un serveur WEB - Comme chez un hébergeur - Prévisualisation des modifications - Evite les mises en ligne coûteuses en temps 6 Installation et démarrage d’un serveur local Il existe plusieurs solutions - MAMP multiplateforme : La solution que nous recommandons - WAMP pour Windows https://www.wampserver.com/ - XAMPP Multiplateforme, une bonne alternative - uWamp pour micro WAMP solution légère mais moins complète uWamp 7 Installation et démarrage d’un serveur local ATTENTION Si le.s serveur.s ne sont pas installés ou à l’arrêt => impossible d’exécuter les codes sources => le client affichera une page d’erreur ou le code édité (de la même manière qu’un éditeur de texte) 8 Installation et démarrage d’un serveur local MAMP signifie - macOS (Le système d’exploitation) mais il fonctionne aussi avec Windows - Apache (Le serveur WEB) mais l’on peut aussi utiliser NGINX - MySQL ou MariaDB (Les systèmes de gestion de base de données) - PHP, Perl, ou Python (Les langages de développement utilisés pour le WEB) MAMP existe en version PRO, Nous utilisons la version standard 9 Installation et démarrage d’un serveur local Pour installer MAMP (Attention, vous devez être administrateur de la machine) - Télécharger la version adaptée à votre OS - Double-cliquer sur le fichier pour lancer l’installation Pour lancer MAMP Double cliquer sur l’application installée Si les serveurs ne démarrent pas => en général un souci sur les “ports” (l’un des principaux problèmes rencontrés) N.B. Pour WAMP il y a plus d’étapes préalables, expliquées dans la documentation => bien suivre les consignes d’installation pas à pas 10 Serveur(s) Apache et MySQl : interfaces MAMP : Interface de contrôle => État des serveurs, voyants verts = fonctionnent => Bouton marche / arrêt des serveurs 11 Serveur(s) Apache et MySQl : interfaces MAMP : Open Web Start Page => Page de démarrage qui s’ouvre dans le navigateur et donne - Les infos utiles pour l’administration tels que la version de php, les ports par défaut pour chacun des serveurs (configurables en paramètres) identifiant et mot de passe de connexion à la base de données … - Le lien pour démarrer phpMyAdmin l’interface d’administration des bases de données 12 Serveur(s) Apache et MySQl : interfaces MAMP : Open Web Start Page Pour + d’infos : la doc. https://documentation.mamp.info/ 13 Serveur(s) Apache et MySQl : interfaces phpMyAdmin => Interface d’administration des bases de données (s’ouvre dans le navigateur par défaut) 14 Serveur(s) Apache et MySQl : Dossiers et Fichiers MAMP : Où mettre les fichiers ? htdocs (ou www, selon les outils) - Sur les macsOS : /Applications/MAMP/htdocs - Sur les Windows : dans le répertoire htdocs là ou vous avez installé l’appli Cette configuration est modifiable - Depuis les préférences 15 Serveur(s) Apache et MySQl : Dossiers et Fichiers - Vous disposez de plusieurs solutions pour déployer un serveur - Avec MAMP - Mettez vos document dans le dossier htdocs - Le login et le mdp de la BDD sont : root/root - Avec les autres - Suivant l’outil le répertoire sera “WEB” ou “WWW” - Les logins et mdp pourront être : root/”vide” ou autre… - Il y a de nombreux sites sur internet pour chacun des outils 16 1 - Obtenir l’archive de WordPress WordPress est libre et gratuit - Vous pouvez le télécharger sur wordpress.org - Procurez vous toujours la dernière version (question de sécurité) - Une fois l’archive.zip obtenue - Decompressez (dezipper) le fichier sur votre ordinateur - Vous obtenez un dossier “wordpress” - Renommez ce dossier “monjolisite” - Ou “monjolisite” pourra être tout sauf “wordpress” ;-) - Le dossier contient 16 fichiers et 3 dossiers 17 Déposez les fichiers Le dossier complet de WordPress doit être déposé sur le SERVEUR local (pour le moment, nous travaillerons en local, pour l’installation rapide de Wordpress chez un hébergeur encore un peu de patience…) Pensez à vérifier la compatibilité de version php entre Wordpress et votre serveur - Si vous utilisez MAMP en local - Déposez le dossier “monjolisite” au sein du dossier “htdocs” - Attention - C’est bien un dossier contenant les 16 fichiers et 3 dossiers - Nommez le dossier “monjolisite” en fonction de votre projet - Pour la suite nous appellerons ce dossier “monjolisite” 18 Création de la base de Donnée Pour fonctionner WordPress nécessite une BASE DE DONNEES - Créons une base de donnée avec phpMyAdmin - phpMyAdmin est accessible depuis la page de lancement de MAMP - Pour lancer phpMyAdmin vous devrez peut être indiquer - Le login et le mot de passe (pour MAMP) : root/root - Pour créer la base : indiquez un nom (conseil : Même nom que le projet) - Dans l’onglet “database” - Database name : monjolisite - Cliquer sur create 19 Installation - Nous avons mis les fichiers sur le serveur - Nous avons créé une base de donnée Lançons l’installation - Faites pointer votre NAVIGATEUR vers - http://localhost/monjolisite - Devrait apparaître une liste de langue - Choisissez le français puis cliquez sur “Continue” 20 Installation : Configuration de la connexion Il faut 4 informations - Le nom de la base : monjolisite - login / mdp : root/root - Le nom du serveur : localhost - On ne touche pas À _wp VALIDER 21 Installation : nous y sommes presque ! Si tout a été bien saisi : bravo ! - Lancer l’installation Si cela n’a pas fonctionné - Vous avez fait une faute de frappe - Vous vous êtes trompé de login, de mdp, de serveur ou de nom de base - Votre serveur est arrêté - Recommencer 22 Remplissez ! 23 Entrons dans WordPress - Notez bien votre identifiant - Rappelez vous votre MDP Connectez vous 24 L’interface d’admin : Back Office Félicitations ! Vous avez installé WordPress Sur votre serveur local Pensez à la maintenance et la sécurité Bonne publication 25 Dans le navigateur Le Site Apparaît avec le thème par défaut (TwentyTwentyThree) 26 Utilisation d’un Autre Thème Nous avons sélectionné, ajouté et activé Astra dans le Back Office de Wordpress Et 1 modèle de démarrage 27 Utilisation d’un Autre Thème L’installation de modèle de démarrage est aussi accessible ici dans Astra 28 Utilisation d’un Autre Thème Le Site Apparence après installation du thème Astra + Thème de démarrage 29 Personnalisation Plusieurs niveaux de réglages : - Généraux dans l’espace d’admin de Wordpress - Généraux dans la personnalisation au niveau du thème Astra - Dans la personnalisation du modèle de démarrage dans Astra - Avec l’éditeur de bloc (Choix de Gutenberg, l’éditeur natif dans WordPress) 30  Il y a beaucoup de documentation Personnalisation et de tutoriaux sur internet pour chacun Apprendre à formuler les recherches Plusieurs niveaux de réglages : Mots-clés et prompts bien ciblés - Généraux dans l’espace d’admin de Wordpress - Généraux dans la personnalisation au niveau du thème Astra - Dans la personnalisation du modèle de démarrage dans Astra - Avec l’éditeur de bloc (Choix de Gutenberg, l’éditeur natif dans WordPress) 31 Réflexion sur les contenus Trouver le compromis entre les souhaits de la maquette et les contraintes du CMS - Réglage des couleurs, typographies, changement du logo… - Réglage de la position des éléments dans les différentes parties du site - Entête / header, Barre latérale / side bar, Pied de page / footer, page elle-même … - Arborescence et menus Choix selon le caractère statique ou dynamique des contenus ! Page ou article ?? 32 WordPress est un CMS Content Management System : Système de Gestion de Contenu Ses fonctions principales - Permettre la saisie de contenu facilement - Permettre la modification de l’aspect (sans changer le contenu) - Permettre l’adjonction de fonctions (Plugins) Accessoirement, WordPress Permet d’écrire son propre modèle de contenu Le THEME 33 Votre Propre WordPress à distance La plupart des hébergeurs proposent une installation simplifiée de WordPress - Infomaniak, OVH, ionos et de nombreux autres (sinon formation installation) Suivez le processus d’installation simplifié - Choisissez un nom pour votre site - Choisissez un nom de propriétaire (administrateur...admin) - Choisissez un mot de passe (solide) - Indiquez votre adresse mail ET VOILA ! 34 Les Contenus WordPress Manipule de base 4 types de contenu - Les Articles (post) - Les Pages (page) - Les Commentaires (comment) - Les Média attachés (attachement) - Il existe également (les dates, les auteurs, les catégories et les tags) WordPress autorise la création de vos propres Types de Contenu Custom Post Type 35 Les deux faces de WordPress A l’issue de l’installation wordpress présente Un contenu minimal : 1 article, 1 commentaire, 1 page et le thème de l’année (twentytwentyfour) Sur Le FrontOffice (localhost, dans les tps précédents) C’est la partie présentée à vos lecteurs, Il est possible de lire mais pas de modifier Pour passer du FrontOffice au BackOffice https://LeNomDeVotreSite/wp-admin Sur Le BackOffice Les boutons de l’espace admin de WP C’est la partie réservée aux administrateurs Il est possible de TOUT modifier 36 Les articles La base de WordPress, Le premier type de contenu utilisé par le moteur de blog - Un titre - Un contenu Caractère dynamique - Un auteur Mise en avant - Une date de publication Filtrage Archivage… - Des catégories - Des tags Notion de liste et de single 37 Gutenberg Le “nouvel” outil de publication de WordPress Il est wysiwyg (What You See Is What You Get) Il est très permissif, et accorde aux usagers la possibilité de modifier - Les polices - Les couleurs - Les mises en forme de paragraphe 38 Les pages Une page est un contenu “statique” de WordPress C’est un contenu qui n’est pas fait pour évoluer beaucoup au cours de temps. Une page contient - Un titre - Un contenu 39 Les média Un média est un contenu qui peut être attaché à un article ou à une page - Les images - Les vidéos - Les fichiers au format PDF - Tout autre type de fichier Les média sont gérés dans une galerie de WordPress Permettant leur téléchargement, leur nommage et étiquetage Il est également possible de faire des retouches basiques 40 Les commentaires Les commentaires sont principalement ajoutés depuis le front office Il est nécessaire de les gérer au sein du back office - Validation - Suppression - Modification 41