SOMMAIRE

TÉLÉCHARGEMENT DES OUTILS

Récupération du dossier de WordPress + XAMPP/MAMP

Ce sont essentiellement des serveurs web locaux préchargés avec tous les outils nécessaires pour optimiser ton expérience de développement web, y compris la prise en charge de langages de programmation tels que PHP.

 

En utilisant MAMP ou XAMPP, tu peux travailler sur tes projets directement depuis ton propre ordinateur, ce qui te permet de tester et d’ajuster ton site web avant sa mise en ligne. C’est un excellent moyen de t’assurer que tout fonctionne correctement à l’avance et d’éviter les éventuels bugs.

XAMPP / MAMP

Installer XAMPP/MAMP, le serveur web local

UAC

Lancer le fichier .EXE
Si cette fenêtre s'affiche, cliquez sur OK . Elle indique simplement que le controle des comptes de Windows peut venir interférer avec son fonctionnement

Composants XAMPP

Par défaut on peut laisser tout coché pour éviter d'enlever un élément important. Tu peux en apprendre plus sur les services en cliquant ci-dessous.
Détails des composants

Dossier d'installation

Lorsque tu installes XAMPP, il offre la possibilité de s'installer par défaut à la racine de votre disque dur. Cette option est fortement recommandée car elle permet une installation plus stable.

Installation - MAC

Sur MAC, rien de plus simple !
Une fois téléchargé, installes le logiciel normalement

Ouvrir l'application

Une fois installé , tu retrouveras le logiciel dans .
Finder > Applications > MAMP
Outil

Local for WordPress

Exit la gestion des services Apache , MySQL , ou de savoir si vous avez un MAC ou Windows : si vous avez un site WordPress à créer en local … eh bien choisissez Local !

Lire le focus

SERVEUR WEB

Découverte et configuration de XAMPP / MAMP

DOSSIER XAMPP - WINDOWS

Dans la fenêtre suivante (ci-contre), nous sommes dans le dossier xampp "C:/xampp".

Parmis tous les fichiers et dossiers , pour le moment seul le fichier "xampp-control.exe" nous intéresse. Double cliquez dessus pour afficher/lancer le panneau de contrôle de XAMPP. Si besoin, effectues un clic droit dessus et sélectionnes "Exécuter en mode administrateur"

PANNEAU DE CONTRÔLE DE XAMPP

