Front-end

⭐

Cours de Julie Chaumard 25/11/2024

Faire le cahier des fonctionnalités de l’application

Faire une maquette des pages sur Figma

Nom de domaine

Rechercher un nom de domaine pour notre futur site web sur OVH

W3C

organisme international

validateur de code

Faire page web du quiz

Voici la page web que nous allons faire ⇒ leur montrer la page web.
- par ici

Quelles technologies et langage j’ai utilisé pour le faire ?
- vous pouvez regarder le code source

💡

CSS : charte graphique

Construction du site

On découpe cet exemple de site en plusieurs phases pour apprendre progressivement les bases de HTML, CSS et JavaScript.

Phase 1 : Structure de base en HTML

Objectifs : Apprendre à structurer une page web.

Créer une page HTML simple avec les balises de base : <!DOCTYPE html>, <html>, <head>, <title>, <body>.

Ajouter un titre de page dans la balise <title>.

Structurer un header, un main et un footer avec du contenu simple (par exemple, des balises <h1>, <p>, etc.).

<!DOCTYPE html>
<html lang="fr-FR">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Quiz Ludique</title>
		
		
		<!-- Description -->
		<meta name="description" content='<%= locals?.SEO_Description %>'>
		
		<!-- mots-clés -->
		<meta name="keywords" content='<%= locals?.SEO_keywords %>'>
		
		<!-- Auteur / Créateur / Publication -->
		<link rel="author" href="mailto:julie@parisweb.art" title="Parisweb.art" />
		<meta name="creator" content="Parisweb.art">
		<meta name="publisher" content="https://juliechaumard.paris/skills/">
		<meta name="department" content="sports" />
		<meta name="audience" content="all" />
		
		<!-- Logiciel utilisé pour créer la page -->
		<meta name="generator" content="Visual Studio code">
		
		<!-- Géolocalisation -->
		<meta name="DC.title" content="JO 2024">
		<meta name="geo.region" content="FR-75">
		<meta name="geo.placename" content="Paris">
		<meta name="geo.position" content="48.866669;2.33333">
		<meta name="ICBM" content="48.866669;2.33333">
	</head>
	
	<body>

	  <header>
	    <h1>Bienvenue au Quiz Explore Ton Talent !</h1>
	  </header>
	  
	  <main>
	    <p>Contenu principal du quiz</p>
	  </main>
	  
	  <footer>
	    <div class="message">© 2025 Quiz Ludique - Réalisé par la classe Explore ton talent de l'école Konexio !</div>
	  </footer>
	  
	</body>

</html>

Phase 2 : Mise en page avec du texte et des boutons

Objectifs : Utiliser des balises HTML pour organiser le contenu.

Ajouter un article avec des questions et des boutons de réponse comme dans le quiz.

Utiliser des balises de texte comme <h1>, <p>, <button>.

<main>

  <article>
  
    <h1>Quiz de Culture Générale</h1>
    
    <div>
      <p>Question 1 : Quelle est la capitale de la France ?</p>
      <button>Paris</button>
      <button>Londres</button>
    </div>
    
  </article>
  
</main>

Phase 3 : Styliser avec CSS

Objectifs : Appliquer des styles de base à la page.

Ajouter une feuille de styles externe (styles.css).

Ajouter le lien vers la feuille dans le head du HTML

<!-- CSS -->
<link rel="stylesheet" href="styles.css">

Créer les styles

on stylise la balise avec le nom de la balise

html {
  background-color: #FDB32D;
}
body {
  display: flex;
  flex-direction: column;
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  margin: 0;
  padding: 0;
}
  
header {
  background-color: #FDB32D;
  color: black;
  text-align: center;
  padding: 20px;
  
}
footer {
  background-color: #FDB32D;
  color: white;
  text-align: center;
  padding: 10px;
}

on stylise les balises qui ont besoin d’une classe

ajout du nom de la classe

<div class="titre">Bienvenue au Quiz Explore Ton Talent !</div>

style du titre
```
header .titre {
  font-size: 54px;
}
```

style pour les écrans plus petit en diminuant la taille

@media (max-width: 768px) {
  header .titre {
    font-size: 34px;
  }
}

Font

trouver la police sur Google Font

L’ajouter au head HTML

<!-- Google font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- Atma -->
<link href="https://fonts.googleapis.com/css2?family=Atma:wght@300;400;500;600;700&display=swap" rel="stylesheet">

Favicon

<!-- Favicon -->
<!-- Il faut que le chemin soit complet ou URL Complete si en ligne -->
<link rel="shortcut icon apple-touch-icon" href="/Users/juliechaumard/Downloads/A FAIRE/konexio/front_end/image/favicon.ico">
<link rel="icon" type="image/x-icon" href="/Users/juliechaumard/Downloads/A FAIRE/konexio/front_end/image/favicon.ico">

Phase 4 : Introduction à JavaScript (Interactions simples)

Objectifs : Ajouter des interactions simples avec JavaScript.

