La nouvelle version de taiga.io avec docker inclus un installateur bien simplifié.
Il me parait utile d’y ajouter simplement l’authentification OTP qui permet d’accepter le mot de passe ajouté avec 6 chiffres calculé par l’horloge à partir d’un code. Vous trouverez des explications sur ce processus dans cet article: https://en.wikipedia.org/wiki/One-time_password
Le seul fichier à éditer pour inclure l’OTP dans taiga est le fichier /taiga-back/taiga/users/services.py dans le containeur taiga-docker_taiga-back_1.
En premier lieu, il faut ajouter au containeur taiga-docker_taiga-back_1 le module pyotp:
Nous pouvons donc éditer le fichier services.py pour y adjoindre et modifier le programme, en premier lieu en important le module pyotp avant toutes les fonctions:
import pyotp
Puis on va chercher la fonction get_and_validate_user qui a cette forme:
def get_and_validate_user(*, username: str, password: str) -> bool:
"""
Check if user with username/email exists and specified
password matchs well with existing user password.
if user is valid, user is returned else, corresponding
exception is raised.
"""
user = get_user_by_username_or_email(username)
if not user.check_password(password) or not user.is_active or user.is_system:
raise exc.WrongArguments(_("Username or password does not matches user."))
return user
Nous allons ajouter l’extraction des 6 derniers symboles du mot de passe pour trouver le code PIN à valider par OTP avec le code fourni en paramètre. Donc la nouvelle version de la fonction get_and_validate_user
def get_and_validate_user(*, username: str, password: str) -> bool:
"""
Check if user with username/email exists and specified
password matchs well with existing user password.
if user is valid, user is returned else, corresponding
exception is raised.
"""
user = get_user_by_username_or_email(username)
"""
PJE verification OTP
"""
totp = pyotp.TOTP("base32secret3232")
passwordPIN = password
password = passwordPIN[:-6]
pin = totp.verify( passwordPIN[-6:] , valid_window=2 )
if pin is False:
raise exc.WrongArguments(_("Username or password does not matches user PIN."))
"""
/ PJE verification OTP
"""
if not user.check_password(password) or not user.is_active or user.is_system:
raise exc.WrongArguments(_("Username or password does not matches user."))
return user
En incluant dans la fonction d’authentification, l’extraction des 6 derniers symboles fournis par l’utilisateur, on peut ajouter une authentification avec code OTP. On note une nouvelle exception envoyé par le serveur en cas d’erreur sur le code PIN.
NOTA: je pensais avoir un problème de Timezone dans le containeur mais au final, je pense que c’est valide comme installation. J’ai testé quelques solutions de changement dans le containeur de timezone mais finalement je pense que je peux aussi m’appuyer sur l’argument for_time de la fonction verify : https://pyauth.github.io/pyotp/_modules/pyotp/totp.html#TOTP.verify
Je trouve très pratique pour définir les entités l’outil en ligne de Jhipster JDL-Studio.
Prenons une application avec plusieurs liaisons OneToMany d’une liste de recette dont chaque recette a une liste de commentaires et une liste d’ingrédients.
À partir du fichier jhipster-jdl.jdl téléchargé depuis le JDL Studio, je souhaite fabriquer les entités en Java pour les intégrer dans un développement.
Je n’ai pas trouvé toutes les options d’automatisation, mais en ligne de commande après avoir installé Jhipster, on peut lancer les 2 lignes suivantes dans un dossier contenant le fichier jhipster-jdl.jdl.
La première permet de fabriquer le projet en répondant à 8 questions par validation automatique.
Les questions seront validées par la touche « entrée » automatiquement :
? What is your default Java package name? com.mycompany.myapp
? Which *type* of database would you like to use? SQL (H2, PostgreSQL, MySQL, MariaDB, Oracle, MSSQL)
? Which *production* database would you like to use? PostgreSQL
? Which *development* database would you like to use? H2 with disk-based persistence
? Which cache do you want to use? (Spring cache abstraction) Ehcache (local cache, for a single node)
? Do you want to use Hibernate 2nd level cache? Yes
? Would you like to use Maven or Gradle for building the backend? Maven
? Which other technologies would you like to use?
La seconde commande va fabriquer les entités en Java depuis le fichier jhipster-jdl.jdl :
jhipster jdl jhipster-jdl.jdl --skip-client
Repondez-yes aux 2 questions d’overwrite sans inquiétudes, nous n’allons pas exploiter d’autres fonctions que la génération des entités.
Vous trouverez dans le dossier src/main/java/com/mycompany/myapp/domain/ les fichiers java des entités avec les liaisons réalisées et les propriétés créées.
Il s’agit d’une utilisation d’une toute petite fonctionnalité de Jhipster mais je trouve cela très pratique.
La gestion de l’upload de fichiers images dans Springboot s’appuie sur plusieurs classes et fichiers.
FileUploadController agit comme un contrôleur qui va recevoir la demande d’upload de fichier (via l’url /upload) et la demande d’afficher l’image ( via l’url /files/{filename:.+} ). nCette classe contient une référence sur une classe FileSystemStorageService implementant l’interface StorageService.
StorageService est une simple interface qui permet de définir les actions classiques d’un service Spring de stockage.
FileSystemStorageService implémente de façon réelle l’interface StorageService pour la gestion du lieu de stockage des fichiers. Par ailleurs, pour une raison de sécurité, on peut stocker les fichiers uploadés dans un dossier dont l’accès est protégé pour éviter l’upload de fichiers critiques sur le serveur en devinant l’URL.
upload.html est un fichier gérant le formulaire HTML permettant d’envoyer un fichier simplement sans javascript encore une fois pour simplifier cet exemple.
Après les liaisons entre les fichiers, voici le contenu très simplifié de ces derniers:
L’upload d’un fichier image se fait vers le contrôleur FileUploadController via l’action /upload, cette classe permet aussi l’affichage d’une ressource image dans le navigateur (il manque la gestion des exceptions à coder en plus) :
@Controller
public class FileUploadController {
// Service spring de stockage des fichiers
private final StorageService storageService;
// Constructeur de la classe avec l'activation du service
@Autowired
public FileUploadController(StorageService storageService) {
this.storageService = storageService;
}
@GetMapping("/files/{filename:.+}")
@ResponseBody
public ResponseEntity<Resource> serveFile(@PathVariable String filename) {
Resource file = storageService.loadAsResource(filename);
String mimeType = URLConnection.guessContentTypeFromName(file.getFilename());
long contentLength = 0;
try {
contentLength = file.contentLength();
} catch (IOException e) { }
InputStream fileInputStream = null;
try { fileInputStream = file.getInputStream();
} catch (IOException e) {}
return ResponseEntity.ok().contentLength( contentLength )
.contentType(MediaType.parseMediaType( mimeType ))
.body(new InputStreamResource( fileInputStream ));
}
//Upload d'un fichier
@PostMapping("/upload")
public String handleFileUpload(@RequestParam("file") MultipartFile file, RedirectAttributes redirectAttributes) {
storageService.store(file);
return "redirect:/";
}
}
L’interface StorageService permet de définir les méthodes à implémenter par FileSystemStorageService.
Enfin la classe FileSystemStorageService permet de créer un service qui va stocker les fichiers dans un dossier ./Stockage dans le projet Spring (la gestion des exceptions est à coder en plus):
@Service
public class FileSystemStorageService implements StorageService {
private final Path rootLocation;
@Autowired
public FileSystemStorageService() {
this.rootLocation = Paths.get("./Stockage/");
}
@Override
@PostConstruct
public void init() {
try {
Files.createDirectories(rootLocation);
} catch (IOException e) {}
}
@Override
public String store(MultipartFile file) {
String filename = StringUtils.cleanPath(file.getOriginalFilename());
try {
if (file.isEmpty()) {}
if (filename.contains("..")) { }
try (InputStream inputStream = file.getInputStream()) {
Files.copy(inputStream, this.rootLocation.resolve(filename), StandardCopyOption.REPLACE_EXISTING);
}
} catch (IOException e) { }
return filename;
}
@Override
public Stream<Path> loadAll() {
try {
return Files.walk(this.rootLocation, 1).filter(path -> !path.equals(this.rootLocation)).map(this.rootLocation::relativize);
} catch (IOException e) { return null; }
}
@Override
public Path load(String filename) {
return rootLocation.resolve(filename);
}
@Override
public Resource loadAsResource(String filename) {
Path file = load(filename);
Resource resource = null;
try {
resource = new UrlResource(file.toUri());
if (resource.exists() || resource.isReadable()) {
return resource;
} else {
System.out.println("File not found " + filename);
}
} catch (MalformedURLException e) { }
return resource;
}
@Override
public void deleteAll() {
FileSystemUtils.deleteRecursively(rootLocation.toFile());
}
}
Le code du contrôleur FileUploadController permet d’afficher le fichier image dans le navigateur, si on souhaite proposer en téléchargement un fichier, la méthode serveFile doit être modifiée:
Pourtant, on pourrait vouloir faire un log de cet appel en ajoutant classiquement un logger au sein de cette méthode listeTodos() sauf que le principe de la programmation par Aspect est de sortir cette partie technique en proposant l’interception de l’appel de cette méthode listeTodos avec un code qui s’exécute avant et/ou après l’appel à listeTodos.
De manière concrète on a cet enchainement :
Appel à une méthode technique avant listeTodos
Appel à listeTodos
Appel à une méthode technique après listeTodos (optionnel)
En premier lieu, il faut ajouter sur la méthode principal l’ajout des fonctionnaltiés de programmation par Aspect:
@SpringBootApplication
@Configuration
@EnableAspectJAutoProxy
public class DemoApplication {
}
Ensuite, il faut coder une classe qui va assurer l’interception avant et après dans cet exemple avec les critères d’interceptions :
@Component
@Aspect
public class RestLogAspect {
@Around("execution(* fr.ema.ceris.todo.demo.TodoControleur..*(..)) && @annotation(org.springframework.web.bind.annotation.RequestMapping)")
public Object restLog(ProceedingJoinPoint joinPoint) throws Throwable {
// Partie @Before
Object returnValue = null;
Throwable throwable = null;
try {
System.out.println("Appel à TodoControleur avant");
returnValue = joinPoint.proceed();
System.out.println("Appel à TodoControleur après");
} catch (Throwable throwable1) {
throwable = throwable1;
System.out.println(String.format("[RestLogAspect] : %s", throwable1.getMessage()));
}
//Partie @After
return returnValue;
}
}
L’annotation @Around indique que l’appel à cette méthode sera fait avant et après les méthodes ayant les 2 critères suivants (notation && entre les 2 critères) :
execution(* fr.ema.ceris.todo.demo.TodoControleur..*(..)) : une classe se trouvant dans ce package avec ce nom de classe
@annotation(org.springframework.web.bind.annotation.RequestMapping), une annotion de type RequestMapping
Messages de la console :
Appel à TodoControleur avant
listeTodos
Appel à TodoControleur après
Nous avons donc un affichage des messages dans la console avant et après l’appel à la méthode listeTodos ce qui permet d’instrumentaliser le code fonctionnel par un code technique.
La valeur de la variable returnValue est aussi le résultat de l’appel à la fonction listeTodos donc le contenu json de la variable que l’on pourrait donc formater ou compresser avant renvoi vers la partie front du site web.
On aurait aussi pu utiliser l’annotation @Before à la place de l’annotation @Around pour avoir une exécution avant la méthode listeTodos et/ou l’annoation @After pour avoir une exécution après la méthode listeTodos. L’annotation @Around est un excellent exemple car elle permet de disposer des effets avant et après l’appel.
Dans la suite de l’article sur « Ligne de commande pour recharger une page Chrome« , j’ai eu l’objectif d’utiliser Visual Code pour lancer xdebug avec le langage de programmation PHP et avoir l’auto refresh de Chrome lié avec la sauvegarde d’un fichier dans Visual Code.
Etape 1 : xdebug
Xdebug doit être configuré et installer dans Wamp et l’édition du fichier php.ini d’Apache de l’outil Wamp devrait contenir ce genre d’informations
[xdebug]
zend_extension="c:/Developpement/wamp64-3.2.3/bin/php/php7.4.9/zend_ext/php_xdebug-2.9.6-7.4-vc15-x86_64.dll"
;PJE xdebug.remote_enable = off
xdebug.remote_enable=1
Notez que je vous propose d’utiliser le « remote debug » de xdebug. Bien sûr, dans l’affichage de la page phpinfo, il faut vérifier que l’extension xdebug est bien activé :
Plus bas dans cette page on pourra vérifier que xdebug a les bons réglages dans la partie qui est dédié à xdebug.
Information que xdebug est actif dans la page phpinfo
Nous partons du principe que dans le dossier www de Wamp se trouve un sous-dossier dans lequel notre développement sera réalisé.
Pour éviter d’utiliser un fichier tasks.json, j’ai préparé une double configuration dans le fichier launch.json a créé dans le dossier de travail de notre projet. Ce fichier doit permettre d’indiquer à la fois à Visual Code d’écouter les appels de xdebug pour un débogage et de lancer un navigateur chrome avec les options de débogage à distance pour relancer l’affichage de la page en cas de modificaiton du programme php, d’une page html ou d’un fichier CSS ou Javascript.
Le fichier launch.json dont on modifiera les chemins de Chromium et l’URL d’appel en fonction des besoins du projet Web:
{
// Utilisez IntelliSense pour en savoir plus sur les attributs possibles.
// Pointez pour afficher la description des attributs existants.
// Pour plus d'informations, visitez : https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Chromium",
"program": "C:/Users/pierre.jean/AppData/Local/Chromium/Application/chrome.exe",
"runtimeArgs": [
"--disable-web-security",
"--auto-open-devtools-for-tabs",
"--remote-debugging-port=9222",
"http://127.0.0.1/${workspaceFolderBasename}/${relativeFile}?XDEBUG_SESSION_START"
],
"webRoot": "${workspaceRoot}"
},
{
"name": "Xdebug",
"type": "php",
"request": "launch",
"port": 9000,
},
]
,"compounds": [
{
"name": "Xdebug & Chromium",
"configurations": ["Chromium","Xdebug"],
}
]
}
L’appel au débogage doit être la première fois sur le choix « Xdebug & Chromium » pour lancer l’écoute sur l’URL http://127.0.0.1/dossier/index.php?XDEBUG_SESSION_START et ouvrir un navigateur Chromium avec les outils de développement Web ouvert.
Etape 3: Sauver un fichier relancer l’auto refresh de Chrome
Pour exploiter l’auto-refresh de Chrome/Chromium, j’ai pensé chercher l’équivalent des « builders » d’Eclipse, au final, la philosophie de Visual Code est d’utiliser une extension (https://marketplace.visualstudio.com/items?itemName=wk-j.save-and-run) dont l’objectif est de lancer automatiquement un programme debug.cmd qui est une variation de l’ancien programme.
L’extension Save And Run doit être programmé en modifiant le fichier settings.json se trouvant dans le dossier « C:\Users\pierre.jean\AppData\Roaming\Code\User\ » voici ma proposition de réglages pour déclencher le programme debug.cmd.
Le fichier debug.cmd se trouvera dans le dossier de notre projet Web mais il pourrait être ailleurs. Ce fichier s’appuie encore une fois sur le programme websocat_win64.exe ( pour la communication par WebSocket), disponible sur cette page https://github.com/vi/websocat/releases/.
Bien sûr, devant la complexité de la programmation en batch/cmd je me suis posé la question de développer un programme complet capable de faire les appels WebSocket, capable de trier les objets json des réponses et pour simplifier l’installation selon les systèmes d’exploitations.
Etape 4: debug.cmd pour faire l’auto-refresh de la page
Le programme debug.cmd cherche dans la réponse à l’URL de débogage de Chrome http://127.0.0.1:9222/json un objet json contenant le mot « page » puis en cherchant l’URI pour le WebSocket avec le numéro unique qui permet de demander le rechargement de la page.
@echo off
2 SETLOCAL ENABLEDELAYEDEXPANSION
3
4 set count=1
5 set pattern1="""type"": ""page"","
6 set pattern2="webSocketDebuggerUrl"
7
8 set findPage=0
9 FOR /F "tokens=* USEBACKQ" %%F IN (`curl -s http://127.0.0.1:9222/json`) DO (
10 REM find only page not web developper page with 'type' : 'page'
11 REM echo %%F | find %pattern1%
12 for /f "tokens=2" %%I in ('echo %%F ^| find %pattern1%') DO (
13 if "%ERRORLEVEL%" == "0" (
14 set findPage=1
15 )
16 )
17
18 REM find now webSocketDebuggerUrl
19 REM echo "!findPage!"
20 if !findPage! == 1 (
21 REM find with 'webSocketDebuggerUrl' : 'ws://...'
22 for /f "tokens=2" %%L in ('echo %%F ^| find %pattern2%') DO (
23 if "%ERRORLEVEL%" == "0" (
24 set var=%%L
25 )
26 )
27 )
28 )
29 set str=%var:"devtoolsFrontendUrl":=%
30 set str=%str:,= %
31 set str=%str:"/devtools/inspector.html?=%
32 set str=%str: =%
33 set str=%str:"=%
34 set str=%str:ws=%
35 set str=!str:~1!
36 set str=ws://%str%
37
38 echo {"id":0,"method":"Page.reload","params":{"ignoreCache":true}} | websocat_win64.exe -n1 %str% > NUL
39
40 ENDLOCAL
J’ai essayé de rajouter une méthode pour trouver uniquement la page dont j’ai le nom passé en paramètre et gérer le cas de plusieurs onglets de Chrome. Malheureusement la performance est trop faible en batch/cmd. Il faudrait donc un vrai programme pour gérer cette situation et conserver en fait l’identifiant de l’onglet chrome à débogger une fois pour toute la session.
Conclusion
Donc xdebug est activé dans Wamp, Visual Code dispose d’une extension PHP Debug capable d’écouter les appels de xdebug. Visual Code a une configuration launch.json capable de lancer l’écoute et un navigateur qui va ouvrir une URL avec le paramètre XDEBUG_SESSION_START pour lancer xdebug.
Il manque que d’ajouter une extension Save and Run à Visual Code pour déclencher à la sauvegarde d’un fichier php du projet un auto-refresh de Chrome qui a été démarré avec les options de développement Web.
Le « Proof-of-concept » est réalisé grâce à cet enchainement. Mais pour commencer facilement, faite juste l’installation des 2 extensions, créer un sous-dossier dans le dossier www de Wamp, ajouter les fichiers dans ce dossier debug.cmd, launch.json et websocat_win64.exe et cela devrait commencer à fonctionner si votre fichier php.ini de Wamp a xdebug activé aussi.
Pour lier le développement Web avec Eclipse JEE en profitant d’un rechargement « automatique » de la page dans Chrome, j’ai testé la solution d’utiliser l’option de démarre de ce dernier avec –remote-debugging-port=9222 .
En premier lieu, il faut configurer le démarrage de Chrome dans Eclipse via le Menu Windows > Preferences. Puis, il faut chercher « Web Browser » et ajouter les réglages dans « Parametres » (d’autres réglages sont présents dans cette copie d’écran)
Une fois que la première URL de déboggage est lancé dans Chrome, on doit trouver l’information sur l’URL de debuggage de l’onglet ouvert via cette ligne de commande sous Windows:
Pour ouvrir simplement une connexion WebSocket, on peut utiliser le logiciel Websocat (https://github.com/vi/websocat) pour envoyer une commande au Chrome.
Pour déclencher l’appel automatique après la publication d’un projet dans Eclipse, on peut utiliser les Builders.
Dans l’exemple ci-dessus, on utilise un fichier Ant Builder, mais la version avec « Program » peut aussi être utilisé en créant un fichier chrome.cmd à la racine du projet par exemple:
Il faut indiquer donc que le builder « Chrome debug reload » appelle le programme se trouvant dans ${workspace_loc:/test/chrome.cmd}. La seule option qui semble nécessaire dans l’onglet « Build Options » est « During auto-build »
Le contenu du programme chrome.cmd doit être le suivant avec modification du numéro lié à l’URL vue précédemment:
On peut remarquer la commande ping qui permet d’attendre 2 secondes ici pour laisser le déploiement se faire sur le serveur Tomcat.
Une autre option est de passer par la console des outils de développement Web de chrome pour demander le rechargement de la page. Si les outils de développements Web sont activé dans Chrome on peut trouver un autre WebSocket de communication qui permet donc d’envoyer des commandes à ce dernier.
On exploite l’envoie de la commande JavaScript history.go() pour recharger la page locale. Il y a plusieurs solutions pour recharger la page dont aussi location.reload() . Au vu d’un problème de retard dans le rechargement de la page, j’ai doublé ces commandes pour être sûr d’avoir la « bonne page » affichée.
J’ai expérimenté avec curl pour faire la liaison en WebSocket mais sans succès pour envoyer les commandes. De la même façon, j’ai trouvé aussi plusieurs utilitaires alternatifs sous Linux/MacOs comme websocat qui semble aussi très bien.
À la fin, j’ai développé un programme complet qui fait normalement l’extraction de l’url correcte :
@echo off
SETLOCAL ENABLEDELAYEDEXPANSION
SET count=1
FOR /F "tokens=* USEBACKQ" %%F IN (`curl -s http://127.0.0.1:9222/json`) DO (
SET var!count!=%%F
SET /a count=!count!+1
)
set str=%var3:"devtoolsFrontendUrl":=%
set str=%str:,= %
set str=%str:"/devtools/inspector.html?=%
set str=%str: =%
set str=%str:"=%
set str=%str:ws=%
set str=!str:~1!
set str=ws://%str%
ping 127.0.0.1 -n 2 > nul
echo {"id":0,"method":"Page.reload","params":{"ignoreCache":true}} | c:\DEV\websocat_nossl_win64.exe -n1 %str% > NUL
ENDLOCAL
Web development uses a network to link a software name Client to another software name Server. A common confusion is to speak about a dedicated computer as the Web Server or shorten as Server. The same shorten is to speak about Database as Database Server.
Between Client–Server software programs, there are a protocol which uses a unique IP address for each computer.
2. IP address
Each computer has at least one IP address the default IP address 127.0.0.1 also named localhost.
But on each network card as an Ethernet plug, a Wi-Fi card, a Bluetooth connection to a smartphone using as modem (also name: sharing connection).
Usually the terminal command ipconfig or ifconfig could show the list of IP Address.
If the computer is link via network or Wi-Fi to an internet Box, there are a local networks between the computer and the Box. For outside this local network (on Internet), the Internet Box provides a unique IP address and works as a mandatory for computers or smartphones link to the Internet Box.
3. Client
Web development uses a browser as classical client to display content from HTML, to apply a style to the content with CSS, to provide user interface with forms and advanced interactions with JavaScript.
Modern browsers provide tools for Web Development as IDEs.
Web developers usually work with Client and Server on the same computer with the IP address 127.0.0.1.
Other clients exist acting as a browser: Team application or a smartphone application are working as a browser with Web connection to a Server.
4. Server
Client Browsers communicate to a Server computer with the IP address of the computer which have a running Web Server software.
The connection should be a URL as protocol://IP Address:port number for example http://127.0.0.1:80/
Companies could buy a domain name from a registrar to provide a comprehensive name instead of IP address http://gitlab.mines-ales.fr/. The network provides a conversion from the domain name to the IP address (with DNS servers).
Usually a communication from Client Browser to a Web Server is named request or HTTP request. The Web Server sends back several HTTP responses as files with HTML, CSS, images, documents, video content, etc. using severals languages.
5. Port number
A software server program (as Web Server, Database, mail Server) with an Internet connection asks the computer to book a port number. Then a connection is open to the computer on a specific port to transfers data to the correct software.
A Web Server usually listen a specific port number into the computer. With a Web Server program for HTTP request, 80 is the default port, for HTTPS request, 443, for tomcat Web Server in development 8080.
With a MySQL Database Server, 3306 is the default port.
6. Asynchronous communication
The HTTP request sends from a Browser to Web Server could take a while. See Ajax later to display a trouble with the delay.
When the Web Server sends back contents, it could not know if the Client is still online without a new request from the Client
All requests are anonymous and independents by default (without using cookies and forms).
7. HTTP request
The HTTP request contains a lot of technical information send from the Client to the server and from the server to the Client.
The HTTP request sends a URL to the server to get content for example: http://127.0.0.1/cv/fr/cv-2020.pdf.
The Web Server sends back contents with HTTP request codes : usually code 200 everything is ok or 404 for missing content.
8. URL
The last slash of the URL indicates the root folder (aka DOCUMENT_ROOT) of the Web Server, a specific folder into the computer where contents into sub-folders will be sent.
Suppose a root folder as c:/WebServer/www/ and subs-folders c:/WebServer/www/CV/fr/ the correct URL to access a file cv-2020.pdf from the same computer will be http://127.0.0.1/CV/fr/cv-2020.pdf.
The Web Server default configuration is to list content if URL finish by slash as http://127.0.0.1/cv/fr/ if there are no file call index.html call by default in this case.
9. Languages
Web development use a set of several languages, each for a specific part of the process or the interaction between software. Web developers have to learn each usage of those languages.
Java / Python / PHP / ASP.Net / JavaScript server-side / C# languages provide a way to generate contents usually into HTML.
SQL provides a classical way to interact with databases
JSON provides a way to structure data to the Client with Ajax side and also to some other Database server or third-party software.
10. HTML
Web Server usually sent back content with a structure into the language HTML.
HTML language use opening and closing Tag, the global structure of an HTML page looks like with 2 parts head part (between <head></head>) and body part (between <body></body>)
The head part will include mainly CSS and JavaScript, few specific tags as <title></title>
The body part will include the visible content of the page displays into the Client browser render. To display the HTML part, right-click on the Client browser and choose « Show Source code » (or something close see IDEs)
11. Tag
A tag could be lonely as <img /> or also have several attributes as shows below by hyperlink tag <a></a> (href hyperlink attribute and target attribute to open into a new page)
A CSS rule/instruction could be applied to a tag. CSS is write into a <style></style> tag (place into header) or load from an external file with <link /> tag.
A collection of extensive selector could apply to identify a set or a unique tag ant then affect visual and styling effect (change background color, line through text, composition and space):
A programming language create to be trigger by events into the Client Browser. JavaScript is write into a <script></script> tag (place into header) or load from an external file with <script /> tag.
<head>
<script>
function click(){
var imgLogo = document.getElementById("imgLogo");
imgLogo.src = "https://upload.wikimedia.org/wikipedia/fr/6/6d/Logo-IMT-Mines-Al%C3%A8s.jpg";
}
</script>
<script src="http://www.imt.fr/javascript.js" />
</head>
<body>
Click to see a different logo :
<img
id="imgLogo"
src="https://www.mines-ales.fr/themes/custom/boots/assets/images/logo.svg"
onclick="click()"
/>
</body>
The onclick attribut of <img/> could trigger a JavaScript function. The function creates a variable imgLogo by finding an Html tag by its attribute id imgLogo. The modification of attribute src of <img/> asks the Client Browser to change the image.
The manipulation of the HTML from JavaScript follows the DOM structure of the HTML page.
The default usage of JavaScript is not really common. JavaScript’s frameworks like jQuery are more common.
14. Relative or Absolute URL
HTML page contains call by URL to image, CSS/Javascript file, hyperlink tag, as see before with this set of tag.
If this HTML page is loading from the Server with a URL like
http://www.mines-ales.fr/index.html
Is it very common to only use relative folder URLs to let Client Browser convert to absolute URL. Base folder will be in ours case from the top folder.
Operators like ./ or .. or / could be use to create the correct convention from relative to URL to absolute URL. (./ is for same folder than initial HTML page, .. is for parent folder tan initial HTML page, / in first symbol is for top folder of Server).
15. Forms
A specific set of tags from HTML is dedicated to create forms to allow interaction with the user, as a login and password HTML page.
<body>
<form method="get" action="http://127.0.0.1:8080/Controler">
<input type="text" name="login" value="Please provide your login" />
<input type="text" name="birthdate" value="Please provide your birth date" />
<input type="password" name="pwd" />
<input type="radio" name="interface" value="computer" />
<input type="radio" name="interface" value="smartphone" />
<input type="submit" name="action" value="Log me please" />
</form>
</body>
The user could provide into 4 specifics fields of this form some information. When the user clicks the button « Log me please », all fields name and information provide will be sent to Server by the URL into attribute action.
About the field name interface, the value is specified by the tag and could be change by the user. The Client browser knows they are linked by their attribute name.
The attribute method value could be also post usually use with input field to send a file.
16. Java
Java could be use into a Web Server software call Tomcat Web Server (other Web Servers use Java but Tomcat is the reference) to create HTML content from a JSP Page or Servlet Page.
There are a short list of languages and Web Server as
Apache Web Server and Nginx Server could use C, PHP, Perl languages.
Django Web Server could use Python.
Internet Information Server could use C# and VB.Net
The generation from Tomcat Web Server will create the HTML Page.
<html>
<body> We are:
01/05/2025
</body>
</html>
The Web Developer will detect the pure HTML part and the Java part into the JSP page by using a specific non-HTML tag <% %>. The HTML generation is available into the Client Browser.
18. Servlet
A Servlet page is a file creates with IDEs as Eclipse JEE to generate an HTML page. Suppose the HTML page has to display the date of the day:
The generation from Tomcat Web Server will create the HTML Page.
<html>
<body> We are:
01/05/2025
</body>
</html>
But the Web Developer will not use the Servlet to generate HTML part because JSP Page are simplest to compare with HTML. The Servlet will receive information from forms. The MVC design pattern will be used to combine forms, JSP and Servlet Page.
19. IDEs
A Web Developer will use several software programs to create and tests Web applications.
Tomcat Web Server, JSP and Servlet Page will be use and create by using a specific IDE as Eclipse JEE.
An Eclipse JEE project will link Tomcat Web Server with a set JSP and Servlet Pages also CSS and JavaScript additional files, images and other documents as video, PDF files, etc.
The Client Browser as Chrome or Firefox will be use as an IDE to create, check and debug contents send by the Server mainly JavaScript, CSS and HTML. To activate the IDE part, usually the command CTRL+MAJ+I open the Web Developers Tools include into Chrome or Firefox.
The whole purpose is to give access to tools to debug and find errors easily into code.
20. Tomcat
Tomcat is a Web Server provides content from JSP, Servlet, JavaScript, CSS and HTML. Tomcat could receive several projects create by Eclipse JEE IDEs on the same computer or across several computers.
Tomcat convert JSP Page into Servlet Page compiles and deploy the project at a specific URL.
Tomcat is writing in Java and should be start with a JDK software not a JRE software program.
21. Database
A Database Server could be connected to Tomcat Web Server if a Java library is provide and if this library is compliant as JDBC protocol. The following example provides a demonstration to connect to an SQLite Database server.
The same piece of code could be used to connect to MySQL or MariaDB or PostgreSQL Database server
If the Database Server is not started, the connection will fail. The connection could provide a login/password authentication mechanism to access the Database server.
22. SQL
SQL language is an historical and legacy language to manipulate data from a Database Server set of information store into a group of tables calls a Database.
In the following example, a command into SQL extracts only the name from a table of user order by lexicology.
Statement statement = connection.createStatement();
if (statement.execute("Select name FROM user order by name asc ")) {
ResultSet resultSet = statement.getResultSet();
while (resultSet.next()) {
String name = resultSet.getString("name");
}
}
Complex SQL command could be created to manage complex operations.
But the Web Developer will not use the Servlet to generate HTML part because JSP Page are simplest to compare with HTML. The Servlet will receive information from forms.
23. DOM
Into the Client Browser the combination of tags is consider by Web Developers as a Document Object Model with root element, parent, children and brothers elements.
CSS and jQuery use a set of symbol to describe links between tag. Suppose an HTML page as bellow:
DOM stores <scripts> tags as brothers, <scripts> tags have on parent <head></head> tag.
The Web developers should know several symbol to select element depending on another. // is the symbol of comment and use as into a CSS page in this case.
// Full path on an element so specific not really use
html > body > ul#office
// Simpliest solution and ID should be unique
#office
// Only apply a setting to the direct children of body
body > a
// Apply of all children and sub-children de type a into body
body a
// Brother of tag f class done, so <li> Ask </li> and <li> Cancel </li>
.done | li
// Only the last children of office so <li> Cancel </li>
#office:last-child
A complex set of additional symbol selectors exist but out of the field of this page.
But the Web Developer will not use the Servlet to generate HTML part because JSP Page are simplest to compare with HTML. The Servlet will receive information from forms.
24. Jquery
jQuery is a library write into JavaScript also call a framework providing a way to avoid a strong link between JavaScript and HTML DOM.
To link a click event onto a specific HTML tag, Jquery use a special function call $ to find HTML element without add attribute on tag.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function basicClick(){
var imgLogo = document.getElementById("imgLogo");
imgLogo.src = "https://upload.wikimedia.org/wikipedia/fr/6/6d/Logo-IMT-Mines-Al%C3%A8s.jpg";
}
$(document).ready(function(){
$("img#imgLogo").click( basicClick );
});
</script>
</head>
<body>
Click to see a different logo :
<img
id="imgLogo"
src="https://www.mines-ales.fr/themes/custom/boots/assets/images/logo.svg"
/>
</body>
</html>
This version is not « very » Jquery because a Web Developers will replace the name of the function by a direct call as below.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("img#imgLogo").click( function() {
$( this ).src = "https://upload.wikimedia.org/wikipedia/fr/6/6d/Logo-IMT-Mines-Al%C3%A8s.jpg";
}
);
});
</script>
</head>
<body>
Click to see a different logo :
<img
id="imgLogo"
src="https://www.mines-ales.fr/themes/custom/boots/assets/images/logo.svg"
/>
</body>
</html>
jQuery knows which HTML tag is pressed by using again the function $ to find it.
25. Ajax
Ajax is a way to call the Server from JavaScript to send and receive information into an XML or a JSON format in the background of the HTML page.
jQuery knows which HTML tag is pressed by using again the function $ to find it.
26. JSON
The way to format data to exchange from JavaScript to with the Server was XML at first but JSON is short and could be convert directly into variables and uses as a DOM.
The Server could send several couple keys/values of information to the Client Browser. Each time a URL is send to the same Server, keys/values are send from the Client to the Server.
The Web Developer uses cookies to identify the user after a successful login/password page.
28. MVC
To convert the design pattern MVC with Web Development, Tomcat development process could be use.
A Servlet page will be in use as a Controller to receive information and manipulate Model and DAO parts of the project., then forward information to View part.
One JSP Page could be used to display one interface or View to simplify the process and the structure of the project.
Model part could be tested by Unit test program include into the Tomcat project.
29. DAO
Data Access Object is a design pattern to separate the loading of information from Database to Model POJO instance.
The main idea is to avoid loading information from the database into the Controller part but use Model part to manage information and then store them into the Database.
30. Unit test
Unit test a method is an advanced way to test the whole program by trying to avoid error and regressions. The web Developer could imagine a method and usually another Developer create a Unit Test method dedicated to test this method.
Suppose a method which add a String to the list only if this String not exist into but in this case, suppose an error of testing vale of indexOf method (-1 if element not exist instead of zero) :
List<String> listOfString = new java.util.ArrayList<String>();
private void addOnlyNotExist(String element){
if ( listOfString.indexOf( element ) == 0 ) {
listOfString.add( "test" );
}
}
Suppose a test method to check a double String not exist
A Unit test framework library as JUnit will be used to automatization of report of all Unit test method.
31. POJO
Plain Old Java Object is a way to speak of instances and classes which the purpose is only to store information. The following example will show a POJO of Person link to a POJO a Phone
class Person{
private int ID;
private String name;
private int age;
private List<Phone> phones = new ArrayList<Phone>();
}
class Phone{
private int ID;
private String phoneNumber;
private String name;
}
The 2 POJO missing getters and setters and some additional methods to work, but their purposes are really clear and simple to manage the Model part of MVC.
32. equals() & hashCode()
A POJO usually provides 2 specifics method call equals and hashCode.
Equals is well-know to compare String instance ( « test ».equals(« TEST ») ) but suppose two instances of POJO Person how to compare them ?
Suppose a case, it is a specification 2 instance of Person are the same if their property name are equals.
class Person{
private int ID;
private String name;
private int age;
private List<Phone> phones = new ArrayList<Phone>();
public boolean equals(Object obj) {
if (obj == null) return false;
if( ! (obj instanceof Person) ) return false;
Person other = (Person) obj;
return this.name !=null ? this.name.equals(other.name) : this.name == other.name;
}
}
The hashCode method is less used, usually to create an order between instance of POJO
class Person{
private int ID;
private String name;
private int age;
private List<Phone> phones = new ArrayList<Phone>();
public int hashCode() {
return this.ID;
}
}
With this solution, 2 instances of Person will be order by their ID into a HashMap or a HashSet. It could be more performant to group instance on another criteria like using a conversion of property name into int value as Eclipse generation offers below.
In this case a HashMap or a HashSet will be performant to order instance by their property name:
class Person{
private int ID;
private String name;
private int age;
private List<Phone> phones = new ArrayList<Phone>();
public int hashCode()
{
final int prime = 31;
int result = 1;
result = prime * result + ((name == null) ? 0 : name.hashCode());
return result;
}
}
33. Debug
Eclipse JEE could start a Tomcat server with a project into Debug mode to place breakpoints into Java code, finding state of variables and chains of instructions into the Server side program .
Client Browser with Web Development Tools provides HTML contents access as DOM inspector, network information, JavaScript breakpoints, CSS editor, HTTP request content, log console, etc.
A Tomcat Servlet could receive a list of parameters from an HTMLForm. Into a the Servlet, it is possible to display all the name of the parameters from the URL coming also from the Form
Le thème a activer pour avoir les mêmes copies d’écran est le thème Twenty Twenty via le Menu > Apparence > Cliquer sur le thème Twenty Twenty puis le bouton Activer.
NOTA: les copies d’écran utilisent le compte ctn20_jean à remplacer par ctn22_jean
Un travail classique dans la gestion d’un site WordPress est la customisation d’un élément de WordPress. Une solution a faible cout est une intervention sur le CSS de WordPress directement dans l’éditeur de WordPress, via le menu « Apparence » > « Editeur de thème » puis la première « Je comprends »
Regardez bien que vous êtes sur la « Feuille de style style.css » en haut à droite.
Supposons que vous souhaitez cacher la zone indiquée en vert sur ce template et que vous ne trouviez par l’option dans le backoffice:
La solution vient d’une modification en CSS de cet élément que l’on doit en premier trouver grâce aux outils de développement Web de votre navigateur. L’accès à cet outil sous Chrome peut se faire via une sélection de l’élément et click droit « Inspecter »:
Dans la zone en bas de Chrome s’ouvre une séries d’outils très utile pour tout développement Web y compris pour WordPress.
Grâce à l’inspecteur nous pouvons identifier l’élément HTML qui gère cette partie que nous voulons modifier et tester en réel l’impact des instructions CSS sur le site. En surlignant aussi dans l’onglet « Elements » nous vérifions que nous englobons bien l’icone et le mot » Un commentaire »
Testons la modification de CSS directement sur Chrome dans l’éditeur de style sur le tag <li> nous ajoutons « display:none; » sur « element.style » à droite:
Bien sur cette modification n’est pas pérènne, nous devons identifier de manière unique l’ID ou la classe de ce tag <li> pour faire une règle CSS plus viable.
Nous surlignons toujours à gauche le bon tag, à droite on désactive la règle de « element style », et en faisant un clic à droite sur le + on ajout une règle pour le tag « li.post-comment-link.meta-wrapper » qui identifie de manière précise notre tag.
Une fois que l’on a vérifier que cette règle est opérationnelle:
Nous pouvons copier cette règle dans notre fichier style.css via l’éditeur de style dans le backoffice de WordPress sinon la règle ne serait que temporairement dans notre navigateur. Ajoutons cette règle avec un commentaire dans le fichier style.css en toute fin du fichier pour que toutes les règles s’appliquent avant:
« Mettre à jour le fichier » et aller vérifier sur le site en frontal avec encore une fois un clic droit Inspecter sur la zone où devrait être le commentaire:
Nous pouvons inspecter et aller consulter la ligne du fichier CSS en cliquant sur la feuille de style pour vérifier que tout est fonctionnel dans l’onglet « Source » des outils de développement du navigateur.
Si cela ne marche pas modifié la réègle suivante :
display: none !important;
Cette solution est une solution pour rapidement customiser son site WordPress, j’aurai préféré trouver dans le code source du programme l’endroit qui génère cette information mais parfois ce n’est pas possible rapidement.
Dans tous les cas, je voulais montrer l’utilisation des outils de développement Web inclus dans les navigateur avec l’inspecteur de page pour localiser un élément précis du code HTML avec son CSS associé. Nous aurons une autre façon de faire avec l’utilisation du site WordPress en local pour pousser avec Filezilla le fichier style.css depuis notre ordinateur vers le serveur.
Il faut aussi indiquer aussi que cette modification sera écrasée par une mise à jours du thème/template c’est pour cela que nous allons faire une copie en local de notre WordPress et créer un thème enfant dont les modifications perdureront dans le temps.
Ajout de 2 modules et intégration avec shortcode
Installer 2 modules classiques que sont « Contact form 7 » et « CVFDB7 » dans votre site en ligne.
Il faut faire une modification ponctuelle dans les réglages du module « contact form 7 » onglet « Réglages additionnels » , il faut indidquer : skip_mail: on
Notre ordinateur ou le serveur ne sont pas actuellement configuré pour envoyer des emails. D’où l’utilisation du second plugin CVFDB7 pour récuperer les émails.
Modifer le formulaire déjà existant en permettant de mettre une bordure à votre formulaire:
Pour réaliser ce genre de test de formiulaire j’utilise des outils de tests comme Selenium IDE https://www.selenium.dev/selenium-ide/
Cet outil permet d’automatiser les tests pour vérifier un site disposant de nombreux formulaires rapidement. Il y a d’autres outils de tests plus performant mais sa simplicité m’a toujours beaucoup plus.
Installation en local de WordPress
Le serveur du www.master-ctn.mines-ales.fr (master-ctn.euromov.fr) symbolise le site en production ou en pré-production (vu qu’il est caché par un accès via la demande de login/password de type htaccess). Cette façon de travailler est classique, le site officiel dit en production, un site sur un serveur identique avec les réglages et les logiciels similaires dit de pré-production pour tester avant le passage en production.
Il faut aussi une version additionnelle sur votre ordinateur en local pour avoir une version dite de développement avec tous les messages de debug activable, permettre de modifier une image sans le cycle d’upload à chaque modification, une version facilement customizable/défigurable sans avoir d’impact sur la production.
NOTA: si vous utilisez un ordinateur de l’IMT Mines Alès prévue pour la formation, Wamp est installé dans le dossier C:\Developpement\Wamp64\ et vous pouvez le démarrer avec l’utilisateur .\wamp . Je donne la procédure, si vous souhaitez travailler avec vos ordinateurs.
Nous allons donc installer un wordpress en local grâce aux logiciels Wamp (Windows) /Mamp(MacOs) qui package l’installation d’Apache/Php/PhpMyAdmin/Mysql (d’où le nom de ces MAMP/WAMP/LAMP concatenant justement ces logiciels) pour un usage de développement de manière simple.
Après l’installation, nous allons vérifier que Wamp fonctionne via l’icone en bas à droite dans la barre dite de « Notification » :
Wamp est démarré et les services Apache/Mysql sont bien actif l’icone est VERT
Le plus rapide pour vérifier que votre installation fonctionne en local est de trouver le fichier appelé phpinfo via une de ces URLs (une seule doit fonctionner, à noter et à conserver):
http://127.0.0.1/?phpinfo.php=1
http://127.0.0.1/phpinfo.php
http://127.0.0.1:8887/phpinfo.php
http://127.0.0.1:8888/phpinfo.php
http://127.0.0.1:8080/phpinfo.php
http://127.0.0.1:8888/MAMP/phpinfo.php
http://127.0.0.1:8888/MAMP/phpinfo.php
NOTES TECHNIQUES:
127.0.0.1 est l’IP de votre ordinateur normalement on peut la remplacer par localhost
:80 est le port par défaut des connexions http donc pour aller sur le site de l’IMT il faut entrer http://www.mines-ales.fr:80/ mais tous les navigateurs utilisent le 80 par défaut et le masquent dans la barre d’adresse
:8888, :8887 , :8080 sont des ports de connexions, si on avait pas de port de connexion, notre ordinateur ne pourrait avoir qu’une seule connexion à un seul site. Ici, tous les installation du logiciel Apache devraient utiliser le port 80 mais pour éviter des problèmes d’installation chaque outil comme Wamp/Mamp utilise un port « un peu à lui ». On doit chercher dans la documentation pour trouver quel est le « bon »
Si deux logiciels utilisent le même port, il y a conflit, un des deux s’arrête
On peut modifier les ports pour éviter le conflit ci-dessus
Normalement, vous devez avoir une page similaire à cela si vous avez bien trouver votre phpinfo (le numéro de version de PHP peut être différent):
Si vous avez cette page, cela doit indiquer que nous avons la bonne URL pour trouver votre serveur apache et que ce dernier fonctionne plutôt très bien.
Il y a une information que nous avons besoin, c’est le DOCUMENT_ROOT, pour trouver dans quel dossier nous pouvons mettre des sites web pour y travailler dessus en local:
Dans mon cas, et surement dans le votre, c’est le dossier C:\Developpement\Wamp64\www\ sous MacOS c’est /Applications/MAMP/htdocs/.
NOTA SOUS MACOS: le logiciel MAMP assure le démarrage des services apache et mysql comme indiqué ci-dessous, le bouton Start Servers (remplacé par Stop Servers) permet de les démarrer
Les cases cochées indiquent que les service Apache et Mysql sont démarrés
Reprise POST aparté MacOS, donc nous avons un serveur Apache dont nous connaissons le Document_Root et l’URL pour aller sur le phpinfo (il y a plusieurs méthodes pour trouver ces informations).
Nous devons ensuite créer un dossier dans le Document_Root pour par exemple pouvoir installer plusieurs WordPress, par exemple dans mon cas ctn22_jean mais cela peut être n’importe quoi (si vous voulez un seul wordpress, le dossier DOCUMENT_ROOT est disponible).
Placer le pacakge duplicator et le fichier installer.php fourni avec ce package :
Utilisez votre navigateur pour aller sur votre site en local en modification l’URL qui a été trouvé avec phpinfo. Dans mon cas, c’est http://127.0.0.1/phpinfo.php que je transforme en URL correcte:
http://127.0.0.1:80 pour l’adresse de mon serveur et son port 80 (:80 est optionnel c’est le port par défaut de http, pour https c’est :443)
/ indique le dossier DOCUMENT_ROOT du serveur, je parle du / précédent phpinfo.php
Je retire le reste pour indiquer mon dossier ctn22_jean
J’ouvre donc un navigateur à cette adresse http://127.0.0.1/ctn22_jean/
Mon URL trouvée ci-dessous correspond donc bien au dossier DOCUMENT_ROOT de mon serveur Web Apache installé par Wamp/Mamp en local.
Je peux en cliquant sur installer.php commencer la duplcition en local de mon WordPress.
La plus part des réglages sont fait automatiquement par Duplicator, la seule information qu’il faut disposer c’est le compte root et son mot de passe de l’utilisateur de la base de données Mysql en étape 2.
Etape 1, tout est au vert, l’installation peut se faire, appuyez sur « Next »
Indiquer les informations suivantes:
création d’une nouvelle base de données en sélectionnant « Create New Database »
localhost:3308 ou localhost:8889 sur Mac indique que le serveur Mysql se trouve sur le même PC
ctn22_jean est le nom de ma base de données, c’est pour faire identique au serveur www.master-ctn.mines-ales.fr mais on peut mettre ce que l’on souhaite wp2020, etc.
root est l’utilisateur administrateur de Mysql il a le droit de créer de nouvelles base de données dans Mysql
Mot de passe…. attention Wamp par défaut n’a pas de mot de passe pour l’utilisateur root parfois le mot de passe est mysql ou admin ou root. La documentation de l’outil indique ce réglage
Attention, on doit modifier dernièrement les informations de cette copie d’écran localhost devient localhost:3308 sur Wamp et localhost:8889 sur Mamp
Le bouton « Test Database » permet de vérifier que la connexion au logiciel de base de données Mysql fonctionn correctement et que l’installation peut se faire.
Avant dernière étape, l’opération finale de duplication va être réalisée. On peut modifier les réglages par défaut à ce moment précis mais je déconseille de le faire sauf pour régler un problème précis.
NOTA TECHNIQUE: L’onglet fermé « Replace » permet de gérer certains problèmes de passage du site web du serveur en local (ou vice versa) de type une URL vers une image qui en local indiquerait http://www.master-ctn.mines-ales.fr/ctn22_jean/logo.gif.
Etape finale, tout s’est bien passé, il faut bien indiquer qu’il vaut mieux retirer les fichiers d’installation temporaires surtout en cas de duplication sur un serveur car un hacker pourrait les exploiter pour trouver vos mots de passes. En local, c’est plus pour garder la bonne habitude de les effaccer:
En appuyant sur le bouton « Admin Login » vous devriez retrouver votre site web WordPress opérationnel en local, maintenant allons le modifier grandement…
Création d’un thème enfant dans WordPress
En premier lieu, retirer les thèmes non utilisé de votre WordPress (Menu Apparence puis choisir chaque Thème non Activé et le bouton « Supprimer » se trouve en bas à droite de chaque thème.
NOTA technique: je supprime les thèmes pour éviter les multiples mises à jours sur des thèmes peut utile, j’économise de la place et je trouve un seul thème dans le dossier des thèmes pour ne pas me tromper de thème et modifier un autre que l’actif…
Allez consulter le dossier wp-content\themes de votre WordPress, dans mon cas dans le dossier C:\Developpement\wamp64\www\ctn22_jean\wp-content\themes , je vais trouver dans mon cas le seul thème disponible twentytwenty . Il faut donc créer un dossier twentytwenty-child à côté de ce dossier:
Ce dossier va contenir les modifications que je souhaite faire sur le thème parent twentytwenty et qui ne seront pas détruites par la mise à jours du thème parent par son concepteur.
Copier le fichier style.css du thème twentytwenty dans le dossier twentytwenty-child, et éditer le avec UltraEdit, Bloc-notes ou tout outil d’édition de code comme dans le cours de Développement Web.
Il faut modifier dans ce fichier style.css le nom du template par exemple en ajoutant CHILD
Theme Name: Twenty Twenty CHILD
et au dessous ajouter cette ligne qui dit que ce thème est enfant du thème contenu dans le dossier twentytwenty:
Template: twentytwenty
Le reste des informations est assez peu critique, vous pouvez modifier à l’envie les informations à droite des deux-points tant que la structure reste identique, par exemple le numéro de version de ce thème.
Par contre, maintenant, il faut retourner dans le backoffice pour activer ce thème comme celui actif sur le site:
En retournant sur le site web en front et en activant les outils de développement Web (CTRL+ALT+I) et en activant l’onglet « Réseau » (Network sur certains navigateur) on peut constater que le feuille de style vient du dossier twentytwenty-child.
Notre modification temporaire du fichier style.css devient donc permanente.
Mais copions maintenant du dossier du thème parant le fichier footer.php vers le thème enfant et modifions son code pour avoir ce contenu:
<h2>Wordpress by Master CTN</h2>
<?php wp_footer(); ?>
</body>
</html>
Recharger l’affichage site WordPress pour constater le nouveau pied de page pour toutes les pages. Le thème enfant utilise le fichier footer.php pour son affichage alors qu’il utilisera toutes les autres pages dans le thème parent. On peut donc progressivement modifier le thème enfant à partir de la structure des fichiers du thème parent.
Et pour concevoir une page pour un article seul, il faut créer un fichier singular.php et mettre ce genre de contenu pour avoir le header, un div, le contenu de la page ou de l’article et le footer:
Retourner sur votre site WordPress en front, choississez un article ou une page et afficher le code source HTML pour voir qu’en bas de page vous trouver le code HTML généré au sein de votre div d’ID principal
Si vous voulez faire la même modification pour une page et non un article, dupliquer le fichier single.php en singular.php.
Puis ouvrer le fichier singular.php pour le modifier avec ce code:
Afficher une page, le résultat devrait être visible…
Si vous voulez ne customizer qu’une seule page ou un seul article, il faut repérer son numéro unique. Dans le back-office, quand vous éditez une page ou un article, vous voyez dans la barre d’adresse une URL avec indiquée ces informations techniques:
La page page-2.php est prioritaire sur la page singleton.php ou single.php.
Pour un article le format du nom de fichier inclus le « slug » (version normalisée pour URL du titre de l’article) du nom de l’article par exemple pour la page par défaut de WordPress dont le titre est « Bonjour tout le monde », le nom du fichier est par exemple : « single-post-bonjour-tout-le-monde.php ».
Voici quelques élements qui indique les informations que l’on récupéré par WordPress pour concevoir sa charte graphique:
Alors, je recommande quand même de faire un fichier functions.php dans le dossier du thème enfant pour ajouter les appels aux fichiers CSS manquant ici style-rtl.css:
Ce choix se fait si vous voulez ajouter un fichier de style.css a tous les styles CSS du thèmes enfant ou vous souhaitez repartir d’une copie de la version pour tout modifier. Les 2 options sont faisable en fonction de votre stratégie et de la complexité du thème parent.
Dans la conception, j’ai écarté l’ajout de ressource de type images mais il faut coupler ces ajouts avec la modification du CSS et la création dans le thème enfant d’un dossier images.
La ressource de ce site de référence peuvent vous aider ensuite dans toutes les manipulations: https://codex.wordpress.org/
NOTA:
Pour effacer la création du tag <li class=’post-comment-link meta-wrapper’>, il faut intervenir dans le fichier qui se trouve dans wp-content\themes\twentytwenty\inc\template-tags.php ligne 426.
Le plus simple est donc de copier le dossier wp-content\themes\twentytwenty\inc\ dans le thème enfant avant de retirer les lignes fabriquant le tag sauf que le fichier template.tags.php n’est pas un fichier par défaut de thème enfant, donc il faut aussi copier les fichier index.php et singular.php depuis le thème parent vers le thème enfant pour que cette modification soit prise en compte.
NOTA: les copies d’écran utilisent le compte ctn20_jean à remplacer par ctn22_jean
Après tous ces réglages et tests qui permettent de comprendre le fonctionnement assez général d’un serveur Web Apache (les autres marques de serveurs Web fonctionnent de manière similaire: Nginx, Microsoft IIS, NodeJs, Django, Tomcat, etc.).
Commencer par dézipper le fichier WordPress-5.8.1-fr_FR.zip ( version Français de France oui il y a un WordPress fr_CA pour le Français du Canada) avec l’outil classique que vous utiliser dans un dossier et indiquer ce dossier à filezilla pour assurer le transfert.
NOTA: Les numéro de versions (par exemple 5.8.1) de WordPress sont à comprendre dans ce sens:
Le premier chiffre 5 est le plus important, nous avons WordPress en version 5 sortie le 12 décembre 2018
Le second chiffre 8 est le numéro de version secondaire qui indique des évolutions surtout dans la correction de bug dans cette version de WordPress
Le troisième chiffre 1 est le numéro de version sur les mises à jours de sécurités
Il faut installer la version la plus récente et réaliser rapidement la mise à jours de cette version pour obtenir la dernière version la plus débuggée et la plus sécurisée. Pour les mises à jours (upgrade) il faut garder à l’esprit que la mise à jours de sécurités ne doit pas avoir beaucoup d’impact sur votre site web par contre le changement de version important entraine des modifications importantes de votre WordPress.
Maintenant avec Filezilla, on va transférer tous les fichiers et les dossiers du WordPress vers le dossier www du serveur www.master-ctn.mines-ales.fr .
Indiquer bien le dossier où se trouve WordPress sur votre PC (en partie gauche), indiquez bien (ou cliquer sur le bon dossier à droite) le bon dossier www sur le serveur (en partie droite), sélectionner tous les fichiers/dossiers à gauche et faire glisser l’ensemble dans la zone fichier à droite (ou faite un clic droit > Envoyer):
Dans la « zone trasnfert de fichier » en bas vous devriez voir le transfert de fichier vers le serveur. Historiquement, le TP était en présentiel donc le transfert était assez rapide entre la salle de classe et la salle des serveurs dans le même bâtiment M. Maintenant, en fonction de votre hébergeur (de son coût aussi), de votre type de connexion, etc. le transfert peut prendre du temps. Regardez bien dans l’onglet « Transferts échoués » et s’il y a des messages d’erreur en rouge dans la « ZONE TECHNIQUE DE FILEZILLA ».
IMPORTANT: il faut que tous les fichiers et dossiers soient correctement transférer avant de démarrer l’installation. Ne commencer pas l’étape suivante tant que tous les fichiers et dossiers sont bien sur le serveur et non pas rejetés.
Appuyez sur « C’est parti! » et dans la nouvelle page, il faut indiquer les informations techniques récupérées à la page précédente:
nom de la base de données: ctn22_jean
identifiant de l’utilisateur de la base de données: ctn22_jean
mot de passe de l’utilisateur de la base de données
adresse du serveur de la base de données: localhost (essayez en cas de problème 127.0.0.1 ou le nom du serveur complet www.master-ctn.mines-ales.fr)
Préfixe de tables: laisser tel quel et voir la note technique plus bas
NOTE TECHNIQUE: le préfixe des tables de la base de données de Mysql est une technique qui permet dans une seule et unique base de données de mettre 2 wordpress qui font avoir un préfixe de table différent. Comme les hébergeurs facturent chaque base de données, les concepteurs de WordPress ont pensé que l’on puisse mettre plusieurs WordPress chez un hébergeur qui ne propose qu’une seule base de données. Chaque WordPress serait dans un sous-dossier dans www par exemple www/wordpress1/ et www/ mais tout deux seraient dans la même base de données en étant différencier par un prefix différent de nom de tables de base de données.
NOTE TECHNIQUE 2: Pour information l’Adresse IP (IP=Internet Protocol) 127.0.0.1 est particulière. Chaque ordinateur a une adresse IP unique qui permet d’identifier les 2 ordinateurs qui communiquent en échangeant des informations. Votre ordinateur a une adresse IP, le serveur www.master-ctn.mines-ales.fr a une adresse IP (159.31.200.5). Parfois on doit indiquer à un ordinateur qu’il doit se consulter lui-même donc il y a une adresse spéciale 127.0.0.1 (appelé aussi localhost) qui indique que l’ordinateur doit communiquer avec lui-même. Une fois l’installation du serveur apache en local sur l’oridnateur via Mamp/Wamp, notre navigateur devra consulter ce serveur apache en local via l’adresse 127.0.0.1 qui a comme alias localhost.
Appuyez sur « Envoyer »
Cette page indique que l’installateur de WordPress a bien réussit à communiquer avec le logiciel de base de données Mysql et qu’il a constaté que l’installation peut se faire par rapport à ce logiciel.
NOTA: en cas d’erreur, il faut bien vérifier tous les réglages pour voir si les informations pour l’accès à la base de données sont correctes
La dernière étape permet d’indiquer des informations liés à l’installation du WordPress. La plus part des informations peuvent être modifiées par la suite mais ce sont des informations importantes:
Titre du site: Une information qui apparait ensuite dans le bandeau du site WordPress et qui apparait dans l’onglet du navigateur
Identifiant: l’identifiant de l’administrateur du site WordPress, habituellement on indique admin mais je recommande de mettre une autre information car ce nom d’utilisateur est l’identifiant qui permet de se connecter au site WordPress pour accéder à son backoffice
Le mot de passe: cette information est générée par WordPress comme mot de passe et modifiable. Il est critique de disposer d’un bon mot de passe pour votre identifiant sur le site WordPress
Adresse de messagerie: un email pour la récupération des informations de connexion en cas de perte du mot de passe
Visibilité par les moteurs de recherche: peu de moteur de recherche le prennent en compte, inutile tant que la réglementation n’obligera pas à prendre en compte cette information
NOTE TECHNIQUE: actuellement, beaucoup de site WordPress se font piratés car:
il est rentable d’attaquer des sites WordPress car le nombre de site cible est important par rapport aux autres CMS, WordPress serait utilisé dans 38% des sites dans le monde (https://fr.wikipedia.org/wiki/WordPress)
le nom de l’administrateur du WordPress est le nom du site web, nom du site www.truc.fr , nom de l’utilisateur truc.
les mots de passes sont trop simples à trouver (mot de passe déjà vu: wordpress , ou le nom du site , admin, 123456, etc.) et surtout ne sont jamais changés pendant des années.
le site est délaissé sans recevoir les mises à jours, le principe: »ça fonctionne, on n’y touche pas » entraine des failles de sécurités publiées par WordPress qui donne la méthode pour attaquer le site
des plugins/extensions/themes exotiques et/ou délaissés installés en nombre augmentant la surface d’attaque en proposant plus de failles potentielle
le mot de passe est utilisé sur un autre site dont l’attaquant a réussit à obtenir par une méthode ou une autre. Certains sites distribuant des contenus pirates demandent de créer un compte pour obtenir un couple identifiant/mot de passe qu’ils essayent sur différents sites en « espérant » qu’ils peuvent réutiliser.
En cas de perte du mot de passe du site WordPress, nous verrons une méthode exploitant l’accès à la base de données directe pour refabriquer un mot de passe valide et de retrouver le nom de l’utilisateur si aussi il est oublié.
Appuyez sur « Installer WordPress » pour passer à la dernière étape:
Appuyez sur « Se connecter » pour avoir la page du backoffice:
La page pour accéder au backoffice a un alias très utilisé http://www.master-ctn.mines-ales.fr/ctn22_jean/wp-admin/ qui est un accès similaire.
Notre site WordPress est opérationnel et en ligne.
Nous pouvons donc utiliser l’identifiant et le mot de passe de l’administrateur du site WordPress pour accéder au backoffice, où nous constatons qu’il n’est pas à jours:
Donc il faut mettre à jours immédiatement notre WordPress, sauf que…
Le serveur www.master-ctn.mines-ales.fr utilise le protocole sftp pour la sécurité des connexions et malheureusement WordPress n’utilise pas ce protocole par défaut. Donc nous devons installer un plugin pour gérer l’installation via sftp, sauf que nous ne pouvons pas utiliser WordPress pour installer cet outil pour installer.
Donc nous devons installer cette extension/plugin à la main sans utiliser WordPress. Ce type d’installation arrive parfois sur certaines extensions/plugin donc ce mode de fonctionnement est utilisé de temps en temps et pour comprendre ce qu’il se passe sous le capot de Wordpess, je trouve cela très utile de l’avoir vu dans la formation.
En partie droite, trouver le dossier wp-content/plugins/ , on peut voir qu’il y a un plugin par défaut akismet que l’on retira plus tard.
Envoyer le dossier ssh-sftp-update-support sur le serveur via clic droit « Envoyer » ou en faisant glisser le dossier vers la droite
ATTENTION: une erreur classique est que l’outil qui fait le dezippage a pour le fichier ssh-sftp-updater-support.0.8.4.zip fabriquer un dossier parent ssh-sftp-updater-support.0.8.4/ contenant ssh-sftp-update-support/ et nous souhaitons envoyer ssh-sftp-update-support/ et non pas sftp-updater-support.0.8.4/ssh-sftp-update-support/
Une fois le transfert réalisé on doit disposer de cette structure sur le serveur avec le contenu du plugin/extension dans le dossier wp-content/plugins/, chaque extension devra être dans un sous-dossier de wp-content/plugins/.
Le transfert du dossier n’est pas suffisant, il faut aussi activer l’extension/plugin dans le backoffice. Cette double étape permet de conserver des plugins/extensions sur le site sans qu’ils ne soient actifs par exemple le temps de faire des tests.
Dans le backoffice, il faut aller dans « Extensions » et « Activer » le plugin « SSH SFTP Updater Support ».
On peut effacer maintenant les 2 plugins de démonstrations « Akismet Anti-Spam » et « Hello Dolly », cette opération déclenchera l’appel au plugin d’installation que nous venons d’installer, sauf que le nom du sFTP est mal nomé en SSH2:
Nom de l’hôte (localhost en fait): 127.0.0.1 (en cas de problème essayez www.master-ctn.mines-ales.fr)
Identifiant du sFTP: ctn22_jean
mot de passe: ce mot de passe est associé à l’utilisateur de filezilla
Type de connexion : SSH2 , attention l’écran change après avoir coché SSH2
La nouvelle fenêtre qui propose d’utiliser un système de clef public/clef privé que nous n’utiliserons pas:
Appuyez sur « Continuer » et normalement ce processus devrait désinstaller le plugin sélectionné.
L’étape critique suivante est de mettre à jours le WordPress grâce à ce nouveau plugin via le lien en haut (ou le menu « Mises à jours » à gauche):
Le processus est similaire que pour retirer un plugin mais cette fois nous mettons à jours WordPress, la maintenance à jours des sites WordPress est une opération à faire de manière très régulière surtout si vous entendez des informations sur des périodes d’attaques de sites WordPress dans le monde:
Attention, comme indiqué par WordPress, la sauvegarde de votre site doit être fait avant les mises à jours pour pouvoir revenir en arrière. Nous n’avions pas beaucoup réalisé d’opérations pour devoir faire cette sauvegarde mais le premier plugin que nous allons installer gère la sauvegarde et la restauration de notre WordPress.
Pour ajouter une extensions faire « Extensions » puis « Ajouter » et chercher « Duplicator » qui doit sortir en premier le plugin « Duplicator » à installer et à activer de manière similaire à ce que l’on a vu précédemment:
Allez ensuite dans le menu « Duplicator » qui vient d’apparaitre, nous proposant de « Créer un paquet », chaque paquet sera une sauvegarde de notre site:
L’écran suivant inclus les informations critiques suivantes:
Le nom du paquet qui permet de le retrouver ensuite, la bonne pratique est de mettre la date pour le retrouver dans le liste
Le dossier sur le serveur qui contiendra le paquet de sauvegarde duplicator pour par exemple récupérer ces fichiers pour transférer le WordPress sur votre PC
Il est à noter que parfois votre WordPress est devenu trop gros pour être sauvegarder d’un seul coup par Duplicator. La solution est souvent de demander à Duplicator d’exclure le dossier wp-content/uploads/ qui contient toutes les ressources multimédia de la Médiathèque, à notre charge de réaliser la sauvegarde via Filezilla de ce dossier spécifique:
Activer les filtres de fichiers
Dossiers: le nom du dossier que l’on trouve via filezilla sur le serveur
NOTA: pour recréer ensuite le site web complet, on copiera ce dossier wp-content/uploads/ qui a été exclus dans le package Duplicator.
Nous pouvons constater que tous les informations techniques sont disponibles pour réaliser l’opération finale de création du « Paquet Duplicator ». Il peut y avoir par exemple des problèmes de fichiers trop importants ou de nom de fichier problématique (souvent avec accents):
La dernière étape permet de vérifier que la création du « Paquet Duplicator » et propose de télécharger les 2 fichiers soit le fichier d’installeur et le fichier zip d’archive. Ce dernier fichier est le plus critique car le fichier d’installation peut être retrouver dans le plugin Duplicator:
Le principe est donc de conserver l’archive et son installeur dans un lieu sécurisé pour pouvoir repartir sur cette version en cas de problème. Duplicator permet aussi de dupliquer le WordPress en local sur votre ordinateur pour disposer d’une version de test ou de pré-production sur un ordinateur avant chaque mise à jours ou ajout de contenu critique sur la version en ligne.
Télécharger le « Paquet Duplicator » et de l’installeur sur votre ordinateur dans un dossier sur votre PC en local pour préparer l’installation prochaine avec Wamp/Mamp.
En revenant sur la listes des « Paquets Duplicator », nous retrouverons la liste des sauvegardes disponibles pour WordPress. Attention à l’espace de stockage sur un serveur d’hébergement qui limiterait le stockage, heureusement le serveur www.master-ctn.mines-ales.fr dispose de suffisamment d’espace donc multiplier les sauvegarde et les manipulations sur le serveur.
NOTA: via filezilla vous pouvez consulter le dossier wp-content/backups-dup-lite/ qui contient les fichiers du « Paquet Duplicator » et de l’installeur. on trouvera aussi des fichiers techniques (log, scan, config et log) pour gérer les problèmes techniques de Duplicator:
Nous verrons ensuite la restauration de ce « Paquet Duplicator » sur un PC pour réaliser une opération de duplication donc de sauvegarde.
NOTA: Il est critique de vérifier que le « Paquet Duplicator » est bien fonctionnel en réalisation une opération de restauration en local. En effet tout le processus peut sembler fonctionner et surtout la restauration peut avoir lieu dans un contexte de stress important.
Dernier point, utilisez votre WordPress, entrainez-vous à installer/réinstaller/utiliser/casser votre WordPress car c’est un bon moyen pour acquérir des connaissances sur son fonctionnement.
Il est par exemple important de comprendre la différence entre une page et un article. Historiquement, WordPress est un outil de blog donc les articles étaient la forme classique de présentation d’informations par catégorie mais l’ajout des pages de contenu statique permet de montrer un contenu unique qui n’est pas de type regroupement par rubrique de contenu. Comme exemple, sur ce site les articles de la catégorie « CTN » sont appelé par le menu « CTN » en haut alors que la page « Pierre JEAN ? » est un contenu unique accessible aussi par le menu.
Le serveur n’est plus www.master-ctn.mines-ales.fr mais master-ctn.euromov.fr cette information est a remplacer partout!!!!!!!!
Notes de cours et rappel de procédures
Préambule
L’objectif de ce cours est de travailler sur un CMS de référence WordPress. Bien sur, tout ce qui est décris ici peut s’appliquer de manière similaire (au moins la partie installation) sur les autres CMS tel que Drupal, Joomla mais aussi des outils comme Prestashop et SugarCRM dans la partie installation sur un serveur distant ou en local.
Je vais prendre comme base l’installation de WordPress sur un serveur dédié que nous avons spécialement pour le master CTN (www.master-ctn.mines-ales.fr). Cette installation est similaire à une installation sur un serveur d’un hébergeur tel qu’OVH dont je montrerai sa console de gestion pour retrouver les réglages equivalent.
Dans un second temps, l’installation de WordPress sera réalisée sur un ordinateur portable en local pour symboliser la version de test et le site en ligne la version de production.
Je ne peux accepter la diffusion et la duplication de ce contenu sans l’aval de ma direction. Je vous prie de maintenir ces contenus à un usage interne pour le Master CTN.
NOTA: les copies d’écran ont été faites avec ctn20, il faut bien sûr remplacer par ctn22
Prérequis:
Les seuls prérequis nécessaires pour ce cours et les TPs qui suivent sont de savoir manipuler les fichiers/dossiers de son ordinateurs, de télécharger, dézipper, installer des logiciels (filezilla, wamp/mamp), utiliser un navigateur pour consulter une URL, éditer des fichiers PHP, Html, Css selon des instructions données.
Installation des logiciels gratuits et/ou opensource si vous n’avez pas un portable de l’IMT Mines Alès:
Note aux utilisateurs de Wamp sur Microsoft: il faut disposer de ce logiciel fourni par Microsoft en français ( http://www.microsoft.com/en-us/download/details.aspx?id=30679 ) et je conseille de faire un dossier C:\Developpement\ dans lequel on installe Wamp et les autres outils de développement.
Récupération des informations pour l’installation de wordpress
Pour réaliser l’installation sur le serveur du Master CTN ou pour le faire sur un serveur d’un hébergeur, il faut un certain nombre d’information techniques. Je prends comme base pour l’installation sur le serveur du Master CTN avec mes réglages à mon nom (ctn22_jean); à vous d’adapter bien sur avec vos identifiants. Les mots de passe ne sont pas indiquées mais c’est toujours le même dans tous les cas.
adresse du serveur: www.master-ctn.mines-ales.fr
nom d’utilisateur/login/uid/identifiant: ctn22_jean
mot de passe de cet utilisateur
adresse du serveur sftp: www.master-ctn.mines-ales.fr
identifiant du serveur sftp: ctn22_jean
mot de passe de cet utilisateur:
adresse pour worpdress du serveur de la base de données mysql: 127.0.0.1
adresse pour phpmyadmin du serveur de la base de données mysql: http://www.master-ctn.mines-ales.fr/phpmyadmin/
utilisateur de la base de données mysql: ctn22_jean
mot de passe de l’utilisateur de la base de donnée
nom de la base de données mysql: ctn22_jean
Note pour OVH (et autres hébergeurs) vous pouvez avoir des informations différentes sur l’identifiant du serveur ftp/sftp, le mot de passe de cet utilisateur, une adresse différente pour l’adresse du serveur de base de données, un utilisateur de base de données avec son mot de passe différent des autres utilisateur. Pour plus de simplicité, j’ai groupé autant que ce peut les nom et les mots de passes mais il y a des cas où chaque utilisateur/mot de passe est différent. Exemple OVH avec euromov.eu:
adresse du serveur: euromov.eu
nom de l’utilisateur/identifiant: pj12345-ovh
mot de passe de cet utilisateur
adresse du serveur ftp: ftp.xxx.hosting.ovh.net
identifiant du serveur ftp: euromov-mamas
mot de passe du serveur ftp
adresse pour wordpress du serveur de la base de données mysql: euromovXXX.mysqldb
utilisateur de la base de donnée mysql: euromovXXX
mot de passe de l’utilisateur de la base de donnée
nom de la base de données mysql: euromovXXX
Voici un exemple pour récupérer des informations sur le site console d’administration d’OVH, les informations critiques ont été floutées.
Console d’administration d’euromov.eu avec informations sur les réglages du serveur FTP
Console d’administration d’OVH avec les informations sur le base de données Mysql
Console OVH lien pour accéder à l’outil phpMyAdmin
L’accès à ces informations est nécessaires pour l’installation sur un serveur que cela soit celui du Master CTN ou chez un hébergeur de site. Cet opération nous permet de constater que nous allons utiliser différents logiciels qui ont chacun leur utilité:
WordPress le Content Management System
Un serveur FTP (ou sftp, s=secure) avec adresse, utilisateur et mot de passe
Un serveur de base de données Mysql, avec adresse, utilisateur , mot de passe et un nom de base de données
Un outil en ligne phpMyAdmin pour manipuler la base de Mysql au besoin avec une adresse. L’utilisateur et le mot de passe sont ceux de la base de données
Il vaut mieux comprendre quel est l’utilité de chaque logiciel car ils peuvent être remplacer par un concurrent dans votre future structure. Comme exemple: MariaDB ou Postgresql sont des alternatives à Mysql, phpMyAdmin peut être remplacé par Mysql Workbench ou Adminer, Filezilla par l’explorateur Windows ou le Finder Mac ou un outil en ligne de l’hébergeur.
Testons les informations pour l’installation de WordPress
Bien sur chacun d’entre vous a un site indépendant donc merci de corriger avec votre identifiant ctn22_jean pour moi, et vous avez cette fenêtre d’authentification qui apparait:
Cette fenêtre s’appelle une fenêtre d’authentification htaccess (ou htpasswd du nom d’un des outil). Elle permet de demande un nom d’utilisateur et un mot de passe sur une URL du site web géré par Apache Web Server.
Pourquoi j’ai installé cette fonction ? Je ne pense pas souhaitable que les élèves « regardent » le travail des autres sans leur accord en devinant le nom d’utilisateur dans l’URL ( ctn22_jean pour moi, vous le voyez souvent) et surtout, une année un site d’un élève était mieux référencé que celui de son commanditaire… Avec cette fenêtre pas d’accès sur votre site.
En cas d’échec de l’authentification vous vous retrouvez avec le message suivant:
Unauthorized
This server could not verify that you are authorized to access the document requested. Either you supplied the wrong credentials (e.g., bad password), or your browser doesn't understand how to supply the credentials required.
Apache/2.4.29 (Ubuntu) Server at www.master-ctn.mines-ales.fr Port 80
Autre élément, l’accès à l’URL d’administration des wordpress que j’installe (par exemple http://euromov.eu/wp-admin/) est aussi contrôlé par ce type de protection car j’ai plein de gens qui tente de deviner les mots de passes sur les serveurs wordpress que je gère.
Donc authentifions-nous sur notre site web http://www.master-ctn.mines-ales.fr/ctn22_jean/ avec notre identifiant qui marche pour tout. Votre navigateur va retenir ce mot de passe pour toute la période où il n’est pas fermé, bien sûr vous pouvez le lui faire retenir pour éviter cette étape, par contre si vous transmettez l’URL de votre site à une autre personne (par exemple à titre d’exemple pour chercher un stage), vous devez lui indiquer le nom d’utilisateur et le mot de passe pour y accéder.
Truc & astuce:
L’ajout du nom d’utilisateur et du mot de passe sous cette forme existe et fonctionne avec beaucoup des navigateurs:
Donc nous avons maintenant l’accès à ce site web qui est fonctionnel mais vide (notez la réponse du logiciel serveur Web : Apache/2.4.29 Ubuntu Server …)
Maintenant nous pouvons rajouter du contenu sur ce serveur Web.
NOTA: je vous rappelle que vous avez signé une charte d’utilisation des moyens informatiques de l’IMT Mines Alès, merci de ne pas utiliser ce service pour échanger des ressources qui ne seraient pas en accord avec cette charte.
Accès en Ftp/sftp pour l’échange de fichier
Maintenant que nous avons un serveur opérationnel, nous pouvons y ajouter des fichiers et créer des dossiers. Le serveur se trouve physiquement dans la salle serveur du LGI2P au bâtiment M mais nous aurions du mal à aller avec une clef USB faire les modifications sur le disque du de ce serveur.
Nous allons utiliser le logiciel Filezilla (client) pour accéder au dossier que chacun d’entre nous a sur ce serveur et qui est utilisé par le site web apache pour afficher du contenu sur le Web.
A la première connexion, vous allez avoir une fenêtre indiquant que « La clef du système hôte n’est pas connue » (le message peut différer selon les versions ). Vous pouvez accepter les empruntes sans problème et faire retenir cette opération.
Entrez les informations suivantes dans Filezilla:
Hote: sftp://www.master-ctn.mines-ales.fr/
Identifiant: ctn22_jean
Mot de passe
Appuyez sur le bouton « connexion rapide »
Détaillons les différentes zones du logiciel:
La zone de « Message technique de Filezilla » sert à afficher des messages techniques de la discussion entre Filezilla et le serveur FTP/sftp. Je l’utilise que quand il y a des erreurs indiquées en rouge. Ce n’est pas la zone la plus utilisée, vous pouvez réduire sa taille au besoin
La zone à gauche DOSSIERS DU PC et FICHIERS DU PC sont les moyens pour trouver sur votre ordinateur (PC=Personal Computer) un ou des fichiers
La zone à droite DOSSIERS DU SERVEUR et FICHIERS DU SERVEUR sont les moyens pour trouver les dossiers et les fichiers sur le serveur www.master-ctn.mines-ales.fr
La zone en bas « ZONE TRANSFERT DE FICHIER » indique comment le transfert de fichiers et de dossier se passe. Vous pouvez voir les 3 onglets en bas qui gère les situations selon le fonctionnement de ce transfert
Il y a de nombreuses fonctionnalités à Filezilla mais nous allons nous concentrer sur le l’échange des fichiers entre votre ordinateur et le serveur. Habituellement le transfert se fait dans le sens du PC vers le serveur mais parfois nous devons récupérer des sauvegardes ou des fichiers depuis le serveur vers le PC.
Attention à ne pas détruire sur le serveur une ressource utile au site web et attention de ne pas récupérer depuis le serveur une ressource qui va remplacer sur votre PC une ressource plus récente. C’est à vous de gérer les échanges. Faites des sauvegardes avant toutes manipulations complexes et travailler de manière à pouvoir toujours revenir en arrière en conservant une ressource dans une zone sécurisée pour le cas où un problème technique apparait
On voit qu’il existe 2 dossiers par défaut sur le serveur. Le dossier .gnupg est un dossier qui est normalement caché (il commence par .) mais il ne faut pas y toucher ni le manipuler. Le second dossier est très important, c’est le dossier www qui va contenir le contenu sur le serveur en ligne.
NOTA: Pourquoi on met les fichiers dans le sous dossier www/ et pas directement dans le dossier ouvert par défaut par Filezilla. En fait, il y a une raison technique précise (pour ceux passionnés: https://www.tecmint.com/restrict-ssh-user-to-directory-using-chrooted-jail/) mais au final OVH et les autres hébergeurs ont le même fonctionnement. Ce que l’on peut faire c’est d’exploiter pour créer un dossier BACKUP/ qui contiendra des sauvegardes qui ne seront pas accessible par le serveur web mais qui seront sur le serveur.
Créons un dossier BACKUP dans le dossier de base /home/ctn22/ctn22_jean/ et créons un dossier logos dans le dossier /home/ctn22/ctn22_jean/www/logos.
La création de dossier se fait sur le serveur dans la zone droite avec clic droit et « Créer un dossier »:
Nous pouvons donc comprendre que l’architecture d’un site web avec ces dossiers dans l’URL correspondent à des dossiers sur le disque dur (habituellement mais il peut y avoir des exceptions que l’on verra plus tard).
Essayez de mettre sur le serveur différentes ressources: fichiers PDF, images, petits fichiers vidéo dans différents dossiers pour consulter ces différentes ressources via votre navigateurs.
Il faut bien comprendre la relation entre les dossiers et fichiers sur le serveur et les URLs correspondantes.
Modification de droits sur le serveur
Une opération exceptionnelle qui doit être la modification des droits sur les fichiers et les dossiers du serveur.
Ce qu’il faut comprendre c’est que l’utilisateur qui exécute le serveur apache2 s’appelle www-data hors cet utilisateur (non-humain) n’a pas les mêmes droits que votre utilisateur humain (par exemple pour moi ctn22_jean). Donc il faut parfois modifier les droits sur les dossiers et les fichiers pour le dossier www (et ses sous-dossiers).
Sur le dossier www, faire clic droit « droits d’accès au fichier » et les permissions de groupes doivent être toutes cochées (et la valeur numérique à 775 en fait)
Comme cela, le serveur apache (qui fera un exécutera le logiciel WordPress) aura le droit de créer des fichiers sur le serveur dans votre dossier pour finaliser l’installation. Par exemple à l’installation, le fichier wp-config.php sera construit automatiquement par l’installateur de WordPress et contiendra les informations techniques de votre WordPress.
NOTE TECHNIQUE: en fait l’utilisateur ctn22_jean appartient au même groupe que l’utilisateur www-data, du coup le droit « Écriture » par le groupe permet à l’utilisateur www-data de créer des fichiers sur le serveur de la même façon que l’utilisateur ctn22_jean.