Interface de base
Apache & MySQL
Configuration des services
Configuration de XAMPP
  • Interface de base

    Interface qui s'affiche lorsque l'on démarre XAMPP. On remarque plusieurs sections , dont celle permettant de lancer tous les modules un par un (Service, Modules, Ports, Actions) , la partie permettant d'accéder aux réglages des services et de XAMPP, puis une partie console qui rend compte des différentes actions du logiciel.

  • Apache & MySQL

    Les deux boutons Start permettent de lancer les services nécessaires au fonctionnement du serveur web. Au minimum on lance Apache (serveur web, interprétant le code) et MySQL (système de gestion de bases de données, pour permettre les échanges entre les base de données et les outils). Lancer XAMPP sans lancer ces services ne sert a rien, votre serveur ne fonctionnera pas

  • Configuration des services

    Les boutons Config sur chaque ligne permettent d'afficher un menu contextuel contenant les réglages en lien avec le module/service. Dans le menu de configuration de la ligne Apache on peut accéder aux fichier de configuration serveur ainsi qu'au fichier fichier de configuration du langage PHP

  • Configuration de XAMPP

    Permet d'accéder aux quelques réglages de XAMPP , dans lesquels on peut notamment choisir l'éditeur de texte qui sera ouvert par défaut pour éditer les fichiers de configurations, le navigateur par défaut pour les tests, et diverses options de fonctionnement (démarrage automatique des modules, démarrage de XAMPP avec l'ordinateur; etc....)

TEST LOCALHOST

Il faut maintenant tester que tout fonctionne bien. Pour se faire, se rendre dans un navigateur, et dans la barre de recherche d’URL saisir : 
http:// localhost/

TEST PHPMYADMIN

Il faut aussi tester phpMyAdmin en cliquant sur le bouton du menu “phpmyadmin” en haut à droite.

Si cela s’affiche comme ci-contre , tout est OK !

Pour accéder à phpMyAdmin, peut aussi simplement le rajouter à la suite du lien précédent :

http://localhost/ phpmyadmin

DOSSIER MAMP - MAC

Dans la fenêtre suivante (ci-contre), nous sommes dans le dossier mamp "Applications/MAMP/".

Parmis tous les fichiers et dossiers , pour le moment seul le fichier "MAMP" nous intéresse. Double cliquez dessus pour afficher/lancer le panneau de contrôle de MAMP.

PANNEAU DE CONTRÔLE DE MAMP

Sur le panneau, on doit démarrer les services de MAMP. L’interface est bien plus simple que sur XAMPP, ca l’on a pas besoin de gérer chaque service.

En cliquant sur “Start” , si tout se passe bien, MAMP vous ouvre un navigateur avec un onglet vous indiquant que tout fonctionne (cf. ci-après).

Une fois MAMP démarré, le bouton Start se transforme en bouton “Stop” pour ocuper le serveur web (cf. ci-contre).

TEST LOCALHOST

Il faut maintenant tester que tout fonctionne bien. Pour se faire, se rendre dans un navigateur, et dans la barre de recherche d’URL saisir : 
http:// localhost:8888/

TEST PHPMYADMIN

Il faut aussi tester phpMyAdmin en cliquant sur “Tools” en haut à gauche, puis sur “phpmyadmin

Si cela s’affiche comme ci-contre , tout est OK !

Pour accéder à phpMyAdmin, ont peut aussi simplement le rajouter à la suite du lien précédent :

http://localhost :8888/phmyadmin

CRÉATION DU SITE

Installation de WordPress

WINDOWS

Sur Windows et avec les réglages d'installation de XAMPP par défaut, le dossier racine du serveur web (là ou il faut placer nos fichiers de travail) est situé sur le disque système (C:\), plus précisément dans le dossier xampp.

Le chemin exact est : "C:\xampp\htdocs"

MACOS

Sur MACOS et avec les réglages d'installation par défaut, le dossier racine du serveur web (là ou il faut placer nos fichiers de travail) est situé sur le disque système (C:\), plus précisément dans ton dossier Applications.

Le chemin exact est : "Applications>MAMP>htdocs"
Étape 01

Télécharge WordPress.org

La première étape c'est de récupérer l'archive contenant tous les fichiers de votre futur site WordPress. Fait bien attention de te rendre sur wordpress.org et non pas wordpress.com

Télécharges WordPress
Étape 2

Contenus dans le dossier htdocs

Une fois l'archive téléchargée, il reste a transférer (décompressé) son contenu dans le dossier htdocs de xampp ou de mamp (cf. visuel)

Étape 03

Début de l'installation de WordPress

Une fois les contenus dans le dossier htdocs , ouvre ton navigateur et rends toi sur ton URL locale (localhost/ sur Windows localhost:8888/ sur MAC). Si cela ne marche pas , vérifies bien que ton chemin est bon et que le nom derrière le slash est bien le nom du dossier wordpress dans htdocs

Adresse locale (Windows)

BASE DE DONNÉES

BDD de WordPress - Préparation

Informations base de données

L’écran ci-contre te demandes les informations nécessaires à la création de la base de données de ton site WordPress.

 

Laisses ouvert  cet onglet de WordPress et ouvres un nouvel onglet pour y taper “localhost/phpmyadmin” car il faut auparavant créer la structure de la base de données que WordPress remplira avec ces données. 

phpMyAdmin

phpMyAdmin est un outil d'administration gratuit et open source pour MySQL et MariaDB.

En tant qu'application web portable écrite principalement en PHP, il est devenu l'un des outils d'administration MySQL les plus populaires, notamment pour les services d'hébergement web.

Le terme application web portable désigne le fait que c'est une application qui n'est pas intégré au coeur des outils comme XAMP/MAMP. En clair , on peut installer phpMyAdmin sans serveur web et vice-versa

Tu vas créer une nouvelle base de données en cliquant sur le lien à gauche “Nouvelle base de données”. Dans les deux nouveaux champs : 

  • Nom de la base de données : nom de votre choix, qu’il faudra garder précisément (éviter les symboles, les majusucles et les espaces)   
  • Interclassement : choisir utf8mb4_general_ci , cela correspond notamment à l’encodage des accents et caractères spéciaux 

Une fois les champs renseignés cliques sur “Créer”.

Une fois créée, ont peut fermer l’onglet phpmyadmin et revenir sur l’onglet WordPress.

Information à copier
nom de la base de données
  • Database Name

    Nom de la base de donnée ou les données de WordPress seront stockées

  • Username

    Nom de l'utilisateur MySQL , qui sera utilisé pour effectuer les actions dans la base

  • Password

    Mot de passe de l'utilisateur ci-dessus

  • Database Host

    Adresse du serveur qui héberge la base de donnée (dans la plupart des cas on laisse en "localhost" ce qui indique que la base de données est située au même endroit que notre serveur web).

  • Table prefix

    Préfixe qui sera utilisé pour identifier les tables appartenant a WordPress dans votre base. Par défaut on peut laisser "wp_" mais par mesure de sécurité il est bon de le changer.

Informations site WordPress

L’écran ci-contre vous demande les informations nécessaires à la création du site WordPress.

Toutes ces informations sont modifiables après l’installation , aussi si tu fait une erreur , pas panique.

Les seules valeurs a vraiment renseigner avec soin sont : identifiant et mot de passe .

  • Titre du site

    Contenu qui sera affiché dans l'onglet du navigateur lors de la navigation sur le site.

  • Identifiant

    Identifiant qui sera utilisé pour se connecter au back-end (tableau de bord) de votre site WordPress

  • Mot de passe

    Mot de passe pour l'utilisateur ci-dessus

  • Votre e-mail

    Adresse mail servant notamment a récupérer votre mot de passe en cas d'oubli. Elle peut servir également pour WordPress afin de vous envoyer des notifications liées à votre site. À noter qu'elle ne fonctionne pas en local (avec XAMP/MAMP) !

  • Visibilité moteur de recherche

    Cette case à cocher sert a demander à WordPress de bloquer au maximum le référencement de ton site. Cela peut être utile dans différents cas.

Une fois les informations renseignées, cliques sur “Installer WordPress” pour valider.

À partir d’ici tu peux aller vérifier dans phpMyAdmin que tes tables ont bien été créées :

Après l’installation côté WordPress, on peut revenir dans cet outil pour vérifier que la base de données est créée.

 

On voit que toutes les tables on bien été créées. On peut remarquer que ce sont bien des tables WordPress via le préfix “wp_“. Lors de la configuration de WordPress , rappelles-toi que l’on a pu choisir les préfixes des tables :

 

Si à cet endroit on choisit par exemple “mds_” , dans la base de données toutes les tables “wp_****“, apparaitront en “mds_******

OU

HÉBERGEUR + FTP

Hébergeur Web + échange de fichiers

Les hébergeurs web sont multiples et proposent tous plus ou moins la même offre de service.

Certains ont des particularités, c’est le cas de PlanetHoster, O2Switch qui proposent des hébergements en France, alimentés par de l’énergie renouvelable.

Migrer manuellement son site WordPress

Peut importe l'hébergeur choisi, si tu souhaite déplacer ton site WordPress de l'un à l'autre , tu peux procéder de différentes façons.

En savoir plus

QUIZZ DE CONNAISSANCES

Test tes connaissances sur le sujet du cours

Tapes ta recherche puis appuie sur Entrée (↵)

Pas d'autocomplétion, mais pourquoi ?

L’autocomplétion dans un formulaire de recherche consiste à proposer des mots clés, des résultats, à chaque lettre écrite dans le champ. 

Oui cela est pratique, mais en terme de consommation de ressources c’est très gourmand ! Aussi, dans un soucis d’écoconception, ce formulaire de recherche ne régira pas à vos interactions en temps réel, mais il fonctionne quand même !

Bonne pratique n°4 du guide de l’éco-conception web

Quizz - Deploiement de WordPress

SOMMAIRE
SOMMAIRE

COMPOSANTS XAMPP

APACHE

Serveur web, c’est le logiciel le plus répandu pour les serveur. Fonctionne sur les système UNIX et Windows. Il sert notamment à interpréter les langages serveur.

MYSQL

Système de gestion de base de données (SGBDR). C’est le langage qui gère tout ce qui touche aux données.

FILEZILLA FTP SERVER

Système permettant de transférer des données rapidement depuis un ordinateur vers un serveur distant (FTP => File Transfer Protocol)

MERCURY MAIL SERVER

Serveur de messagerie open-source. Ce composant est toujours fonctionnel mais la technologie est assez vieillissante. On ne s’en sert que rarement.

TOMCAT

Serveur web, un confrère de Apache mais écrit en Java et non en PHP.

FAKESENDMAIL

Permet de simuler un système d’envoi de mail en local. Pas forcément indispensable, mais toujours utile à installer si l’on veut un jour envoyer des mails (formulaires, etc …)

PHP

Installation du langage PHP, nécessaire au fonctionnement d’Apache et de la plupart des sites et outils (ex : WordPress)

PERL

Installation du langage Perl, très vieux langage de programmation. Le plus souvent inutile dans la plupart des projets web

PHPMYADMIN

Outil de gestion graphique des bases de données. Il est  quasi indispensable, pour gérer rapidement et efficacement ces base de données.

WEBALIZER

Outils d’analyse des serveurs web. Permet de générer des logs (journaux) d’utilisations.

ATTENTION A TA SANTÉ

Tu ne semble pas avoir bougé depuis
MIN
0

N’hésites pas à lever les yeux , à regarder un peu “au loin” pour les soulager.

Également, n’hésites pas à t’étirer le cou et le dos en suivant quelques gestes simples.