Créer un fichier JavaScript externe (script.js).

Ajouter le lien en bas vers le fichier js juste avant la balise </body> du fichier html
```
<script src="script.js"></script>
```

Introduire la fonction checkAnswer() pour gérer les réponses du quiz.

Afficher un message de validation ou d’erreur lorsqu’un bouton est cliqué.

Modifier dynamiquement la couleur du texte avec style.color.

function checkAnswer(questionId, answer) {
  const result = document.getElementById(questionId + '-result');
  
  if (answer === 'correct') {
    result.textContent = '✅ Bonne réponse !';
    result.style.color = 'green';
  } else {
    result.textContent = '❌ Mauvaise réponse !';
    result.style.color = 'red';
  }
  result.style.display = 'block';
}

Avertissement en cas de JS désactivé sur le navigateur

<!-- To warn any users that have JavaScript disabled that your page relies on JavaScript -->
<noscript>
<p><strong>Cette page requiert que JavaScript soit activé pour fonctionner correctement. / This web page requires JavaScript to be enabled.</strong></p>
<p>JavaScript is an object-oriented computer programming language
commonly used to create interactive effects within web browsers.</p>
<p><a href="https://goo.gl/koeeaJ">How to enable JavaScript?</a></p>
</noscript>

Phase 5 : Mise à jour dynamique du score

Objectifs : Manipuler des éléments et mettre à jour des valeurs dynamiques.

Implémenter la fonction updateScore() pour compter les bonnes réponses.

Afficher le score dans l’élément <div id="score">.

Tester le fonctionnement global du quiz.

Phase 6 : Gestion complète et reset du quiz

Objectifs : Apprendre à gérer un état global et à réinitialiser l’application.

Implémenter la fonction resetQuiz() pour remettre le quiz à zéro.

Tester la réinitialisation de l’état de chaque question (dataset, affichage, score).

Tester le comportement et la stabilité de l’application dans différents cas.

Phase 7 : Accessibilité et bonnes pratiques

Objectifs : Améliorer l’expérience utilisateur et l’accessibilité.

Ajouter des attributs d’accessibilité (par exemple, aria-label sur les boutons).

Introduire le responsive design avec les règles CSS déjà présentes (@media).

Tester le rendu sur différents appareils et résolutions.

Création d’un site internet : les dépendances

MOTEUR DE TEMPLATE

PHP

🍍

La dernière version stable de PHP est la 8.4.1 du 21 novembre 2024

INSTALLATION

💡

Ce tuto donne la procédure d’installation sur un ordinateur Windwos

💡

Inspiré par ChatGPT : par ici

Étapes pour installer phpMyAdmin via XAMPP

Télécharger XAMPP :
- Allez sur le site officiel de XAMPP : par ici.
- Téléchargez la version appropriée pour votre système (Windows 32 bits ou 64 bits).
- Pendant l'installation, assurez-vous de sélectionner Apache, MySQL et phpMyAdmin.

Installer XAMPP
- Exécutez le fichier d'installation téléchargé.
- Lors de l'installation :
  - Choisissez les composants nécessaires (par défaut : Apache, MySQL, PHP, et phpMyAdmin suffisent pour un environnement basique).
  - Sélectionnez un dossier d'installation (par défaut, C:\xampp est recommandé).
- Terminez l’installation en suivant les instructions.

Lancer XAMPP :
- Ouvrez le Panneau de configuration XAMPP (xampp-control.exe) situé dans le dossier d'installation
- Démarrez les modules nécessaires en cliquant sur "Start" à côté de chaque module :
  - Apache (serveur web).
  - MySQL (base de données).

Accéder à phpMyAdmin :
- Une fois Apache et MySQL en cours d'exécution, ouvrez un navigateur et entrez l'URL suivante :
```
http://localhost/
http://localhost/phpmyadmin
```
- phpMyAdmin devrait s'ouvrir et afficher une interface pour gérer vos bases de données MySQL.

Configuration de XAMPP

VOIR LA VERSION
Dans le dossier c:\xampp ouvrir le fichier readme_en.txt. Première ligne : 8.2.12

MOT DE PASSE ROOT PHPMYADMIN
L'utilisateur par défaut est root et le mot de passe est vide (modifiable dans le fichier de configuration)
Si vous souhaitez définir un mot de passe pour l'utilisateur root (ou pour d'autres utilisateurs) :
1. Dans phpMyAdmin (http://localhost/phpmyadmin), allez dans l'onglet Utilisateurs et modifiez le mot de passe de l'utilisateur root.
1. Une fois cela fait, mettez à jour le fichier de configuration de phpMyAdmin pour que la connexion fonctionne correctement :
  - Ouvrez le fichier config.inc.php de phpMyAdmin (généralement situé dans le dossier C:\xampp\phpMyAdmin).
  - Recherchez la ligne avec $cfg['Servers'][$i]['password'] et ajoutez le mot de passe que vous avez défini.

PORTS
- APACHE
  Dans le fichier : C:\xampp\apache\conf\httpd.conf vérifier et/ou modifier le port en cherchant Listen :
```
Listen 80
```
  Si modification en 8080 par exemple il faudra accédez ensuite au serveur avec http://localhost:8080 en précisant le numéro du port
- MySQL
  Configuration dans : C:\xampp\mysql\bin\my.ini. Vous pouvez changer le port de MySQL qui est à 3306 par défaut.

TAILLE DES FICHIERS TÉLÉCHARGÉ
Dans le fichier : C:\xampp\php\php.ini, modifiez les paramètres comme la taille maximale des fichiers téléversés :
```
upload_max_filesize = 50M
```

ACTIVER LA RÉÉCRITURE D’URL SUR APACHE
Assurez-vous que le module mod_rewrite est activé sur Apache. Voici comment vérifier cela sous MAMP :
1. Ouvrez le fichier httpd.conf :
  - Dans XAMPP, ce fichier se trouve généralement dans C:\xampp\apache\conf\httpd.conf.
  - ou bien depuis le panneau de configuration XAMPP dans le bouton “Config” en face du service Apache
1. Recherchez et dé commentez mod_rewrite :
  - Recherchez la ligne suivante dans le fichier et upprimez le # au début de la ligne pour activer le module ::
```
#LoadModule rewrite_module modules/mod_rewrite.so
```
1. Activer les fichiers .htaccess :
  - Dans le même fichier, recherchez la directive AllowOverride et assurez-vous qu’elle est définie sur All pour votre répertoire racine. Par exemple :
```
<Directory "c:\xampp\htdocs\youngbank">
    AllowOverride All
    Require all granted
</Directory>
```
1. Redémarrez Apache :
  - Retournez dans XAMPP et redémarrez les serveurs pour appliquer les modifications.

INSTALLER VOTRE PROJET

Placez vos fichiers dans le dossier C:\xampp\htdocs\monprojet
- Si vous avez un projet nommé youngbank, placez-le dans C:\xampp\htdocs\youngbank
- Accédez au projet via http://localhost/youngbank.

Voici l’arborescence du projet YoungBank

/youngbank
    /assets
        /css
            |-- footer.css
            |-- main.css
        /images
            /icones
    /functions
        |-- send_message.php
    /page_templates 
        |-- accueil.php
        |-- mentions_legales.php
        |-- contact.php
    /template_parts
        |-- head.php
        |-- footer.php

Si vous voulez une URL http://localhost/youngbank/accueil au lieu de http://localhost/youngbank/page_templates/accueil.php), ajoutez un fichier .htaccess dans le dossier youngbank avec le contenu suivant :

Règle de réécriture dynamique qui permet de créer une logique générique qui redirige automatiquement toutes les URLs propres vers leurs fichiers correspondants

Supposons que chaque page de votre site correspond à un fichier PHP dans le dossier /page_templates. Vous voulez que :
- http://localhost/youngbank/accueil charge page_templates/accueil.php
- http://localhost/youngbank/contact charge page_templates/contact.php

Voici le fichier htaccess avec la règle dynamique

# Activer la réécriture d'URL
RewriteEngine On

# Exclure le fichier send_message.php de la réécriture
RewriteCond %{REQUEST_URI} !^/functions/send_message\.php$

# Ne pas réécrire les requêtes pour les fichiers dans /assets
RewriteCond %{REQUEST_URI} !^/assets/

# Exclure les fichiers statiques (CSS, JS, images)
RewriteCond %{REQUEST_URI} !\.(css|js|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot|otf)$ [NC]


# Vérifie si le fichier ou le répertoire existe, sinon applique la règle de réécriture
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d

# réécriture dynamique
# Capture toute URL sous la forme http://localhost/youngbank/something et redirige vers page_templates/something.php
RewriteRule ^(.+)$ page_templates/$1.php [L]

# Gérer les sous-dossiers (comme /budget/saisie)
RewriteRule ^budget/saisie/(.+)$ page_templates/budget/saisie/$1.php [L]

# Rediriger vers une page d'erreur personnalisée si le fichier n'existe pas
ErrorDocument 404 /page_templates/404.php

Il faut maintenant créez un fichier 404.php dans /page_templates pour afficher un message d’erreur.

PROJET DE SITE WEB

Récupérer le projet du site sur le Drive

le récupérer et mettre les fichiers dans htdocs de XAMPP

HTML / CSS

Corriger le code HTML / CSS du projet récupéré sur le Drive.
Ce code a été généré par ChatGPT

Modifier le CSS dans Chrome pour reporter les modifications dans les fichiers du projet pour les sauvegarder.

Mettre en ligne le projet modifié via le logiciel de FTP (je le fais avec vous).
Je vous fournis un domaine et un hébergement pour le temps de la formation.

💚

Agence digitale Parisweb.art
Tout savoir sur Julie, notre directrice de projets digitaux : LinkedIn